{"_id":"@material/radio","_rev":"1829-40064b79fb1c2315756cd89b084e892c","name":"@material/radio","description":"The Material Components for the web radio component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/radio","version":"0.1.0","license":"Apache-2.0","_id":"@material/radio@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0c07ec4017c1e8d8ccf4ddda83bd18e8de0ee77","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.0.tgz","integrity":"sha512-4/hVor8QED5We+wuLOxXyM5Z1f2VF3R+DbMoRWPBzMc4CwY2XmBmj4r/OKTWsZA+BF/aiKHIATnoDI/Qdlbhtg==","signatures":[{"sig":"MEUCIDvABJAc4B3bVMA/2adMk4Ubmbn36ELvIP1ZnaKtkuS/AiEAynXsDUFsof+nwT5es6hD426PA7X4i12u7PordEH9hUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"b0c07ec4017c1e8d8ccf4ddda83bd18e8de0ee77","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/ripple":"^0.1.0","@material/animation":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.0.tgz_1481824428195_0.2422437807545066","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/radio","version":"0.1.1","license":"Apache-2.0","_id":"@material/radio@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c40949eb9398957dbea151dec7eb02e3ffe2d54d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.1.tgz","integrity":"sha512-RowUjTvCCQ07Xi4uc/lUtKCfIyhGaNxbakq9EUe9rByvhc46geodcEhro6X63Jkyo9k/k4Pvzio5axHqo2XHAA==","signatures":[{"sig":"MEQCICssZ1LBVeACH8IG2q0H4nai1mz3axMp5hs6LBTQyNRXAiA3lyfZX42WsDrdj35jkIhRkfuUyEjh2epnJJ4Z7ytwRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c40949eb9398957dbea151dec7eb02e3ffe2d54d","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/ripple":"^0.1.1","@material/animation":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.1.tgz_1483977438508_0.05847354303114116","host":"packages-18-east.internal.npmjs.com"}},"0.1.2":{"name":"@material/radio","version":"0.1.2","license":"Apache-2.0","_id":"@material/radio@0.1.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad2e15255473f29333bfc19a1682b193a5758043","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.2.tgz","integrity":"sha512-xQfaiI13dq+yG0Bl2kMBnEi60RxD4WkyAQN1tFnbIgv5nZ+GTzigXpgA4MPbNzfvpvLCYAkY7wabwYrdFMq49g==","signatures":[{"sig":"MEQCIESzjUua9tkF84OpC2bNo68tDnA1bSHTHzo0BaXZhanDAiBp5ANO+tgcxxcMqUMVnk2eFyQ0aJ2qG96F670qHp52BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ad2e15255473f29333bfc19a1682b193a5758043","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/ripple":"^0.1.2","@material/animation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.2.tgz_1485190180389_0.21084729628637433","host":"packages-18-east.internal.npmjs.com"}},"0.1.3":{"name":"@material/radio","version":"0.1.3","license":"Apache-2.0","_id":"@material/radio@0.1.3","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0336f94d62f66fa94c9673ba5d449acfd3e44d08","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.3.tgz","integrity":"sha512-EAgHGJMj69ifXhAdTpdMTJoZl4pFl5JJaglx3Bq6A+aZCldEfMXXuEUsxVhynX431Qjf/cr8tYjaGIx51Nll8g==","signatures":[{"sig":"MEUCIQD92QU5TdmfLK+CN3UkYBy3dd4LwGmXB2bThf/MsgTeiQIgc46euqzkUX3p3+aMGbNFLeAFSdEYwEjjIMnKSOtzYvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"0336f94d62f66fa94c9673ba5d449acfd3e44d08","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/ripple":"^0.2.0","@material/animation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.3.tgz_1486407886069_0.629599551204592","host":"packages-12-west.internal.npmjs.com"}},"0.1.4":{"name":"@material/radio","version":"0.1.4","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.1.4","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27970d0a5b0e79c416f8f7e841d16768185ce3ff","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.4.tgz","integrity":"sha512-NmJxprvEBxrg3iDYWipzpmFd4teIpyfZrxqjn8lZCKliQ7aiAUPJs6bLToA/UrXy6AeGQHvHdCfC3WcCCxJZsg==","signatures":[{"sig":"MEYCIQDK4VmipHD7KrPg7u300KjqB+qT9Np0QKV5AZyjKXSxEQIhAJVf8mhGF433juKFPONblhje9tvV38fLsQJwHnsNT5VA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"27970d0a5b0e79c416f8f7e841d16768185ce3ff","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/ripple":"^0.3.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.4.tgz_1487698058428_0.7991295531392097","host":"packages-18-east.internal.npmjs.com"}},"0.1.5":{"name":"@material/radio","version":"0.1.5","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.1.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"362f16ca5587993b3ed2bb09f118b595302eeff5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.5.tgz","integrity":"sha512-NlKRcf7x4Wt8dLB9Dejnxfq/W9nWiS7MJy/hMUPrjgAWtnj6xJu3D4D+pY62THNEnT35ctzr7tFBMVU6+WM/ng==","signatures":[{"sig":"MEUCIGi5O4MvAhCaAzOShGwftzPXgbnM/g+ucaE+wRhsC1fMAiEA6GQoMQqe7EGh7PnI/vVtE3ddBwS4oFAj9/IB/GdzHec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"362f16ca5587993b3ed2bb09f118b595302eeff5","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/ripple":"^0.4.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.5.tgz_1488819735249_0.36332688806578517","host":"packages-12-west.internal.npmjs.com"}},"0.1.6":{"name":"@material/radio","version":"0.1.6","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.1.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22402d7a27c8dad31d0c6d26a5970724c717bcee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.1.6.tgz","integrity":"sha512-fcPJ6YiOYqj3ht9bBZSND1t7Ay557QKdBim0MUDm9XlgMJRGNWtv/A0bClu6OO+kYKP9hmA+v2TRj4LJN4kbAA==","signatures":[{"sig":"MEUCIQDsUEqsEY68//3K3xa0poxxs3JCAE0lHbsjIDw6yLB39gIgfLLoWQB9FE/bE1Lh56gCVbMWorHkm9r84qEBV8JhL8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"22402d7a27c8dad31d0c6d26a5970724c717bcee","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/ripple":"^0.5.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.1.6.tgz_1491233285969_0.7911415286362171","host":"packages-12-west.internal.npmjs.com"}},"0.2.0":{"name":"@material/radio","version":"0.2.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"073fabe55b1646b33e2596866de9e3cbf960b033","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.0.tgz","integrity":"sha512-NtfC5tFPRlwyhyg7+Awx5X49fHwEyYrR9OM5sry7mNzOC5UTbVVn73lc2Rz0TbHeFCfq+SZrPjD+Qw6J/eSMEw==","signatures":[{"sig":"MEUCIQCPWWNuMfrkMTN2cG8YR6reQ6lxMi4hW/BjHgdAg78DewIgEa5iK20UNYdoAnL2zdMzsIi3YzILM25CFyaqHMO2qko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"073fabe55b1646b33e2596866de9e3cbf960b033","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/ripple":"^0.5.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.0.tgz_1492443790807_0.8108673668466508","host":"packages-12-west.internal.npmjs.com"}},"0.2.1":{"name":"@material/radio","version":"0.2.1","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd74864d6608f0c4fc4a3b313826317e02b6dc3d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.1.tgz","integrity":"sha512-l301BWU7xQuFWKKdQ5hQW7lxBG+uPb7LdAiXUuQbnqYzGzvhbRMfBJfeUEGRbB24gGVhr13zj8yhf9ZMFHnHGQ==","signatures":[{"sig":"MEYCIQCpEnEj9xVOGqU1kQndo0yYKLsQxN8RlS0fj5uJ82HJFAIhAIRZ5F90dIBEEea1tOLM/i873O1h9TzjD1x3iNP9xtC8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"bd74864d6608f0c4fc4a3b313826317e02b6dc3d","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/ripple":"^0.5.1","@material/animation":"^0.1.5"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.1.tgz_1492527084199_0.20038103591650724","host":"packages-18-east.internal.npmjs.com"}},"0.2.2":{"name":"@material/radio","version":"0.2.2","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.2","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46c5b76785bcdc8b575321f0f5f58c65cefba896","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.2.tgz","integrity":"sha512-gD76XyVZd2RP+aUfqhuFOLF0j8J9JUoNIsQ0b0pDF+H9/a1RmBsOhwu0VtP/cud89MY9v5Wh1MVqVgEgkw3B+g==","signatures":[{"sig":"MEUCIQDizheFbVckQi2d990lp1pb60vUKI2riBTnsWsHc/fIxgIgThTreYEQkG709VjSv47sPVQRCdahH545DVt1HQV2E8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"46c5b76785bcdc8b575321f0f5f58c65cefba896","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/ripple":"^0.6.0","@material/animation":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.2.tgz_1493653392962_0.08174989675171673","host":"packages-18-east.internal.npmjs.com"}},"0.2.3":{"name":"@material/radio","version":"0.2.3","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.3","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f144f1d6e74b1422631a219d508d02cd8844457","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.3.tgz","integrity":"sha512-NQcZ+j3dGut0aNTdcmv/R1jTdpdE607TesXY08CTprp0GFdJZrsljX843EgRVHZgK4PH9Ohcv8mOrp/65hWglw==","signatures":[{"sig":"MEYCIQCcoLwBQeeSbHEbCl6OAbDqiIGlMejvA9mUzX9pkCZb8gIhAKX7F9AyEYFchgiJAIrwDiA61xdkN91xfF3RlslFMgeY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"1f144f1d6e74b1422631a219d508d02cd8844457","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.3.tgz_1494865568064_0.00896596279926598","host":"packages-12-west.internal.npmjs.com"}},"0.2.4":{"name":"@material/radio","version":"0.2.4","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.4","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a3e523dd14f30169d6e445e4f470719ba962263","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.4.tgz","integrity":"sha512-29T70TZ2/d0XRAA7hRVFcDsyXrnPAHtSVaFV4LUD1FMVeSO54QLljhW3A6mvBAbLuGfQMJx76PdDV1xSgersGg==","signatures":[{"sig":"MEUCIQCLlQSOFALn9yetY7oB6jqmtLjunGIR0TiSeVeV+2svEAIgeVBG+TkYIcPOmOi4qv019ATw2YL9BcDcnTtwB93OhdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"0a3e523dd14f30169d6e445e4f470719ba962263","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.4.tgz_1495031304573_0.16078001889400184","host":"packages-12-west.internal.npmjs.com"}},"0.2.5":{"name":"@material/radio","version":"0.2.5","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.5","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc9fe47f222e519ce6916c8fe19c7d62ea9dcbea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.5.tgz","integrity":"sha512-btaZRfcykh1MrFJMFxKpcUxWIFx+YZRC8hM2gux+k1gceDrf94/TozgOIVS1p5NFmZj82XiKsyRfdq4fYykR6g==","signatures":[{"sig":"MEUCIQDBNk1kOll26UAc/Sl6GizLSKzFEthw1I7AKUYllHP6mwIgXKrRaGdtbd8UWu2SdLlSCNDNxDwt089LPt9ReCH3/0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"fc9fe47f222e519ce6916c8fe19c7d62ea9dcbea","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/ripple":"^0.6.2","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.5.tgz_1496171084188_0.5273096957243979","host":"s3://npm-registry-packages"}},"0.2.6":{"name":"@material/radio","version":"0.2.6","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.6","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a3c2e5906e9e0d01af088e11233d6a2df32eacf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.6.tgz","integrity":"sha512-Z6ZHMNxS3YYSsPmNepuk9J3kA3nAgxsy2+vqiPpiVJ58akO5etnZSbercmYUt4iRZo18yWt4y9QrEV7UQQPqSw==","signatures":[{"sig":"MEUCIGRSZbUttawto6aHhaT8am1uIAuTZYIZBflWi/yeJPZGAiEA/uI0MYE4+FnLcbizKLVOKSzXtIidtMPmV7rffmUOX20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8a3c2e5906e9e0d01af088e11233d6a2df32eacf","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/ripple":"^0.7.0","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.6.tgz_1498493460335_0.3139042449183762","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"@material/radio","version":"0.2.7","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.7","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0dd606cbaf3cb5c3833187562499ddc5b368f28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.7.tgz","integrity":"sha512-slKoo5ElvjGc4QknKZQQxJomfPidtpAabkqFhM1Uns+SJVeB6BUZsNNijfcZLigxgsv19d5GrIj0yD6XbxVTJg==","signatures":[{"sig":"MEUCIBpVUZ0fQk9Cl+yIBt18mwBL71jyiH8kdK7mnT+VFFS8AiEAqYW6Vrnjk72v3leYzczvmzNwfSWrursK3l1f1tudohs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f0dd606cbaf3cb5c3833187562499ddc5b368f28","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/ripple":"^0.8.0","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.7.tgz_1499702336212_0.060305589344352484","host":"s3://npm-registry-packages"}},"0.2.8":{"name":"@material/radio","version":"0.2.8","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.8","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43ac9d4e6e22674b533c2d13366e1e9849e80164","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.8.tgz","integrity":"sha512-H+Ts+Nf3TwmwATRkdKjOPo1J19JV8JG/5fneoz/G/DXMqeyvmPK/dMRTIGeDGTXrMVSvlc9wWaRjSmZa9crSig==","signatures":[{"sig":"MEUCIDijXWI0ISeGUFXHHxGrCHASE+eOsh5on4PIgLsYQylpAiEA4HNyBZUrzyYZaVr3RncDxuuIo8aPSM5VIwD5erEDFcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"43ac9d4e6e22674b533c2d13366e1e9849e80164","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/ripple":"^0.8.1","@material/animation":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.8.tgz_1500911363216_0.7960046033840626","host":"s3://npm-registry-packages"}},"0.2.9":{"name":"@material/radio","version":"0.2.9","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.9","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336c3e2d9214e42bd8b538715d9517cd955c3b17","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.9.tgz","integrity":"sha512-+f4t3oqKnyQ/odg/dGyWZVwkBcAlagsotXzDLk0d0zfCBvSIKu10l+gFu+jPM7JeL6XeIzBxctDSvzphmDHKgg==","signatures":[{"sig":"MEUCIQDTTdM2gfkheOw7zsykhH1Ih/XKbuT/RY4hWKGZ/wpRVAIgZR1Md6Uim7PECW5x7jh8IVDOWs4Mw7/8t42mH2ILLHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"336c3e2d9214e42bd8b538715d9517cd955c3b17","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/ripple":"^0.8.2","@material/animation":"^0.3.1"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.9.tgz_1502138911033_0.4426157772541046","host":"s3://npm-registry-packages"}},"0.2.10":{"name":"@material/radio","version":"0.2.10","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.10","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f71849c6aa93b7ad770cb21941a63c583b793f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.10.tgz","integrity":"sha512-ak/lUCHqJVgU5Zsst+ofx9IvmnMkwVMAF6AvvPHVDAlewVl5KCdmVlg9eujeRjshy47BNSQuZPaL2JVMWB3vSA==","signatures":[{"sig":"MEUCIQCWx6IVhzWLzGFFzhPdCZwOllA4RluKxmotLqWeCmbMCwIgJ6aG8Ft2+oLOlVKsyNT8OklJoYg8SG6BiLXNN5z99CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/ripple":"^0.8.3","@material/animation":"^0.3.1","@material/selection-control":"^0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.10.tgz_1503336476877_0.8903348760213703","host":"s3://npm-registry-packages"}},"0.2.11":{"name":"@material/radio","version":"0.2.11","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.11","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d47a89448c703f9f7e8a8a5bc72bbb816c5f927","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.11.tgz","integrity":"sha512-juQ9dX05ocA8xdRtdsFfQWYrsuEEwtSvI/uLGsjdk/vUPQCUefh4GbAHCnqJOrxJ0FcV+Q/pIStiHi9GXb8BTQ==","signatures":[{"sig":"MEQCICWt/whPjXpZpNRPGp/9LEnLFxLzgbNlDboK76Bu6EfXAiBGzRM5Bgpn/St8b01hDobCeVrBN+NcRInMnwkAe1MgcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/ripple":"^0.8.4","@material/animation":"^0.3.1","@material/selection-control":"^0.0.2"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.11.tgz_1503586011018_0.9426554173696786","host":"s3://npm-registry-packages"}},"0.2.12":{"name":"@material/radio","version":"0.2.12","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.12","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c06568be0808a14ac4b3a5f380efb195577d8e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.12.tgz","integrity":"sha512-EV6q3MZy8JDqE6LyfxKujuqjA3zfvWVOCWJrDdv12AcGt53/QDEOujgzs6cZoo0JMNYG/dqyTscxKb/7aKaNFg==","signatures":[{"sig":"MEUCICgtHcCHXE/FqENiUDr2drJkwbed6DYBvNwgIX1n2VgBAiEAyoDfnrTbPlrWGkwV3y1YkIW6ZQHlYn8zp4SyL7NNK8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/ripple":"^0.8.5","@material/animation":"^0.3.1","@material/selection-control":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.12.tgz_1503681659015_0.8355440434534103","host":"s3://npm-registry-packages"}},"0.2.13":{"name":"@material/radio","version":"0.2.13","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.13","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"935798330b8e38108c19ea8bf73f870c223e146f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.13.tgz","integrity":"sha512-FXbKanE3LEmKA1R6p3r7bw7qJ/DkWzoj2jCWc1SO38O/vNqX08Kfyifo4AhxD+MIwyt7BQ3lt66WIa2fwIhkjA==","signatures":[{"sig":"MEYCIQDuu7V5jKqbacJmty/SR1FFTAppt/0DUwEd1BcpGuVKrwIhAIvo3lvZavZXvpfjR27MD46y5kRVSJyYOM2DBCQu2g3k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"935798330b8e38108c19ea8bf73f870c223e146f","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/ripple":"^0.8.6","@material/animation":"^0.3.1","@material/selection-control":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.13.tgz_1504642574334_0.5077293701469898","host":"s3://npm-registry-packages"}},"0.2.14":{"name":"@material/radio","version":"0.2.14","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.14","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6de54d676062bf90ed3ba8be9b88ec0d0284617","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.14.tgz","integrity":"sha512-ZlA6HS2rWJ0jC3QU+HySr38yUBR/2Sz5LPUaxTQ3CmAzU5JLx84JwJ77wGglnh3U4MUFzqv8CYK4dTeoEsN8gA==","signatures":[{"sig":"MEQCICt6qaJuvJWws9QUQLMS3Z2+SE5o0POlo0wTrYU0X9zeAiBODaBMckHxO0EkITRoc5g1olXCHjOXWYso3USezT/h2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/ripple":"^0.8.7","@material/animation":"^0.4.0","@material/selection-control":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.14.tgz_1505759749307_0.6483518169261515","host":"s3://npm-registry-packages"}},"0.2.15":{"name":"@material/radio","version":"0.2.15","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.2.15","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3598f79cbe1c413c2b54ac32b0db12955f93636b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.2.15.tgz","integrity":"sha512-NuXf8wzwgxHnq/U01kQsIrcABn3zs1BJdlQc3xwPMeu/jr6l7FLfTs5fS+rtLU/UxjoE4fyMqJ8BDriChO5GPQ==","signatures":[{"sig":"MEUCIQDW6DaqCmlzd0Njs9jWPr8DYkZM14u4GJmGwACvXNYggAIgMwAqlTXL38LTGLc5i2sUj3c3RoakgybrtzRV0Eu8SSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"3598f79cbe1c413c2b54ac32b0db12955f93636b","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/ripple":"^0.8.8","@material/animation":"^0.4.1","@material/selection-control":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.2.15.tgz_1506978712435_0.807805466465652","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/radio","version":"0.23.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.23.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67beb1d0c00f23b087d549a6dbac79a60270c6a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.23.0.tgz","integrity":"sha512-VThH5El8c/KGO/+bOXbr48ktn4gGZ9kNJuFSqRU8tWdAOYbS1HBqrZvPYPW7BXQ7WR2j1fUbRFNDHODZMyJL4Q==","signatures":[{"sig":"MEUCIQCaCk4cz565GHzpzgr4GWlgihhXeRKBFa1YBd5DiuI51QIgMS3HkO/GPI3tBeo8+n89/oFsEjYnzoWXPzHZrp4ue8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/ripple":"^0.23.0","@material/animation":"^0.4.1","@material/selection-control":"^0.23.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.23.0.tgz_1508187743571_0.8724240169394761","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/radio","version":"0.24.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c32fe00b031a9ddbbb03b0bc67e5902868f8e71","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.24.0.tgz","integrity":"sha512-ce7g1bIH61Q4q5APQc9rg8qynekEYWmkbenCgjo3IKwtTvIcNNIolkiMPP6uH7BfKjMHxa8BGg9U1ojH/48Ydg==","signatures":[{"sig":"MEUCIQCA4Zfw/75l+aHRynw2R43RnKDFIpLzQ1BKQRSUhq1hrgIgQoB1R9MCkEp0GLS4Rjgom2HAKLpkAzgxghhv00B0ZHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/ripple":"^0.24.0","@material/animation":"^0.4.1","@material/selection-control":"^0.24.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.24.0.tgz_1509390691734_0.16943781008012593","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/radio","version":"0.25.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59a0221a90030023d737d38e9184c860c1b90e28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.25.0.tgz","integrity":"sha512-VJHOHiaLjtIP+iYxMKMaRK9U937rClD9VXVG9LEseLQehwUGsrSgrXZrAuxDbJUUI74rj306fQyjUTIc3lsFtA==","signatures":[{"sig":"MEUCIFcsApEBzBYWYSfw/BT3p6OsPoF7Iga/HpbJPZh89WZwAiEA+A9UhzVMEaK0ST6K3ZqeY082DxR/Lcq4isF683x97c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/ripple":"^0.25.0","@material/animation":"^0.25.0","@material/selection-control":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.25.0.tgz_1510603350505_0.31761784851551056","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/radio","version":"0.26.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.26.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb57015ccf03d86c9074467d2204de90398afbc7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.26.0.tgz","integrity":"sha512-/WaaBR6qbTu96oRkDMjfG8G42WIyUlJe+18jLAUqqAADf4uZjwjIl131k3O3uCX/1iEziql2GweigaE/g0vtog==","signatures":[{"sig":"MEYCIQDbclbhtr1nrjjCFTVJqOOMAO7v3xM/GQx3ImTJvKNb4gIhAKZIeDvNIc4Mg4xaUTfUxiYv7GmYK4bv+o4bdYGt8i6N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/ripple":"^0.26.0","@material/animation":"^0.25.0","@material/selection-control":"^0.26.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.26.0.tgz_1511821587784_0.01294600241817534","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/radio","version":"0.27.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c342a2bf35eca7ba0cd2583e10eb9ca046c1a50c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.27.0.tgz","integrity":"sha512-0pfsAyJcHjl5b4mcJFDeXifATvAfx93qQrVu0x7TYaDswzl5omOiLMeaVmlcPjDuueiD0gJxz+IDVnDM7fKsaA==","signatures":[{"sig":"MEQCIEI9/HdrLjzhB6cxCJfIrAFcZSrzOm/6fGVNmbraPNmBAiBsPneOTFpZT6AU6Uq+Mu8elB6UKsXTNu6KMjZPY+7i0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/ripple":"^0.27.0","@material/animation":"^0.25.0","@material/selection-control":"^0.27.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.27.0.tgz_1513020937589_0.8357378069777042","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/radio","version":"0.28.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6aefdf6f136b676972003c60525d52a48f33702","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.28.0.tgz","integrity":"sha512-V/oQky6B9ueRoG+7/XmmuSKcGsTTH8guEc0TgvOVtxQ1IYWo3eqCikSRJc13tkdozc8zHvwXz7UC292Vf4dUKg==","signatures":[{"sig":"MEQCIAjX3xGiRWKagcrnaSa9YPlK5qFOukeOuYyT/q/zvh9NAiBL5yhX9GhItd1VrHo/MAjJIVak9WmcDb54qU9wUDxW2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/ripple":"^0.28.0","@material/animation":"^0.25.0","@material/selection-control":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.28.0.tgz_1515437714823_0.10994713031686842","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/radio","version":"0.29.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e295379e4303c8df5f5e0de549027a5d88f1c9a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.29.0.tgz","integrity":"sha512-brQvhFWVPqhlooGl5lhrxh/kNC7zyznSYsu+Ni1JDQRKN9lpABFJhLNmqX8twhhIifVTiEFPNznYvBJWHxF8Lg==","signatures":[{"sig":"MEUCIBaPb+vxxhyGghl8qHWBq7/W7aVV9wyIzP7ts+i05lGYAiEAniL22O0nbSLdiV+FXQiHYPaKKYM6EvpEpESanbpall4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/ripple":"^0.29.0","@material/animation":"^0.25.0","@material/selection-control":"^0.29.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.29.0.tgz_1516645859706_0.3442758161108941","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/radio","version":"0.30.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bb84ba7016738a5d0d567c70514deb887ece5c2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.30.0.tgz","integrity":"sha512-lbp3wSHgKIjvBaPM18V/yfPvdvGVw5b8QhTAVzdDrsxFN6pi8QAqVXoo6ei6C13ZAx1rRkchf9In4IVF7utzMA==","signatures":[{"sig":"MEUCIE0qMgEn03hI940AhRIt4+HsEU5a+nSiwhonzGcWV7sqAiEA4/nDFw2rsM5XwenWHpH918bs+LZhYkhnW+zK9+IhXs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.30.0","@material/animation":"^0.25.0","@material/selection-control":"^0.30.0"},"_npmOperationalInternal":{"tmp":"tmp/radio-0.30.0.tgz_1517868177605_0.5280474147293717","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/radio","version":"0.31.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2228b3e002f1afa7114eda708936fab1101e6c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.31.0.tgz","fileCount":14,"integrity":"sha512-HmVFl07fon0V8HjJhjFggk41JG+0SNpwiGfm9p2Jkv7nCVeKbxSvPpAsrMhvUkGJULP34JgEZK8iIY07qTV1kA==","signatures":[{"sig":"MEUCIQDFQi+7VPhjKo3n2bZF+1apblx7iwJvJn6xeAEJa2ADFgIgdip0RuKYn8OVQreXni8WQikk/Rn4fxezMNDaf3lSyiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156956},"main":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.31.0","@material/animation":"^0.25.0","@material/selection-control":"^0.31.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.31.0_1519150982504_0.49806608192348834","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/radio","version":"0.32.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae0c254b504025adc32bdcb191ec0202acbdb294","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.32.0.tgz","fileCount":14,"integrity":"sha512-a+uUiCem0ULjcdH3mwOz/dabLGiiCshqr/Gu5xN1kB6bDLmXybM50DMgw3TowRXyyS4YOX6tm6j+af4dsiNJNQ==","signatures":[{"sig":"MEUCIQDKGAChKHu5aQcghvKV96kZ9fzOsWDgYglRxwzAFGKQCQIgfs7O6Cnqz43A04G2trzfqNCcDUWuc1cYnEa5q6G6rDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154506},"main":"index.js","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.32.0","@material/animation":"^0.25.0","@material/selection-control":"^0.32.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.32.0_1520287727105_0.5480385300014434","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/radio","version":"0.33.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"924477dd0541c2cc24ef0479c7a8b94d572c6db6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.33.0.tgz","fileCount":14,"integrity":"sha512-yDx2kFgZeroIjij/nCMOj121bGu5iBvtpoFpyRZW+QYQ4VykpP7SSTCQAL6y7IpbekPU2uaTdeQXvcSlVQmNCQ==","signatures":[{"sig":"MEUCIQCq+m58EIgPMkgt5w6diIRwionrJ5/o1MV+ArinVhBhIwIgaOvpTfJeW1q/7I1y4liyqP62ApTLkV7EMjohg4phDwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154372},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/ripple":"^0.33.0","@material/animation":"^0.25.0","@material/selection-control":"^0.33.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.33.0_1521477605750_0.47597566978714423","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/radio","version":"0.34.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05545213e64384d4f174b75fe5233e2e327f42cd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.34.0.tgz","fileCount":14,"integrity":"sha512-f+IIu2mk5G8F3mOvBC3qZGH3nvhpjg14BkM2kBwDNQsbIwxG0qjCSNOpcrsX5uI/ex+NaqCI0xgcIp55NFFtFA==","signatures":[{"sig":"MEYCIQD/GgRrhPtxzLQQnNKrsiouvPEnHqLV2tmU5gSMJGf5cgIhAKZqliJYx3J1DWz4b3nJ1B3a6Q/H06EFc2CNA0TkzalR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154545},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.0","@material/animation":"^0.34.0","@material/selection-control":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.34.0_1522705921551_0.7781526714787139","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/radio","version":"0.34.1","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.34.1","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"595a2ea6b340db766c89a4d5672071ddb2860262","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.34.1.tgz","fileCount":14,"integrity":"sha512-wMLPvC/HBjjmEh+0Of3Iaz9VKo5rhZNLGKTuZU0g6jrWzKDkXloogor1kh0+CIpmY3+5tGC9c1+0ecTbCsOjeg==","signatures":[{"sig":"MEUCIQD+d/3N4c6EAAfg0vYNL/2F530lf29As7eRAX0hdVtAWgIgCdu7krIUlLXtYhZTlznYL/9vbrJBHksxCUQfKE/lqN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154943},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.1","@material/animation":"^0.34.0","@material/selection-control":"^0.34.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.34.1_1522798787811_0.9942483123929138","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/radio","version":"0.35.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508a270838e6f798b5c9083252e7bb1a365ca61e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.35.0.tgz","fileCount":14,"integrity":"sha512-WEqRsh9myI1R5MU0CUJJ/p6AsH0BpkR2iUzopcMsdFCC526A7sjP761qq9oBJ/m6OgBrIHJlj39rJKGGqtL+/w==","signatures":[{"sig":"MEQCIE9OL4wiF0sIq6Iolmq2HXjVlYcVzY8u9zuCoCSQToBQAiAitGdDx4gZ/ZAYs3bDGoODwQrdSfeXqex1NWHpiXXT+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDhCRA9TVsSAnZWagAAM7kQAKLToSmw4411K91s13eb\nzYMwpg2IRq67jgxn2t0qfyw13krtzjlKE3PwwNa3OJ4JvX3Cn6YaWGBC8rT9\noET+CVDaT5ecBKhhLHfubbYJ9jhgBgjDkZhK8uuLtSP2MiFd5FzY79Acxp8e\nSEtYiYMTnG+jL3T3hlVQ8LlimAQepnQdio533qDOYD9L7y7p/d3ImvpqUIBo\nmYY62KGJSn/hpiyDYpuSLX0dEg5s68d9973Ibh6u7jcJ41FfxRcQF8O27wYm\n6MYOwz3xZMr5Dm278+pAyG+cfMioOpwrc4s+jMFCJ5PH0fpJ5JYoqxMZfq54\nGGqFR4zEVONN8WLvfAzvNyXGoJz4Q7TaBkNwL+ODi4QdHuZD5TsOKaXoBPU8\n5kBLqAcCv4/IyXKchM+Z9X+uO4rjAKyE0aV9UjEZF3Uren/E0lSoKhAEn0dX\n96jaI3y91dOD0A/qlulPRot11UFLVmUqC559RcTXdTsupTxVX57DXA0VR9op\nZ8g1YEa4Xq7ufpIodnoy6QKkTiUAlxLvhR4jQJZuu/f7QdxJ9LZAcgXusNKK\nuNeZDDh7NUJQ6OLBdjQor+xH56kmNnCRYOl5eMLzfpIXhCmOqFg2uN9G2+lp\nkZV+5kt6Xdoqqmh4HmUMvs1iMsJcZgtdz8pC69D6vTbf37HemdWAKl+22UXz\nFuVn\r\n=+3Iy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nThe MDC Radio Button component provides a radio button adhering to the [Material Design Specification](https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button).\nIt requires no Javascript out of the box, but can be enhanced with Javascript to provide better\ninteraction UX as well as a component-level API for state modification.\n\n## Design & API Documentation\n\n
\n\n```\n\n> TODO(TK): Talk about `mdc-form-field` here.\n\n#### Disabled Radios\n\n```html\n
\n \n
\n \n \n
\n
\n\n```\n\nNote that `mdc-radio--disabled` is necessary on the root element in order to avoid having the ripple\nelements intercept pointer events when using JS. When using the CSS-only variation, this is also\nnecessary to prevent hover states from activating.\n\n### Using the JS Component\n\nMDC Radio ships with Component / Foundation classes which provide enhanced interaction UX via\n[mdc-ripple](../mdc-ripple), as well as APIs for programmatically altering the radio's state.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCRadio, MDCRadioFoundation} from '@material/radio';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcRadio = require('mdc-radio');\nconst MDCRadio = mdcRadio.MDCRadio;\nconst MDCRadioFoundation = mdcRadio.MDCRadioFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-radio'], mdcRadio => {\n const MDCRadio = mdcRadio.MDCRadio;\n const MDCRadioFoundation = mdcRadio.MDCRadioFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCRadio = mdc.radio.MDCRadio;\nconst MDCRadioFoundation = mdc.radio.MDCRadioFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the radio, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.radio.MDCRadio.attachTo(document.querySelector('.mdc-radio'));\n```\n\n#### Manual Instantiation\n\nRadios can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\n```\n\n#### MDCRadio API\n\nSimilar to regular DOM elements, the `MDCRadio` functionality is exposed through accessor\nmethods.\n\n##### MDCRadio.checked\n\nBoolean. Proxies to the foundation's `isChecked`/`setChecked` methods when retrieved/set\nrespectively.\n\n##### MDCRadio.disabled\n\nBoolean. Proxies to the foundation's `isDisabled/setDisabled` methods when retrieved/set\nrespectively.\n\n##### MDCRadio.value\n\nString. Proxies to the foundation's `getValue/setValue` methods when retrieved/set\nrespectively.\n\n### Using the Foundation Class\n\nSince MDC Radio is primarily driven by its native control, the adapter API is extremely simple.\n\n| Method Signature | Description |\n| --- | --- |\n| `getNativeControl() => HTMLInputElement?` | Returns the native radio control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n\n\n#### The full foundation API\n\n##### MDCRadioFoundation.isChecked() => boolean\n\nReturns the value of `adapter.getNativeControl().checked`. Returns `false` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setChecked(checked: boolean) => void\n\nSets the value of `adapter.getNativeControl().checked`. Does nothing if `getNativeControl()` does\nnot return an object.\n\n##### MDCRadioFoundation.isDisabled() => boolean\n\nReturns the value of `adapter.getNativeControl().disabled`. Returns `false` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setDisabled(disabled: boolean) => void\n\nSets the value of `adapter.getNativeControl().disabled`. Also adds/removes the `mdc-radio--disabled`\nclass based whether or not `disabled` is true. Gracefully handles the absence of a return value of\n`getNativeControl()`.\n\n##### MDCRadioFoundation.getValue() => string\n\nReturns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCRadioFoundation.setValue(value: string) => void\n\nSets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does\nnot return an object.\n\n## Theming\n\nMDC Radios use the theme's secondary color by default for checked states.\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ radio buttons. It is not currently possible to customize the color of a _disabled_ radio button.\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio\n`mdc-radio-ink-color($color)` | Sets the ink color\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Radio Button component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Radio references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-radio__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/selection-control":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_0.35.0_1524523233163_0.20166656196440824","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/radio","version":"0.36.0-0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.36.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b009b97c78a997fe6ebf3caee258a5f8d528eed4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.36.0-0.tgz","fileCount":14,"integrity":"sha512-N8toPWDIUgdeCnKc1H3mhiq+KSflnBWewxRepYoKiqknqMqIVZSmNnw9r1l+eyzhPxAKjRD6weZ9LBYCHntrrw==","signatures":[{"sig":"MEUCIQDgq72QYldjvIKU+mFzNsfsYa94HZyU/gVUmjZrN7jsTgIgeb4hBvFjhWktIAigSjQwqpZSLFJVTnfoOWmA1jsYuwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXCoCRA9TVsSAnZWagAATMAP/2odOf0xIOpnXfXvMZUG\nB9qicl/9Klos9psT+QozpsC4bq0+OZMpr1ueGaUFu2iWwnchuwfnynGPTQmW\n9XhNutgIzG2hWVp97tnHQmEb6VaiswvYTkQA7Q2VnPjrq0Oh25tNDQ01poDq\nmfFqi3zs9dIL6yo3slau94QdxAm8KzysXCoLkd0UrbhAZl3bvd6XXC0AFzR9\nXOwyrpLRQKq613IlAXpuC/Js8eyuiUtiqCwQykPsIqOaB1+ktOiaWUsN6dJj\nW+0Efoz8ioixLqUoX4exHiGY567pegGNUQL14FB0YojZuLwkZeuXrOnp2/Ve\nyMK8PZhAtbQ4ygQwCjn8Pl8lhY+ssx6f+KMqfg5NqrQfEVvX+BZLghr4/Xz4\nyziwDbxTdzZg/lyQ3IZSufR9vFtHmBT/eEb9fOi0kVx3k9SVJ/hBoYI54uit\nSZRcHf0Ged2aeBGzlj/VBb213aeWyJEb6xa8oI9JVfa/5xirfavlSmuyQQ2r\nH7GnMLYi8gbqzKqhAn2Ad4F6XnQ8FadfefngG6jNWFaFTNNVHKN9Kkl8Hfk/\nlqbSCvEFvgak+Uq4JN6V4/IDfH60vxeBbjxr52bU08T9LnAx/uoMKF+hUx3i\nZArdJOQclyuVDdhEkyh7v8nOu5EQHn8jUfnEoVy0Xj4NQy3tZmKdQtEfoXnE\nZmo8\r\n=pISh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0","@material/animation":"^0.34.0","@material/selection-control":"^0.36.0-0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.36.0-0_1527607462601_0.2822244059387089","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/radio","version":"0.36.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2582aad635b8cd74674fe1a58381d8a1ceba6f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.36.0.tgz","fileCount":14,"integrity":"sha512-GZw80QdRtdvkKrYk/vxiOPCBKOKfuf03N3uwn0ULYjUESdDZlQwaIoX2drPY9FpC9goCS84kFQm8yURrD6lxsw==","signatures":[{"sig":"MEQCIBlqpAk8Jj/MhMGXjUeMc+XDnrIEaz8D3VfbAVpmQZ0pAiAaaJVqgCr85+zQNoH65AfCkj3gAQ4H9Q3TYrD7HJ//sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFV0CCRA9TVsSAnZWagAA01QQAJq1Xwxnx0yiuGp7l7oo\nlJqSU5Uk2nmNgZVvdFnrOC5BslygAg7MBPo37bflo3zVVANTA8Ugoq5JHUm6\nFccFFXbS3esv6sM7/Yf4gKq5mFj0VNifq4cx87hV46gKsROJnRiQfFQVFzNV\nAyf/taNESFay0t7Es0nikK6j9jEYzQ6mHUnGn2FfbYk9Ml1pjhmBDUSZ3oNI\nHs3M9VYqqglc+vpIyYVnNb3R4C6/B5DERuq53dM2n0FCaHDclhrErQgV4nyw\nSVmLpZhG+Z5NrI/lioTfXAGzw5rNUCx7QNGbIJvRUB0D3ElrerdnMXiWsUZd\nwCmMrDe9E8mMY8sFWkAq7ZyhkSwfQ6lai8wfBaJEuyjesjKaAo1USgaObnQb\nEqh9jkeThIRIxyffka2VyTXUdWrvsfWFISMx0D+meUPabxJ/5+qkvQ+BP58z\nsYZj9pL44amuT5OqUCzjTFbvxTOdMa9fZL3yoxBIjhAp7er4vvpC+k09WbZ7\nQetfOH6tQgMnj1CmHoqLw9z/vfD8dAeIr4Ra3Nx+6dHWvgS22o8XJQwQ8f8t\n0JTNECEt+eM8A5iXsot1+BUOBVCxk7jGhHs1KnG9Sskd6kU4N4eoSkSTQVKk\nVSGEUE9JCc4lJXqN3I4AfSEpJyY2+gJveqHHDBxQB3oyRa6MQUQMjCVNTTEa\nA8+S\r\n=bbj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/animation":"^0.34.0","@material/selection-control":"^0.36.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.36.0_1528126721934_0.6146132535092645","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/radio","version":"0.37.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77832c08ba05fe94ad7355895155b40edd8b8c94","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.37.0.tgz","fileCount":14,"integrity":"sha512-hEPp3HlhRn9Yt6B1fw1guz5QyIlUYjDrpvwgwPncyZ2SYqKhp/hb02/58amV3LHbFvgRFJnsSaBY5l5Hbmf3bw==","signatures":[{"sig":"MEUCICB+ux2VVwveLn3ev7TDjt5/xM32geKA26MiSTgRxTmIAiEAqKLWyuk3t88yqTPGf9jxfP/k19W6Q1H4V1v34p3mMu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqPQCRA9TVsSAnZWagAAYJkP+QHt9cZ5847G6YreHM+n\nj4WxRIta2PuuakRZ5nZZeT9n0nc+Y+hCSRYkEWffSMIkmeLuCKI54XB5Us36\n986w0NUQX648lBzFlRdd20Rzodg1Yhpt+jBHz0fdmkasupXYLIrxOCELe12+\nCSUfCTz48+I4ITGWSwxDiBZrvNmAfZnUWcMA27fY5Sm5thJfLAr40tYB9/mi\nMIV92+ONLg1l9jDTUOGrNPgmI8CtXuaeWnYDb3quHvQ1LrV7RYFSThs8bWlq\n7vKtvfquWbD1mk2SLUpwvXFgAWU+r3Zhf+esV3RBeRWAqflp/WcJ7y0Y3+1x\nx6rRvLebEyFMvOdK26uEePyrJVA0/aYUNNy3qhBo2vhzK5eZ8yzxCU65tDUh\nmuJvTw0E8qaSVeBU6pfjfqlS1gV9iSr1L8Gw0ufxMnCt3GLpIBTqcjJdpYhL\nJiDXcaepT1hGkVNKFBVCg5BL0XrhkJJ6L+iBX0IJHla9p0/MH/K6XwPRgo64\nT/aYZJO1h1PoUnBA6TLIbe3+ZC+bDDM+LrtZuHBQG50k6WuZXgSVxYlLsYRL\nllOyw7gJKkXn14p+veRGAO3lGM+CddIW2r5qLGXptd5jd3YfZEJlCYiuut5C\nYXbZ/Kf2QKN5u2uqkDcI5UXle8LlRjrxuhnJ4+OrbAI4fhiIuShydOSZPD8w\nYx/z\r\n=k7IA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0","@material/animation":"^0.34.0","@material/selection-control":"^0.37.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.37.0_1530569680887_0.6638699656957703","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/radio","version":"0.37.1","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.37.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652406290a9d8702633863ea0b05963d53e8a668","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.37.1.tgz","fileCount":14,"integrity":"sha512-LajWyVRJRe684Vv4soaSFpgd2U923zdwSks3j3dHHUIYMSr/mJna+S8KkuT6i5pTSM2u0sj2yQN01LcFxldZqQ==","signatures":[{"sig":"MEQCIBIsw3fSKt9v3MjDdITebFs4SETmoerzfoI7SEFYhkzYAiBGKD9ySk2578aRRyvByMMhv4IeaGc/w+dW0k1QQCa+OA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQwtCRA9TVsSAnZWagAAQp4P/0/F2DUUrVT0/98XCXRN\nL5UW/mKvxXityMkULGeGp6aBPISby4suPzmFf7S8fsW+8L7Lb2tKpSRHRywi\nDmP5yhe+evCZcGEdAWh9j5NBcJwloN18utPJwb8v9O6+bxCzkWekd52Eu2pO\n/7hHaZPawT6yslW+/Sya3GrChitxdUiwagpt5q28lqFvYO473ml1XLQCJI25\ni+5sj2eq1QrUtpe9QG5qO2cehR7f4dIUcJDqX39NibsG3xLSnPyVXaZy53OQ\nZ8AU2xDwAQICXJMhHIIePoG64kPlOf/Ru7yfVNpKpq003cTb6p1F2ijs0pOq\nX183fWchtNDWstYtpQ6G3jbpCGo+RCOXdexIvKO5XRERBuBShAWjG8IUeM0+\ncFMlHLU4Kt8XDYgb9yvsHjIDO7v53fLGwi/CeKqOziLHRP9K5gLn7dmJ7u5r\nALzDSu6hjScQVvK0nuBjEkfaYJJrFUgVJZz+koFrMbe7NJI4ehyfsSTvc8j4\nF/sN1nrrlIe6VggoxiBDQD+JJ/7P3uIOZq4Vcu3FpKUdN7Ye3+q+TCgQb93d\nHhAaDdOVQRFYiuaUSYj/SUeOJ3yC8HWX1EzP1i/8+CqtKeAauza8R7G8nGj8\ndvO+H8ja/m269igTPFyKwW78FBkx2KwXElTkRfWkVFCGoBSoghZl9Rc+hCvB\nOgAi\r\n=wr4n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1","@material/animation":"^0.34.0","@material/selection-control":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.37.1_1531776035640_0.45902614775000616","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/radio","version":"0.38.0","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c7dab2e0e06728b9578d211327769c719179f05","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.38.0.tgz","fileCount":14,"integrity":"sha512-S3eItKk/i3cToebULT8d1IdppWbqr/LDADmKCJAQKZ2S/rS26iPLPfYZO4A7nZFnxgJengS91sW7TCzbR9DXog==","signatures":[{"sig":"MEUCIQDL3PPDLO8eIdcGErgHkJ/v4Wai42bdWJAJv0lQoFF5SAIgaPBBZaMR29uZr01XxjZvTQyx48l9hxZ1wehMN3r+wEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XmCRA9TVsSAnZWagAA99AP/0HvIv2QSe2MDTSS73Wa\n4zbHC+2RsecqZiYnx4SUhWeUKAoevTFzLp9HQj0m5FbPOS2NeObyxMAH2O2s\nC0ukjnJ9UHRFeCFw5/mgAyuoP2LQ9oOpktimORhDtXlPB2wQp7gk4wXF26cV\nKnsB04aEMCmOmsbJ7ML6VDAECTqZxQpmtXBKh9bLz1pIt7tIWO/v+Nb4Ye8R\njIqk0XAdKkFLP/1IM60Dma+jJ2OizDsFBCsCecu42jWs07leUVLg46maelvp\nNd/UJD0KUaMpP7Gf6d98mBzWx5Fs8bOEQY599qD7YaynpopVUZm2QFPmXmns\n1ZaoGnwCEdc13ZRA3KkAjSvmBWk5X3oDX9VokRjUtuElxao1FQEztd0B5pWy\nFbLteR7Tm5QmQOMgbyNrB40lJTu2lgIYOtuHu+ZVVmT548GfJ2eOBchsMeEo\nHiKikZ3QLjvszirFGagH5/4g0jqc8ZFs2tJEoS+MIRPOkF+j6saLAD8ym5eS\n+PpyvbcFq+w2OFhaeLSaALQike99gg1yEgqmOwH01QFmqf4JbOZGU9f5b9Yc\niXO3j144jN+s07c1PMIfX0DSa9ESQW+GmSAgpgIUFHUEa/9mcJ1oVBqLyGV+\njpTkwgjqI3WVYcrR09bk4ftXaqN4VAkAb7mDhKphe+MucSnF4HNg/ZvxIXlR\nsT9t\r\n=yTKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/animation":"^0.34.0","@material/selection-control":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.38.0_1532970470034_0.14199616361467848","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/radio","version":"0.38.1","keywords":["material components","material design","radio"],"license":"Apache-2.0","_id":"@material/radio@0.38.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2416f21958eabc9fde730964579d6b63d8aa6294","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.38.1.tgz","fileCount":14,"integrity":"sha512-zvD7xlzsAusihP3EbRyzf0mH8dy1qCDLMpjZvlwKimgOJNlua87dlbW0c14PwKSoJaS87vFR4v5rMa6+94C0SA==","signatures":[{"sig":"MEUCIQC7gtVq3hP4oWiOnuV7gVCwd4a2oPmFeE7vCFDZCe7FuAIgNPoa1PARYNwNU2a/LpV7ICLK6s4imyTeGkonL9PulvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyDCRA9TVsSAnZWagAAWiQP/1TRZiVsPeZQgLNduGsY\nFclFiXJOovwQZky3w1s0Mf9B9KidbgxpHkHgStL+PD5+nGVDN1sYCCloEEbi\nyXjeHcRPxW9BARehaEIv+QLFyHCzxisGvkrSM+LTkyn+8FgfSrVR+AxrbSKy\nRrF6e2NrXWKgX52G+v+5R7VBRn65HyAVrtoPCuLAGSCPXfXusFkHLZiphtfH\n3zbGbcsF/wqwvC9pb7cklcU1PRw6QN8psEckcxWwLE/WZTT/VwGS+8Gl+9nM\n9epEJVhwqCvtxh0+Ku9ar7sE7hczCE4XYvyt680DXSZdlcWrvYa+/TgH2nc8\nOR9C4LiuCn7dD1LJ+EADyMjSV+GE+5qCDkaPXMTG2ym9U6qhmjjSW46naaZc\nj9x3LZfkkodKhy8s0wIlyntoskOep35ia9Rw9CnObp8G97uSuBvLqmVF/ZJn\nvpK1JcohKRd/PPQRNrydVMldoz+EVyVAjXhuYGiCbiMNHwuwj7SttJnCsmse\noAbr5PLM7jWrlImIac16JAhjEqCZAzndwHajVN1+ppSjZxVG3BaW+VmRtX0c\n2mM5zMtPRV6OF2jllqhmlCKoPCVTJA7B/PzLcYT7dluBrHNShGn6daTcEEZ3\nkVqI8FLVFZ/fUTiS/pm548IU5nSM2T1Q8/TKJP5CB+rKJoauw8yurlWuvEPP\ncYu5\r\n=TG30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/selection-control":"^0.38.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.38.1_1534192770602_0.7428754275427056","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/radio","version":"0.39.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0675d7bf6991caf59cc465883b89f69390ec3f28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.39.0.tgz","fileCount":14,"integrity":"sha512-KrqHgXhKXPEHi9MYinrjAcNGcLSj+rYg5CBVQkxriEQpOddsSU6LHn4y41IysXLCXb9HJfeZj+zvsll0HNtOrA==","signatures":[{"sig":"MEQCIFX69nHEXfts2DhduWoG9wYdFLolcAKv5PNMD7qzT6h3AiAwxuyZ89RH0Vpj7t0RuP78VRlhM5Pg6LjCAiRELrmz5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe5CRA9TVsSAnZWagAAmqUP/1N8kIeLGoMyuKrsUtLL\nvprjKwNZFMJojq3ucLSIc4+9uHnZ2Jr7iGVBCB2ytNaBEUXOdkk5MS/sDYdr\nLcWcPBDvFhAeHtqangX4RQmMc5rd/gLU3Ciu5VK/oNx69WkyrQJRYZ1tc/y4\nzO5+N5DUkdjZ6bSuNQvTSilG4My9I0QuZSMssiU2KZo7XpTbK3hGsS1ov4iG\n/hrcSvCljtjgKnU1PLbj+djAOwyzz2CPbPLvepHZhGe2YxaFtEDTzUulhmPO\naepJ4p2dWbMhQCT9P5+mAiFmMI6kfEHHJf3LWVfskR80KjpWFtnmqUBWZb1j\nrJSA7qqTuAxgczRyEwegkOzVejHyzjLOaJEYYO/KOAriIosFG/EetgU3JHh3\n7sG7m+PqxCPV5XmLyyXDnlD+T16e5A3pMzBH6e9/RZsu27eJ2CmcWmk3OqXD\nDb2CwPsQWsDZsiGdCxpNzXWCCoxNnWQlpaDzecAZigx/Z4Bp7M+II2rOaMU9\na+oys3duuvHe/tiJoy59YlGhhltpFcG03nxI2GC1nSbJ6UAPTOMAZZS57WEe\nJFWssTol/khRPPyjQuNW5WM7QpbxsUBxBvq5Y3jYW8AGiainAm3l493EnYrL\n7sALCjgQBNfot4ABk7YoaMCUeDEjJJeeN41qIzzp5ZRG7cObHleKTD7iXd82\ntIK+\r\n=4N2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/animation":"^0.39.0","@material/selection-control":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.39.0_1535391672976_0.41012502060362643","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/radio","version":"0.39.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ed73785cb8346218c64e989d8e120b0c9dc1a02","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.39.1.tgz","fileCount":14,"integrity":"sha512-ee5HiO/FMOInC6QFm3pzcETiMB1TFTUD7tWPAyD+F83cwbl97Bw5FCV8q47bpmJe+Tg+t+TorKHE1a1ljQNJ3Q==","signatures":[{"sig":"MEYCIQCcmxx8tY3CuOLUXztgniFCrcwhEQU9QlhI3OHEow3NqAIhANdZSnXaBg64MyoF+GWzvvgT5FdGMI3KihafFoi2PaYv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibT6CRA9TVsSAnZWagAAuvcP/3Yj17/3wStq20r3nxZP\nH84hezwKpkPr/VGO3K6gb0liu96xmXADJIqwmr2aCLHWwiqAb3XIk8AJum+5\ndt3zxWmzIz3cuJlLDA6kCV9yJVvHv8G03YFi9uLLWz5ccmMwpjhB5ka85JHU\nFg7s6hHT7Du7A6LWkg6wPWGu5utx50uHsOlYrfJAcTLu4UzT0D8RNItDrCvE\nxDoMyiPyeXFbzRKUwHgxaqBD1EYbNfViMAv/IKnBTtdoIK1h91LmYudQsH14\nkJk6ndC41iLQfAAAExznNtGjPu+ZNdN6wzKsACmaKqYhhrnigoBWvVgbvj/9\nV7+nIugV1RH8tXHRPq5clU805mmYOGz2Yf1VzHNuEDpwrzXzfHCqukH1YYST\nOAZbVns5tU1b5Te0EEASTQb25IlrtSfSPQwsBEuEEWkVdKXPOJl27dALrw30\nB0mnMEkW+cfo7pxq4ntj12A63UJh402WKQMaRpziJnooqXkANg3d0nsa4sBA\npP6Qdadi5e7dQEeHwCJSMKPSQk1vRnp2d+dCOD35gtCNJnlrpeEi9r6+InrP\nbhtVQtRIqgAlENUdRfDXTey3VrX8UsGHydu8SY0RXU452/zKj3SPX9AjJ7Ab\ncf2Nr27wMI7iqBdTiz6rKgm18jExSLLoHHGTWnJ44jcn3G99FpbOdqiIwJu0\nsUOa\r\n=yp+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/animation":"^0.39.0","@material/selection-control":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.39.1_1535751418067_0.030783839402309","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/radio","version":"0.39.2","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09ad3f6eba48ee0b9adedcde1069184302ec4406","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.39.2.tgz","fileCount":14,"integrity":"sha512-P+1Xrq61xsho6OwX7GGbr/v0GAvDGRNQ1qXN7FeNvuS/KKKyqnP8DHg38WvQLVj9PL9ARYX92GlReFwPDF0EIA==","signatures":[{"sig":"MEUCIQCAg4k7MmBHA8QMcmSOKejDjJfTTIWkMRYQO9J09T0tPAIgFAwliSH3/B1XO4w5hMkTBXriqDJodjpHhaI41R7unnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OGCRA9TVsSAnZWagAAOmAP/igXtbUi38r32AL4agMw\nNekbKs/JbGxkaMr7BmdGp4MqVmaPNRP+dBDVmOYa4YYbpG91w81473XmF8Yv\nm4VYxZ79dpmayRjxp9cBhEGDs2OG+6c//vH0lo+F/PoevUTnIdZKr4m/FtDo\nsD1MTBZETEUtfwOFkkctmiGJhFjXh1ZDUA0mKEoCe7GHrp7A+zrd75rmcze5\nPlgWdQBhdc3lbiz8eF43ZAR6BywhpZU5mUyRdgUVEMYDkg4yUi806JVuRS/I\nkCgYdvMvxK/Lf+PNHnt/KuoK+DWmhUVqG4SiH4Dsp2YfI/8fNAedPRQDHvFF\n/xSJBZm38vgXn6/aW2BLrElkbAqtDZLNInrU/04RFZGNWICyA6TeQZaHvXJp\n7OvQdBSi7ydQspOGp7qYlvM3vA2LD1ohpWUiSaPZFTJA+HH4we+wOAaUNPEb\n5xR4KMD1XOQu2IRX4xyLyB7l/ZjYtmoDmm/DwCCir9VOryD+HY0i26Ot/l2S\nA19QdvnWkmg/U2AuhSTAZK9eXRP7mJGfqlZWzidFzUFWGAUP6/x8/elFIZ69\nP+x8ad+DTiWWCSUs7nbBOfc1NyUHix1JsNkOuoWUozcLMr00+8v8Yc0o+sa0\nYrLxZaJFJIS3X5vubAvkZBtmeT6rTYiiAjDS5CdrUEWP0PbUVKYc43RK5xpj\nlGeH\r\n=VmW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/animation":"^0.39.0","@material/selection-control":"^0.39.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.39.2_1536684933870_0.2507715303794831","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/radio","version":"0.39.3","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ae825a5970de7b69e0325204bf5dafbc1ea7ca","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.39.3.tgz","fileCount":14,"integrity":"sha512-xHqioZCBClF3vhZear9Qi8fwLzTxFPkuvsFfIaPuTLwG9UfkS5IptThSTEoqbaB0X+Vdn0fl5wRk535hfcKyNw==","signatures":[{"sig":"MEUCIF6YL0TWXFst1HVooIQyuTKZgLeIZJICyhJISLpLIBjOAiEAhR+ykvoihATLln4SmeMKFmTMwSvJivQ8sENffuDXZuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kiCRA9TVsSAnZWagAA/jgQAJe4aVUTjpcrIsLy1oXc\nbvKjQdnoADh0bPwfmOYMvriPnLDKXE362uV/FQfQ2f4LU90Rvfl7MP5nGCzt\nvw+DnIK2JYa+dHP9zgnIVbeBvwguV9uNqZhvLGpkhlG7oyPN9qw5uCfcIWrr\nn3N/KPL/WwkwliLfyHY+JBb04FJpR65tDdO6DlS06JxWUrI93c3xS91slqhG\nEPRyAwhS4F+3hhCcSTCFyhvumgP3M0B4FNQETEmIuWW/49NHDhbrNIm+cL+J\nUtkU0h0GIcxyC4sAzcsg7+z+8NT6jp1SSHiS4tSzptqr2G5FeBzVWYkP+ZQQ\naXxHKCaQPuEecXRLuGPfYP81xRw5Fze2MaVeTl4UT+bQMM6keavM3AfrDQbG\nw7f/UwEF/KNmaKV1ot1l4LHCyiac2zStGPi119ywRxxReCDd/wK3o7ZKab0b\nISSf26+hiV9rb4lds7knJFI5Fgt7rZXleFlX3mu4HMbn4HkZfDDKvPT5RlDU\n6ZDkT4KDaCP5R0vFJtzXvCt5Bpg/XzdaO8GFP6onwx7e6VK/MIWYMWjXiqKh\nM+veUn/ZPsX2W99kjEbnwsh0kcYdPiBM2R2VWhDVCs95uE7TSRSHwAH6fXjV\n+MKN40ne10/WAE+xy84P7GZs7kJKfl3jsF9itLJgJwY6mOdjfZoGi84EeSNY\nqfRS\r\n=0/tV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/animation":"^0.39.0","@material/selection-control":"^0.39.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.39.3_1536686369643_0.8272707377036548","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/radio","version":"0.40.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19612d1fae71b31ed4c0548fa953b4a6332b5743","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.40.0.tgz","fileCount":14,"integrity":"sha512-V5BVNcVnGvEs1yjNQn9OTA2KF4QHoc4FsvIdNH6cED9eTlW8RhpvtOIHJr9MQvHqcPxgHaKEODrMZOlknEX8VQ==","signatures":[{"sig":"MEUCIHeAm+RQAY14LlE1Y0a94XhEpiLX42a4yI4lyOaBqkqeAiEAlyjF5bH4MEYyqiaoEs850SleGsVTjCS5tLR40O4LDc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULKCRA9TVsSAnZWagAADdsP/1/7qaRj7brMAZ/ES9TV\nx431Sz5Nea2ZYDYmlgO9iyezmLZ25F3+HDsWg8p7lrjvakZFK9RPuahRynTy\nOFAKuP2lzc3ZUNOez7NFs6ujGJ/hLVgpXm2DAhzYYYrrS5Jfn10eukA705Sa\nDGKMJJKz/hSWg3dsAuT/4sfe5KFXYh0cmEVVhnLyemIHU6H2VI5EHAQzfrED\n3OUfkdUW6sGNHmgEzthcTqXoprBNzqiyxjv3nCqcTTQ/vvL4i2sYd/STUrZN\ngE03lNezhHY/7HH2fBzk2Zi91Ou22hOirfb7HwQf94AO1FtsAOHJB3xQAXIm\nnKH/nGM0SyEHInrAVid6gNq9RzYO5ci2qzU4cHzYckr5Kbyo/SxjjrrgIWEc\n0jdf1pV5iz5zc09r2OnBHpobcSYwp8PjzDrdbBt163Lhd2wv0b7ht030SBAh\nBaEOHqULzXKWBkETFq8oUzBQIctKFmGcKuprgfxo9k3wvqgiF5lHWIP5hyNX\nP8UJ4MVF33w9spn3x+ExvZboidojznAV2FJirAvS6yAcUaJ1eDtQaUPbzwLl\ngZAIDRmDrI4t0e+It8e9Fr6Vd/+Hg/n5QqjozzQMoUG+twszGM5dmDcNpxFc\nq5Y7YucJGLO7QGeoOnQ6QsZ3L89/6gZhxd0YZfIXvi2sEURAuPVRrgRvsENZ\nM8sH\r\n=McyG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/animation":"^0.39.0","@material/selection-control":"^0.40.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.40.0_1537819337199_0.9086544832549863","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/radio","version":"0.40.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e53ee45ac78e96ee56b602b32575e00e9fecca8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.40.1.tgz","fileCount":14,"integrity":"sha512-Xu3JTdqmvPy1U+m0Cc2UFq7v/Z+tG6bsf975j6P1vkWcrQ1AGYN0trceiPpyDUjyoMX00Qj9ZAiCCmjBKKlhWQ==","signatures":[{"sig":"MEQCIAr4GdGJlUx4r8GAyUvvLN4o+djR1R8lcVJM9kJ5ZErCAiANW2KGQHsTMAQ03m81pMKDU3HJ3cEZ+kJM707MTyp7tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8jDCRA9TVsSAnZWagAAGmYP/jWcvDN3vOGbMbGz/76U\nOvfaRiUWOcXkj/rn8PDlVFwpUu7rehOySdyGl/j2gi/QL2z5uTHBiq+mtHsQ\nZWw3+j/U+BjlaibYTRUXgUyTydwWcaptbnVrakxJcPtl1juaMDlYuhFUb053\ni52nmXRkhp0Ntx0eT/T6efmAIKjfO2qZXc5g6gMykz6ZODhqidk9CZ4VTfU9\nRyHvG7ny3ta3SwSnuW3zWV+WNf7cG1mh/EtbCxpKonLwQi4bI8LhM+ZaoSbF\nRzSagRCqjCHBIVUQt2iKM0PGGPDtMkuMUKpOOQuoDXDud+dktOQYUFZtJytS\ng83oyubUPABSVag5A8qKa2DUATt9x2s+hm8akhFIk3Gmby3NfMPXrwMSae9N\no4PuOt7TcWCmcJkjhbJgRoNk+NKanHy/xSfqmcmPJAdKnL/DsHH/tO/4XOWW\nj5qvBGWAB6T5GxTjHk8X7R0NaNiVrwYlhr6WSn6wOT0Z9o3g/8jvYWGUC8Ey\nMJNEQjcrXNcI1E2BYWUtxdqQ7T5QFTLwDTWncM7KK/azUNR8ee3fMgrxc8iu\ntXPJLuHLDvj2EBW+akJIJSwp269+kXFhdvNdx3LSxJmuZyBwZwokurg888BR\n3zFZfIqf/m/fUCxTvOAg0m3poZMAa4HxqfjOibZ8jHDXo/6w79OSDVEqB0QF\nIL2X\r\n=A3BR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/animation":"^0.40.1","@material/selection-control":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.40.1_1539033283073_0.25922911106079827","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/radio","version":"0.41.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bccd4bbe069a5b313598ad2a0e404ff8be6e25","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.41.0.tgz","fileCount":14,"integrity":"sha512-nJvVVu2x2lAttUNnJczpZzKWK+3lEw/BOYsSLVSYp1qUlIQsOfQ6aItI7URokbLkQDqDqlsNmvGP5JJv/Cpksw==","signatures":[{"sig":"MEYCIQC8NFnmV+A8/AmU6Ak6BHtQmPRdqYYp0Rtcm6cFLx/cdgIhANfhdZFfrOKxcEfBnsTwbPnJb31OA8+p1kdPOfZV0P7w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wKCRA9TVsSAnZWagAAdboP/362qH42YzKdEpxBNOrt\ndF9rSSRmzcWgEtEjkeW+xDvj2OItgIGlw++/2ugi/cUCRvhn2SpA7SlEopPf\nZEMDQ6ZgFtceg/SNj8Gc0PTZz2sx68O8eWgrqTcw8uB5/xziW+OXSmRYSEQN\nGc2NO2QKDsWyfNY1w8UmFNNYNRwrlornP1+QCepFt+mbj7letsGI3Oe6w57f\nyM4U55HtAO3qxmqkWXgiLpK6fbQT8PpMTnTwgGRr9dhFPTtWngp1hRyJuZGc\nYRHUsQQSQycwSPNCHUz0tGw/9UkyenFpcA1MmP83+70lLYQEcW44V25pU171\npIc30J/6e9I6PGpqaSi36wONUsLqA0MGCEEGRqkR1dbkY1LYMJYKbK4XVyF0\nFGz7yUa+OYzRNIi/KsKwn/ATggKNJozvw7+MUed/cV9I2i1y+LsorJpTHmyQ\nRN6V7nNDgCSQjnShs/tfF3FJf+f3dzA1v/QqGjrB7k54dl7ZxMRHb3W4q+yo\n6zFX6r5Tow8pmRucwsumMjw0oiCCVtPzU2fUxhn1lxS4CCFa+iMQqa2T7aJN\na99KaRIfdXaREGkxt6LNOI8h4Slb8zCXXphkngo/wu/wgZXzJHaD1+lCgOgi\nPLtyVTbe+XzAieRb4whZh5aNTCRwQsFS0Wu7A2kvALmIdvUlEAVnpLZbOebK\nltIe\r\n=iBMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/selection-control":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.41.0_1540844553665_0.44039814224721785","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/radio","version":"0.42.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c90f3cba113d7b415644ee8590ebe2309d282829","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.42.0.tgz","fileCount":14,"integrity":"sha512-U/Kk5ZTiP/LjXU09wBreZQ4a0Ze2sHwwnrwiIyhl4LQFY7Eo8vmv9v0bQhblaoqUviflyUI/j9/Yvx8LSjwdaQ==","signatures":[{"sig":"MEUCIQC0EE9xPSI1vmHSWsckpGqdoFfJeXToT7XQFeeouqZPNQIgQUbJKHChJv6QBELv1dXqk7dtP50Lw8ZVVWwmVFFlBbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXTCRA9TVsSAnZWagAA1FYQAIv1qpB4Cr+Cl27hnYFM\nuRg4t+BuBa2XFK8uOwYkq9hzCvoxiLeArBoPsXvvab2icOG7KZMJ+sE58ZjT\nxM4Yw6N1qudc1TfNDetM8mjIhCE/fvcz4T8E6W6sV3S6KNUbfbo1L2zpTH36\nG5Z3NVvS84tUbaLdvRm+1ThOIBP+Qvr9AHI0n4R5YEFySnCRU0EJQzxxA84b\n4F52RQNIK3USvQqSYqSX1B8nqUqhk3y6FsJOONzhgDXRMzJnizMns0XMfyTP\n3xYX6VhLc0hmdJfNM1Yw19uiYR1NUIq9xLlamB0HdRgHcBXOijzjP+xHt9tk\n66reR2+CK+vGnA4xgCrg1l/M6R3hkuj0HK80xIvAMpIxFbOdgeQtHMm6CS7M\nyIJ6z4AC93GzdGOZsC99ioFGgvgL4ajAHW4McuEki2ELLSiP4sbS+qo8UIfE\n5J42gL7AUEMyvM/mKn/Ksrru2Vz06rP+14EDEgC3EPV2j8uiH2JmFx6+WIpE\nR8/D3Oi6QQdkMwuDNZBXYJKAPUnm9EHoEylutAPPTYIC1PGHFrbStrdA8imC\nhQ1fmff5JRt5jN3e6rYWZyyEWcadXrceJ70SH79LsieHdtoD0/dvHIWOZ7FH\n4USLBfCTioWz1rJmXqQVufEGQXsJi3hnxf+FTZg5dAYVkAaRYhv3ac+BEItz\nz7RU\r\n=Jyuq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/animation":"^0.41.0","@material/selection-control":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.42.0_1543964115152_0.6565529100122203","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/radio","version":"0.43.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c7445fef25832c3d4dff21276e0c5b1746c15a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.43.0.tgz","fileCount":18,"integrity":"sha512-xhvRHDf944t4BkcS4sFk3lEPsd5moJgFxHzpEsSo0q6Ek3Bvfirs7sIKCwkvkyn8bZ/WiOhOidhVjbS6CYDTPg==","signatures":[{"sig":"MEUCIAtjEbuCBYme6vyDSu9kZ466alm96CJeCHEEyNIwbuFdAiEA3LwMfc4aUtmvKW/e2kafzhAVHeu0mFumduaBuMaKO5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61TCRA9TVsSAnZWagAAjmQQAJn+g9RnQqzzbxilHENX\nr3STqnCqGUwmd+jAHMmKIqzF6MZ0K5QayrBDgMgNZy6NcmcDIb9m0nGiZ9JF\nurBkXpf1H0dnWhL9WoFf5hiUmxHCM6RGyi3BzPltbpnM4p0FlJEgPLdcSdOo\npZqf0x7DRDAJRbJkeCYWwYrszWIPuwergfn842ivyIMErFQ/SMhnq6CJxyTe\nS2lf6vw6dkQ0bP0f9dV+e/hAJbAwbn0WJJerh4/WD4W4V0Uiyw9OvH0mYE8q\nG1ihbJQBT/wO560j2BmX3fjuxyReHRWZd+csXNm9evluejQQqGTNYzzhfBuI\nSBw7P2uN2EJV9f22byz5bin70UqUT3nz49GklBQGK6C2jRBVAO40Nj1/j7FI\ngVjpn/JW0vqFCijhLzcXN1FcsIFIB7CfnJX9+9iSr9kd9VSjMRhJTO/tEuPV\nWZJIzhfG/LyLzL/DWhjFCWmjp4SqmN0+D8ciWLCJ2F1pxjFmD8DkZN2DoqOg\npTuO4RHGXcaxgS8hqc5IzpCbWhdGAzNINIk52XeG9RQk5+qyj+RrdT+5I6lk\n599qAPIHWBKs9ue+4az0Lk15N4EuDg4N+VCbrXD8TzO0gXBOmSEqB6tO+uLY\nM0ADXvZ5dJHb6fgByfe1M03a76GWPuqEXyvylrvPrBDRfdQylzA91mGIPZa/\nBcl/\r\n=hqhR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/selection-control":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.43.0_1546890578972_0.5231958882143983","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/radio","version":"0.44.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4cacdfabc7d765aa000cb34c5a37966f6d4fd6d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.44.0.tgz","fileCount":18,"integrity":"sha512-ar7uhlfHuSwM9JUUjpv7pLDLE0p436cCMxNTpmMjWabfvo3pMWlExvk72Oj81tBgfxY/uASLB3oj4neudXu9JQ==","signatures":[{"sig":"MEUCIAqtF/Ht7YCY/AiRagFSmDG71ygP1ybpZeITIo9yUqxFAiEA+KrHizDDnh16lj5b3HgaaURLqqsfjytAuxooU7pg8c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINnCRA9TVsSAnZWagAAz5gP/RO4Rlp/kJEjCgwnnkbL\nRgP/ILp1FBi4xT4drM1mx7p4X9DADGTl0dHE0t6wYYpWytPT86arwIFTGDNV\nrVQsUkMLcDLPTEcHqbiTZ316nvTe7IFofU0h2+OXySQEroZAMzL4Lr6x/SGX\nUCCIx0iWagEcw79p+PnNRjbwDzJB0EO6OJsIJcUH5QjeUvK/KsalCGBEyUnw\nDilTtc48ZPe5ZT9Q0O2oqw8+8Fp1+y3PFRdqBcDiuvSlnEhzUF+ttyNJt+m/\nP8/ZAsF/FsIkHoZGzgy/heE/cK0wmw9j+vJr3bvVNzqLZ2dMjBssRX9PUO+3\nw1jT5SouAWazJ9xQzSAhtTnnecLdJYXHPqgnMhgoGn3OZyITa36yoQFVDeXf\nykc8XhOguOVs11dk0hc8oTskTpCVi15j7IpwgaoaPy5AcMbZ/cUtmiZWLhbS\nJrP0Te3dD6k/XSKAISDnNdOx01wZ3B+blNtr0L6tFDEXJrIUuQEC7REX1AJj\n5db51LRov1ewgCYlK5yvE2ibvuJTb7a5KZpBbOluw7MU61rVhc0OJGH57+Gf\nRLMfZ+mwL2yqOBd2MAbcp0XfbpgxsNLsGWQCT9m5GrodZZuDsOc55JPNBU+2\nwaNkzDLTwWSfMsfXW4SPrB39SXkM5e1vC8mqCxhvUfDE5l1rRGlGanl+dMrI\nsgIJ\r\n=uL+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/selection-control":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.44.0_1549304679001_0.6975313911556493","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/radio","version":"0.44.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a99aef3444377a8b4e9119996f88988289ccb1e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-0.44.1.tgz","fileCount":18,"integrity":"sha512-a7I46dDmwDye3tr2Ba0M74qBe+0AVFjqRjwzZ/xSS0XSv6ZK8+yMVrndVRZjD1uX+Hg6G43PkEtKefneLNIO5g==","signatures":[{"sig":"MEUCIQCDfARZsXTJ17S2L9JqJxIv5mZbDXnGjXMHiFLccxpBSgIgINGq0sCZfz//l8SpenvWF/80sIrt6Sl+AVnuxFo+2Dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIs2CRA9TVsSAnZWagAAqZAP/RBzc36toGQwciqcGllU\n54d+I6eLDuTlh/kRLggFHPqYjGPbMy3J86UxPaT9RW95hBQfJ84sRuapZnFN\nvvynl48JyYCuwqSXBLV71JoriilCvWNolNXpTFIfp4d/oUWiDY9/GgUTCojN\nUMfaaWMgycUnuhaOr6PqdOgwsBGkm88bw7E5CKnyoZEjV5kLWQKoBnb9KfSe\nIHZbNhj4pvgwvJCKbxsjSCDFcoc8fjLclWnJ8I7CxLs2/zxxUiH1a1wcb1Ss\nJnHm5zLz0LBuNuMTKJcbgEfI4CNX893YHMTLk0Uj6S/bDiKMLYcrY+KJ9Ogs\n3lRIuirkrowjFViQnFCB9fq/vCdCModWF10O7Rc4rvD/a7Wogff49bGZ/t6e\nCsGw0aGqfTCDUaeotzW5MWVAaEuyZe+aOrjhG76iM6TpsXw1RP2SA5LJKgHw\n9uOUBBd01OhwcSk4joxJuW2y6klq2isuhf7FG+AZdGtw2Qi8UZP6nP/k4eDB\n1GNzvLCk/7vlaDC69n5gys++Kol2TsGVlXUQj1ArZ6714BPOtmqIF/4hb3L4\nZZZRFfpDf2krzb+Wv0oaL9SFpozmlWvVm8POaFuOi6pWPnOAMtndvIX/CQdG\nvxRrarU9qGY/YH5wFEZTvpW+Db3p1a6TwLIlLWKVjrl75Px0uiOeY/kkamDc\nVclP\r\n=DBR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web radio component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/feature-targeting":"^0.44.1","@material/selection-control":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_0.44.1_1550617397910_0.7221528465519851","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/radio","version":"1.0.0-0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c973db73ff72dfda6ac63131c1f505dec4deff","tarball":"https://registry.npmjs.org/@material/radio/-/radio-1.0.0-0.tgz","fileCount":30,"integrity":"sha512-nIe2oLPaZTtSyVYNQVxXBpo0wvX0Xy+hrQYHTar6kQyKBaB4lGS96kqhnnShRMmZXhgHFd8ndTszYy9nZS3o5Q==","signatures":[{"sig":"MEQCIHWj++vZzVssO1ghqHzcwFT0DTn6/PFwVPwd3u0vO/QGAiBAjPnrgBVq/nFpL6ypINNJYYm9oSW86Lb4kHM916pUgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":636005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRwCRA9TVsSAnZWagAAn8AQAIJPJepRiB2cPC2UkOI0\naPL0WpO6RHsUzaAVKKgjd//TL/6IlLoZ/oZN4df+q0ftevVjzfp3QwDxvZd7\nsg3XFioUM3N23f8bF+Y6no14X4ggr/wHRkPXRU56J/KhDDqGKuA6teGcPG83\nyObUCvdVAJBft4vbtHdVNcBsaAG+IU0BFosWqXqOoRWNWw9JPuBqgRPHJUOb\nxsckYgc7syJjmyJ+c4jO58WEd0SR3VnZCiQiTL3KMv4ztl5MdF57/vAhPoI0\nD6XYkr2BjuG8c2xBu1oUx5uurCR/xHDGO2rxF62EX0ro0mEtDzllJG/qIS74\n6HXzBg1ma9zcbLPdWAHNjh4dwChFgo0qwv8BvkM+UVgtyvWVoQkp3qFX/YeL\nTGKCCpm3OrE6UiSy7R2CqTlpovoV6B54vtuaJu/Zgcxn3G8pwecGlUShbcif\nUNTk7OJxJLdFuZGYwG6Gk0DxNyVGam06mAuGzOmxc2rdAW1skqoevejiVCxd\n5sAMQr53m4cmegyGfta7qwnLkZsvBXp8nDYa/qC536y9W12v6KOUDGhSajhY\nufl7BB7Lf3FmGdzOxGrkm8yhaKV5CDbTKvDdoTEp8SrwaX7gGoTyWTVkHy8Z\nAEF76GBoH8gxndV5kui9JY8hfFmO08lOcZLoDgp+mBu8eKlXemUjKBIQ++3t\nTNoO\r\n=6++e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_1.0.0-0_1551311984363_0.573982036830988","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/radio","version":"1.0.0-1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d075185946c1e3762a9b609c471aa049dd7636","tarball":"https://registry.npmjs.org/@material/radio/-/radio-1.0.0-1.tgz","fileCount":30,"integrity":"sha512-E60KU0yHiE90wV1eIJr8pEMR8DRfHQ2f5saeB3Glv64GS/6Juxpl54k11Uk4vBx7sd+nrft7su6LdBVz4QepOQ==","signatures":[{"sig":"MEUCIFIbu8oJQaYKDqtmNixg1u1elD0Vtd1gjgxmw3rSM936AiEAoRyteWqKARajZDFHu54A2K2hCKvMrlewbBQR5WO1NsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":636059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXSCRA9TVsSAnZWagAAtDMP/2klAR9Z91ptLz7zfuZu\nzAAbpa3M6VCDsCn2gBKIIkRBlBwYVnCztNFNsSoohYhHjhuvtgHCqWlLFBH1\nwW+wu4FcLq7/ux3zXLhTak+PIW8JoOmd8aIZ8v6Yj7eiEOp06QY0VtD01y6Y\naIweCzKxx8VB87DoWlmfCkUmAvfsf7hMIzjQaaKmytkbof8+ZNQBMr8RCZTU\nk1+VjUbNU81wk1hRFfMeSbqWFJ1psQzF4v7EesHlFTDv8lhTrZ3+OisP4Ptx\nWzn57wUSTMWNTMhUDuiOqjRvh3VUBTLlJBa5nW65TpCW3E/6NeJGXWphy0LI\nPEjRq/WDcQJDv73Ie5bW3vbSQ05yom8MPZqP/ReES1QAsHvV0XXHQibEPSIw\n5XYeW2JNHBtihid6wbLtGUFTAQyH/vECK1m+GKCbEHmZudjQwV/C/F6W7+Ax\nOAHfxzatPqkgC6CQsN5FLqVrQzjTg/yzFBjHPseWJnBYZNm2vZ3ReXgvxs5W\nEFYu/pYKeOgoj0IITV5hcSFou1ZVury/kBOCmHSC9zQ3wCb13LcEsK4gut6w\n9hughxcidreN2bWjW2oe5zveNURuoRoqHSZhTyK2mzF7cYk/UdhFkb5pWE7U\nw6KJ2ElhCxc8OYRxsZn+PxTWmjf5ZhbQA300ZgNMZp4B70q5L86nhqCpauK5\nUcHy\r\n=GGwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_1.0.0-1_1551742417086_0.34624614597495285","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/radio","version":"1.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1374317894b0c424f09abb6c6346be8c207c4914","tarball":"https://registry.npmjs.org/@material/radio/-/radio-1.0.0.tgz","fileCount":30,"integrity":"sha512-juvn6oKiBs7IIWb7dnEUrotFFmEmoDJoY3heuHi2ZS3VBSXCoYs67ohYza4YEQw6B3+nPFFSOSElc4g0DyhZUA==","signatures":[{"sig":"MEUCIQDng8+zO0WCctvUYimHecIbUQJoc776TU7IKcZJOKwvJQIgIuAWz0MXHkPjyq9kjn09pBKl+FPLMme8RhjJl32kH40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":636049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbNCRA9TVsSAnZWagAAaNQP/jGYt1vb+762UkLKchow\nB6xaR1i3De4GvTkbX2zYzuOP7weVR4O3ZregduZU5AfzR/smPRUamrdZ9NQF\nMCRLBkldz7zJnb5yO8GZCEBN52meWx/ubvBqThO3omdxcnDkxyvXpUiH80lp\niJXuRK8nVS71MmojN/KaOQSB394yeartXU9DmNPf0+2m6jd8arwebbcXTPxq\nPjiLyEoes6ToQ8DvlZCM62aouBJl16dxmG8Q1fUPxaGk/AScsVfJ3xGYlGWW\no5LuAoh0nNradbaeoLFxY0AqHoKwcXO+XMj2rjzDz5WdsWBrNVO5TJmmr4iM\nQ/JBnbTTPXTnOc95kaBb25HgW+G6gsinXh3FM/S4yOqvrYKyDPHb/dULktNB\n7DTHuNqPXtiNKqka83ZJm+MfaRLxhU9gdKZkRbtpUihj7cxjRzLHavI9xInX\nLaUsH1XXnIlHRR4PIRmtvWoeiQYyz8fx2lseEDBALMU+1o95KwYybDCo4qrD\nnlxU65DMleqoajG+EOSjUqm3yQp8nz+t38IyQlMKwLhTLg8I7TyHgQoQ5xPc\nn0VAq3tMRBYR2gagiYYEPyB4ppDpMVpY1hbdeko1hnEKzHcWMgqxHJm+k5N2\nY6E9JLihXXEOIv8PFBxt5/w4CQtYkuKk/IkkZs3k7sZmVysHwIEZfcv+9BrP\n5lUU\r\n=vTEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_1.0.0_1551906508613_0.3837136083013615","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/radio","version":"1.0.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eebc6cc56bfa5bf0687dd7babad31a4731e97a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-1.0.1.tgz","fileCount":30,"integrity":"sha512-a9el4nmIIC40kq5wIkhdY9fQ8Bzh9jmMoz6a8rnlyR7c3JzWrf9lho3NOJZUXccO8Y9sUN1OkoTi+4d0Aao/KA==","signatures":[{"sig":"MEUCIQCEui1C2FFmljk8Wzj/ettKhq1GP5hwU7T6FBJknYdA5wIgRfyQbRKEqCViZEyr9VvyDLfd5HbA9gaCrLttpC/O+gg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwmCRA9TVsSAnZWagAAwcQP/0JRqCagZfjJWp7FXVwp\n+DEGnE3YnAiuWN9ByNR2TxNLPMx78uvRXA62oxvPtSrQoP/sJuV5G0QXzSqH\nET6YaI8lzBJ5pyaTy1x9mL9VgKl3DHyiYrcpGHrGPurX+aGLaccXOoLWTK7T\nTOmuV8QGiDzIlbJB6I9l80KXpK5CWus2bWRQ94wlcx3hAkP2izLCVWDEYu6t\nKBhn56zap+j8uG4aPtrqJxcYZX3K5c+L018MDqB1qy1mPmBSN3HX+1jspUUZ\nMRf9+7TjBJVmBP5O8RVXCuVw/pWWcuUjFPKRSZtmvnYfjrsmdy/KAMBVdYsH\nrlwpCwZQ89sargGeZTHimn6EQfk65gMOvHVeUcQ0zWzRErMbKtVcHrCMzmO2\ne+WWZ4hLXeuwidi1BhwwcKgrBnhGyvR0fGLTqgoXAYsVl1vcJ4xjh5akKj0g\nf9tKHo5fOwDbstcb3SlE7qEqUJbPMKjY0jZPn5MvVBaF6o0FDMLrrIa1F58N\ng09TmuYj4Revpon0+pUngiiEILCngnA9PExq2BUZJpl348dVysFePs4BH2/6\nSCoyrKFGxvtTG1XX60eD0zuu2M3EJprtWil85wPEebsbBRqy3nplEI1HhuUi\ns60dunvXT1DYMv6aQND5quBVjljP/Twa9N++hTV64Mes413CqMVlI9yoVD3A\nPXnG\r\n=mTB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_1.0.1_1552342054132_0.6361969818941808","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/radio","version":"1.1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15154c6c50d39b2b21b079dc2025a822a699e2b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-1.1.0.tgz","fileCount":30,"integrity":"sha512-ySocik+l1fInopaA8hDfByJahv1UywUNtUcG7+hLLOhxQx4XVpUJUIjU/dlvVDYJB0QZQatm2asKi2cYVPlIsQ==","signatures":[{"sig":"MEUCIQDnX4Tbf49wewbHeJ8BB1/M3JnxXJ3EA2xD2wCqiPpSxgIge9ltC8wpo4ToBHEDBZX05u9NpYdphsBKllTHWyCFQ1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzRCRA9TVsSAnZWagAAzZUQAIHau6e9CXR93TGCYG4Q\nDfYyaYQ6n7Uw6k4Knsb9mA3abtmi6PY2oB9z/T/3nLgTtqDFTqwlib3s1BUn\nhuqVc7pbDvNCLpZL0EiCLqLR7Bwsgla1Ce+u3KmZ8f622n2gin2nlXzxBxKC\nqSQMdaaRpcRk9SFJgLggZp9Mvw1FQPwJSRGA1T2kola0g7GUDrnkl/c7I7+s\ndW545aUFA+b77yh3ifXuJPE7+Az/moCoXgAmoLg3OAA7jsTgBEW/wLjS+2H7\nmYiEWc2sKcJnGxBYPhGxn6wgNf7YhHUNl620QKCI4VuDVoRRZGqWIX071rge\n3cttC9FUazQgddSIS2lewvnQJxhunDnmrwWFlHb9vaBtIh6I0ap+xOpIblYO\nW2syzQytt6YmZTc2WH3HJKcp8nOwR/VcAj95jjtYWMgQxKL+ujx8hR5MstfD\n1pTpCSRAoOmsQHA6+Hr/xANJCTm295zQYi2EHQxmzmAysFtE4guBrmLSizJR\nV+2HJXonHcZjb3f3B1NSHiOL5QLJ9xtOww6lOdvEHNTKHZeLCsRtAufxqEyO\nC1N2Bj25Z8ZBhBJ3uzGbCE1d6ZGQe28x0XiLShzzgJK3VOslpctjTbwyknPi\nvAZGZhcdqoAEO34fFTNjq7Io37fmvc5SEnKKoOuqvJnEEjeaRD1VT/+ZHVVy\nRjX3\r\n=w8Lj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_1.1.0_1553628368513_0.33920785435731315","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/radio","version":"2.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db6e9c2e65c1cbbb498aba59540f2a8782b7594a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-2.0.0.tgz","fileCount":30,"integrity":"sha512-xk/mgTN7io3mIqpXXcKXLy8izYd8wqdLthB8OdpDQgz25zX8fZ1B2uSzlzwX4RqD2qR2Wzn4N4FC9jW8sm4tKg==","signatures":[{"sig":"MEQCIBX7wY7IRrzkHRIHLj/YBYvqDFph0LbX5Ut5pzCxWwJYAiBWijgD3A1oBHQI3wMFB7+IPl0nhSEcL0ItX9U7V8FoLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb9CRA9TVsSAnZWagAAq0EP/0BCjUPZsjt7xdGogwWT\n+ZJTKCPgEReG2Vm2cdocdfLc7IDJF8KH86lE5UrtD9/+k0O8nS2EB8E9gnaN\nVj0olB6sngLBI/XqpEZ1lgTNzk7wn99qIk8SYyfIjFdxlC63dURaGzwefHZ/\njM+4BbqFe7F/V6Ni+FQASghzvqlMGZdjrjInH2AeACYr+MS1EJc4PERiMzDu\nprxdmBMHXyPuj7HgF9FOomSV54r9b/G9PELjeQbYuTwwXlof8JiO0SvQxyKO\n4yi17hDBhXLXdxI1lFBtdbllgToRePsv7C9xRTQrbqfzINmlvd0JcWw1Zt8Y\nL0E4VeObJ3x0lnMR7KYfoUUQbjTF0K4RMBgzKR2MmoUGRsCC73H3YW/+6QDn\nU4Yt4oOPyreYjMMlIDrdGXpZ9S8Gnl/mWWty3EyCbFydVQk5X94EuX4COgq5\nzvYu83VZWdF7NmLn8thIK3PwRNyeQv7nPcymAuuiKbG+JsFBq7OiJLQnpvrL\nlh79UfwyWuz8jZHDlsIZQpj+hXcEOE46mqKDWapU5Bpg/9GcJHGfNFLK7s2q\n5Pu0n2j/6OJ3uBFoqSXU5M89Vn+2xX/M7AoOVOtaZJWB/m+4xwlk1gpJA+O5\nICtk6Rk1X4OGSeKpQfhtajjt6REeWtYsAYjrx3Kh6WT3bqeDNpHOdG/DWD5r\nZmtJ\r\n=cCIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_2.0.0_1556559613138_0.5835110618273562","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/radio","version":"2.1.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e20bf724bfa135af817b9b351defe6bca3ffb04","tarball":"https://registry.npmjs.org/@material/radio/-/radio-2.1.1.tgz","fileCount":30,"integrity":"sha512-srbafm+JP4HhfvqLKOsLaIH1L67Y2EDfmeHbkI5Ag2zLsLLqGT8BI3AtytrOeg9xSvChqex/Bg8So8+i9FcalA==","signatures":[{"sig":"MEUCIE289cubu4hAIAMqOy3V4QhInjKvQm/u8w+8OaV9xZZVAiEAntPXJD9bTAwxMPg7MFf+bQ4V7On89StYSE9ConiKtkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQFCRA9TVsSAnZWagAA7b8QAJwV2sFR9FCO+Rlyqa4+\ngBFN7/Jf7aCB28HcjSv+OQLZMFIPO3DE0W0alfZ9dFs6zsazhuwmzaW5kawC\nr1+w9W9wibhogJpvhZ2usigbJ2QFzl5QXXDSxhNOX8KwlcT6RcnWl5WBAjWx\nY60Kx//nOhPu7I+pQy7tLyqMzXaGigCwPu8/VAZYFPGBVPA1EmyVUgeCUhfJ\nzQtKPNXXA5lyqOXZM5KfftuiXINTSFNl9tBSiwXo2LXmtJYllYnkC9/PkRNp\n9g+Dzghxxf79X983/H/7FVBK73Sh3cDD9ZZYA/EVjf+6m8W0ST8CKlRTwYPM\nXy2IOenWcd7tigXZ5KMrSm4KkYoKh/im31vk7izHIUrGFJZMEtZdiD20F7ef\nc22zMGgQPd9qpyFTi3sJuKdovVsbSZTqkBfRUC+VU3XAIadzepya/KA+ZB+i\nW+rNY0RACSt+Z+AMztX/IiXXuGcqLZ7RLG6Yc7cZpZ1exzxSO4ZFH6XvDucm\nYKnHyvKdNUFzbyppxfhIkbjpYjPykCVTgOhNyVgwzYkAYrdorrY5uHxS/K7T\n6HA1Jko0EPHdWEitZV/WqrDJAlxfaGEsMxdg5A+Vc7uTCv6GP02j95MY/UV7\nNeqnF6mvPe7jzGivqnza69Sr04vLzpssPH3OZ4OP/PZSC8ikOBx/vtIniKlm\nN0ns\r\n=RuOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_2.1.1_1557509124424_0.8080279775626018","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/radio","version":"2.3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d990edb88a3aea610895d11591d93814faac44a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-2.3.0.tgz","fileCount":30,"integrity":"sha512-l22cFvA/cZj/tsyDJVk1xayXGUTFFXp8yFe4SuGRW00/hNgGNF44rOSjN5H41iPU3oD1AreQL8r43fWW4eMH8w==","signatures":[{"sig":"MEQCIGELvJ7FfUxgsyI3SYkauHBymIUR0DTcejaaMZqvjsk2AiB4mhnFdIMHTUJu+Y0zLRe6rHf4OFBoxoUYE0cpwAv76w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abxCRA9TVsSAnZWagAAXv0QAILvVIHRV+cSVrwu+5mq\nrMWSjI1hzqc9TWQPz2Px2Y0UZq/v6X3GmOFHkARqdMtsnhC/6qjDDHvg0PIh\nsOepamYURRUJiAbFtP3fT98Syv2cX81kqTDnoJwLTUmKFH+hQc596Por69Oj\njctjbZg0z6fd5zjU/LYrjtDFZsmFXf+umWorAf6Qbuc3oIPXoyZCUgd63Z7N\n1No+38yT8G6Ty+NwhMmx286cfTbegdzJCr3D4bGoUQ1MUSVV0lA3YLRHPqcS\nD0PSeplMI1/5bTzVwGKMg5P9tcESk5Z0Zz1dVFW2Zfx7pijSpWqKQ7zA0d1A\nqFFy8fQ/MIDs3DTRkaf+0Tb73YLJG117W+EXDyWbmH1TyCjytXs7Qlz6vHB6\nMjkyHJd4D6DcjtL8A/gS682qE4X74Oj2wYXeTMA/osOz9hYvPhqOu83riw7B\nAPmK0YC7QtwvaW7zNGLktAoXGFNjdijzWhuKwlZywDoD4mRv2nyIepyKdArH\nzT4Pd5++eA29BJlG4U1tVmLRTsx6N0OLTfIF9x92EUq4gN1cBwE+8wNPePRC\n7/d/VZDs95qFMuCOxx5vhb1BdCjB96s2tU9WlmFLrIv1hkAA9kcDy16gGzO3\nkn5vNwB2PDpEUGN67IGesMWuyGVQ3GZnAZuaJy7oH5gfNPJdRHU0+c43zoHG\n4xoD\r\n=AAQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_2.3.0_1559078640467_0.5436684855975538","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/radio","version":"3.0.0-alpha.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f42abc11e3244ef03e6951e82427ab360af8a3ae","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-kZeHlzFnELo0VkQbAY5qurAaGSCrmOVUz5g+G8IpneUhbiTv1z+95QNXBZOyFTZSR7SLy7FTnwLcB2IT6CkqbQ==","signatures":[{"sig":"MEUCIBpwDyEQHbn1mNFVzAsY13VeUXO9odcDG4jigdWN6aX9AiEAlk98D24rRtv4LAEAIg19I+3XzMdr7hN8rYtniADgu1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpnCRA9TVsSAnZWagAAfXsP/ilqzSctT/YGTJlRrC5A\nNsgZ/KmSVrdXNAc/Q2LgWxRkEQREaMdKOY85YwyR2MW/ZBWqMiKTm/LP/Qnz\nsGUQjoNbfTMe/NCuSo2mxFkwUFSScwH70LcJVCeuZcwIVQaIUUTF7dsoVk65\nDXx6v7o5qifEfB78N2uRrA0xxCGXIWKMS7eB6WOK54AIp6WyqG9Yz+CBKknM\nx+82Sf0IDFwSJ66pfmKxV2CnS7J9vN32fEk2hFZrG5YCetdLsQhI7pDlhoKU\niHEYy0VVxFLgG08xteXRT8gNdUFNmf2iZL9J7t+Ohb3+q3CzVDDsFiUoOmBy\nwhkVlN2bjYht3QyMW/KeRVNzQz531u57a3suzJJaFhYr9RRgHI+aLNrHCXVd\nhnLTTaxEUjDXYX/uHV+Q5HjkoLHfi92RnoJfbXRbzzpIIwY8WET7ji0EXQIc\n/KfxnRgvJRhEtvPk4jg7Hc3yen3cVrFXgV9IX5x++cIlMb9EorPwb+7WZkeo\n9lmWWyZqO0lfkPT0RpWv64oHpDyndKRJCplbRmEykMpUyiXYDdqhd9V2o5p8\n7XX8XnccmEM9FNJ2T9DNHC+7jbAqMstKCl+wn+ZC2s5gkq3ZVofiH6je1o/N\ndKawjOF2UfoF3oYP0MbWN0kcPv10tOFE4x2dH1hf8uXbKrLn3hngLf/4VqaC\nqDDu\r\n=G6yq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_3.0.0-alpha.0_1560312423042_0.1426566329234682","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/radio","version":"3.0.0-alpha.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08bafe502bf09c0a0fbd15adc408b2896f24a6b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.0.0-alpha.1.tgz","fileCount":31,"integrity":"sha512-PtYsXnhGZgg6ncK00nt/lk0WSyXifyylPYX61H2L/lZz3FHHSjFuOqY/Z558Kt+Bh/FyuycvECe1c6+KgUABkQ==","signatures":[{"sig":"MEQCICpnWzeG4VBdVUAIwW2GsOoiYvWxESfMs9FViyf4V2isAiAMNPBt6n82jGAzwxesJvqSJEZeeEQSt3lswVZBQh+79A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw/CRA9TVsSAnZWagAAzTMP/0Fh6CxLUkzsIzzn426p\ntdM1WawnrkRq96e7I1oOMh2Ze8XJ6/0ek2cwmhobN2v4yKFKAD2nyzrUm1Bc\nMmuYCOUSgOudWQH3gqHRmOe568y2hwGnEi6AjmaYffPXM32fvAFG0PC4xdwj\nM4SM5VffLgZeUQBbuNuzjp3S9S06X7gLsrek7exHae0O80H5I1Ex6DVSC/uj\nm7lOqjY+uIM6Tqm6oY0Zw6d/Rqn9j2TmsKYXXiPz/TxpWLgPW5G9wQYHiKoQ\nHnVVnxDB7Zi6nQBRY5ifVE38Y05fe79OKv6igANjjgbJIKhydpEkEgM6HPvw\nNDayribAhWCOYm+rF4/svm4DMhUxgL5bXE+6wchxLvKtXkPSLPC+/Vovovwj\ndZjtZzPjhfi/4j3mhViKvwwneSU0P5XeJiKkedt+7+LZWUtGO/ms/KI7gDsK\n90NUd1OOdwRxz855lhSlJjHQTMi5fQw5dMDI1uwy3Uz64t7cowr0L61hZ+iK\nJHz0xVhOqgMu6hOrsPa+9/3x5lracHnRn9auNNcRWoo7Wews4IY6Gj4PNfN2\nvXKVwDtntr/YVThWmLW4Rf3L11pQNwAbPq9Hy2rAvL0NKrkBpamqmz+OXTN3\nbDVTr3jluppMa2qmiooy0otbW0zoGm3a10GZM68u4ruTzcBuiqzlsHsIrtVT\nP7/P\r\n=gaEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_3.0.0-alpha.1_1560366143073_0.07799073334807871","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/radio","version":"3.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"896f58f854dfa3efb6468df66557a097c78a3007","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.0.0.tgz","fileCount":32,"integrity":"sha512-Zo6TqQkfWM02Rstkxph3OnIOBHpXeCuI1U3KrBaqGiv61/RBEbIzDQ161aQOA3GoDRJDSYeypOjmRDzjBkR3Lw==","signatures":[{"sig":"MEUCIQDHVtABX0Pvw7mO+APDv85I2SM25CavFmah3NCTKLyUYQIgWYzXhR3CGQlIaV0IQdUy3oPjReS9K2Svn2BQvmb7z6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/2CRA9TVsSAnZWagAAqW0QAKLarb9o0K1EE1vImfMe\ngL2boKzt01lBTkxnR0GpCpljFaLh7jxHofEOwMsHU07AeCxV3Z+8ljo+GsdI\nMea0I+BFW/gT1TpfWj1iLMyD5dt5S7aUqfqDvvn2IrFZx+AyKDtEDvZSC60/\n7jQOwXUpsx+GE/700X0Dly+0j70+GSYN2jYV3MTcmo7UvAFruXc3fF0aR28f\nTMcCQsVgTIxIW4dV8+Vg2eKyCAhL0uD59nubZYI2DwpNNllRytIGmgWgc3qe\nSk4CvwCApYzWAUjavIbeE7bNZ8kfBUsErW6baaQ/KTmLpR26MKQo1l/ji6C5\nz4sUvtvAc8dQi/FBO8ga1mvo8/MiZmAdMdGpgowahPrqxYG4/Vn52JvnHKSh\naXJzRnwQ/dmgXWhIHhnz1pPLEQSIQ4VKssEW4Aw3yi9WE586BHdr5FvFS8YH\n1h/NIUFf37pEmCP1KdyERFyrr0iYbldh/6TJmLBEF8pT3ZktL+EOpTProPlS\nRk47n5dKI9A9R8LZbIV+eeTJSubnmBpnQ8tVDUf/koD/5jdJZAGOeexRumjr\nOUkNjwuzBzDi1FN0XTuU502iOA982FHMLDtxcRIlVVu7snhB5AjFzAY30psi\newSzEqtaFuxuJmrAVPZ7HnbW98tMiLiV9f/qUnZG6QqA9nfT5Gp7uhDbpdOI\nKJFA\r\n=gylo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_3.0.0_1561501678330_0.18874561856798366","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/radio","version":"3.1.0-alpha.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c73c66c55196b967e5a2440cb6dad9bd918a57","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.1.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-S1F1hYZXgGwCYEsRjVUe34mxrqnHsIGv4yBXJIN1VBG10dg0kQgUjkU9n1SqkN6/UcUMAxgFL/1hbcdi/Hqslg==","signatures":[{"sig":"MEUCIHZC5zRMjrCmxoqM4OfLNc7N4fs5NNBrd6x6GjtoES3uAiEA77wkNfv3cO8fiGvS8k/7FIJklifSe/TvqEqYRTp5peM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdExCRA9TVsSAnZWagAAiOUP/R8GwaPBS97BNTFUvvmd\niIQw7sAg2h9B+m6OJlbVz52Lfc5XdJmmvCCzMUEqsRX2UKa3ul7zOcv2A3Gf\nTla7XtMxedfPc2Lo6II/HDvfvcwiHeHdziek+IIXW5iAVZCTeaiY34sV4n8r\nTWWqyga0t92IP1ft7dB4wA4SX28F9F/Y1Jh8hB1r5c6HOtsLDVU1yeoWIDaQ\nbBwoKvSOsZEwkwGOu7vP6D0Rh6F/QtZCxv/WRGsIFh+EUHdG/aufDMV6eV68\nwTQcqUPQ002d3FLDT+hPmTwGrcHxcRLbShHEzJPVVqvsa+aDFyNtgItIZrUy\nkwDx0WEvE969G+QkJkpaLMWUejKukOQo40u2qcMdWN2NHWvja6akrOiXCPBx\nv2nnANN1LJ6kJxQmphPGfgThy7rQjky4BqtzZmbakE3k6DbvEQNlOH2qLSl/\nYZzO/5s/M8EP1jfFc9q3IxfUdIr9iDmR89WUWlQT2D1hcC19qQhQ+/eqJ+Bw\nfrg10GnYljKKWztWHox20sUwKJPYcDsKhf5TvZtQe4xyqvAS3P28nCF0rQzA\nkF54MeGI5fwXwHAQreRcQ4klNWtVZogYqTV9r7HU0xZsqAC1yo+x8qcA3Ht6\nATb4VOPxbq6MdnodDG+JShil5oe+W2F7Ge9vnaHSXwqWHu8zXa1oNsCjPKgv\nfrAb\r\n=Qgvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_3.1.0-alpha.0_1563283760396_0.2064350863110329","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/radio","version":"3.1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4bad34c889a44a16e9eabdddae950d89b057106","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.1.0.tgz","fileCount":31,"integrity":"sha512-et5M32WoFopJGwhAiE6rWkgPHrkQLr+B4sycPJO4u6wBAqxX/XR3h1qyOU52zH7aDwPbK7hJ2/GCaEHHKWrJ1A==","signatures":[{"sig":"MEYCIQDorrSMHxrYmhtW3xC3vkZm6mL9kD3+YAN/VEPNWft84AIhAOmaAgMpUh7f3gGsvslLZ1C3vHePHfe1OuGZhxKmQsWY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKDCRA9TVsSAnZWagAAXYQP/jtWApxuzMqdO0xu24Le\nkaMjs1DQwtgOMTGo7rs38spPdMB7dg7qi8za4QKwLfO8vPJsOyMRJx6trmTw\nY6NbtHJVAQog33YeOVAJXRZbtE7VYqr16Qd6O23MmkM1vYTogbxWhXo7rbCG\ny8uPsGEURP/WrhRZCh+tFTBPN8cp6002gOZe6A9Ffco4PqciQE5lpaPzcgkR\nk7QI6tC5SRwktsL5rGSMNKsIgpyqzEzx4WxErn0PURzTsFou4Qog4oAV3n8i\nPxt8o3tTkv+Qauyawko94Bo7HzMds36i7JasWYJVYEsi8TsXBXs8Q/qzS3bt\nS6/qpvJtCv1wA+v9nCNtRH7iIkTCHE5nkmefokIS2dteHpstcSJYA5vYvDkL\nVt22XCCIi9qzzgiCt2jbIr7xAswTYpxJG2mflFEYRTuNZBtVZf/zQ3i/jXkZ\n58zhNv09H5uYkW8mx3rs6RNuanT+AfozwbqnaGmzt5vS+dHU7Yej9ccqmom8\n9Km7oHCEAMT5XUaDWJJxaG9S6Bpti+L8HIFGhVrcoNWqGQIwxxz6ctmoNhLz\n1EyTNKT1Bc0uXZzbA4GcjIhnuERwuHnKnXcLz9OWgNtcXeKQWD49pzXjIxZf\nllz/ea4tnO/N30jQjrLsXPthQaAz43usYDfJgPf0V4ThwJGdiKbInSHKsY45\nIiYT\r\n=mruf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_3.1.0_1563832962920_0.22370402899227826","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/radio","version":"4.0.0-alpha.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a042ad9b41adcb67e06db1f044619679c6a7de5e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-WkPse707c2xxb3D+u01XJGn53biaelpBCkGlvTfHmb8DM7ARvI1Jg+LKnt3RZmCGVe/Zur5nuCP5dpkysqK07g==","signatures":[{"sig":"MEUCIQDoPX2fOwtQbA/2Oo6NocbiMWjcxAZjOh3NycZAJ/D0gAIgW+qGXZT1rK8B423tdy/nnokqvHnYObvM68kavbCkzTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":325474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4YCRA9TVsSAnZWagAAU8YP/2ZIzDkBCG9LJdtH8B7I\n1N9GRx7MWAWjIS2tDFbSFoLNRhqsMu+jxY8Q/YAWTltWnqsEPL2WcPz4KckX\nSWMB/aI76BbGZDNQErdwwcgTTSOKFIUEE6XBp1WAt+tHoQwO5QgibvbbphBj\nRVuwI6/5dt5b8RbHj+1JiABp/u8uNddL2u+PhrGKgZSTls4JHs+7M6GjXW1S\nfADAuTF4rQ4HAFKTCTcVMljB0MDW3rYin97Sp3LY3tGvsVtM6kSehrTouT4x\n3JkafFitUQw/l5Ri2QVi+hyXQj4B9hho1sgoGOXwXJETEo9Pr3q2q2EaG1xW\nM/3NARuvYdC6aqf/+5mW9sFq9t4NLj5bCaxC0eL5jaFKMOyVjlp5hSZ9tTld\nlNjg8+zavNsFE+zp6Lej2zVhcS5GB/ouF4Ct9MWU0oy2FXtdu9GeKtH9UcRa\nwyqWjF09RZJehXwhGxYkxNnOai+RZMDiCMt/zRrSAxQMYxCfDOwIJ9n8i6xo\nEblmKWDvNpzgFCaoDUVsmIc/cH7GGaDYlnV1bsCb1oCKo/Z6Ojy+I9klQ2oL\nhcZPjD2woyV6A5rXth77GgVVhydRWmGx3Z8fbJpgUZYSeuOxm6eklyohLEKQ\niJDJVmsqXsv5CiFgsd60tXuRx49lvbtvFwfC6YH5GWkOKX+VfNKuDWLR+A45\nw65y\r\n=UH7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n
\n \n
\n```\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-alpha.0_1565212183628_0.684987015220786","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/radio","version":"4.0.0-canary.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fccfc2287a914c9ccba8e78265881e0b1557d519","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.0.tgz","fileCount":31,"integrity":"sha512-H3vHgoljFmAD78BYa40OKSsTxuS/bhVoAVUPU5ruhCzDDwZ9qMYm9zeRnESSyMASuUg+5ovwHD6xZ+xjMJa5yg==","signatures":[{"sig":"MEUCIQCvLSwyJ+HnsfJjRaxYk7VehhgiTSfu+OZ1uoF4Kb7DlQIgCEtPz1QQCmG6MlKHpot4eFyYdYLF+wdeYkmXgLt53xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEsCRA9TVsSAnZWagAALQcQAJ/GEJr6ULn7Y/Jo+Xt8\nEppdLHOVQMKzpaiLA7iuBq4SUGZOtAgdvkJAeYV/PYeidj9ECMLRHVVP07Wk\nKfz0hItuR44tSbJ2qXGy5IaZT3No+1IfPAghtX3k/HuecqkZP0qceUf5zOmV\noY0BVpsCXabaPIUSVSItAVbmsqlOC+ZyeqJiArJiT+o3XqBiXueL9g5veHlJ\nCt4pVbQGCHhxXCn5rU1UQ/PG3xshTmXr5668uRfvTDK6TfMnNgsIhICdnU3a\nCs5KD5MSLa4SOF8kNx6Fm8d/b/QFz/DW7zLjsJQWILbd0sXzDrZp2QDSOdH0\n+JXlS2jTkxHHSV6ABbog7uRlNAlY7bAXfLC6qmWCfpJssCyMQ6OnbhSYFNOa\nuUaz6gTme4W7cmSVSVUvdioY9fopKhls3Aeduj3QYSPgDB1W0y0HJUJhgxeE\nslgsp9KnENUcrIaa5oppgdQzChubPNb3XEAU3s4BoQYf9S6y5bV5Z7ipjH82\n4eN/YNTi+aFaBNiptFiExrwwJG86Ncs8unPpUizU0/dL06SzBpUI8kr3vexn\n4kdXYu7M5Vi/biT046HpMsIZ8HkqBzVI59daR8aYa09vR522CzpsmqneDBSf\n5+NviMQ1UTlIYMq52/mw8QCVee11g7MAJLMFwQMXAtD2N2vQ4CUGtQiZweUD\n+sQW\r\n=JaAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.0_1567658283824_0.10023743759973791","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/radio","version":"4.0.0-canary.1","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c62311065752a83f5dd6423e14c8bb3773e4775d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.1.tgz","fileCount":31,"integrity":"sha512-H1TvBsZOX4ETzIaENtN39r1I4athrd2Qsj43iytSYmjYhyds2IL3PRrInpubpqK9cJ/YkVXDqIZEdGmJht+Yaw==","signatures":[{"sig":"MEYCIQCe87lp3TY/nDhmnkuqndYyate5XGNW0yhIEKmT3N3PfAIhALFvedSPTYzy7QsA2PlaodbzDe2YosHqIw22jbuR1w/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":345637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQqCRA9TVsSAnZWagAAoSgP/249knBm3bEnV2ChwU98\n4mctZeEfrjirLNAucrV8U5Kpnhm87mSo6QXHwQkea1veigFHGBo/S9BUsy5o\nq0xfQj7mEOB99xqrrF8PJ3xZAy+zAUebXBMVU9Sgmznt4ookJO6n48NyBCaI\nkywcoCUUfWLWLhP1l06qY1hwlG2gYRxQq4m6bRIHQ0JVUMocSwWDIeKcwScj\nPvx4dcfw1hhvrQTQ0w2kHwsl3eqkVcRuVSMOXr4pFx7wKkzRho4W0l4vTqIT\nxvH0m9P2P75fnCbEX3CQ+plC/gEGVGvPN5qnaoO9sUIB+lil5eF8vCTJxCWJ\n6UL9W6mMuYSPmbc6t337vzUvbdxZfKGAAd+FLKv4wRC7ugsk96szr/M9UYnD\nctWupGplDMKJc0v0zZQLJiEquoWAGfvLKKf71eS+lAHFHZnsBYg306LJTJ10\nPJN09hDefqDWzwiIy/UkrW5SxCq8NkSHSdXm4t/KUnvkSYvDvzVEyEGKXgQD\nZA6N17ufs9udBoNTvSviV2V8XAM5H+AwkQQ7fP12xLJFH6FwRl7//eIhwuM9\nDVA2yAw9bUm7YKDMz9cxVuzrkgTJLNRe4ZAo2t3FIQ+cGMZAdy/VWjogPXDi\njdf+VZC7JPTrZiEYYeTPkdCjouVzyqJ8CaNkPAlV49ULO6FSHUza/e02DkHO\nmKlS\r\n=RbVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.1_1568060458153_0.9167656644320501","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/radio","version":"3.2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3037825653b89c63dad956c46f9c511f598aefc8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-3.2.0.tgz","fileCount":31,"integrity":"sha512-TQeaGsCyIkj1zruOe9g4Kj4p6T3vBRyWvVT15xTbHWBSkzJw2L917EEwIKxQtxqps3E7WEbzkBh0jPRZj8CMVQ==","signatures":[{"sig":"MEYCIQDUN3PZOSnqcRKDHMVwzdNI0zvMAcUZYDgg4ISSP50GxgIhAPku/DPssUQYT0Pdm1cnpZcho8u+N2CO+A2/Q5JMD6WZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5cCRA9TVsSAnZWagAAzIMP/AkkZqg6HIVAGgxGwibc\nv6FJTRW9OL2NHILtWK8ikYyfcOjf51fUgDDBYelsRXlL1/c2zPJ+fDCJr41b\nG2QmJQePB23c9z427ft5jvjwOhJI2J4BWETRcDc+xh6HOdRtfgnBaj0nBWvw\nfjHOcCX1nWwmYVia/WDGyY3YWzWjUUrvv8rEQFO+52erRKIfG6ct+AMWX2wS\niXeJex/pAZDpY2+3K/TqQzqPqcDkOh9r5A7/LfbsIF4Aeib+1624ph7U2Q9C\nkvzEi5hRUs/SEsnCzcYOOFacY0eFHcwPivCG19dP/XAwNbgdIm90BjlScKpf\nCqYVHuAcrWLigPHDVX40+GhAsMyVOc7UKNIq47w4CeVI2a2kCaHbicSjt9QV\nyHrewsvVTGIZVXLQUMnxpBk5+MgrDcGHwYFD/bya5vjCkkFbuOk61DuQjAl+\ngByTgnOoLON3NaTuoNdKe+t8sUQRd/5S0YBnCpS5HRMnF1cC+jIZG1RKKlm3\n5kG1/By/AYam4IIGKYB0LtJ2DL2Gh4Pan5J53b6ptotVrz+UbZTSS1jC7yKD\nyfLFvdoDyebDEcsQ2PSck0MI1jSzlQqj4EsLA/LwfIwnusW6TCT/MFN+Hyb9\nLerLeyuCySb8uDQ6Bm/TgyoGb3gO2y1pFdAkkVctNJA47vnCwDJW8nNUpAUq\nTqfL\r\n=hmmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_3.2.0_1568325212291_0.48058323527153535","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/radio","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d34af6f88793f9ea498098f14e9a3f07a99efd05","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.79d881baf.0.tgz","fileCount":31,"integrity":"sha512-Dn5ipNxc42suv1T8xiyOTJw2CbKx5uQ/QffftQY0jX1g3ZtI11Zwl63fBjMwsoXP40Nf5zPKDpWGqhiuH1uz8w==","signatures":[{"sig":"MEYCIQDqVq8V6YqJZ/0HG0GbXjlUZd6qop7LGmQSntMA/J9DYwIhAIpjA05RrpeBMvTAZ6HC7QedbwZPoYim9H6RokSkGsDk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev06CRA9TVsSAnZWagAAbXUP/2P7RO7h+R+Y2YZ3Fmxw\nXJEMCnNlO1G03KmnB34jg7ofn27A+1ZIOH8BAKjoi8B7+r/dO2vv2Q10Oxig\nnmW4m7qhrn67SSXAU9qSfRSLhO7nTKjkXqD0l235dcGQMe2v4y8rbZC4M1MF\nQaXL7xjlQCTZsiucgQnDEHjO1ppsMoWQffYuqMnC86tH5ilBEQtaVe110zKn\nHw5rE6jpNveSJEDqWQNLC4m7aw1lNz5e51lXnMlqkp0qACgNLIY6NjB4AW6O\nD5fzWRcE/i1cBEcLfK+BR1z9xc66vAAPkmdoaR744WW4Vu+5d+d+97znUWH3\nlP7LDAEXnWt8EY8SdZWc2dkvZ5kMA+i2KZj+PqVe1GgnCO38NSKRfv+xVKVo\nrV7GAas6e290qnSiwNKkYagP/symyLiiavrMk/DTRKZhd6IcEyfM6o4k4ARP\nVM6rgMcasAsZuHfKHndnNc99os1CbQ36+/uT1fNqavL/VINoUn22oARfKUWE\nqgFuCCgDkYktAO5GCr6RNXD0i+iQ1Iflaeci6tyX7/nYVUexAsFYGw+ntNbo\nFFbktuyymxzRiRIumVivokDc9kDeQcZRMkFbT/5c2axGNea98yO/RVN9v8Af\nugKmU9nDGwfuqytZUCRRZ0hymh63o2Mxc9CxqqcBjULmHWcBVAOC6oGOlv2B\nZGSF\r\n=NteL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.79d881baf.0_1568341305789_0.015996766026143305","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/radio","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ace187bea8cb19bd5f5a3fb32d4c8c8ec03d0ab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.e851d4f40.0.tgz","fileCount":31,"integrity":"sha512-xUxJYdxDcAdrd68Cr8os+1ozZk8B5QZSB/uFdnByw1r21wIxK9eek7nRz8Q79QSZRCpDpbU/N0dE8pSlHvtN/w==","signatures":[{"sig":"MEUCICY2RO/pRzsRvs9q8CvYo3LEGENxHT/oHN7F5rrV+jjjAiEAnORyLfqG3/Wh7kWYyt4hVslBQYo6abSlXwBi25bjPDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYHCRA9TVsSAnZWagAAnagP/iZBttUJXEVB2bos86gg\nc+MPTkdyZkeo0+KzseKqP72JTqguSYt+8Gj32r9KenojaQ/1as0Dx/7u8ym1\nisOcpK8l/mmvt1DvLPX/+IuEjnxxFIzyzsvJEs27FfV+05kVLL99UGaTXK5o\nFs1prtmJiDkFiwOpr1hKQb+CcayWWKhbUuL9xtx3SrKEb3MIvYnk0m9VOvzO\nCH+cYtmRTyZ4ZDXeLUas8/dycYyjQm7KEpoMWWQYPpmKJ9gJSg+J9IY8pO43\n9owaHgCrcTA0dcGISkmYrxzB9dT021+YJpsFVbfyvcLdkcCF3ssJ0/JA3iRx\nqRGq3XCQloUNGZj6FXvF+qKGOqdM37yC0c67I86EipaRRL283LbkdKj/JSNQ\nsJ5RNCBrrO31qWjN9C7Pwf8/L0AoMs5fC21VHX4wSagshTHZHsPGnzRKGDeI\nNx5I/9KnVH4sgnLcQvjrJYcqPPl0yI0RLNmaFYi6deWnLj23L9xwh5xpZLqc\nsb1mF0zr4JGmf+TZYDeruIwB7yBXNrD8sefQBmFsQRQi/sIFYaz9ARk9ntU8\nWs9XrvH/7VwZvf4lFx/Ywe9YXZRip2syZy87nl5SjMzXDdw0W4XKjZkOYK++\nlPiiRd24/HExGM+6HGXvicGvIL0AY2kDjBXmm9nkFTtV8Hf6iOTcjxujrB1O\nZQtN\r\n=9Xoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.e851d4f40.0_1568347654934_0.1642778504029363","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/radio","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3afe2e4346a2be967555ce90425e86ff0786b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.905884690.0.tgz","fileCount":31,"integrity":"sha512-GcKw4ko5Udj/ccZysRKNalTRZOzAkMgb6INNXBWvXfLKcuAzWO4v0tZGzgg30bEhIll3LuOEkpcWOvVTRFvkwQ==","signatures":[{"sig":"MEYCIQCKl/anB5E8jZLRzYeUUjp/2pEpzFEUfJIj2RAIgN8xbwIhALEPXayR1lq/s45lp9uy51IixxlsQkAi0W1hf+cHI5IG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9GCRA9TVsSAnZWagAAr7sQAI5IKqIDetjgreoXz31P\nhqr8pLmRZQZP4JwgjEMU8cOZ7xIxKa1J256ViZuHeEdAiai+OVz6uAUnokId\nMLxQ8L7XW+lD5tW+/VflbMjtPVmp+H04UwE4X/Oo4YKRla42qQhBhUhDr32+\nb5qTJ7SKgRwXWKJme3gF40kxLaOzNdPNaVW3nrBsgmuwj3LAu4aVXhdujYLS\nZIfAncLB1JETL0gPyU9cWgggW5lydEsmmFN2CYSjWwFNFVkkqca5CmQuwusX\n6yH7ZPeo9solgMFY8JlU4A6UPicnNcb/whVYJVqf59IShL1n+nxHgyTl/ILO\nDZIRV7HHzcMDBaEy9jcWkhH57RSwRUzMt4clciqygP+d3A8uXRufzqUYnvT9\nm741utntYIWyuOgBVBnSkdOVQ9GLXn0aqn1XcCx62CR+M7KJPmbF0n4iXXlg\nSi1VyIzs5lt/bwl9VDCtemBVy4LEURHpwbRgJuzL6WE8JZUzdkY+6C6zRiSq\ncgjfPidylN3rHvArWx2TmnsVThsiL4TB2Qqx5c1O7H6VMqyKIMv1J23FxqkJ\nf6+We3QOExj6HHWjfzVzO8Fq0f+WvmFlypw72qtUaPn+sOQp7pu8kYKBwiHA\nfvm8Wj4iP/jyegICAE2J6dFOGPAszX4nVw0Cvpp4HjPy4ZG3GZYrWWgXNzRC\n+UZ2\r\n=FltL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/touch-target":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.905884690.0_1568677701772_0.023446130912420093","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/radio","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31112934765c50435903cd4d9c95276a4fe39856","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.199534d61.0.tgz","fileCount":31,"integrity":"sha512-+gXxsplbF5TUpPdSp/A0k4OfMjk/LoS4ukHQ00/OuYfSrRjYecGjlIiJxjbucR/CW9IwU7D/lJxXqxJ93xxKNA==","signatures":[{"sig":"MEUCIG8HJfjjbMUIgQRO6J9Y/9QkSvgdWoZ2Sfv1VISrvSkZAiEAwmu0IMFtqYROayMP6PvCjI2xIFSr9l7lcqc9B306WQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu/CRA9TVsSAnZWagAAzcEP/iH33HJUQP1l1onTGuXf\n4O/viwAG23JMyBvR48N/wlHpJEMh2jPzQQtB5NhYCZ7tXK9d0qB5hRXkdREO\nAYbWr7oNUXSJOqnddlynWHMksUioI132ExbRVxaMZpbKVsb74V4COFdX+HRf\nBd5ZDzsFnyNK16P/Ym6/guM35+zo+81r7QdEZ81/Obqnzxvuke6aPWbyOYO2\nYa7OeMTaUiWGA40oO+rEbz/+ABRzno/9UgSLTA6xXPTBpqCF8nzygXUHNUzt\nRB40pAJ1BQqpjoVTYsUjDc46MKFf9s/qbNtXWFczdoPg4nbuz+MEU/DmNygl\ndyCYTsblEIsZUff+R16mxtzBxTXhFgJFjKubBO19zCoXfuyekuUUByRFzcyA\n2iHL30HLmgRE5rfm2a58sW3WImJm4qQk7PyPpG0GUVl/5b+mJVNZSYDiVqXp\nXGJeBUELFbdUibSAejXGRJaWUiUUbw97dITFMpnjMpMB06ZF0X8gs6/yjQfQ\nCJH9xGVJEswHSl5ROmwGtusEBlOgE0a+enLGqbGA/+AJxPxCvCeH6OGuRodn\nATT7MU0vwR4S7CXXu8sLjRlK9p8MfLMQtFv2odAN2Ps6CVbvs+THuP6v5uof\ngADJZzNvOo4JDROWL14mOs0xq2UYJuHsFYxMdkT0/VYDywmRGe88AUk2hvV5\n7m7N\r\n=3rEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/density":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/touch-target":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.199534d61.0_1569610686534_0.6683294414422474","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/radio","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48f0fd55fb7205e91c99085b4756375db9c9dfc4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":31,"integrity":"sha512-3BLyBcxsI8wKGZkF/bORSoWrCpOt5PzTu+qEWH385u8QWQWxuNJDJsEhL3ovAwpbHeqipQXoL4iqBhIPiJT1bw==","signatures":[{"sig":"MEYCIQC8Zl+9mvVHR7LS5M6xcLd3FU0Cvmk4WRQbdePxPLUTXAIhAL7AgccUzH5m94aFmD8Hz+QXdapYCBuHjQV1i1WqAgus","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaXCRA9TVsSAnZWagAAP+YP/1OnXqaabAwHMyp6H7mg\nlIsLphISSdEa9B3rdzE3Q1EsBtVk9hptlhSEvEoducafU1S8ODp38lFLqrNO\nwG98A46PxyHgz/jJt028n+bApr+y34/876Hydx8Z9VLNXgbYRRb+braoV/hj\n2H5wYkOWAIYIl6IjzvZnCs6fqlso7XT0P2X2KXBoh1MTlpIuMRW/+OM3pOro\n+qDgwIf9TfSaRUI0iz6IJMkJqsDep5Gh/3K635kE5JzNvcJeNrICxNS1DWpB\nW3isEip02LL+UdTTrpF6e29b/bidYVR7/oYABxI6QTNbPVaYXiQiW//cJk40\nyUO3AIQwhttsBE9PnhTFuA/nt3ntALVrP0CwRIYEuz1uJOJEJQUkufkU8ABc\nTHa1miZmY/nLoZz9HpPqyPKD8m2s4sBkFdMPqvXmBYzJjpG55diuwnTNSXAf\n5G7y9Ty62Le3iT/bUojdZ2giEzLJ0bIbHbYUjs7aCsxNlIT98AZaQ7jBCHO3\nUKocpKzayxVZs0YOwa1RgHfxnib+QNwen3og0p6aGP0UtPYPbg0eHIK3GMJC\nZ5Vt7wzjHC6pzsEgUeNV6QyGExvxUWV+8VIdfevB6cNwRtl1Pt14TtZ1OKgl\nSayE6a5bYAmM6ptZzeIlxRxLVKonJhNh63QNRoQ9fFAVOG+CtWm06xQHCrM1\n0YaJ\r\n=SKOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n\n
\n \n
\n \n \n
\n \n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/density":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/touch-target":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.22d7ad2fb.0_1571165846429_0.78748036757802","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/radio","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1db5ab0a28b7063a3c22c521b206d6b42bc8e53","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.735147131.0.tgz","fileCount":31,"integrity":"sha512-NRLwGZqL8J0Fkhql654gVpnevwSF2GNZfv9M0iVI94KQyMKXbyY/uC834WyqWQV61AJJRGWt3eOjSab5DLCEfA==","signatures":[{"sig":"MEQCIEwYJlto0f2uPhzKWuXLSEjPwNsSUNMNEuZLBymRCWurAiBC/iyGlt4EDoz5uPZcfvX0lJ32Lgt5hvuPrdPX4sVzRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEmCRA9TVsSAnZWagAACKIP/jT+EiY6rikpzHBq4Nbx\n9asinLdWFThdgqMQXAhzI/jJIJCkyx2f5exutXOsYTX1rixZYx/H7X241oHB\njnOPScw0/HII+tr8UpWLJK2igAxJtRvrHyFQsFShFwXeoQgzKScFuZV6Lwnm\nhH2eE0PgUtDLKKNz3UbMIkKi0ajZ06mdyDfx+bvztDrtJUJ0WuSwQMHSqndE\nIMRSwyUmNTFX+DkzQTjpxXVS4lAPEQWpYK0HzbYHVzQvUkiImOJiIaeORA8z\nKePj8JJizp+bAYwcwRLCFuJckM7VpkndspQWxtcXQaIgGwwkJaU8bGkbBLcT\n41Po35jOpmp+KeJLA1GtZkJlWYXFSuJI6QBP2Fjp2pPUtUW7BMUDcENe1Y56\nMG0gw+t9goRdbJ931Jz1wsrEgCCwsyz7CdqHXA/6RCT9cMAtukVUUGrWIuuA\nUOV5Q+hrfc3PzDJy8VsJR38MpR1X8TUwZv/haDIdcFJ91CF/Ft7QMd+LxUeW\nsCANCzr6v1OKw/jyVS81gFPvRPAMeOPD16Fqb+lq7o0z/m789WGQZKExzIxp\nIsXbnq6vHuZYwTuQhBV6BrUql/STaoBj0kG62WQzxpJ5CehIcVLZZZsAee1a\n8DMrNEhTGL9uymAZhG6cOI68pwt6ItZZFMiM7cgOJTezXfNW0LYE86AXsdN7\net2k\r\n=tZuC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/density":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/touch-target":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.735147131.0_1571189030264_0.8810804791700795","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/radio","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93ce906dbfa5ca9adf6a4de36dfa013f28f95004","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.062ade5c0.0.tgz","fileCount":31,"integrity":"sha512-bZgU/Hh8E1qVIVkHMkPdyjg5El6hN6E6wWlgj0qbIWOwWUPQ/nyRjAMfPsC/m5t4xgwdORGLs61QEDSUxP4YsA==","signatures":[{"sig":"MEQCIFuuA5rIT/4ZCwjQNzrcKTf1IppScV8bvWiMRp3EUTcdAiBFMysDZR97OKvpy32SOG7eQfe3pRwtWkLJr0EL+Tb03w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp718CRA9TVsSAnZWagAAaPgP/1phDJ0JHAAieezYwK0l\nATg8OkTeZelWFJfGjYFZp5JHj5k7Da3QKLcSgELIpe63JxEJI8GPlj08P/Zp\nL5TEmGIOjrVJdWEMIJ4tu9DacvA6pfkpRxJwNPR94e+kCLfNqwDAFikeueL1\n/Hm1ZYA6dvqFxfqL159JlWC+InGX7CXte63okLr/kICfiQGTLT6UHVTmB5z7\nD7oNAgBikoX2iZQJeYrZXhakOcbMeZQ2qX2vANi97i+KZWNqpHlUr7jTr8/u\n7idFbfFGNJkNWDtS0VvfBYEvVu0WMvCwk9YoJMn0pH8NR9Yvjuzql9dmMskG\nvJY5a8Ncym9l41VEoNkxP+e9pVDdXtmkVVq1eFrQl19jvhyamY7gHFzMlPjq\nIVIJhGdc4hQ3rAiP2Qfw25NqcARN+ufKX3o93CWtOAJrEiHnyR6I0WjBoOMl\nNanSY7Q5jXPaviQ1xGFOdedzOKqQtwJrtV4aIkDVZe5/IpjaAVVuVgcU4W6t\nyPMelTLN8E2xxB02UprkYFNhKOBhKGUlyyQA8Mi7AkbZT00A3SKitN3nMEGV\nCByudlTT+PXqECBD+2JvtDW2YGXBCB1tt9ZUgCVdOLAsCkffcdVWk2fe04w1\n/zsE6EDrsMpIuwvDEguhn/rdl2CI6vCBU1BVChrMX7Tr5LVNFIvpsNa7dlZd\nRg/4\r\n=+gPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/density":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/touch-target":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.062ade5c0.0_1571274107407_0.09798481685330973","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/radio","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00416db35886162aa21d2eae545209d9e97e9c8c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.774ad4f8.0.tgz","fileCount":31,"integrity":"sha512-cDmN9rufqJJNvg0O7yvtzxBaUojSS5ie9MVb1q2t4Bgj/cnL3VwtmPr+wNiRiBpq48xNacxYXyRLovnHFvo5Gw==","signatures":[{"sig":"MEUCIB0pe14pHH65+sGZdAgGb6lawsyH6hHzYyD2uLHxOq/jAiEAnKmHOa6Xp0kKFE2lcgLmpi6SvmcZEwqBbVkP535KfOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hqCRA9TVsSAnZWagAAfzoP/Rk3lQmVnkK2HEKAr5LE\nqF9JrZvofUG6hisxyKlb+ROl7p15VLQYozCNwOkErCCzdEb+M1iwDNd+q6fX\nZIY+YQyGb1C7p93V1l1yFrgV0UgpE9EfhZuuRVtoblWxkPM5MvkYyZhp5RKk\nJEc+5QTpao0wweuFX2VIk5t6HXd4agEYeTFbKR+Lki3VZ7x1ZFy7DyKUAzrj\nAvcBCp5msR9Ls6IdHlan+mQ+J4EAKrABFWgV0q7Xix46yvpECAib6b0Qqo00\niezmnkYCPpYui4O9B90ZKp1HXJohWFhZ7uEvqcAs0NK8sHB4UY+9/Ehw80se\nIhoITfMkymiFa6R210imZh+9zYoEqiT9baER6ZAzObz8bQlkk9FwLFIqWBTi\ngjRsVGYrOkXm/tPuexXBYP0BgeEhHwZASHpog6+K0soNRIqkA2MY+kCuxV0E\nP3phap7q//aTa0kXjqdi6RoK3zwzUeG0dysE5/9nNGG1MV0UXuTzQ9q/Qs+P\ntgu1Fx/ZoEfQF+sNfWml+c1TMxNofq8df0/rIDzca/f+MfKPO/hnYzGDJ4U6\nudPyd4x6lsyyMkQBCuZPxMVRv4QCnoq5uPEso7XLwsHRPvWK0QBi7H0GupyH\nnrEssXU5ZDLU5IXOqB8es6AS/IfguL/5BHsR5xhFpjgd/XJx9bRK1CoTt1fY\nk2X/\r\n=Zjou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/density":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/touch-target":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.774ad4f8.0_1571285097530_0.5853603166059247","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/radio","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af7692d02de5c08ea5289918b440fe91c5d6003a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.5916d18c.0.tgz","fileCount":31,"integrity":"sha512-VkpzOrowVaHabZ7pB0ZCSx7W0F5TpF2Y2UeFMwsD8G4E6lDrDwaB/BsnARIWaME1yY36kyEY/ZL+fJni7sz13w==","signatures":[{"sig":"MEUCIEAOvdkRHV/d8DIF4XR2fjYEAKp8qCI77vkYfdPOxwrZAiEA35u8IRKStj7d6MqFZgDroMXfz3REDFtHWCLWf1xKg8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvhCRA9TVsSAnZWagAApSQP/1P0YulzNxPxXhjEaiUH\nYpMMuQJS2vlJVB2UUn5dSOBmiS2yG7t12rRGMAM+6De01ZLuIqYGE0qa+JWw\npeMnZE2KyS8MxmGn7c+PK2wnwxB6948SQwWylQ4qy9og1UHq1fU1I36yFq6B\nXMxp8/3+iAWVCy5TO0OR0hvTLOTazsOEr3d6aNfy06qvBwiQ3FA5drfEGJkY\nznsE0NpJkg+5DeD0o2TvZgMztZoRlAavbCZgkYCnyhPVj6vyr4+cAalfvcLm\nS48tmYI1JQk/XrLDMWmu5Aq08tBcUO3QklE1qFJ8VZFQ19+z3NaMVPuoW5G3\nRLcDborNkC97NFt2BgjIjBhq9QpOqYDduguVDFpqDD0NexRqwUHETT7jqcuU\nTMGerJgmvwHi+qw7DjCsqMEPlZNh56OaQG80wnM3RsP5mXXkFRSBoulXkx0n\nQTTeJz7LduOb9u/OzqqHaMbezcavB6+qf01/l5f6Kt7DWDF6l1R5y2dW2dmO\nhLf4GLIbiYZpuxUptFw8id8eFTD8NW4BC0PW2kCTuDqMeDSR7wBih5MSxRYp\nVZhufV6jU+RQccJeo3VyILkNMogLwC/7GC0qgszmHTDCSrw8E4O3EZ62et/9\n2Sg3OEYpgbX1cxeFXHWAoQNhfAOCuVvcRu6iob8fK7JEw+KdpWposOv2pp9t\n6Btk\r\n=WX2K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/density":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/touch-target":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.5916d18c.0_1571429344493_0.010544666011539583","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/radio","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1322d1f302f115a8dd45b3bbde4019398961142d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.d4141c95.0.tgz","fileCount":31,"integrity":"sha512-qFP371ifNA2AiKg93K1W4EUuPyv8DmsCRYY5klFQJqqa3WHpPh23v1r4YYdD6d0OdZmNP/H+OfXefRS0vlPCbg==","signatures":[{"sig":"MEQCIHYeUrLkq0uMjB/LF49MZIRCJvHJPOQCKiA4mU+xtos8AiBj7+rO6EVIN48HHoU0XyJlq6mYUCFnwTB56LuvUtRrzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCeCRA9TVsSAnZWagAA8FsP/0znNT+AnF7SqSpJ9C15\nX0ST7De1bPllzkkDywgqFX/ODY/asbaLt8iJvxxfaYtZMetZNZ2JqscgjP6y\n+AY3AAuryapwLtmZ91wwKXks+OK8WG3Bov5kOb4JA0CHZRGRdYp4ETpUatLg\nsOI6hSWm2nb/XGdqGA5138FCZ9icT82v9W6hYYfwMqdAIZfRTtL+6OdlUvOW\n+ezRnqm9Oe9E6oHf4aSmH2y2mvwaLbv/jtNEZI5Nb5/GS6sCFOWyfeMDDHiv\n13sZNvKbUF/K2WeybdMj4OFq1SkgGcZJxz9k4mT4WG0mA5eZowncqn0wTm6/\n27MR49P0sO1bADjcRNfSb4Ni6MYz7JihN5MmvwGebQ0+sbFKE0DEX+7+bmUN\nkDAnFmSjvzRWaLd5wfTnnXC64AKe9EjU5UB0YHKUSUK0HZn4XSNWXgXBxrz+\np0zNqoYJxnVs5uaqzbu6DeHCRVsZhZgdcVycqvOqjkmYbmYCk03CnZkwKpS+\n+mbXIwVR8m8mPhZF+1Jge6N8z8947qqPD/7JlgI55kM0tSJStg71sOQn4nxL\noKUwKXqmK0JyDLuY6XhAqSfpkKbAWiC5QnzRzdBfTYSQI+h0QDoktetPJ4te\n8aVYhGa6GxOIaaQM288WBMSDzisDpP/E5fnTgTRausVqcMMNhEKmpudRv//j\nezMy\r\n=P5Uc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/density":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/touch-target":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.d4141c95.0_1571881118505_0.8125636279818622","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/radio","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"279b66ca50954b74df0bbbd471cec8237ecdd16a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.2b878b3e.0.tgz","fileCount":31,"integrity":"sha512-mpJoxArvwOpD3xUhvijhhnWL/nXsEG5tH54ByP4YvAUb6tuv8sdCnoFb/XFkd0QlbGv1RKFkc1Y6KGlfW5S9CQ==","signatures":[{"sig":"MEYCIQCFgOueI0VAb8JTx8MShLNqVQ6DbtcfBb7ospZDnVZ1YgIhAN5yrelr1shKR4d6cGe4LXV3eethjY5loUUeNkVq3Qd2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslm/CRA9TVsSAnZWagAAVZIQAIEUNsE5++DoQ+CBWF0y\nJv0YM7cMQVS9CZGNJLYEVB7lY1CSswARUnPqW/R0CR25LrsGJtdN+nNAf747\nsk4ZarnOCzSB4THBQinIhIHPjecgJiB6RWS9NABxBOatf0/GTiEtSseT02Qi\nnxCIFFLEkYq8hJK+Xhgx2FwWmKWzi6oFMbIHDOKLiubArMXYTMndg3kEDf9t\n3ci4wEYbT1v9Fm/lC7nh6ys576ILT0PHPg7to673qBczFstycoq2CFCIvvft\nE9FQqrNEHB+itlNnC/2Sbfx5h4LNrWf5w/YBroMeFhzL1Y4ezneZanA0GOgA\nblFZ3VSHdQFNyWgSc+npmgeiqFb2yP3Gb0J+g4YnHJBEO2371+8tGJgmCiCo\nsx6w8mbwfWkggl3P8XNvaDDtl5qnKTHU4ZpjQjXdxRX8l/yB75uPu9YaJ/hv\nsBIfXX1zRMtXYktlPUCxoAysjEl6U5FsbKL4RFSWB/CMkaK5t0j6y/LxcWUh\nDFWqnzIDSVdSfuvhvGVlA979CkyZMgZYKV5WoaOCAWW8braBzLUYoNXYsLX7\ngyHtIlWGvYVg9JqHBhZy4ZQiWIkkULVsEMrs2NO1XwFrPC+EjXmbjTVAuHuy\nrIz+Xtbs64Dtv4pP7/8yuPKORovgyeBm5ur/t36vt1hlldTiLfuNQxeqXlC6\nAU30\r\n=xgYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/density":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/touch-target":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.2b878b3e.0_1571969470552_0.3936055738896893","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/radio","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"334210848d88ee444f3b3a280c0db6d320d7384b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.b06c0efe.0.tgz","fileCount":31,"integrity":"sha512-JrTP/3kOz/uB+5LHwpmRE+ACD8rvjKFu/4zTmgHhc2DHTd5ymuo6Krucu9rOHiQRGYuvizXq1PPUc2UDOAXslw==","signatures":[{"sig":"MEQCIEl492dvzA4eaAocU00Xy38PHrA1bCwOC6D6vdNFAUeaAiAOop3aBtVZTz9CZoCHU/+8Ce19WCgkjvdOvBbpia7nzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LjCRA9TVsSAnZWagAAd4oP/2GHnHu0HubCnbHT5RRy\nvbKI2ILWnn2AXNk3j/Tw8A3hmo6NmcelAfPcHRPZh214iGbIfD2JfxiH5Dip\nc5wJy/7JwTjgRtIWaOkYSJz2E2AJaKp3bySauRWTsZ1p0YLHPuetwAjieXmI\nKdYYmweg61huVKG5HHYHUIP/SuRMofUni6HTLuVhmEJ1mdrxd9W5mTrqNNTp\nFef11gX0UP2Qgj3wvapHVgFoRE8OMyRAaQW+a+TpYS0gsEUjpuB9I1nydfgw\n9HQ36G2f+nGTvq+b67mIWTVQy986I1C7/srgX0W3PLfCfJCV3e0QyCoWHJwb\nQZbPttZrSgdPz+jragZL98DCpJnDfB8Ys/1bHcs17BA6aotDTlExgkMPx3R7\nxxOtyHXrtyqFaYFgNx1EA54oMso2DzYnx4a6d/akvB95582aJ5pHwrmb8uWP\nLNZxJt+3Z4FULJ3RRDeUOPPeRvQpCY7cP7MzERMNwUVC6TCuZn/5tBzcFdYj\nZ42reKM6q3yBoRhJpGUIJ8ciobcZwhZu3pXUsNge5apmLifuZHG+S0ncfSAD\nVesxsdG1c+BO23Ddfpjm036YY8cSq5PZv0BEYYt3NO2qzHGTJDn27eXYhkxq\n8NbgEV3YFCW27p3JhdJMUdKOxmORFCb3ppb2RBKOYsyefdfs+QrtKeBs3L/6\nCAvn\r\n=+qZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/density":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/touch-target":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.b06c0efe.0_1572053731525_0.5714696123028131","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/radio","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd78507a0e360456d968448b4031767470e061f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.01628efa.0.tgz","fileCount":31,"integrity":"sha512-74c5m8EsDGr9gDBcvYz/fWp/IbeuTT33C44/3uY8fagjC0yPy4rTDwMoQsFv5lVeZahzGCv2kbcM9fvf8dF6mQ==","signatures":[{"sig":"MEYCIQCyZ2NNRCYxGcZWUDZDXF+HcqIofGo43Lhggx/vTuEqygIhAKIq0UlIgr00nmTKQ4ZgBGAhCG1u+FFKZ+RmuS6LjJJB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HQCRA9TVsSAnZWagAAU2sP/22y1osOyX+g8Hg/Cn54\nHNDRDgKW4IKfZ0R0wn92so6d/sTXeZujtH2ktOYbbSgycmlTvgJggVnRyawi\nUeSIlbN3kzSpquWsJUeT5X8YpNEhiK68b1AxB2/x6SGowdO/DfAZmSDlwJVr\n7cssDQz0ZZlxQr2OwDKOK8cJhGz97YyzuvQRq0IdtK5ir1NTpzTZO/rdEK68\ncED2Wm+W4x/eCUUlyXS/uqhIWGCHvafabJi3+wLByYbIRJVCWS8k5prNlpZB\nc+L7XFBYAWSTem5nyWh0LjXlVoSDBrUg62ne5G8eXQn7JMJyFsnE15QJHmx7\nhCQEz6tFWry80Q+B96hBLF85vI1Pa9G3ofdEjRIKDoLOToV9f7zQRBwOXlzi\n3LMT6tE4y57DIGVombtjU1W30M2rUgylkpSNqImFQ5qqQPiCzkxlCg1pfEIH\nb6cXrMij34ETXEBRfBswoazuCFfa4U2GbTrnSNXBb+O5YLslG1pCoE0zuZcz\nz5SfeN3+TfHDIc5UFITwprsxQ6VqgqT8iU/ZLijWdXvBpioknn3m2qkWXjC+\nAsShm3Av7nWc5JZLt5BwpXAQ/KktKu+dP4SIK/SG6dEaGtqHflnQTjV4FDD7\nqqAe6ADwqMUHWi2xqsnlamRbgWbZeUOcwgr46bZJQUd4VA3czONLaZYmoCHb\nKyRr\r\n=bv/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of a radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/density":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/touch-target":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.01628efa.0_1572307407845_0.2720858851475998","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/radio","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65300dea1fe29aa0808f31f7441b88ae5c9e9ab8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.b5c6d66b.0.tgz","fileCount":31,"integrity":"sha512-uPeGVW53S4PP8mqkHYvvLBr+WSJrykmBvdR/vcLB5A3Xn3YaMYzs7zR2rkQ2zy8lb+83Efm5n6B38FDYbM25Aw==","signatures":[{"sig":"MEYCIQDXCxMWoeUGc6O3zORQKRhmMkzTL9ex4S9QsNwAplMGIgIhALbx79jwxLZ3wKd8o0dzJQAxKLLgkaU9Omag7MKFhHKO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1+CRA9TVsSAnZWagAAATIP/RI5kK3xdLBn3ibKDhSe\nUavITpkNLHdK0MwlX6G+fSjYKBbWOWNzrGPcAssU+lRP40GqpI3bpnlMVQq2\nfPKqyrLoCG3alUstkZPGf3Sswq70yExc6OxhRUACEyza/U4i4E0rexrZFmX8\nJtwHrL1Z9KTHotpzwaqkYeBC4EUdKpJ9McaeIzWIXTKkhePwHyH3USk9tRjg\n/X/9FcUkIaKgXYUeC6h7uzhb053RpfSNORN1WSVYXDAXkYKg8P9btcYDIrZE\n7Bau2jOOcaylsNL5XPXdobNphebdarURj+yuqPrJegRdYmFyoH3I7dpaPXy7\nDW3p2h+HTNtXitTcjy2wd9+JGZUsg+FH4HC9RRSkghSPxa+MRb6oz6iH3gLJ\nljnmuI0XYqQf5UHB9In9yC0aMxkfJAUNicsGf7fflZdFGtJ4/lPU79VZxgVJ\nNi/Gbresul3MRa7rf1g2zcAbDgVTrAvFo7t8nJ+IXJb6F21idvchBxb7/Yo4\nniOsppU5W4UFL2DdRTW1BRlLjoOgscTrwiIFKDYXpuW6JlXGz8XVWR1m4Vlw\niDNIJjHTIi2N0C7vj3NpOdDTqdKbT+vy1UyduA/NzRQ/uCJ3k+ycrxFFEi4r\nzWIburOVSpayK0nZeK7PmY3NrfJ6Lykqkbkyat7jj+FIGKrmzNZ1t2p7mJ4H\nRz1j\r\n=OIrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/density":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/touch-target":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.b5c6d66b.0_1572371837881_0.9935942262865691","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/radio","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5ecf2cf95e4e41415da5dacbceb526def6b3dc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.cdf858ea.0.tgz","fileCount":31,"integrity":"sha512-QiXHk1hWRdvxbuUp6iiSj3KER/x2VOKCSd5cH3lrN+Iq5Qss1Lkgq6NiyV/wYobH6GD1P3EQMuaI3o3DIUWz1g==","signatures":[{"sig":"MEQCH0N+IbCa0z5CRQ7I7429At1odvAGLWyr3JIYYQPHHh0CIQCUo794Q17+RPyYHkwRVUcbv02iaaEqQl5oH3r2DQixhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJ0CRA9TVsSAnZWagAANcsP/jvpprXi/QezeXRknG1e\neqa0beOyuMRBdY7kZqGEDnsSH/SRCM6dUnw32DPMMBxlT774SIY8ZB6eKRrU\nAKGNbq2IN1zz1WBuYtNBP/PL0lU5t1KkfNQXbH8GcoIeh2+i9Fs33+AMcrnS\nUtEYQKEP3EyJgwbXXTqVP29NOsSfjepsdz3PlvFXXEWtw/vuuoJiZgtlXI80\ncghnJ+Etkt/5+w4JXWFWrcUP0xWdeA9DjoAJfUAyOHxjTLgQcMO8ZcNAYGcU\nZY1YkMqlbmVQIryg/ptVL2EDe4p7OjPfO9h8l6D+2xnZCVkySjKqcNBm4W7J\nnIDf0Ozg1CY9A9LWBesqONO80KiiFpXiPD7fSimFYrMSHke+ehAfzjPSiWQ5\ndtytLFpnOSAasxMRebEDiyD0gHpbQMJJ/9cdj1af70oJvxlpoxxfB+fpMCQb\nKlbKjbGE/ZZ3bIZoAyXGoooBou6ZRe1BRbwWB03BOlG1e3mAWpFB5uf6TquM\nnwtWVbExOqalEr5KM5N7icwnRPTYhSMzEFxx+xCMecVIMbOH+HBg5HhFDf3Y\n8iNDHa2mRle6lU7sBf4FXSGBUTF4tmEymu7tLmvqX+yoYEF1O9I6aJXl60n6\nIJsYtKGr6UPQw2L7tyvD0IXiJ2XsRQeEe1yKIJgXLtfJIcvg4nXyUbOPO18M\nGF0F\r\n=btUh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/density":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/touch-target":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.cdf858ea.0_1572631156155_0.5066708705244012","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/radio","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6432681e266c25df814372e1e113689186f70826","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.719b57e1.0.tgz","fileCount":31,"integrity":"sha512-X/7AmttJEnbMmSpn76WaJTiO6PMnwTObwcL0IAq1pJyZuCsAewL54DSKi2k+Z09rllLW8f2V9UARJF4hT2ktAQ==","signatures":[{"sig":"MEYCIQDsIRjGa/tkOI4fOhcIKZr2T2RqZD78O7cQ8f6NRKSGCAIhAKJ3Szt5+MuaPJEmRjrgqfAm2+h4kkTkBSqQxN5Ym2by","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI84CRA9TVsSAnZWagAAyCMP/iz9Plb9RUyu9wANoKJ8\nX5PnBVmznGdppyWjcQwqc00XADuJbGNdSpLtHHGYQmYUBcL/s2/Xf1n5rDTi\nlSTfuw/pxBP/XRq1cp+9NJ1XhW33FCt53mUJDKr1d8byYFYSdCxPptJwXvdc\nGiN7+Ct6rWIn89mUFRQcf1on4hijP9DzedMmakQV3n+/MyplxKbk6n9nIOVp\nroEurwNAqWScOBC6JINHfQ4BYXT+CZv3RQRu8SI7supZ1QJbcoq7gakbMhgT\nLZI6z+FQkogP3CXJAhYDRhE6AIwzNZ9N3ugpUPrNlJYI5lzmUg97WjzEjE4w\n+mStGs4WfuFXLRm6WzTMfXgTrgQF3+IOnIiiqxMDth0Wxa56XGi8MYrlA7Ci\nYSlokbRgfJbAPkot2sSCdS06deFBReIeU7xTsozQYFvzy6MYioeBCZozSjo+\nm5F+BXE/8ZOEBrItIvPyIkP+Nwt478f1DgQVAvvnVgLIolzCc4iE/rStcQlg\nJUiF3BhO1UMD1JUo9i9ya/V45oU/pVmvX+cd9P6UCOhQL+ZAB+vwoIoHkFQD\nI2Shxjj45ZkBLJCaNUE2Q8ca/8g1K8/nhmAIYmOLbu4MldliSf3E9Z748eQ+\nSiOP5NDA7Vq6i9/JIePVMzh1izolLk4QjIUTsTbMteevkgel6UvUZZ2aSNOL\ns4W8\r\n=2ezZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/density":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/touch-target":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.719b57e1.0_1572638519889_0.3033922116447214","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/radio","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db596b00d9577f9fafcff3b841a2478ac03e15ab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.97cbbdc2.0.tgz","fileCount":31,"integrity":"sha512-SBzHKOJw7PZgdAMqv5RLDsB2Hql0ADnlDwuoqv87gtOT/q3GaOYYD6E6f/iNtvYdvju+h7Q2TRDeZKoPP8X4RQ==","signatures":[{"sig":"MEUCIQD8cpHC9+s9OgxSAsrXcsxtlxk459Re8NPGMycuqfciGAIgPf/oYCZaR4XFL3KgGF4ik6YpcsF/RmReJs1SQT3BNbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWxCRA9TVsSAnZWagAAxmkP/2QZz7FryBeWwndGWqKR\nO6oho4Drvnlse0JEHBD7sEgoTQHdgr45Ot1CYpl/D/tWexdIeuCFGTqJKaKl\n2mXwPjkXwBPoLw6vu6NFesD9NtAcE36XJ5WXg2X+Vn4aIcyHB2kRTnIPEPH1\nh5PwSkdUq3jjls3UMaJLBeFoZvu8sjGA1OckWG/R/yD4iQk1QRQ6/BUNjyo4\nMkA6WPiegLqfXJH/uzM99b1vUc49ywGdpgrpWm9ZWa7SzTo0bcVyETFPRgoZ\nvliN7Os7eZFXg68lwQfLUHjDvla7i/0NL7Op0b6ypUbQmhRNkvF7HxWUKYu4\n0G/KErhvf5kDTMmibB7PpW4oSVMykUSjAqtcN1ieSJ2pNLkD+IBSzjZjAGTL\nlwcVg0B974cJ7obaUYAmrwqIrPya4LnhVY+2RpJavytVssF+OQKCQcGQiJ2k\nr7yX+6UM3hUZSy927J+VsI/OfgD8Cv5OwPllsp3uFz47G+SqYetcY+YYEX90\ne14fb0qkzu53iuTr+obSQL2Q84wGQuqTYiwmz0ImRqxKXXUo34hXphPhmZBk\nT5VSfpJSP2Sm4il3IdCqoDK2Ey3qBOP40iN50toUf7gWzPrMMYkIi/0yzDvX\nK89AGRwy4X5I2c3kCWz7N1zbOhVgea6v9t5tM4kL8MtlZZTwAxUOk8YyDhZN\nnXX6\r\n=nkfG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/density":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/touch-target":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.97cbbdc2.0_1572640177112_0.26004354516216344","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/radio","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9e2ce89cdf6701c98b0015655d671d5ac848d15","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.8e36b3b7.0.tgz","fileCount":31,"integrity":"sha512-1m6MVW23mswPLb9M+nagg2QtANQGN7SuWxEUajxBYhf7EeXktsR76ikOfwTDPMgd1FGH9NDQoel6fBoYLPr9rg==","signatures":[{"sig":"MEYCIQC+rbnP0usSXlG0FgQ9bS8N0zMWEvBMIxBDc9vgMtEtcwIhAIanUOWDXlujpnjHg2jWRvfr5F0irZsNjo2p+X1Vq+Un","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1ACRA9TVsSAnZWagAAKmwQAJo3r1ASWFvS9Lltggtc\nyk3BPAFxkYBZG+m6llZs9pMJ6Q1t+6ixAVo+OT0gqOyO0VRgKyBBNeCToe7S\nJ8GEVFirtuBpZQiYuqJnH6oruJJEXKMyZB4TBKoRup/h6V6P7M/admqDh4lT\n7YeHl8/N8VovJPyi6Y9B3XNGA5sNzu8y2NMEsaq2VFP4COnfeFDXlzgDLube\nl8qS/UkwzA4xhU6SlT0liaZAzvwUbBt4hD658mWA491+XiZOhmAm4iRLbyJR\nSI69qGVc3H9vfE6BNSg75ta76oASHC7jc6rwNsBDb6RFcoGSZcsW+9zfTWWB\nSGUz6cRNXbSWdfMLjfQXOg20952nCFndNuIUVwYmnJgoYcCDtPtFmMiT+R/c\nF3Ip32mWlBmWxTgRgEvDC0AAX4gIpHruPkdXabsy+xa1Vyv5doI9UdiCPFjh\nV4KhoU/wiPzockfGeXXr1lNaM5xIgqDH/g3gm4qHUb1RZCsGuJiqr+mQpfoE\nj2/Qxo8uIlo/tLRuOiddgmCHKx9EwuZKyX4a6YANK0yvFomUNvHtoWirp+sQ\nNYWjX2rNlnOZPCVljnN8UwkEZ6Au+FOth0AlTEWWTSbk4o0GEvYSyISk7KmX\nJtVycC2OAsrNhVkZarcDEMuLrLOV5y5TDRoWwGb3DjLDH3YyaAT/Wxd46xGj\nXFul\r\n=MVdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/density":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/touch-target":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.8e36b3b7.0_1572642112479_0.05870208201558946","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/radio","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4dc99e25087f1441b26d614c59df068348abf73","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0-canary.62d3a09b.0.tgz","fileCount":31,"integrity":"sha512-sJ8hGVNgXTtBj9jcOSRPLhB4fUoCkGzEsoZ5fTiWoy75UUoGr17xBvwzjgHVUojlMFUtvM4YGYF9uhAmlaNZRg==","signatures":[{"sig":"MEYCIQCbzxUqO4JnQtKg8aH7X/NLX84b226Be+v35MUZg8eDMAIhAOPaH9HHoyqYB3wpxoNVxCE1tydvFNa6Ypdmc/xBgg+H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9vCRA9TVsSAnZWagAAqBkP/1Eo+JAoXThEg9ZjTUen\nqPzqals8k5HpXc2INBvm1TT1ewaSUWfAyioQnM951PgbEMtHwIzpj/iA4XfD\nEEyrYotHYiFIOSCDAL+wlrHmZCp3rXoTt0IuWXMxSw/WhtTuYltoy+T9fJhE\n4Hpvbn1JEMA5V9+q6TeYQwQsdN2ftK/Arr6G29YNeYjkfjWVnFSCdYKSf4xN\n+OfQDZPDiuiwE8YLcIWY764uGMVPK1J15HX8RuKhybzCtB08lZpfW30VfJzt\nIWkRTBJAVvJUfhTnIlAO3l8RZF0HUARB8JWgjdOpx+FvnSma0l/XyvnJ5pOv\nmRj1S9EOVKNrTTl8C2U37xELguClplLdV5ok19B+y4msVYZf/uTzCZRcdRbz\nNHku7QD6nJ15BegqvXeXlCuLQOiASskSxAwLj0w2DYzC+s27LRIpej+0GAo6\nT5PlQnG1dHlCuOGf0MLb8e+QP+e+yvA03X8OxJzTDJXIVFqqLnZZQvnMMh2X\nEitgqIWgVZ+ahxwY3qORKPGJHdlxL2N74iGQ949e8+DPg9jF1PE0Imr+LtIQ\nDowqhGDh7TcszedHSoby1ImC/5oQf7FkUgLh4YrZnhpfE2Q/i5czL4X52tFR\nN72HXWqHWcnbK4zGfmK1Jt3K4Y6J0eJg6VNTwf9Fdl6cJe01bFtqTWTlDJHg\n+7tF\r\n=z2qz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/density":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/touch-target":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0-canary.62d3a09b.0_1572642671471_0.7574996870483628","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/radio","version":"4.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ba5cddcac5540d32b33474c4a5eb50b4bd7860","tarball":"https://registry.npmjs.org/@material/radio/-/radio-4.0.0.tgz","fileCount":31,"integrity":"sha512-3+TkORjxHwhI1SdiBWG3uvfx87LNBFlLMqLJISQsEUegUWGChNnp1DnkZIUqAJ1lXBHZsCjJFUrxKWE4RZ5hVA==","signatures":[{"sig":"MEYCIQDsQMxrF2Ngcpb0eoNoJnhrerzxdUydiOET9ngjbRSmIQIhAO5uOxt3DQ2LtWuUXOrbbomG4iW1NvCWtOvO81zY52zC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbsCRA9TVsSAnZWagAADBUP/3M+dPgGYYfoVrjFrBjw\n3JezyQKejgulm4XBLZJObqJaIJLEULATf5u8aNFMyXsft2L8tv48ECwJBryW\nu9VWHVGXKH6Qpker6QFnsxA30sHXGK9LersuaFl67iIHWNO45Crgv6kVn+MD\nVBm1zIn4VTAyCNQwCWKHYKfdLHeS/FO8graauKskGG/I0s4Hbwr+BT/NGNJF\nlX06QDDDQeyM8jkm8WsDP3JHQBUtVQ40XnLddMpgk9nGX9gKW+pSAduaYlAV\nTYMwzRsFXLaibSLNwePIpL7zZOElVN6Juq3yBZUOgWZG0cyI1G3vb8rNTSbi\nQSqp8eIZ9+ZGfaBS08Lk5LBRzGso/nhxckT5UaafoP/Pz4651UzU8xmQwUnF\nLneTH7ogQZO6g/0Ne5OyjX8kbcwDZ1Xaz/sLYcLiMvbNcHSUGSuK3IglI71s\n19GxTAiyzLUg8JAihnciTvfxJTmgFyQVL4VUz6gzi/EhxWiVylE/p7aVq42U\nHc6AKPmBnD4InTOd/re+59P3RL/0/87jDOlv9PRVgto4gCbD/R/b1MVzuJsL\nXmZnA6pUtydTmRGT6Giv6zFQJKcAXjk29/C+3Y7Ps5QJH1FcrxFei5iwUIeX\np/zVVrum7xYs4BYIeSAwEE6mjo73IIbyGRlBua7l+w7ocbAd8ZjCIQorV0NF\nYogs\r\n=NpGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/density":"^4.0.0","@material/animation":"^4.0.0","@material/touch-target":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_4.0.0_1572718315899_0.9248253004639158","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/radio","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51243e69f4f3b78cb30f895507c79a1f8dd7bfb0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b5eb51e94.0.tgz","fileCount":31,"integrity":"sha512-jQ71w1IpAsLcWVi4HGkMVDbWVSofHNDbWV07RIK/n1Nh53GldWb4AnhbIj2DcQ/NfUqGjEdwwG0kpZ5kmUZbvA==","signatures":[{"sig":"MEQCIGTw20K9AmVVxe0Sy7JmB5Ck3yMTTAj9DN+PJFKr+YdPAiBF6IlDg/4bL77tct78ieTaXuFNlKGDN7Xpnb8FnrusUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOdCRA9TVsSAnZWagAAgpYP/2dJ4haydGkgMY6pmHFy\nRxZFGrNXdLWjn2X1z3Ncw7atep/jjBalaJW3Sbksks5KsZCU5L0memJzLVeQ\ndjS+egEZ0+SF+kM7OYBA+/oYkmpOAAjbT2c5fURZ0lIT6GrvEZY2VUwYcN7R\nBlI17PBxaJ0Ak2EW5B29ylYsocVQ1ojsTEo1VQJg3aMRugSU1XS/sg68YVwA\nmAPx8aqwIA2lM8ykoCPTm9skqtRQAh2dc6qZlj2B8bpoT2rqkoslglf3cM85\nDs2QRIALIR0iNBktCMM/48WXX50852+3mpJ85TjMHwwxm9ithPu/L1q2GR+d\nauRf53gy0zBX0JPrxjl1j/Y24FbveO0+2/cSSTc+NCFqLhb9is40yfr0shWR\naRvAB6Mfrznxoh7ysZ7gjnxlnwecWbYDXbBxWuGNU1nE6LFt4nuN8+x/SqaH\n2kDUOxIkNQIdWvejaEjhp2Q9RQUsCA00k55sF/lrTqSzfdX5W9hGAm3NHEac\nYUNzA9O/nbYBZj4yOmnGvCH+/KXh70RayDufZpX6YYL1VS4t7IyKpjcZuJFN\nyr835wpww1H+tppv9HmFANlkt8aFMv7EKI1xQpms9CalDojP5cKe31YA248R\nypjYLkhglUrUqG4Qv+kJQAeEx/mPHMc97D3x2ve9VZO7zy1UESktxVfvXxhI\nJKDa\r\n=liNq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/density":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/touch-target":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b5eb51e94.0_1573151644439_0.2874579549207612","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/radio","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1103cb4fc2f82859c8f73ee45eba7a0d527853","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.58500806e.0.tgz","fileCount":31,"integrity":"sha512-kMfDdt+m403JoSj98mYt/s4N6zTEaAObuY1JjA1vLswD6mA6qvYlZvV/ThA+n7tI9rINykKDNYn+WNo2RzVMAg==","signatures":[{"sig":"MEUCICuYFFUpN1CqRHkgDirA7O+3QGQVI+441RlA8FxVOyI9AiEA9liVNlW28gNT7R4T5tF659DknW1m7PEkQLfgqbYU7s8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtpCRA9TVsSAnZWagAA+5IP/jtvQmZamHLHPTLMJzMg\nLFRV8TNd8YzOJThq8jSsrBZD7eXaxmjqXJg6Af6xkvyngFGh/okjCr3zfxzX\ndXNpFuOyDa7t6u+f8iEId0RtUrSyyjEoI/xikqSEWSjzm6OZ7gUPDD+S4UUe\nmaR2mfgu+33GrS+rwmZouODhgHCLtzm3jAGkxbFB1dmX0IJWQsz2uqan5JUC\ny5x0MqWkLdepbuw8ASmIlPU1XS2DB3kzJtbVzjo0eepkHuvfHelZv2yQSfZt\nbjpzI9Tzf2agnkZU0I6zcQf+zttXLDNihg/JbX++kbeBZlxU/ARBYS66QeqU\nwwJbaAil4ER12k2S3UCEFMYduHAkCwQr9ulrupczcTZCnwK4zlmaB7YYcc4R\nkxQYJNuHA52LIvMF6SYBFmokoBV364qwnK7ROrj8hOMVz+sr8b9ZNsKoMUhB\ntz6atAukKUMceNQi3Bydh6mweuZj5ho5rRqL8vzREU9AXTmsdDSiMtvrBs6H\nkrBTrFw4qqeSwWRhiTWIFsLk8TvSVjRHAdGkj0d2+JhGK01zLeIX50oMGgz8\nWVuULv/lzVx3Os4inHN8NYygR/rWUhHCUIMhQvRhBfcUBIe8GfUmKiiWlKsl\n5FDS8+zl1VkHgi5YxfIFtgQLmI/ZR111S88k1WNYMCS6sqzb6DixIAXuyN5j\nDA1F\r\n=eU8B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/density":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/touch-target":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.58500806e.0_1573227368820_0.5463184401672507","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/radio","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c2b48f22b8cfe6cb405a9d3e4ca4cf0c440cace","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.66299b646.0.tgz","fileCount":31,"integrity":"sha512-KbWgC9fxcC9l2dRIMwxwm6vgNp9MzLPeFlzaYl6TMke+kx44qbRMooR8/yRLhqAyfLMaLbi+9slzcFWkKZDmsQ==","signatures":[{"sig":"MEUCIQCpMN53J/XVyyCSLSvMZsXX66JISdQTPvemOQ50e8I+XAIgJ8+K5FYJzYsXku2wuSi8/pvWBPpPYWbfLo3Eh4/TK3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdE+CRA9TVsSAnZWagAA1uoP/2j24hYxGb4aViWEqGir\nr+AHWl92q0RF7jWEhdvFruQ39kqqBSp9g8skUjYQUtNdPKAcma63dYQLPfYB\n7+4KAenb81pwWxwcHjxAh5cp3UFZ6oAW2Ctv5WglNVsKvSEkzwZRsO8o29lH\nwqM7Rxzv/hIUzGpLBohWtSDT/MW97wK44pwl3dmfrQZVen4d4ayWnCRLfT7H\n7uj9dkF1vfE4LZ9wiuWguT53BAPGdqNIuXrTbS+2sjdfWpnO0tDiwQEfCLSF\nV226z1TSkY/iNsOj0dnn+SODxGxqdTsNtBLYBrgLjI+6dThC6WjwgpG+1iX6\nnTJd3BgQWV4U9yyrVSeSpOCzQZs9ryeH1d1KrCZ/mR3rskirxEyiP0boTt9N\nBZtPQuTaMdLh+adOAgRSiOmzKOCWKlsHv/SJItsZWfaFRPzqUiILUay1OLXZ\n9AC0eom40UM8D2IB9tSfQ2qbklMLanqo6SVnJVv7yUlAL62PFZVU87LbNrxY\n30k6ezbEND+I7sSWFQJDJ+/0ZSymsbOEoxT2QtPA5PE0MibXiGwT1nIII7Oy\npMlVBvlf1jWruofjd/7WpR6+289gecgXHF0Y2/G8yZz1r/JcOcLzLuagCeK6\nsz63IjYB/j1Wp6c6aAklez07a6Nx4QSmgmCL0LRTqRk61ROx+vn575H+Ee+G\nMab0\r\n=X9sM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/density":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/touch-target":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.66299b646.0_1573245245842_0.39202368911691177","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/radio","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4587f6b87b3f338532366effd0ed4d41a732a929","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.821871e04.0.tgz","fileCount":31,"integrity":"sha512-uCIQvRTgO87VijHTdbPzoKxYV/DfZiDfMLLALaX3xgpSaoLhcej/5txpNLSkllwgJ3p13sD/wuE0LRMJCDLy6Q==","signatures":[{"sig":"MEQCIEmUjMAcEuUIgHVY+AoIm8dQ9id1S88k+OePwbqXxA6TAiBx72GS0eSCvyEL9oNDWtUmeBoMt5zjJyHlkeEfKKWF6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4ICRA9TVsSAnZWagAASbYP/1MQSshhH24StDj9XPZ4\nL+oX9b+bs8zMWjPRm+3LXf9W+fatYp2T4pQhn+Mx9h1Xk6K2omVap5LxStq5\n8VtdO9/H1JS34/om/uMvvOOVcTKghN1zR51SGkUzWUerFAjzzGrwkeSzXcs1\n+fn0rz/tkCXSYO3MzQyEQzz+tCF0y5DOp75gLT5KcMOrFynLqbiEgiRz1ue1\nTXBLK0CXZx/PEX9X9F8qpXaXrScg+WCQ5OEPRJNeq3BnXHEqK1Cs0J5AfGLH\ndcTdyeCeEKzfM1cj+athv24xS7vdXxWgf3P3NBdHFrmAKnVT7KZiz0kdm2Zf\n9jVdRSskysOD7JU0QeGoG97O+li2QSDeK+iLKmlyUTUNinr9zqXvqqaN0SBn\n+uLUiSELJmkpdGouAfpgS/0sUvBnQJ0LTcEeW215bcz1VyQP2AhP2qNJWzld\nFa5Zy5pnX153Kz3MxPNUWPWeOwjs3XMohIUsOI7xQ8rTkKwKUnhkjCuZipqw\nGOa29JLJz21EWZflIVbgD478Kn2CySYI6lDEIMuiKnfx/eQX2vYdPuAhrWNe\nmLXwrbvQZanxqJrqy0/XIMPumhdcpKK/B0rFymtOd5uEAAkVP7xA3NUYhV3S\nc+RrmbHOFOEgvkGGUKXFTTRtalJ0xM1XoKHM4fgq4ub/VD4s8KMRatqSugx7\nwPfG\r\n=En8s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/density":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/touch-target":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.821871e04.0_1573248519855_0.7537196640875083","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/radio","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ecb2d8d06ae548416abe7596a686ca9abff485b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.491fddc31.0.tgz","fileCount":31,"integrity":"sha512-bJlvK7398z1YlBP+tO4wIzPPwXMVMqcoONrIIDB/x1teW/uLMhdq06lHiWu8fe3rkfM0jjkstNSw0ndDla2VTQ==","signatures":[{"sig":"MEUCIFHxbF6nNGvgTkAYrb238ee6Xjbv5W+cpUl8odaCWsHIAiEA5VlQ1Ma7tMLwH7BqO02e/O0AfYNKe1PJBUV25UyXEFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecsCRA9TVsSAnZWagAAgzYP/0lbyw0xLUY9x8MjzlUP\nTY8Osie03x4iAIO/8R4N5xYPhsQ1jjfWBRyDL9B6irHHrJDXztza/GNJEZrO\n87d/gGP056mzXsLHw0aqcd1t/Y6PmjPuUaLWOAAjHdjnGe0mbm/qw5MpYWd2\nu84tVdDI/VEGh373hp8H8sqm/XRWmYQmcy9jekjIPZo4mQ27/CnhayMnOKMB\nFMWTAh3E6ocHUFEkKVt1m4Z1JB72wzPzKmWfW5MT4RoOMtJdj+63bmIeVZkK\nrOJGO9i+VB6r17JiaZrqtwYUVudDL25sDw3A/DX54rhK+lPwlPywbxKjFMYe\n36bgNMuGVYNOsM+SX83lIMOdc6ccncIqZ0O9PluZTYQC0Rys1MmNNKkFQO0d\nES7Jo+n+YgD4D9A85/M/wEOZPAJHUT6xbn24l/F+5kKQ5zb3uAMLn7/bFZXi\nEs41Q2zmmv2129CO92cYZXTuD44JquJ5y03nguh4vWmyWrWkf/K/x9jz9eVc\nkYK5KSh5cgySw0eYc4ntHPscCjmOsNfL/Y0fAPJst2PxeBWmK19z6PGkyZYs\nmP17UuobIbupvTTfM9RPc4c9owOIq2HxWgyk+LEcREK4+AypYWluixJPBI2w\nhQjXG2lcCZAli3ZhivnLma4Bfnh3UGfN+ZrtRY8LrdyX2M46xJ3eY7j75K66\nxLKK\r\n=ehH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/density":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/touch-target":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.491fddc31.0_1573250859938_0.2627665228724472","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/radio","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3502a8be3e70a7724a22cafb5f2328db16e16d6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b0cecf145.0.tgz","fileCount":31,"integrity":"sha512-ouTKSEEojIIzoWqlGSDfcWvVMse5Xcr3qSb6gwmso9MoGh/f+L7re/YQ7X90SWy9NWr36KjXgQAgBhO86dFZ+g==","signatures":[{"sig":"MEYCIQDjJrpqX2/FNBr+va6mUJHe8V/jvBSwoA1jc++kIpfvUQIhAMfrhIiDEthYNoplwChZe1t13Xh1Vl6/YNoM+xOPG4fb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwinCRA9TVsSAnZWagAARHMP/2mYRZWRBBeOgQjco4EE\nKZviuDCNxjB6BQ1CYFEx2PWa6Kq2zdZ2YQh7v7Gr1GgN6X6LBb+sn6JqUpm+\n9VFtHLsxgx+XQYk7LK0wadw8U0+dhH8ZlTuuxpMa1LITDXU3IEQ6NP3zdaWg\n5bxojvQc88x2ZH7zEbcisiy0QWGRos0ZJNqCpDOxdvuLRNjKAzcO0shYUcje\n2xp4mHdSavsZQtfh6hemLok45vRJeEC9nIEV01pE4tszfvpA5XhTrDke59M7\nLup1+VySYIFgIeuyI/0tmSTkZtdzVSvzAj5eJ/pKmYO9XDckyydxd8oi6f4s\nQEXY0yv6VuCovbDBc+FPkPHl4S9ccEaKhNYqFiv3Ms6lTbD1jdxi57S3yPLY\nQTEoSaWMjkVSKx//nJ65+9dVHaFnNITpjl6jhDhb+16V5ZNGSKyWss9b7B65\nC9iOjFrkIL/IxD45T4KHrZEZUWdbbpI0IdntJELl/MndN1uL/T2WmCm4v5eV\nZDVMOS+XFYmv7IXOBnqTU0GVvGpNzu/VTjTNjWh2Z++Okb13RXSqoLnAU6ZA\nfFUoYETAQ12v8To+vItnJYTJQaYewf/k5+WRo3FJ60vXzTl+0d/0gU4VeKWu\nsstJCB4e5M3x3wonRV6YG5+fDNKJzDJHzytfZ8xYmyC54KAf5/QJsJsw+V6Q\nGYFO\r\n=/J0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/density":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/touch-target":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b0cecf145.0_1573324967132_0.7271693731822033","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/radio","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7329bc38724b1fe63a95de455502d2d257fde15d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":31,"integrity":"sha512-rVrFAkrzCkauNp/80o3z5EL6FPg53T3RN/YGQ53MREOJTNp/gDgOVhuyChFZ7ZSUU2vBf78tmvzi1KqBgBPohQ==","signatures":[{"sig":"MEUCIQDJn/OPcHcJNfhTaCG0OhqpRutQXbav3Kwjj6wBuuduYwIgRndRp9jWBw+Vc4NxQjPf7CLbJJkcO+mvwxCN1CEFDAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBjCRA9TVsSAnZWagAAG8YQAI7Lt1Q+Nw5JuMBZTe1V\n3zjx22oGVL1q9JAh+6q3/zvvT0AiTYSKLuvspdQWfh09hW2IRlMUQvX++Xgg\nL7BOyG8DRDAdfhMmhQSBH2zarkEnHGcCUT1RIKfD3UYV8T4UF2/cFLm27Rjt\nJz1tpo6ioAF8CfAg2ufjOxUZMQPWSY3swhBzd6ctd7ip2iu62PN8LlhHm1hV\nUhmcvLq/TeC1xosD/XXiI15mff4z3wBBUSPEUjUVPjiLuJREbqn7gWlmAAJT\n1QPd1miOXL6xtabgAea2sSTKXlsinQus0gfpw19OT1LxjWvPErOqFUNFUoD4\nfHb2++3yxEe5XrWYEy/Y7JcbT83+oE/Tim1Mxl2N0cOuLvNmp6LLf6inHYcA\nMdsuqILkx3QLLaNBwygeXwMbxhpQYnSzq6+jQLqD4RlID6YxLHQBivVyaTMX\nUcJHSZK/0pT4mxEPaLgz2KYribZr1wGHkY0y8jAF89FHLKMoW3FYOx7ejwVS\nrH70qI7ttdknaNTEyFf4E7zMgZDwxcAP2I/xGRwu0xjh4H06M2pChL4viXLI\ndE6yR2bWIjnxF3g0m+kblVmlwmt2vebtbWS37mKs/v0N1a040sNFilljqW+o\ndjP89dh/UdlRNcNJJcH4KT+Clpi3QlFzyI7aTEkpd80+DgvX4eawMZQs/jWy\npPnR\r\n=Xeic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/density":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/touch-target":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.afe0dd1bc.0_1573486690893_0.23752731796735205","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/radio","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edbf6db88c637ebbda33ae08b00528faaf418bc6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":31,"integrity":"sha512-Yg2a4ENyPDrFLENw1wwADecd4yQuRtd5dTZ1ChvJSU6hTOLiLc5tNAdpscB+ALaM6ZAqHQQB0tAI8D0beHI2cg==","signatures":[{"sig":"MEUCIBuzPcdnqrOSih8if4yveFPNYDAa/H/g10adGWTRBajfAiEA5ORrtwMLHRsRdIIBLdYEm8L43zYOmHfYf5dCKTu2TKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnOCRA9TVsSAnZWagAAD9EQAIg1ROUH2WFcPt42HGn3\nWvycIF3akJWrV6aCxzljlgeY/ROtXw7WQ/zP4kqayo47EeOtAvOiqHvweYMd\ns+uk/WI0X8zCvtnz3k9kbN/FycYSzrmSYwTkxX1LDgYUwaQaQ6vSLo2ij3TB\ndV12sFDBHiS/uBoRWed05cGZkzZTuuLKVebzmjIcObIMZWIs/1O+Yob3nPIN\n6zQKYuyI3oYJdK7BOfov+Fa8Ir9WYMlfupaKBdoxFTk14PpL7MSWSSIgTdCr\nYS8RHk3v/JE2rYKyn44E80BjzQXEHlA/SsRMtmdLofPxmhrTzlap4g2HpD4a\nm2yavNN5RMnDn8GkePkj5PPB1Ziz7POu2NqvxmyaS8n5b4SoRtp5AGmLAtwq\nphCoLc2tbaO66YhPRS/UCEnnY8fPG8lZ3BUs0DY6NIKrMQGzFbOZs3YA7n4B\nmkotlhZ+IIk59BiDpod/ieFwdE5T79LFiX7rrJzvIoi1ngu45+54hjWhmwe8\n2qokOZ6aNHImX0Q0qzUI9/lS+XmwFvlyRZDRIEm9ita0BiEwC2Yg9Kqxx13o\nJXJwlJCgO2X/X9OUQ/7OzPlOrWhdewnlC22QeadRgydXWeN6ANJh6A+k230O\nXVr8X0+RI4kD0+a3km76R6AOhHJWY/gBpDMjYDIP3o2kqjFLjX/rTMP+FB/Y\nZqZw\r\n=1qq0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/density":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/touch-target":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b4cfdc40b.0_1573747149917_0.1643546469457775","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/radio","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f4f528ebd83a7288deaf53200c9da538c53e53","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.525989b5d.0.tgz","fileCount":31,"integrity":"sha512-AQBCrdZlwmgARsOKJSnIiPNR4cQ0Mt0fwQaV/LP9m9cDuofEUxwuft20+bws+u8qvI6+09Mfxr6pfk/d48SdPg==","signatures":[{"sig":"MEUCIQDd87+oH5B90x9mGiNl8TqwiJNgMk1QTYRN8E9sPFY9LwIgFk38ek8CCx8JCq+z7jmXFgwOWVtxU/A0JG5ERiTt1hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePDCRA9TVsSAnZWagAADTUP/3BFqd6D69I2yiBhofXe\nK0SWL5jJ4LqmtPMeBjyqUKDZI0tvphhIqjtXFr6mxSj4kx91ZJxDEJY9Urct\njYazRHOXKSajKibb3GkacA0jgby9hrkK3cXT5XhIg7BJGPCCaHUxtmd2vCc4\nyvb5eSdOVuESIM6oODfQW2tKzmod/XlAwj0cD8wSX1NAI+kq/IHo74gR6LhT\n2sfW/5h93qE8esFyfCq/YW2mwbgIchXH6vfwOps5blVzc1spbdCI9IvbVyaI\nbDgpoK1TcgeqATLvSZ4cbsYk7CyhAwdAlHpbdRWkIGiiLJGIgNPWGRVx8cnB\nf0TED18EoA4hMmO7Ir5S6q++pXVzKPJmj+utRNVWz8xqgUpNW04wcih+HspK\niPkKJjpw2QhQa/BVIIKaWjpeTg13ue160e1SzXUX1epSfWVeq3WP+XRW1sDm\nIoq4Ph/1lgR4xVoY2zvOfEysgfw6BqXipNcJFh1niypZZd3Omug/4nLFvSJ/\nUpetMSLWTLhIuX7YZ5ck2vUrlhl3WQVajEQmA0JVeeQwCy1j7wf9RdHzBGCM\nB/SAAjAteOEnnVE+P1TiZD2Wd1CdYGE6stVWKZihuT2Cdv3+Q94edumFHaHe\n8xQP0c5FxXBR0cXMEgiLBe8sPB3krP67swtrcO0DIIhhhwbBxc178+bsHDkX\nRlXA\r\n=ZYR6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/density":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/touch-target":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.525989b5d.0_1573774275324_0.17883950548911365","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/radio","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22464c54487a9273e2234d3e66d8fe7d50131eec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7084b403a.0.tgz","fileCount":31,"integrity":"sha512-6oV488YAc9GJKscSlL9DZMn/j3NOhPKKs72wSG/KzlDCJY7+35PcgnKQ2lag4p/C7hiyRH2rabk7amN/hF/adQ==","signatures":[{"sig":"MEUCIBksjgXJ7pTTCCy4yUkCOGkOXT0Pely5cgY24E5XnirWAiEA4mRq6enKmlV9DkK+qLF9YLdkDeRKVOISXbIFTqABXNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfobCRA9TVsSAnZWagAA9CQP+QCL1khJJa8dfIHUrHfX\np4KII7S7AIwqsTy6kRoPe/C9hrgb5Ov34JBR3DCVYadgTgIoWE046V19s7Ze\nSu3w9o6qFjaTgw2gtd98ZyLL3YFRUYTnvQdhvcXblpiJtvhZEiVc9QjNFuiJ\nZ3j57EKpB0/uL3KkN1Ua/dMOumT6rCMGI1w1IAYLbia85d7loZJIG3cQYBfZ\nQdC9Aq6O0eBNtPLxpRTDJvZW1KC/ANnhV/tXrn+FARkZEO2VvPrAIPhRKDnv\neJmKZGTixgdSDBIcRgvT8vJuflhfuU5JMiVJ2FSzIyedeuHnDnebWiQIoHb8\nadt3pfzrrg3JjsP8yNCtCxJ9jJ2fgKRZs8sqQ3p4v7L8HM/1R6SytybS4IvN\ncRMYNgBesMlNPpoZTkS/S089F/LVbpUMJNw6NC7+A7s/eVI/hMZyTWmOLSOj\n+u+Y1+L0Hv59LE7RVurMUdgH7G/fDZRDDCaz5FTOSNa9BAWmDna1MSz1CyjD\ni2jhGpL0SQj8RrFybI/Xoanctx7CP2cArFPRl1+KM2/Zu6Id+QKPoqavYmkP\nsCII8QZP/5M/NsPJYVVfxvWzMZL6MIml6DDWO3Gs/2pO8F8hQ0u+5LqdR05U\nQzF6S8aqE2okp5zYKyUWTGfQi8HWx6l1TTIrfcA2x2EzQJoov1rA8YoX96kF\nd6Z6\r\n=ugjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/density":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/touch-target":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7084b403a.0_1573779995178_0.2887704062053942","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/radio","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"110f1a4b203e8acb73f1cd88409f8f5f0668be16","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3cbee6dac.0.tgz","fileCount":31,"integrity":"sha512-9PFjMl6Twh0ziMjX+X2zAElAqHRBOOII5DoLiOyeYJhSW6CmNgTAmV8zJh07CgoIo564xPXDNlZuF2LUJNPFUw==","signatures":[{"sig":"MEQCIHDxDEzHafZuGOgiLRSzP+xJsWebHqgohA1kzk8Z2/5CAiAKvJ6mOeiQumfttOJ8RpipIr/S4UZxpfsD2x/0p/YVhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyerCRA9TVsSAnZWagAALzsP/1UOFO30rKeryNJRvSGp\ncEOuuflH+LMVBj25IavTVY1zJFEa377NxfgNj8SsYe9DP/RmBdVhRY2kOmpw\nz7No+THlEqV5BP31znmoafSv3CtUL/+HGIh11Dvhs8eJzcfRr2lXFpqL7CNp\n1Oeo/b9dZO8bt1PTRYlE+P01PXUVNCDZ5C1+ZQwBHU1oEqEt/isiMgQ10KwZ\nOGp1hVrPEyBPTs1TeMk1Yc1o+Xm337dFxuOuLV0VmblV4vc6zrcVSvgEQFj/\nNoxjA3yNl5dk5FovLrKB0RQ+SkRsDXnUGs4mTotOfq0Xwv9v7kpBvhffBSSR\nIqL1c1yoyTAsAIQLkNOfiHbmLy9btHF1tz89Ly5BvrTaxJ3C2S3WYFJaCmEz\n9pCsbY91y48cYFRljQEM+aElc79UtVkfjbZessXNMAImVaQcNXgA7F5V8qIK\nBufO2K/pQTjF+C1DNBIYQoisZ6HNu7M+K3jMgUgNNlDuvLBNRy9Z/R0UW0HC\nDp6kpAoWuJbl03wHQ6bJWT2DPN3sZDoHQFypJGBNXU7JdeWKMWAAotC+oMX7\nxafq4IxWY90w0DRXqA/iDg4x0dK8lwr6ZHucvo4YiASzdO1xIOhnYgycUXry\nzjteOXDmMwEAK2qBL+2PBL9+LGYu9GkowjBzZnDZyJ8h0WmUcGP893L752i4\nrTk0\r\n=jkIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/density":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/touch-target":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3cbee6dac.0_1573857195322_0.30670993451622497","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/radio","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd9631a7a3154626fc0a5aba61879a109d879ae3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.591a6ad44.0.tgz","fileCount":31,"integrity":"sha512-p1ZKx1fMRBlEn7AmrA41HMhV4z4XUfH3q2qTx5lrZRL9rhrAzBTwAPj2FiHbza6wuX/ywn6284ttdOk4By+9uA==","signatures":[{"sig":"MEYCIQCdffzCN25qG11A0b9p2HE7tRQ78HM8L2aPxJmPQ/aZWAIhAL7rdISB1iqF8Efx7h/9wANOWPm29Dqu5Z8BGik8C3pq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3tCRA9TVsSAnZWagAAo4IP/2aCfkc4V1bJmWHpAifA\nRPon3Lsp9zxelviZe1yE5DnxcYTjBpnafHH7EAa16okL25gsMdoC0hKnWyi2\nzK11d7MUHleLsVtcbd1YAutZb+mB/S1jBtO6Rx1BuQuXX1VRrBBiYobA7fsU\njp/blZRh6o9vL0+0a7twXlxWTpDRTXioa7JXd4B0j8Y+MKEK7PkvFHNk3wFV\nmvnSC8GXsWQy77/6ya10gBN/sPj4VdKiAAwZXqkSudCLAlNvatdzlMqDVWb+\nEG/ZMZzm//8WbZcmTSZtri52S9T8OwaxP4lgZDuzKnmRlQl28daMigDIE6Of\nzwHNxS33zvmWR+1rnX3ShnCvXMuCyN+Sg6hwZ1iw32OWyxRtirY9Brf1j3Ok\nsvOlA7oHEwKahconUIG1WN8q+msPa8fnxny2h3k9ueZl4UPP63gGMKVjAe0m\nKK233nrR+ybdPbhHnql+rpAcIdHy7hoaICPGs1+Ph6PaDBBfnetO5neA9IrR\ng/v62Mby0nwuiMbdylU0/vYCgZeetac6Sb/9tNhd/NlBtyhEuOmZpyGPhQKq\nxkQ/6iuEmwEXllpxWkGEn4ikpHNhaUAsvkG+F3hBNPWmeSLP/d/AxDbEdXtw\nhbi0inFsbNfMMf3LCbyOsuCg4haXzuFfYXl7fhhMdkB9recsoKHBEeYrfQnR\nea+s\r\n=TyvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/density":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/touch-target":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.591a6ad44.0_1574120940663_0.48160516037143397","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/radio","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6498cd68e92fe9e653f1b3df58944195234388fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5729943ba.0.tgz","fileCount":31,"integrity":"sha512-SoZ6u52vZfDKn3z4Bl4Y2QusPcxeQLe0NxtrFsqFCcj46KUSl5QkEJiEXcmFwZU8A0egLq1EG62pjlxxjjyCvQ==","signatures":[{"sig":"MEQCIDR77TeBlFy8uJPxwgoG18BFac1OYHw5eDm35eslMBfxAiBjyfO7G+GKVmeMnaV8WGGy2hjy54ETsvapfwyg+u/BTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1Mz3CRA9TVsSAnZWagAAF9wP/08tGXD89tbO/utMGX5z\n44Ab16CMx4MyvYY3X9t/QdN8R1i1sJqn9QYggnzVaJmpKMRsobiy+J5St5XO\njihj3Rn0aJdhGzkNFgM4vnHZkCDwNDcM0LPpDUZAyoxPh70OjTJtXskJSkxl\ndxHttuS0XOGq9BVQtuwVnNADqEpIRhAV79n6SXwbwgliuypzDICH7E/AA+mT\nT7aKJPlPOWv92SjuAKq2lnSa1VY+KFkZKRWYqtJQDWwYXB5hD2H3yaOidp/a\n/nSov+JvRhAfNahoaFEf7m7Mm4cslRtQJI0e/1x8J+I43JRaDg6wm5OS5doZ\nVe3AjyLrF/bAyISApJgglLtvGW9z/IG4JRus4DhkhCFhhEWVacyuk4ALtfOO\nilx9tON7ElSk54JRGgqOVsSWJlWS9hPCazeViMpKad0mF6LFef61974fXMEv\nF22ts+TZDD05ZSfhhMpSm40Og0LF1NhzLs0rkIsDgjCW8qFa2ISx4pTrvdJ5\nZHcMFyNM3QcrwJMAk9LO7Ayg2RMo+rLK5Gts6BLj15SWu8dNwLfx4UbwhECx\n9lq8j9xBzWB5NkjAnUMNPIl9rnv7KIBiC5LNysv8WsRkKFazwx59aDe2F8xt\nX/m0JEk51Q5lWzvOvnzOU7vS5z/OmBBsaaHIRm+LYPZPpDitkwjF/Sr/VF6W\nYfR0\r\n=k0k7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n#### Caveat: Edge and CSS Custom Properties\n\nIn browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using any of the Sass mixins, you must pass in an actual color value for support in Edge.\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/density":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/touch-target":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5729943ba.0_1574227190883_0.3341282157146024","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/radio","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd9e3e1072d4acc2648bbcdc6777ef0473823a62","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.e89750dc7.0.tgz","fileCount":31,"integrity":"sha512-qmtOrJV2TClyYfyJP5nkcZB2oNupq/u+gMDnf2oXqgs8V8gGvFMqfKgcX6rSN3JSdB9ap4xYDT3h4erNpFhLmg==","signatures":[{"sig":"MEQCIGkH6etubtQoesGO8bhUCDSuzPog8flWnF8sRzJ894iSAiAn2hQOBQeck3LsckT2wXNp6xFTarPYt5jTwIoj/nTXDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsECRA9TVsSAnZWagAAozgP/2hqUXWnrLhyry3GCd28\nvGZpN5LqQIOUajU4xHIsqMq5aFIlnK5wP2X1D9djDb24uOl5RutxGRlsFm+j\nUIUq53+8OrgL5lBvM3nhyuHSCE6FatfQrBsqjeEmODIcdNnK3NSkYGDAZb4A\n58FEsJY5ulUMLfmlpMil/EONvRLPtnPAHz9cPmtvy9+WmiweuSDJWsvR1sWU\nZyGNiBs8WEPEwx+nrxSXQjMmzuvTzqoaFi3D9aL/4YCqajgaZUDRWk//gKTB\nnYpc7UxnQUIleRjlFB5HZGxVXkbA9GB0lmHAdAXmEROGUoTkLwUUDl6EQIsC\nyFwn0Mwe8uB+WW9pjokA9pw2JKiPZz3fvJbaqhS4wxUH7MTrrk2zhaWb0U1i\nWkQBdvyO/gSYG0lFN43i2fvEe0dm1qRSHkezggAQkvjPbNW4kbVe0VCH5Jw5\n4xc6dgZjVld4zjUZW10zwNBdfsVzVAIZcBu6QubZeU/K0Po71E3Rg/hVBq8C\ntTfgywzd/eIenFZWBOtrUePF5X+Pi6yX9AP/pO+8nGRH+/noMPHu/9cBUVwD\nBsbpYjZAr7aqXV9qltkMxUIeTSYh6nIg/X3UCKfa9sccHBIBJAOraeFpjKYi\n5rMGHQgulHRZ+D1GfnFO1hldTCXsvveUPgZ4/mq9NyVSM0LMOJ4Ys+lnymMz\nj5Ly\r\n=Awop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/density":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/touch-target":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.e89750dc7.0_1574820612075_0.1603677075591632","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/radio","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1c88da19dc096b98563d5f3d4c67f28d351f45","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3e560b33a.0.tgz","fileCount":31,"integrity":"sha512-sQ5rePl5zkc3zObA27NpejtkjSP+7PRf/ZC0blczsyFjlLjI2IPUIrig/Nc0Ubo+lEAzet7aslJ3RR10THztbw==","signatures":[{"sig":"MEQCIEzE5/IAJNhIJQFCneWqq3+9PzcfxKLGULXPH9sAXi3xAiAHhYki7pfoAuFcd2EL+GpnRYxDdl/2nvjMy5RmIVRSjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds4CRA9TVsSAnZWagAA2KMP/36G0UWbSBpU0V1409Kc\nTYj3ADUqPSj4sRUqapw2tGtLVe8LyAUMcwzy+fs1LfcDtNX12yAJsroPkX1P\n/4mFUoIY83Qok7Uc6Szk+UR2zMLbW82pW0l4UAHXr+mGy/aYFfU29L8cN1Sa\nM3UjiZF0V/yH8Tg5hfG4gpYoWQWBndm5x7lyG7yoTHfkfi7alAxQOKo2zNLC\n4js8q37JPa3q+FMPacnvUPe9A5xUo8Lm44X5AM0+Egr6FNbXHx7hVc2hZTRT\npO3jOX4PQVtlIJ3krOwJh0s4QuFTKXWDYnRfrEnsTK9nikOnSyTYgcgo7IAD\nCM7akNgs8nu+FJrxM7k9T/cikKVBhkXbPBOAc2xx2q4iGopCYPduWNrQutUq\ncPNnpYefEevwPSFdN8PLvCtvZCwmINsjBHwAIT04Cx4WxFFG2FbL80Qyp7Kv\nWSzdjJf1RkbH20NkmSoCEz+hOJwJW8d7BbSMteDw7gEScFmLwV+CGSNl8gTc\nF7OtQF0dbqTBiTkjbR4vHwVdtQ5CEECerOZA75wpvrdH51XfZM4ViHbl5EB8\ni8qK5+udtE6vE/LK2k6cKG2JMYplqpTda6BtbLF2oeL1hKjKUI9aTvsQSQrO\np+iNfjlZoDHJKeXgWLQBxgzbxu5AVv1CwZwQmufAJX+kaQJXaJYdDZFTng4I\ncY+N\r\n=9orJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/density":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/touch-target":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3e560b33a.0_1574820664173_0.1938242627436424","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/radio","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dbc493caec7e0ffb955214d087d1807ebb25d11","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":31,"integrity":"sha512-jw8FDrWMgAn+O5qjKyqnpEJS3lZ3A51CAY6hW24OMyqaLylRSt/6ksq5PHKrYtXTAZGqzyCUyawlnCM3v0GeWQ==","signatures":[{"sig":"MEUCIQCP7Mc4ziGj2LnLEt6cydF6E9eTTUAAtRFC7/V9IILXfQIgdTW+z7Ssy6Q8IfzIdLYoVAUSzIB8u+BdyLbsp7Y5TcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtPCRA9TVsSAnZWagAAepkP/i5dtKOERfTpLeHb3Cq9\n0a+joe4tKbfISM7/9tcJ2llG9mxblQ9RquvKrsF7VcT8ddHr6akvl9LG7rWS\nVHK1C5wk/X2w27C32Wa6iI/ltTW5XGYyoOSNZofb7+hPGe1//WfNIzy43l+2\n3R9Wh/kLhBIMlQ0FQPUnCrwqH+IjqqjqbMoSb6B7ZNRUBnk+e6yEXWiiAYtl\nrygOo/z9XfX1DBtsdyFOFcYuvXGg290oJxmUll4akkpw6HIRZGk5YDS2KKr2\n+HZFwa3rqPX1A+UnO1HLTYul83vomIcyc/BCabijxZ//BM34IpMdkfYaFVFv\n+kPhLP9Ak1/8Plf+RDYP+hZJiY6g3v/jy+aYSHSQe7Vx3DAaH8NR+jjcXH7M\nAB8I/7hI92crVGhmo0wAm09xpc8r+4+D/Kp3bRhz0R6tpjIgpm1aM0jWWRiQ\nKajvnG+e5tngTrHrTDJDgbrLyvYqkRbs9qM+AQwaXMqbwH9Pvh/euZey0Efi\nKGJqekrb40BFsLRcTNgCtZ23h9AaFM9JC7TmizwT8NE42dzmR2v8Hiwmy2wW\nBC6uwJGjK7Mu56a3n/yNGaM78VpVJFQPjgYSJd1SDTBzv3nvIFU3EcUrHRRb\nrxE6+fVrTnU2z6j769kL8RMjkmNgynR+486bZE8sjHpAOpItRwOEaTkQdPhT\njS8z\r\n=4ahY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/density":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/touch-target":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7fd17ce5e.0_1574820687305_0.5867833676229768","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/radio","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26360d5cb2c15dfa0e236829b03cc83520bec4a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ec729683b.0.tgz","fileCount":31,"integrity":"sha512-AGq7e/OOMpWPyMA8qy94W0844LMCjzXacQs8Pm6+eP4i+sz42SxAjj3T2bb5rvVH2wUlq0RWetTYER2tjyiMqA==","signatures":[{"sig":"MEQCIAXWeAtfi2tWEzd7/uObJgChFkzgZo2AAeGkfqs3lOJAAiAFSdtaO3WbSpfJMaC0+pJhKQqNdM/ZTQlr2UaQ2NDdyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3px4CRA9TVsSAnZWagAA+FIP/0adPuO/WOVaZVVF1I3j\nNqarzDooWWIYZ+uph+/5XoOV1x0BC7l7maV3k323TXO+6nqjc46w2Z7XWXuo\n0WkmlFwr/hqNrn1SWodQ2StQMgFWgPOVZmpur/ARgBVfUwUsYo4RWy4vk/bC\nDZ8UVZ13r97TIqkl3m/S2dSVQQIPYSszKUTczP/2pUekj5ZdLkEki4O1QcHZ\nXiRjyOvTzBmsLd1iiKrfXPcabxrMkDGDur1PDZ3hhdNzUYulyPJprPjmtQeP\npEcq3A3AqqHnR90mSxL3urG5MPKH7AkCxGC2NN9hlpUBdQVSEJ3xnVQ8Cm2s\naFusd9PlJ/mOKdBKAVkiNVi/HkEg68tphAm+UdhANJ/RaDwJ3JxUHkFHAugt\n58dujs+EvrsiJSMbwvSSP5ph6m9XOE/mgchUDWi2d2ES4KGbTETbi6HQmkSj\nFoOoIkr+BUAgn64yo2WqY07/YvI+7jDHhGmgnBmRPKFL3lxX848Whub+DoZe\ny7NvvUQE5AXcBSWSa4WW8D8ZKWqe6UwwgUu66RXmpNQO+uHWSvVdNOkY80LM\nBxpcYnqIkGEma70IgsvlpyinftlynONXr2ypFfQXA+Qtbuj2IcNvtkU1FfVI\n+lPzeFMC8QNpBzN5XaLiBjSYLfd0BFFiCb3FBQzxwaNppwuEEfwvsgSQqryF\njaVf\r\n=AR7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/density":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/touch-target":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ec729683b.0_1574870135576_0.7247118458952784","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/radio","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47dcba3e057ef495871492638211528345b5c3d8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":31,"integrity":"sha512-B6tyeTXoDpupEzNGEUr1MqP8A2WChaWJqZxy0GjvNNPiU0F4tUXF3rn7PWrux1gdQDP2YNmYG5nPTWV0uLep7A==","signatures":[{"sig":"MEUCIQCUZslFtwp47CMpem3XjxLZBU/LpZeI1rJ7qOyPTFl55gIgKIJ8L720grcKGBLpCAuDXn5sKRj/mqDI+kSWtrc9GAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3su4CRA9TVsSAnZWagAAVTQP/1j+kuiAMAYBG0xPbt7h\npULizapl2coOsVJwI+kXVspSaWTs7exPpEm/SSA0He/Yso9ABHuGvi5G6vLb\nvCire/NkBYdABeyl57UPaLn8t4wJOLibt59P7BExY20GdaX8j/u/CNk+g7Vc\npLWyVT/bzZl9X7d1mZWct+qV9cSaHNTquv2QRnYH6z8YVYRdNOrC1eMWQI3Q\nHAbI+jo0eW6sjuP+y+6ZbMfl6jvumLO6iKzLOJg7nTMtoRrxLvNjVY64eOrW\nhjHFiC9Sc2TiweNaeJ+MGVQhqH/zmWPWke/aFQ4maggnzmTkBM89QYOjpeX2\nOOB5AQiBf4YAKWTUNc3QvdQ49GNGm5TxV261tvaFU43Sm2Q78uzri+NmW43C\nQkVQcuiO3KOJFyYSEd9ru1JjfcHpD9W4CxHAEat9VpGJhZfPp57CGkxQTqMf\nI7iBoLLBhdNIcGB1P59Ql77RrWH5YHa+DelR51xu3r5GWuj6VBWcxo+DWtbW\n0RDsVKNp+eIpghB9cuWtlX9fICQKlT2HlapjZbIqkr7gl771ctqTSNgjvEOx\nsZxK2+G3o6ZcjBFCmMqSbWGLxTueVPXbpz8zqHnx6TJBcfNf/y19HjtiZPQC\nTl2auK/VHiZfQWUS1QdGJMZUQNhJFfaK8fr4WbuIaU8DCFJ8smrbF1Cog8il\novuo\r\n=gvT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/density":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/touch-target":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b8bc4a26e.0_1574882231958_0.8775404379692524","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/radio","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564bf8cea22309215dd81815e04bd1f52562b6c5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f978109c3.0.tgz","fileCount":31,"integrity":"sha512-rm+0xwchguL+mteTpz/Lp6DZ3rK+G4PcIT3P7UtMZ3RrYzFqwMIv3JmTpGm/7FpAW44gwJQ/exDuVyzlJPb5Rw==","signatures":[{"sig":"MEYCIQDZk8BMo2f3m/whVjredoHiFbdYrNQrwmXIQlbTRaJ6LQIhAMCplqv4P+ud7RaSXL0gDq+F9qHk1Ju0tqKAK2D0SFxA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTuCRA9TVsSAnZWagAA5EIQAIzQkSS7JDwl+zyX0w6y\nBm+zH/24DOIChaGfBb6tZJINpxMSQECwyz1R0f40pup6BvzB8NAnjwu4BsAI\nslJEJHFpxLgiJLqO1wEKxCG6/WTTIw0aDaLSe35197OxrBqrzVvA1hI+lV8Y\n0H8VzK6YpE+U3wGHgaOfAd9kXNK0LcF4/vI78lzUf6Pp0UGGceONEbkz7BLC\nHGKBPjlmhXfSfbzMI8znKEL/Cv5Epz+tDZWu5gRcEijp23lwP4VclUexMm3k\n1eqyNGtX1LHvlZJRfiJjWUeEvFs4KUfiGbaaGo5O/7rdwPZSWxE1Ej0kZBaO\n+BHFaOVdvkEs7GZrzN7IkmrvzGSHy/BG3Epz+2qzyJmV4G9R+469IfZFbVGi\n/sskhp0vW5M0Ln1IOIpWC7bgLfOuMX2FafVHc3B7ETtazo0WRPJ+iWHgizoV\n5jS6BmfPLMKYFPklkvoQWygk3Eexdm16d+ZzYQ6r1QiVm8BMDL2/2CnaEf6W\nCjEKxvEMyXH52RqWu8PbL6JK1GjTGzvz1DodC1NeM9rLip36ZZB6i/S0LGdi\nWdNIgrSk7Ja0+yngTqYgwNP4eAQ+PX5JycLSIfhqn/1jlugQnKeDe9U7ClML\nba0xAKwKpiyFcaDa4sN9V7YcD0/vzu77LNAoXPcMaNrFpmJzsxfxv+TfJh9K\nJRqU\r\n=ZijO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/density":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/touch-target":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f978109c3.0_1575306477681_0.16553884434512423","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/radio","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ef4e90f4b56ca6d302a5d00e4a04b1978dacc99","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ad9dfe706.0.tgz","fileCount":31,"integrity":"sha512-eirCbOrHvihxikoZqPA252bKlpmoexbXrasJMRPMVAXjVam+59kJLc4TbsgLkd1aEaNteVSh4U3J2g2H0FnTHA==","signatures":[{"sig":"MEUCIEspBrci0v4PPy3fxJ05JXl9HLM9RlbSMfcehlRM7J4nAiEA/QGl+90++2myfVauwHapBxiaOA0Pt04sp3WLpKELZ7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1LCRA9TVsSAnZWagAAmcYP/j26PhgiJeWHWI6n0kz3\nem0LjkMDBaG3B5Qo5w1AkSTJJfb61eexbURoEZgcqsDcdcMeZW4naH9e1OIU\ne1lCUY0LY0RggFG+JV6vJ2q5iasf4xhdywHYEvind7gbg+N3JGT8ZEw/U4hs\naLcAK5EEyqpGR3ZQv2X4Y3swJiY/H6JhlaM/0FCg9aSYsHjP0IAIg4IJye1I\nNh9iKfx2wQj0pju9uLU1Tli/hYeFj4CspVBA4ZMSwvI+1i1MmhMohgWU6iu3\nL0y5rPaDwbhLD2SiZegdZozryoLStgw9v+KxbN1FLJl6D4rY/rj3alWHiFf2\nTeAeZ3WaLzUQNNdwI64FR9dAuKx6DrI8o+cv59NHpDAxd0EdALhEexjdxuEK\n9yFJezS55FjY02JG28jaJRcB9JQQmTHvySLuU25rIkVx7ADIfm58aoH0bs5u\n0ZvQi7LreUrQHq+WThHUFwMlF+0X+VZGdOqjPtFs/hdKa1XjHJnMIy2ufI/S\nXbsZmP+maofCNkpY7GhfxerTJaYNwz16LvgxhCz7Qw31qImGT7CWeq4xASz1\ndlR7x7r/o2oSbouDI1aEI3hN5EwBTGe15LUablwQBnEA0TmJZcQJ+Uu5KJC8\nIrKs+XMYh6wyy1fV38Cfq+jGIzawpHAs+3bs5BT9w6tLxW5Gbd32cUMoXHbI\nl4Tf\r\n=Rv8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/density":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/touch-target":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ad9dfe706.0_1575415115437_0.42447266780125537","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/radio","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5cab9d71749c9e0474212c2f3de0dd4e4e25815","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5e45d77f3.0.tgz","fileCount":31,"integrity":"sha512-C3lYbSSrCA1jlDgJm+DyuCxWD8bApJRBpinl9tB8qojGMOahbi9tn0u6GkqLMb0OmbVbqR6p3K/SFsVMgJ2Fmg==","signatures":[{"sig":"MEQCIEeCOYjVM+LyJYVtIlw9/be6Hjf0FoxXCKPUKFA7oOXUAiBhbWt5zR8plCIbj9t7cYY/+sXaNHVtroOuqnW2niZF9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u23CRA9TVsSAnZWagAAeDcP/Rj5Vvnsckufc34PDh9s\nsKEM5DcHgBM9V8lHEx9sL0WOT60r/wnBOU55NsJCabRA8Zvosn5TmAFuyBXf\ndErCCzpYmpLdGEEQGUO8Shsiqz8RXkRvoxBzK08vM6wXl83d8pnlw/ItFfQT\nJpnbbdfBxOg+TjeGYVV8IVfAfQP9H2nk6T3A0ZAJqNjnCdRuV1liB6L6n8bp\nVP4QZ0ID/MMRk49RnKpuecZvOWTz5JrBdipmow5PzPQ4Iaa1wbJrqsSvrm4k\n8LQ/jif6u4Dkkonru4//4DMuXQGd6pdbEYRp0FrzstNER8Vldy6kpZLkBaK5\nbZEKljVGavEwCUjxk0J0v2k+hQDWw9Rl9hMTv/Nhuav8C8y039jqppFUaeP7\nX7tI18BXfGCXh8o8t7dHiPv2Dxy8vOIr4jzt+NR7SF8aSZEPJ1nE5fa2x9LS\nY5vjbx3nGy3rfw3QhPHBXPfOmvHGgBdQBS59/CqC6mAFtYZHyC1143AVSCzt\nozrAltawknyw1ny/74AVvDXskUHoe5341K6kcjLsMZvKLRDemvnMx0svpL85\n69jCRfSg4M3h1o9kknwky6LDlxBAT5goKg+3mS0c7M3j4wi5b8U5jq5g0TAV\nYBXu7rTSmPCVPnMA3NzwxkmQiug4SiME+Xqlz5u5e7RJI2UBmBHKEFKgiNP0\nvtx/\r\n=PI1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/density":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/touch-target":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5e45d77f3.0_1575415223290_0.4728733917794543","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/radio","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4ad2c8a41afe5a2bf4301695973997ad8329447","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":31,"integrity":"sha512-yKZKXqsmPFmt+61TdR2F8JfR3K4RmGnu1YMj6u+eypMa2P/bmK+MwIHFDpGX6B1yOWOYW1Jbtq2CIk3QNhYfnA==","signatures":[{"sig":"MEUCIQD/KXdVja0JtFxUsU1PmoYa76RxmbltpUgTtqJkh4a9BQIgOdD3rlOmQPjmxHmyTQrzUtChdKPAMpCPb8IP0yMiVNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3SCRA9TVsSAnZWagAA/UEP/RK5lpc6w8jO3V8Hd+CU\n4O7ZKrn0LJ4SAXmNK3tOEzTD07rKKBnCQ46Gv3+cfK8McPFhZHoDJha/+gXO\nlyUA66MYNTMDafXEJbATAIJ56WEoVi/qPD+zO6vSdP5BtPSSSuAJmfWYLM0f\n2k5BN/Sc5AEABEJrJACpbwKcA+6oXoD8cg0AoRGwN4tOS8YFvwvs4kKC+kcr\nPtCZw/vghfysfrprYcteiYBDeEyUFk+gfeXjkrTO/vOM0lLKQKSwMqufF0Gc\nxEUXon1kFOkJit6CdiMJkXZvhWwuIUX54PnHlkRJ5Kn2vX2BDWCfhMf6xLo+\nBiTPn9f2plc/X76GbnkcU56OTgd0Tt9JAMsst31+E5VkpDKCvqXE3jYPSP2O\n4kVa4dtvRB5JmSGtwMnb5bRCiybLchCObz1wcTpAAxBJp1hsGeoZgrk6QwpF\n8U1Tbti1R6ruMaLqtXH+oyN31fM2q95t2O58YBoYnD7ZjytcAQho4wC0lys3\no/4ZVBhd9ArpV6OzgQijquGBjIIfV6/nehPjTHGbZT2oqwGqZiUW7TglYH1Q\nNJccVTdqH5FV/M+oDgFDvN5RX3OjYwqrc3cV6ToG8OTW9KEv7+1orsSvBJlf\n6tCLgSVVk+2MIgt834hpkPSF4uGlgkvXFdE5O+5nSZReJPM56a8Z2xncQXKV\nCBkj\r\n=GYuc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/density":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/touch-target":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d10e8cdf3.0_1575415250053_0.8797107736825418","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/radio","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81eeaf5638cb184823c3df82b00c6483c5b50dd0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":31,"integrity":"sha512-OZTrpRLpPBhgdV3gPTF6l/J8QI7BvDvex+Jc/uRCN8v6ZmtNQYX0R1Unt7aNGSSZZmO9t7e6r3/5pmvij+pDFw==","signatures":[{"sig":"MEUCIEyfkWbZowlBCepsb7Ny5cONeESLDy5hZ+ZNQ4oxo0swAiEA0reG+DDPymtlH62B8wRZGXZKtiwsnnOqCP+OSk4jm6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXwCRA9TVsSAnZWagAAHfsP/26LCK6lMg5sO1dDgIUy\n5XR81ecsGtQl/AvXMZ41sa5IW+gWbqSHTDO06V/ruB76ySgmOA4gvC010poS\nvScJOmIEyVbEMuHqM+Keobb5qWhbaTsVmcmwG8UiE4ivXNmIL1w05W2ZpgjI\nN0xay3gXxTAeXRqe/gAayiwjlRDQa6lsxuWLTp+AuPvAqLnUhFBIcRCcV7BN\nDDUCKvL1MVMMw2CqwVpru1Kqen/puQBoYzYm2HU1ypX8iNXHvqzkbbxkorpd\nZzjyBbDg4MbvCtn5QyvRRmlJV0BNepznycjibd6bRxugfpXiWYj6GuW04yXw\nuuAExVBcljM0625hzqvhNk67ukGw9CAsVqsSRl/ffgnpAmqyIB4YGwX9xoGA\nL1JXDRzUc+/Gv//HTDr8eFAr32dnL9fm3P7fTTPSRCfDya1j4+bz52e31ZwY\npLYXBIj2X+D4fP6H8hmytVIxl6gvPlZ59GH+fc78LYVVNcoaBH9l7pJ1XY3L\nYgKg78pgH3I63RGOaHApyoRTjQsIBkEot994RbaEecvoCw1B66dQ9YDg4891\nKXvAybedz+5aY0Zbl7ymTaw+V5fwHFrIpzfGXz6tqgeqq5V9bFPB5lLgSIV1\nQ4fatvRzskCTnO7Lrt0GTxcqLYdiCj35bYw0juNH64XZ+vfUw/KPpa2FMsQQ\nj1wT\r\n=YuZf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/density":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/touch-target":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a5dbd8a2a.0_1575417328102_0.36087349673189006","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/radio","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f11cf094a2e0725e10a4d498ac5bcfac9f6674a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ba879b68b.0.tgz","fileCount":31,"integrity":"sha512-FcM+c9Cb3+l/965nye4839kiKeOMg5aN52CFVkGBe6/l6KQUj6ax9TP2XV8zqWn74H3cDNb7t1Oqe8C4JLq2rw==","signatures":[{"sig":"MEYCIQDC75lulTT8s9ljEfaPBYAwtQKGKZzNqADxNns7/NibNwIhALPdZiJX8XiNQozP0LqXIMhSW2Ud1OGPpco68+g3fZ6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWuCRA9TVsSAnZWagAA1/MP/0DT2s75SmbAh//0h4bd\nLAjsCxg8MWrj3Awao2o+/cJAMFD/2eKAter3dFJfvJy7kNYtH5jkcStoQjhj\nn5sIehayqQmNbSDXdQ78qXSygf+3DByJHel5wNnuH81s3+L3BcB5YWIW9Fee\ncKj0YcSvnkR2yBazswxKVsjXeGoxNKOEziPVToBB9zntcETGbMnuWAIbhrwB\nIkMngOPjqonMQK/O4Ovsq55Padm46WlAEVX2VWXiJoFyUQbodzvNXHT2Ii5O\nFf6223R8pOJn+X6c2XGjIyQo1UZMQw/GmvT8tYw5lMyv6No6nHUUaBITrj8L\nYTlr2II0wwMnmlzEnyNzF+GPhgjQ+NSfi+vY3q8BBNngZ0ab0TlQUXniNdnK\nZufIi2qGuUXugFsLoI5xIJWF3BkmTF9GwCCMwdqhyWn2aJ5Ie65KSn8w/yA2\nHk3xldORiLZNszEDk1JvjTRkZn+v/BnXlurWxXAG6SU0FG0+EUASKpHJf7oN\no9uyZTfuPLMTBDuypp18ISN6UaFpkvZLxBLVPM5AhCSyfgICE0036geSO+uI\na4bdpFAGLgqvjdg3WmyUjtar7YnlYG0gokNzTEFMM8Ra3YVBTDB3rxT/lzqz\nMknHGDcGY0U2hE6IbqomshKMD3c4SjtZwH4V3TH43YZZdKiEdvc+uEWo8Rnv\nsxCz\r\n=Ws28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/density":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/touch-target":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ba879b68b.0_1575490989819_0.1560152455396726","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/radio","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f14efe8f22211eeb94ccea2f9202731e854cd94","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.aa0eba489.0.tgz","fileCount":31,"integrity":"sha512-+LTlF6LsuqU8NYy7AzkgUvNPNnBWF8wvlH0ZB2MVi9I4ujJq6Jh75KBq/6+mx2Twvkdzt2q5+E1Y9KsNMSyCdQ==","signatures":[{"sig":"MEYCIQC5jD9sWd9igvBHS+7NnS/wep+0VIwlnWYxy7BYetpBhwIhAP7i0NLA56bRF/cdL1AEtdOHjT+OBkewOdRJAogx9yZE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYFCRA9TVsSAnZWagAAE8MP/03b8myFfGvTpAoJiyCa\nyi2oyFER0gmxGssLEebi59jRcmSrtip2s4MHQigRkTHiuE2iHuRJXtGtcp6m\nPGlbUaj1xM2LyLkmPmo1gXo1SEhNhLVNagKFrEOZHESieKA62hsWb8sjIjFK\nHweHu5n6UU/7OAD0u7gMtzE9jq0WwCjT1QgDRbnvLwymkGWjWJ5fRjK+M5aH\nyLTF/RJJ8ip7i1VwShQ7rVIyT8dxAGvqOUuIKNONnjAnZ7JHxh4J7jj1uaLq\nqFZowALL4Xs/41rKh17YfBlTA/1afd0WbTP5VKwb1ubBQITqSQ1Pxx4zRyzQ\nzhdKHm3vgrTk9uVKq4D3FLKx1opfvRDpWxw9mRdZhsVoLQmj6Kg1bVBnMF1Q\n2qI7j4xmjiOJGs4PoQKLvH1kclZU09dTe0riK8kNEz3yzt/GKYDGwjY/4sHY\nYSDHos4jKDdJsIZjIzRswP/x/YqmbMxEFoMPopLeLw+4f7sqW7TlGagmMRdD\nR5GV7CEj5AqcoYrlGo3fPu9oBQElHGRLdDj0XX55siJeyUHqCFjRIlDH+iwM\nge28sU5/Rquu8djWT/0aFOI8zDEBxGTmO/x7wzcDFpIu4WWCB/urSzp63qKP\nFPYnauk37EMg8kzvrQuvidgs6ctwEMuOvO0AnizUPU/4IR02NOFdqlATBUD3\nQ43+\r\n=B05t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/density":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/touch-target":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.aa0eba489.0_1575597573382_0.1999258063528382","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/radio","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7ba677d44951a4ec44f1ecb5be3f14403c9e5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.cb7b71a86.0.tgz","fileCount":31,"integrity":"sha512-YxBeP+GQJ+sWlThjGmWjTlcLq7TRgBPh2O3ojWhiajugmlqSfcRKYPY0rZHtIKYB2J2A4Me4Uq/X1W2rA4recA==","signatures":[{"sig":"MEQCICBBbEuXbG2pACnrK5O5Wli0dYjPE4fyU2kDPAThlewQAiAOLiAdpXFhoeutVu8ERbebA4sjf954FrQFnSo+x5Rgcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqlCRA9TVsSAnZWagAATI4P/j6aStYIDUegX6T8YXXc\ndW530GzrcHRI7UnpJFxugjPnRJdFsxtrqgW1LJ84iyaMc3UJw1PibdOMDTt2\njPLyKLRApYOw2zymblTBMEAF/0UX5LvW8ZY8vyxwPp85XdMwl3+u0xh9FZgx\nqG73TCBhFOPI7/4A4qbTaTSodoonrjbDMchn5UKN0f0XdmPpeflQTuhqE5LF\nqwqQc/uQmSmdDjyqcQiZi4fEtYXaYdoOsPykjwDlhAohpoyAocpCOuNuV8YZ\nuGABOvNgIUeuxlkTD9MwB3KRHKwcjEpXoAACDYMCi6d4KEtz/BRE6TbH/LTN\nFdlXrwzRi1pwzzNYzK2GceHOUJ1fAUw5QMkEdRj8OWgYtDbDya21M97gJSnX\nq6IqwaauDxyKGtH5j5pGGy8QnR7SwYefwGJ+6CFjYX1Af4vwNaCOPpttDawr\nNkCt3fcNsss2ITCvBRSg50/sDStSQ6HS8+15JguLEUanu1C5UnmJ0lvi3AlC\n8+aNcWnuQktd+Z8YXGOS8F0Lkc/CcjphEJgjSra4K6O5GAiuxUpgzoecSZCk\n15+xhWQCWaIqP9r9E/Xru7L0dCuyGAMCPFxrrrNHsz1Wdr2Ryoc9x4Kgh3xS\nugrtfxRU7jTWF7SmG6GYCihtjha86S1njklof5zkqpIR54vPchJt/4hyLHNk\nDkdY\r\n=AuGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/density":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/touch-target":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.cb7b71a86.0_1575676579862_0.26862086866936163","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/radio","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6188b17236ab4095479f16d8e5868d095d6ed06a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.50f110a6c.0.tgz","fileCount":31,"integrity":"sha512-U4XYC6FDT4LNfZv30mjwli4MTKGAQ7myB4kWlrQcNG7BhYRr0FX532+5YS+sfmjhxgnH7idk+/leQ2m8szgazQ==","signatures":[{"sig":"MEYCIQCyY3NHfr+xtTwAJ68CE8mOwzwbBii6YD2tBrnY1SohiQIhALwVERvSLwY2QwNJH0zxq1pnjeKT+jrsMdQbvra2j8yR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788cCRA9TVsSAnZWagAAA7kP/26RYDpChRf0PXPdSQlG\ndmQtbViSc84GifhgqXger8Swh4EGdAPgFnkwC7imZ/PTWnfgTiH/bgJCcIJf\ndYJHuxZKztJRxgnCYQujIFL5UwbefETtSOpxJav3mRWi4jneJf8/V7U2hX+P\nr0ENAuTh45Jb0hJwZcPp9TInz8e/RoLClh4JVqpLs0fVMaCSeTiu574oEI69\n1J+T7L8eucRjvbIf3Pl5flkIhgkJP/2r+IeIkGAzEyGJf/4DFb2oK9h1D+kE\n49hBltrlyfN+mxUJV3wqiGewwIqH1pZpS7Zsd/yiirjd0TLiSv0jZb1h5uwi\nckZtPtiPYmKtVTAoN5iHaAN+7neI9p2ehi8WxLcvFvx/WaKdQhmHn7+EIB4q\nESOXkBzqDkOnVSB938Li7DikDEeR9VaxXvCe8y1TLkjH7sBpm1WAfU/WLsdH\nkm3tRPT1oMbfIKBpL7UOTYMzS6xhWIun/2damsq4E9SltrB1qno46qnA1eDt\nk3srExkbX2i1RH7o9pD1pM5TK5mLtUd2Mk995SEsNYt+BUpueLzG1414Pqla\nBijb0Hrfqz4unpXexm3kwTQVgUlIOLsdGAVsuRbAlTVZKIe69dsKkZaeuri/\naTiKXwhZhqvAFSeXLkgMp8z3CN+Xi1wXtAk5dUCSuGmVB+TrZCpd7yiC60vY\nlcMQ\r\n=O7HP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/density":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/touch-target":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.50f110a6c.0_1575997212302_0.3215216136148764","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/radio","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4f53d6e5c0d9c39b08123bcf5414340fa14ac1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.878a08b7c.0.tgz","fileCount":31,"integrity":"sha512-xqXUVMETrgnihryZJkZlJcY4hAg0M4BGnWb+SM4W5fRwwCC7iPcmrsJaiyeNv8oT8H9NoUAqSAL8dQT15IcWww==","signatures":[{"sig":"MEYCIQDe6Ciy2tfeYZQqDdH3S18y7Q8ZPiZRJ7KdXd1CyBbOFgIhAO0QARIOHJOH7URafBzd8FoIeO/nj2xEtFf7VKnfIx13","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6tCRA9TVsSAnZWagAA5PMP/AyGRyesZxAXtKrgT31n\nLXl4On8a6j3IOT6cmyUvFFYcv7XhiTkIEtwvte97YD5hqpcam8RJ8Vyi5B6a\naSunMJ67tFmGfAKkLDiwbFsdGpGthLR1HIOvhDTBwk51kV4nJdSKLq2KRnf1\n13bxPv5iYYrJhMqHhga1k7qCzXGwpPEMnAXsD3eBvMyi4hkNqsj0tlp3nX+D\nPFRDxV+tyEgSdPOu3YBEn7FHFGAApGqo8s6HLD8JYSFJJLOxI6e1yj92bMTk\nTcz5zVZhWNK5MoCnDRoaYDGINb+IY1l3e96d698g/PaJAvkRSpp/hH9CTHWh\nh3DT3ITYlgmp8OZMm7ZQz1Yl4dytzXFaSO4y9iQdN3qRSoZk5dCJICnJMkiu\nD0jTonNFX/f6j3Lx4YQfX8vv+PK11j32Dh5ddQyM5fvYe6raJgT+HL1N5AZR\npA8j581NqQAHWtgNKWo9PuOMDiMXwguysoHKNM7L9FMKqvv/cPThD87SP0dp\nSs1sGMR7KlFz0YafULeAfvRulyVU+WYfip/Dd6lj904U++GYuzSHfxxgveVg\nmvq/MHrZmvv+44sd+6Q2Ud0gm8DSFYDy4I1a8YEoKiWVvCcx7lJh8dl/S8ZE\nL/u5evc7e9YtGzf3vi2qZ20fX8J3hbfWadaKNQr4nyPhDZueTQBFyBuZ7M6W\nFmKT\r\n=hzOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/density":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/touch-target":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.878a08b7c.0_1576095405515_0.6331341085760298","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/radio","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9903137831c4d307855172ba4f6a931d5f576092","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.397905b4e.0.tgz","fileCount":31,"integrity":"sha512-xK3/mMv8KlqPmD/HpR6FK8O6Gcf7pQELxLvv2e6pnA5n4qPA74DAo+DF1t1L9Uh1wLNdpxlIzOV+ISBjLhzHYw==","signatures":[{"sig":"MEYCIQCAo4y+/UjDrBxArz1f9CDDakF1N3MgcJzUvuOkF0GqJAIhAPFGQNctUqEcMEVnhJSDjnphxL9XY16+bG845MAJ27iG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apPCRA9TVsSAnZWagAA6sQP+wXCnDlxNlq5/FtUCPkq\n5wsQvGgKMG2gFyAW86s0CSl2Fk71N7ujfIqvT2YWg4hFatwWvjortvoa0W4c\nLucUU+SwtfkH7pAkrNzQCqIyP0cQnkFxa9zl9xvh/qxljOiZc5kh6+ZEu9on\nnGTAAJosxH9f7d5NpRxxhAwuyjHltJUIIkHR5fJiGuUjOhVkBT6z58KKY/FQ\ngxJm+4ukZFfnKOGRIs+U5tErXkWoUWs7Vx+cETElC18Fa9bobGBgeze/NyM8\n/NBAXz9uqHs+UDE+KOaj6gX3nVxTioYQFf1F2NZl/r2hAvAFxIvFEFRLmZax\ngrbcGU7U7Go4WTe/gDw865uRNHOX1VnxCy3dCO4KpYIWNZKkoI04xuUHNdiO\n/khUDJm+MxTzyqzzsWEU3B7Rs8IVV21ReanMWYBRjD3drGz3FKtyaJh4oVNB\nKRwaKB7cBwtizoeKsUM/Zvx70/tKYOODHyXfJcE/O5QQvoEccmbPfXt4rYU0\nsCyCu5d+aIlwukRTz4WvTJUw7tWM80F72VnOEQbOy6m1RoTvc9GchO4m9hYi\njv8vuRFnycPODpIuSmi2bUKTWeKdof5aX9io/IDEwyNVne4f+XqJeV/Mb1Po\nCymN3hqsF2heL0bjzF54AoD5EwTpNntKWNaadDVuYGAMCXwnEg1qqlZFe0Y7\nFc/P\r\n=HZ0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/density":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/touch-target":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.397905b4e.0_1576118863343_0.12955423377403763","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/radio","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b9a78ab1252f5fd0e57d7f1bb94100d23bd207","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":31,"integrity":"sha512-ir/LCvPm26zXUOy9FBClZBFCr11nreTdxPkYBaUKaFggC+SnTosXYFhHH757M28IwS/qM1pWC2IT0XzfnZmmZw==","signatures":[{"sig":"MEUCIQDX21Drr9UMO87FuXH9H8NtySV9hlUDODn10qrSfo1NXAIgJ12bn6LPze+ZJmnqhdmq9qKrlbExCGTNqWAOP/NDVws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4hCRA9TVsSAnZWagAAxXcP/jHx/lNRGJka679N97x3\nruGldtPxJ2vARo4NUyqRIB9sSsj1CTTjVMggGZvb9/Se8PJPpdbvZxP7mbYy\nUqmI5DaiUhqMkRm8h7/YnGDEHzGnDL67QX+mR/zsd/y/Rhe2uLM9PivcFCIG\n4cisU1G7OyvvGrw6pdz5l8tmQoDTfKQJd4GVCFrcEkY7nkXNDUXsnpvD6DKj\n7isKOIUzwMDNnnNbwWDgFVhFfyGtscPJCqjSi+xdVsXEz01jGvijuT63hZhv\nz/X9NLVf1RzlrXKLPUpvWqQ57BGeoywUWXxRtllE/FUOGosbsCpmLoUg6eO7\nYzBUOCcUJQNAzu8GJwNqllyUjoPgU/ijjyfkiHxqTBDr/RkfzwlGhzV6ZZ/i\nogGYIBaMxt6SMUkKqtY28fqOFE6Uz978rN4v7weg2jkaAY4bfmYyWwk4U60V\nys3rnl4U5mvovPd+tOQ2NzxTfjJhoyF0PxACVvfs6q58Au1mftJPGOUIUIzJ\noONVrni2y2TCLcQa2ReIForR8LMfiV4qDpfULx3LggvXvv1iz/FiN9WK4vmM\n1QLmx8TAgm/97l+drynN0XcYOLDt0yfybrnog51nf/trmF0quhWM8Se1L9UJ\nlGrBXsiVUSb1B/9cTE3tY3oeQR8XDz/Ve6Z2CKeVBHhHXhu1kxaaQx7kQbfz\nNrnM\r\n=WYcm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/density":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/touch-target":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1fbf5bd1d.0_1576177185483_0.2125507268536322","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/radio","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c031d08318af5278a0c5d97d32371d5f16a533cb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b723dfa78.0.tgz","fileCount":31,"integrity":"sha512-0vVECuYPaGWdY2TMliLY2rQ0wmd/4QxvhZxlGmMPC1rQKJESEghQE71dkPnxk7Pflz1GEDnC0pY4c7bgo/XpiQ==","signatures":[{"sig":"MEYCIQCOSl/0vvsYESL4AB+S5o1ep/CeylS8lDcYaRysikHU2AIhAM3ltO6p6DRMRFVXT04iwVLwgngzDHN2cf0W4BWlfCNx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6zCRA9TVsSAnZWagAA7FwQAJgCTUfFp/V1PjGffzv3\n3JBFSvG1FOBKxxu6owo3+q7L53g11+FTJGalmuT2Xgey3hi0X7FAIxOjNurU\nGUQl2+rnlIaJgGnWex5GTjcNmttkeUtjlxELaFHQA8eennkarm3h0GdwxzBt\nAbBCm661VcVAAkYU3JaMp61Jtciya0+1GgN+THLAs2KKFnpbjDqYOJt/yT6t\nCZE7nGIPCt8OD2khX8Onz8gh8rHMhMUsb5GNuPRr7IDN9MpjgR+hQb2fTNF1\nlKoAuSExx2N62x+92MFZDrrIa5oUJsHoqMxOM/39foExooabN330ZLKiN+65\ntW1EySIpttsDbQJ7b+as8SNf0HX0oR3XRyUtefwZh0995/S79EtKIJP6iPvY\nSYu8Jh6V+rDbOV4P0Y8xLKXatgwNUr0NjS1zx2VuYju/5yVlFXU44FL951/k\nFsoz+mFHgfWL7WP+owH7a77Hauf1xYSplAKlTlDjA0Zun21BP2VMbK1srv8q\nyLFs4XhMkiBZ4nYTLBdhKIetqvpCzNMVOZVTNxwc8U8wEfAZs7YloeyD0sst\nWhH6Nz0TS+MYnrdrkVpHKWRnDBagNCn6NF+WLVszV0L2LKTXQxVLgX8m72Mc\nvhwAjm+JL5hnw5ubfPTwpGqSaN1sSSFmE20CL2FkViJdx8dpEBp9uWmV6bTT\nhCn7\r\n=CBQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/density":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/touch-target":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b723dfa78.0_1576181427520_0.7231678975679559","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/radio","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f48e78943c9033b895e1b1f6010a3bdac025de","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1c494e567.0.tgz","fileCount":31,"integrity":"sha512-w8IFxm2FQ60xH/fmW+pJOhjIvJD0++6oNgxMkNfLWA+fjEfbdKWNQgI8Attdbn9Dw3NhEvwsc2hQskmUedJgRw==","signatures":[{"sig":"MEUCICZaLMnkrk3/s3TvKAD4RKzR21CU1V/XddUOb18vTl0XAiEAr8B9WOZDtucELkyi2BwAGMsL2DzqBne/wcIXC78Dzfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s83CRA9TVsSAnZWagAACPMP/iIFheRlSBarFfK6ZJQm\nncIb1t4DlGWJ0uo1BLGHs9GPMhxMQFklueBhOidnwSmSPzXBvs1CDRU4XoK6\nQkSJkjM1hcuO2NsIAkuKobszms4CLLmCb/yeCcKUQWiVnLrxQN8cWiHm1WxM\nCiJmCAKULf/EB5oL1HH+Fyh3AisC1saMejNw8AWQ2xyRhrT5fR7kKJ5HIREn\nB+cz3OmzBy97SB+xIdOKv0IWKc6eZj/L7xQfHiHhHsi6FKBaK8TpZ7HDGHIY\nKprW66y6y3fdPmHACuBixNAq/pIKn+RUcyaJE0ctzN37K9BN2Ct4fcqjjlB8\nRt4PKudYoJ0imcuhtuPLfdZ1vhF6lKQWU0BnmOyEHKdmndO7X/mYwXhMEIw2\nF6i9UU5FVyQYaJSk6Em+dhfxHmFHwpJN/Qtv1JEkzraZZt3Dc92LHiTkKxBR\nZJoRtLPAVlj1tKx3PQ9wf4fh0Ay3hwSMQrOKAtGy5kx0iMk6ySdOLF2hi6zf\n3RS4onNjtUeWX9qurVzIcXpvU8BQtDfmxhvFni71OPyrWzNY9gG16yqbszjX\nqHqE01OXiRHbN+D3LYIPm7LkL7WcBoPuUThB+mcR4Bd/PLuz2iiMdwnJG4wB\nB5S9vJHgkL8xOcMCN1ou08bQ41XRpi1N51W/jv3sOGTt3tH53YVQXd9ekg1G\naTB0\r\n=08dS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/density":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/touch-target":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1c494e567.0_1576193847279_0.7510118978941456","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/radio","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80383087bd8eca494422bf9dc5d41fb4635bb5fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c9e98a125.0.tgz","fileCount":31,"integrity":"sha512-clnUoTJqJT/+R/Y19pdUkRwgBYj+krfkA9KpRQplpvLmsMMg0LdaZ7X1PrtOF7R1rlUmntSsutC4iQj64/OAbg==","signatures":[{"sig":"MEYCIQDpKBfr1dPXQ5HnZ8dn5nyxGS/iqhP6LsTfUG+aq7DFAQIhAIcfPO5v9d04/rTHiNX8KezNTTsZr0ZPPaNWspxUpnuG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RofCRA9TVsSAnZWagAAk7sQAJQn3vbZ8faEaY1Xwfdx\n/MVV0LRCgmwZ2YiWI6hERE86Kbvd8T+qb2Y4++mHFOKjydxvtwuSng7pYO98\nEsKRh9PF4AWXPRjXKzpwPVQF0anxoUH5fytSj8orLrXcNON4KHRvEIIoliQk\n/oo8gI8N56ed0mM6CIlbdfw+Q9bfu90ke5Dyl66JJ7Gt9EGyrL6p5mIHSF6z\nazT3pwLkJHggh18e0zCCrCJKPN514/QVPpWIPx6RB/nSC442c8160nHUmHzW\nmUy8B1Q1mpIkqx6/Lzt9gvw1aagTLQWh9Y9j78j1EgiWE+vXPdvMtrgQD1h5\nIy38dbk8k4qxwUbJJTsj+y897E/evmA2LOnHaBQe/4K69gNxJxNzsrH7bhli\nCYMx8wugVv8MgbqSIZn6RXZcDvHx5tD1dKeiODvS917mLvLzm1H6gbXsbFUF\nFlK7AqbK06kLcaR05oOec3iVCI2XmHDSuq+fEw24SW57ShvUxzxVP3u+WdWm\nK86afboL6OBE1Hc5GQxgdwzCfISxNrzNXgnCN7TU1dH1J02bxFZPXxAiM9CB\nYgWorckxjViGCVCn8vC4gQMJ4p1TG8oSrGrBDQv1K87nTAqXMFFBSnsc5SZe\naIUgsDLnFamrFX+oRc50xfGyMW2rgN744JjGgZRDRgD3XqgKHC/DBhzjVFig\nyyQ8\r\n=lAuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/density":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/touch-target":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c9e98a125.0_1576606238877_0.173020465083918","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/radio","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393fc01f4b6bc5d7f71c9bb97b476999ad2874dc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":31,"integrity":"sha512-7fxA0t02Msv4iLwd+PlbtEqsWmvCgy8RL+qqMV9zuCi4RYWkyg/Z1pi1vly0Fr3RvWA6q6a3/55wxk9XaqH3Vw==","signatures":[{"sig":"MEYCIQDs+F2dU9ELzw58IyI9r1w+447f4FKK+pwZ+DaRx37QmwIhAI12S3jEnYTWY8OlGdH5OsOZkSmzCF6oj5I082ZC0luY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfICRA9TVsSAnZWagAA62MP/27nNLdUENfLp8JaH2wX\nMp/ixT8tY+ScjR9VS7r7FeL4Uw+S0qWwCnSYui4w+V4La72vqnXTYond8QD2\nXVngwYxVlLDZAPkeE54eOP9iwSiTZHb1nIfXmZoMkpzUHPmxoFCSwqKdFbqI\nbui2PM8xz5VFTWxm9fFd8UMTjZIamqjzoupHJ8APQGQujIYhXi7056j5KCY8\nZ7nqHHBiFzqjgDJxVcQUfPBOMilKaE9LOx73OP8zSlDvgFWMPaq5J466Jee7\nFef12Zi04sU+hBzQTMDS/9fFKSQ2YDuhcznVGvrQPaeCbBK6KlNadmyYssPm\n5AgZfSqIvZWXr3UpF460h5hXjhJoKMGlPuVEXV+VWDG6IsMuCDDMpkSO/rbP\nTvGtv0O6BBTFrp+yVpGx6Q2qLyB4sphTbzmUI6xTunNf9lIiHNPB76GhsXgp\nm+JgXqZLU4Cy2x1RnalkwP/LpwvHdNn4+DbmCYNVRArl6QH+7/3d02Uvs+bk\nyiDh4itg2flfW/W6WBdc5wkxTcNiEq3oFrU7fWACOJW1EiraCSxALno2Affc\nvFxBxtlRHaExsfqxVwLDJCsf9lL0shIXOlWxsgMKulzTXcI9hxj79cz9l5QI\n0NqlLmufo+c0SQIerhdfKvOKAVJNdfigYpYGCNJAxU07Rj7eSX1zZLovjIRc\nDWrP\r\n=N9Tm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/density":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/touch-target":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5ffe8f7e3.0_1576622023716_0.04801436050040686","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/radio","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c45faa719395d080aaf840b71327ec3e71fbfbef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.47949b08e.0.tgz","fileCount":31,"integrity":"sha512-1UsENBEO1MYZhW4n/CeR2kErLWxG5+NvSS6L9pT+/RWLo+63Y8U9CHMp702zhfbj3ort3ffYqABrPjfas/z1Cw==","signatures":[{"sig":"MEYCIQDkBfCIY0dv2eDTbJ4ye1Q6760NoqJoB91QlUneifl3pAIhAK/CLQOkd+Pz3OzSEbq1nMuy0TQQIPdqjJ0Kht3hPXV3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSvCRA9TVsSAnZWagAAXs8P/2c5rX5n50dSCZE51Of6\n3ISb3Cf47VvP/TNYFQ4kOX0UsVewuAP/x9OjImyWap6hqDVD4Nm6wkkxCt1y\nZXz7pplzJ6oAVxq1k2EY4WtqrECwYgP9mVYEwFnUwREPBq0Qd26wcEcgBYor\nmf28Kwa9dMUV5EtWnulrxdnfsh6TNpFPWbLxLiwNH+E0GVJw944PRN1Wbcv/\n+jGD7IPxBBePehVIx6l2oS1OLdC2OcGjRGGTz3odufoM24ZR5vqHBzyPZfwR\ncDyI6CIl8/2+gaEfJTo2XQ8pkFQZLpW5tFs3MPZVbhVYbbODrBOSahKOpVoh\nE6WKF7OYS2ybcr7lbGMUF5SSCIIokJ/HxBJkGScUzX/kuM/EaxvubkNejFlM\nvidus+G36fo37q4qYGk5qJzfQuK7hVNpfOxJGl2zi7ZL5oozOqZaWf6JXSIG\na5teY5kXLhuIh5BlSLD/pYym9DXnmozOCGrTAcEXAxrIB7gAEh4OuzsQz7lL\nVbZukURIS8Oy1pVTNu9WL0oEVpPzJPFUaBKmmAYaQHuxuy9c8hbGkEiUdGUw\nCw9cEifT61O0PxFYIO/FLiNRyT3/6O4Wrj0Qw+WeS1WqKmgwL3ae+7dHQR4p\nGi35b6i2GMPuGQyfX8biX4a2OXQycIEMRrywPWgfVfLRVg5pzNDbT+RH+E+s\nuLd2\r\n=ZSgh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/density":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/touch-target":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.47949b08e.0_1576690863477_0.00992998161278602","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/radio","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d8c15c967e373a1552b9f2508bfcbe462320049","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b240bcc1b.0.tgz","fileCount":31,"integrity":"sha512-J8lYzE6ryA+ey0mguFxtZ1C/emPv63RE+853swaupRko7o2ufniAf/eACCZhcXZXjOCVr6/bnovMO7gBUaFLDg==","signatures":[{"sig":"MEUCIQDgTn2yY6oLF7y17b8blxIVgOsuJoIjhPfk8ip8v/LHdQIgQK6OmuMYCxQuXKTG5uQP6CREiN9fyHZ/UDWSAu1ioto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntHCRA9TVsSAnZWagAA/AYP/2u/+u1M1yMCZefc/U6x\ncS95yMl4i9fUevurO6YKFpi4xxYuNBMmKZqEgcD0vSraZo9a8UuyZJvQB+4O\n77bfYE5t5UA3d7czGU7ZH9+7sAcnaaXllSTLqJngIMGGOz84bkteJqSYO/HK\nXWZpGev9ZHNaDFMrDrDO+DmtYMSyZkiy1p5Pmwrp/mU5U3E1OTy+5N4FocWy\n9amayf3r8yrsB3snzD5bGfVxfGzF11HM/dGY72/2lpxddObFUx96V+wTbMCu\n6nyWSFHR45qAVC5FZ231SKKrASPmMfdHYVvftsJkFlAp+sXjUvDg2aRudVP0\ngZp8E/lHy4QMHv67TzYBEXPIRNqD0PdAYxem15RFzy8Fcp+MQA6+dLGYH/nr\ns3ts2daNwpogzKnETS5e5imS+a08U6gzJC01yLxGeZd1IcX9y52iZ8HDG1t8\nWLDIg4DLbYZ+Bm8i9UYECoMs0yyPggx9sc+bu/tDVTPuG0xm5rS8Zp+2ETY/\n36PRkhQBkMfcSEV7biJ39pQnBv366Jm0rfe20OyKhlx9oXKz+VolYc6maEFj\nO5ViQCN25MkiAbzotMNtDA1c0KOFw2UMrZQ6eh9ioUKBjrzMzNTBordCEJRm\ndFmm4fs22W7EBf+H16cr5jEpfWainNu2wY90NBWCdmqp1Yl9+8W6MHDe4hR9\nTwKZ\r\n=d1aL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/density":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/touch-target":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b240bcc1b.0_1576696646970_0.13835800942594734","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/radio","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e39a30ced3b09954b779a29445aa40b68a9cadb1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.391674a26.0.tgz","fileCount":31,"integrity":"sha512-o1tVID/+EW95cNxORJFlveF0A4MiX5G78uikGle6GFGWyf/tlOfjAg0H4l7FPXCWldql+QF5cWODqLM7LcQNxQ==","signatures":[{"sig":"MEQCIF2iolFg8spUsaccUg22odKPwF3V1fzHnWdMr8BEMIzDAiBYFVLIJvxeLXh9HyKCkVL2h5TswiOP087xm41p0ibUAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntWCRA9TVsSAnZWagAATAgP/1oGZBpyta7xmD7h9fm4\neUlozs0NXP1dyd0erI5jRMMqCTfN1CBUfsCNfbVifMvlrI/td3/eIk8SZ8PQ\nCaGdfnSAV2nvHh1kRUJ0FXGYIbpQ2p+x6UoV3b3MuIJ/hIf3ViirQlAMVBRf\nrw3UZ6Jk+4aBpwAe47yIzd+md11Zz48iD3UNR1xcLp6Ayeiq1t+lhvzVtBVv\nhTSdlFHP8EGsr8gGA27pKo1qrun6v+d/Mj/x/aBWEA5jOLsjEGPztV7/XSQN\n9CoT9Sqnnz8o0nxC0c/s8lTe/fkvr+E2nb/1Z7fgMG39mHCpQiL/82exmwWc\nyf4TdenE4Etsf2TNd5hR4GV3jTd9b9x5FqfdGKcPjQF1TpWO4DvyKUS5SAed\nhltWCyjwMrAzDwA4LY4Qg9svNXQXKqWFC6ZTpJyOj2yNJ/X/P0m9IbD5/dBt\n4hGWrkjd1Gk0ogl5WBEGe/un6g05nM3u2sszsYzr+p43LYq/rQIv0+SZyjPo\nT2Dwc1BQsZLfFO/w37l3Nt0c+rduIFx7FRO50lZCmQ/FNGiQDVOJ2JyzQ+Tp\nzqFBluluAHbUywIcJvCqIzVRZ+pWbVgZkzJh5xULBId4/u1+md3RekfR/yqA\n9s4zTL64ok9WBzHtSVp7xXIuke3CTWjLw7kNtV/LY/6h4iUlltiA00hMUJj5\nrT40\r\n=9Q1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/density":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/touch-target":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.391674a26.0_1576696661992_0.9484809519939132","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/radio","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b16d955420728dd165d247e7713b48a3862e685","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c4837746c.0.tgz","fileCount":31,"integrity":"sha512-WcI/sCaartnOxjczUcnVjZSZugoJCeoKM/q1v16+bxDR6ELr8WG2EGjamLMpLvqcF7iAdRR9V7V1FWPCNinxeg==","signatures":[{"sig":"MEUCIAukPRrXgSXOQBt7obMediyN80iKI+7MjnFdWYhtj4FkAiEArbpFq/zeOof/IEGwYPuhZINZZk8wriNho0XjfjSpSOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+KCRA9TVsSAnZWagAAR/cP/2koShQUzC9Qj0X+hMzo\ndH++TVP7GQG9Z/QBQhL10tEv1/XRnz0UNXkPyXHM6squnFM8pO9OOM++j7Mj\ncxG46bru0sdrOOE7ch0JcbUOl1AAgrVpneJIt0XgOLn0jFS9F43yFYIJOy8y\n0KJ68eI6eAWCQikxW8tsz1+hIgjA0XRkAmE9zZ72k/C/k1ohK6PIOdLoNXYI\nsc0YWW5yAFdbqWRv639f0Kj0X08P4eimtaZGsb4JZtUMILIEEc1/su3o8Wd1\nb68tu0Kl5LJUBzcmXypN6j5CcV12rMRWTjjMIGrBKpQuMAgcLubfpIQ1Fq/B\nszSyv+iO1qYSCEhRfxguyZAQqFSaqCxVnwhY8Up0X+Sf4RnvfGIj2OoIpQjd\nm8Wk0IPBuf6vGCjefW4q/8zeunknj+XddtY6EVTtmR2i5Jezxy4nshidkvl5\nX36blvb6Cy/09aMJ6UONUTuMEENYZzsc9o+miammSgBLeb77TgqzYSjmSCTJ\nY7+MdVzaOWDjpkwmvwDGOW+aYaANSXokN3ivCAXf6fEuNEfkKwNKSZLO1YkJ\nUc+YwD5mhH/d0ZijwzAy+1dkjPPfp/fx1tzHx+TaVI1EMf36K2WdCpC2sgMK\nyMxI6GQLkJparcQXIQqaIeSPXT87UIqmX+Fxsq7moJ9qRG3lbIRXt8om7bDq\nk9ty\r\n=hlUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/density":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/touch-target":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c4837746c.0_1576697738001_0.2562349324327844","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/radio","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f143b3ae66846d86bdb3d97afb25a20e016dab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.e41a70425.0.tgz","fileCount":31,"integrity":"sha512-CBrWM9k2nPwL9cBg+NDh7MWsY/nktnfRCuuGfo9cPNSOc8IHYTLc1R6p+hT0P27mSv5WWt44n39hxQoCcpcHrQ==","signatures":[{"sig":"MEYCIQDhDdKtMThRDXY6/c7QBRoYL+Dwhox2sCvtEp5g3iT3ugIhAKsIXnRO+KBRRBtA/eU/TWswBioJBENoger8+1FQ00xX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRVCRA9TVsSAnZWagAAtZYP/ix5hLNu9ITfRUkO37g0\nKFwrwlMhQ/oaSVMHc4Hk47FOA68EMKyoem3Tg84aB/jYhOGnhqwGrF+k6cWa\ng6aKpDjQZER45bIghMFF0qUbe4GTxYaQ0xsZvIA8Bh6s8GvgVzBwTveZTX00\nAaITZdLBqIDKWkGNypRveY4DmMfkelfDx/cJTQxz1MfF61neTlOgE1ylvZ6d\nZyFvPrUIHairgmTKVdKPoslnyfTzQK2RhNenPb0tzF1z/Hlw+5sPcsi3mpRE\nr56YJy/Ugq2Dd+mSrtS8Vit6qhI69+9tam4cO4b+XGaZoLIaDlZNZuKmcRfl\nHKadcZt3Ff2X+o5vSMZ2UfVz8XoNLiQmwey26M7GC0XBZwi1JSjfVKIIZZLb\nxRfUxAI9jhbmMPDDqTqesiVx402INQSUY336Hp8SbM5/JT+m9XbA3ChkPhHG\nfAhtm+tgL6HqqcEOxl4pmb3S7UhKigSIg/F6KNALl7B0IHgmtJqJ0x1NL+Sy\nXat7fVhRsMfKW6VIeqIkFdRWVQHaza2nyC7+9mVy91QKunhVfEdU8OCZ5GEw\nDJY08XKpbEQDWSpK9dwfaps9hePT0TfqwYtQanmxHhNVltqqnwZDKuPN4mk6\nun08g8HDO/oYicJfcc2nSQZHglsiIKVE0nyMeFCHkg2gAtiF1BbPXIWAruer\n7wnl\r\n=e6eM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/density":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/touch-target":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.e41a70425.0_1576711252660_0.356449200426902","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/radio","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"088b47d417d11b485972b1579cc9b4305585f8d1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.bac43eb43.0.tgz","fileCount":31,"integrity":"sha512-tcqtEsx8mjjf9BWN/GQ0GJfG4iv7I9AdfqX0JE+lzWqplIDKZYp4hrty4bwsQ2GevtDC4FsAkOLTg3RYm9YBZg==","signatures":[{"sig":"MEUCIAt5A/nmAhZUmpvBHRHqFgd8RPlw5gbrOOxoVSZgzpwJAiEAkEhtDEfYDLXvjl2L+3axziTjmlNR2A58etWETXyAnOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rU0CRA9TVsSAnZWagAA5CQP+wWxuETNstfnXUYAiMsu\n0c1YketZiRgyKzkevKENuEPvPR0FABOEnHp/TCTAvjLcg6wxtCK7+sePkXFs\nMgWcaXQ7cTdATdxZDrWEXs0vttTlvGD3cGaqNuM0niiS+QPvJ23U1Vhtt8tD\nSBhkdqLMn0Sj+RudoijHiJvf1w4ie58XlF9nQebFqsqFI+CvGT7JGvlcpmJy\n/vxtV2zxyF17Ycv4Wn91noRx7ea4W8mZUIeeX/6k8OXU8DjvJI3syscmwdOY\nrDVf4hQKUFeWT7PACKGXY54iUTk6Rg2UBLDJGVNB3Gv8uOl0w99tlw3/ZN2B\n0nQ0ShZDjLfwOYT4EdIWPmVM4CaCdoy6N5Kx6xGz9wkVV3REyBqQqJ2/jfvP\nWVJp+qKVpG9VMLShftn5kSTK/TfqCQRA0lsKKlwtb2iMAfYsJ42g7ZuYjwQr\nX0bkuofcYUcpLymgOTCvH89eFbKvy6mtxQqMnW6o7o2z/UxBl+4zRTrFwufg\nzyH8sdxplTMQqQO2FkIDIBVcsInBzTcyFGk5bVJQek/WnkGpedNLR5J3kExZ\naX7uN6Zat0Axjhh9t3JWGJPINmjUjyPt/bVmQNXbVPMpKKWU2qJEsJTDJRWH\nQg8RC/FkBwmgSm8cXYTNSdQKpXs2/TQCLRSy/uIf2caoPQ6/DCDKQ0w1R5e+\no6N9\r\n=DyAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/density":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/touch-target":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.bac43eb43.0_1576711476451_0.30196195940631765","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/radio","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb90530b880cad3b8b362bd095252ae40238b23c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.2e491de55.0.tgz","fileCount":31,"integrity":"sha512-reOSsH9HV1/zTpvNr1l/Us0lMaOIHIP3bWyTxIS70XjY3UcBexm+T/iLvWBUs7bK61aNwsFixpEUMyehPgGO4Q==","signatures":[{"sig":"MEQCICXE9HLrExHuZB3YCxLdo2gI+EXxcvV1IzU2tsoUJaWcAiBu7qCrkPf0I7wCahNJrrQecxNkPMYYu1gf+aTwJqki/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XzCRA9TVsSAnZWagAAR/sQAKBaCrcFLZwOzSwf2gL2\nxgK7wW6+DJmQmnkTu0vFtb+S5jK7WUHvzwBMGnkiSMzMAgOA/RrJqBO3wm2o\nhWen6YLeXcHqJodRs5fQpOvrb5v1F2icErv4TfYm4QsHVo1oGdIYhUAnNi4k\nqCphlYY6xbtccc0QksLVCNwLfiImcHr/yav7XcQaLLBZk51THuPzuaBNXjl+\n3SK/Xmpsryoce6G9BQpgyrFcsc52Lfof2Zh71qy7yXQCz+SV3UgA4Qc2+TIG\nC9DS84c9jDoiJJn7H13LCvgvl+M5beX93wVBNb826jlr/+ANLzspYZR2UY1k\nAhqxVmb7t2nHegQX2BvR/2e3HbcaTcYDCHYq/AfQva86LwERD6CnQQI3wLEI\nAjzY1YEWMwTwQGfcFAklewLk7ETEMd8qfyezNECNPJJsp9sNaTockjoeVbxl\n/G9NjhBdWPiNY0e8PuHm+exCLh9xgzozWof24twbrM1eoaNWN+sQlUdP+6EQ\nsbqvQg0MtqkfGROMNUZKSWDIZ4cLUMOVFsSJci835PV2qqY39EA8PSUq1aMr\ns4eh6GCQdMrv9bZZmAyXX00DZWUiYofyaqkSB/9Y9n48C9f6MNvpGZjBqiOS\ntm6jzkHMUeYTCkp5FFh9TrJjM9yzLWZTTFxIAk9Z1sWjOuVtyU8F+PgiV66X\nf2rD\r\n=oGX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/density":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/touch-target":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.2e491de55.0_1576752627137_0.7686290894139693","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/radio","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d949b3ead5bcd2f9ddb999a57b1a64fa60f366d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ae101c144.0.tgz","fileCount":31,"integrity":"sha512-xh0VVvwJ5p3Lma7ulMg5L+23wX6IDm4RNDScKEg1aqKf54Vghch+ZdmfbaHxF9oJBj9lrFiNiNBmNQEgmsUn1w==","signatures":[{"sig":"MEUCIQC469HQJCgwy1CriWbs6hfp/guKGSRzimFN322Qaz2mrQIgBPW3nFQKfxMLhDaX3Zzw4wPG7k/tS8WwNP+Kt9HV598=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6R3CRA9TVsSAnZWagAAOakQAIuv9mg613adNgtBf6Dm\nVu0Se0XfkVLmHDHFOAbq1K7RytH1h3mYlJx4WZFEld0Gh7nGjez6HUpyaJQP\n8JSZC7h4CjAuAkOIeOuTnPqneZkV1HCWN3PO5FQKg9BDAjiu72nEd/jA4Zki\nUdozSCcn/HRNTu24zSK/yAltUg4FmWZ6sShchkJjKahFt4HqgiMlUPRgwvyL\nJdkCt55lmTHG/PFUIgIOAg2l6eE/wbYgFUHD1FK584ExIRawhbpBf0n2F/7t\nfEXAudmvqNVwxtRpQBe/lWgvp6YlkzUbj3XY3fb1tlNVKBrbuR0YeabjiSrx\nVW+IvzGu2W4LBpE3Rr8gk8wGyn0Vn218nqeDyee9MN2dO8zCtzH5UP8RxLDQ\nQ0hce+AY96sqosI0qvKWvYfbu3PzKaJkRdicWDHsp41Sute/b/MggKdldZR3\nGPNxUjPjqiQ1HUcV6L2/X/ghfT0RyKzCBzYDXHX1xLQo6miosWN7W/9RXQg/\no65t9JSAtJd5RM81TClU3Uui009Z/49Uo+t2D+7hjzpBk9IcI9z2nkS2haQ3\n6oXt9rLKPGF7tcpUPANkKpGnPsPRpjsc7FVkyyetRlIjY0uF8I4o4JnVd1aG\nYYNZtCaf4SUzzMEwrsl/4uzG1Yz0XIMsDI9L360gnvXro41P4nlsoIrlomwb\ntlRA\r\n=xNVp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/density":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/touch-target":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ae101c144.0_1576772727384_0.07121672959161085","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/radio","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15df7433ded7ea84ab98b423a5f1b597004deaae","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a51c31f26.0.tgz","fileCount":31,"integrity":"sha512-BrQf1TF8UHKeeZGuDbwFhKv7U2rdnumwNGLaYDv8b5XeCkaHlDd3c1yOReDkZUyp/j2s9iILuHM45JSFmbdCIw==","signatures":[{"sig":"MEUCIHuptVDr6MAOL7ZDjlAiPyquZnC15ybraNbkk4KFBOYoAiEAkvFvRAD82+bMZYO2DqeScPCA+1xss+IXwP/5UhZFcuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7ANCRA9TVsSAnZWagAAkLIP/35XHpQf9KWwHjh2iRRf\nvRFZdCLzLj/XS/+wiFOzvUQS8jRDrGkG7Dyq0+FPb/niUcduMGJW4HqQifnw\nl3J5Xd13n6mypa923GBdof2DCBIC87KCN5ckexmbR7hFhxMlfV09urRV9DSw\nBOrpxeJLRyxxZDtkHDR5/XGX0U9/elPnajHeXyF7fxejx2tfdQ7O7WeW5pMD\n6NAyJ630PPehdW5Jrike2aEavGjabbxQCh11GJgmTpwCB2Xi/6W9/0Q/14M1\nfoCCA3uNIPECMfk8NxY+Olh2osXX0T8DMWdCARwDKodxxerDxqcPXcV/jTOC\nNqgi2PM39HWLp/aVVHUB092sQWBO2XJx99vXtD0Nm13x2GCcsDONEhH2+yM+\n9GkWHgcH6a2qb4c2bPm97stxPRqegatgYRjTvWJt0aZb8MwJ8GY1yFQAPJd6\nyb8vVLnkkbHItVqSkGOJdWZaOlxiWipIcsFOymlHgJgRsud48U+FKRXoYkzg\nsmKcSgjAVwa6rZ/snukJMVuGKX4FXKyT7vj85NRvsUFpvg/fQwAtV8ZA70xu\nZSlv3hqQcHXeSPeZnUuWwK/+N8Om5H4j6jPVgP7FkWuc9aPfmKpZd41pa2lY\nRVrtgCPKZyEV0Q2klkZU3kbq4Lj170jpRw8hAaRVlKjZcde5++aUD6M4vwIx\nJjrF\r\n=oKla\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/density":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/touch-target":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a51c31f26.0_1576775693140_0.07402386338576239","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/radio","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af63eac555b9c4f2e4cfe404830f6e52e5b22beb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.21fc4e13b.0.tgz","fileCount":31,"integrity":"sha512-m3UUL5bYXWOExxFVLMq+P5TwPADPakJ4Gf6c2q8nEyUsk2U9hrczNgcK87PdYf2/irpehNzA4bw8xn0fDTn/RA==","signatures":[{"sig":"MEYCIQC0l0jfyWQczlppAJySwIUcbpnbOYDrSdv4PnFw9k9w3gIhAI4tkVOAuRFvOKsEUycUiwXDZ1iSQHGt9bv07gBGzEOd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tGCRA9TVsSAnZWagAAGmYQAIBPUIROJPRoK16tLOd4\nopXAgHiZNfX4cT8y8xjT2rFRXiS8kWdOcy5wvwJLvu1peiM/9t/by50VE5Au\nIGATP7a+lj0prxPkvWpxOXeFgj5ReZjn+bcUpqdVNnvJAXGSZUPcKByuqc/M\nBkoWLv3z+M9cLXUYGAuwEvIWwDjZv44Gy4rJ+7Tdz8woKriym80nBxr95i1N\nSI0W85UKvTFx86ozuNoaVmB9o4IG8K4T+MgTDGXd15uo2uDagnTL+5gpssay\npPre/Nt58cb4huDsK0Z8WhmnyaYRDYZyFhfHg/gIIGVjc9L/3HqGHsWsbahK\n1KEMqWWrA6/DScrCwwM1b9ffa5I7/gVW3l1s56+SXDtgJ0L06ajdao+7UpSh\nCO0fkjfw/DpgOHawqEVmk3yoC+facYx+nfARpMLRSE8nOoajsWIyFOeNiZfJ\nUbh7HFLuTmwZvvXJFR1QvpvLdIHHlzDFVEBPvCQewDxIQUnJe68airSkHxjj\nWBPfl8KuP+Vtk4w0Qrf4r5nnPriv6gHedIFJnv/9eLYvAN5eW2qm9Q4Nf1MO\n4ubqZ5rsTl65IoLCl5+p+2vWcjcHql0OErazkJSTV4WGPVae7LKOz05E5kGd\nSG96FNWAnqY4DJi9N8TLaWbK3UxY5WC6Z9KInEopISWOoG8IrQEGmARGb0FF\nYKBP\r\n=jmaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/density":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/touch-target":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.21fc4e13b.0_1576790854402_0.5998491779669728","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/radio","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63604c8840ffcf5000b54c077037a714d0052416","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":31,"integrity":"sha512-Grte7wlAd4b8FrDv8b3ust/eB0axnwFcoutFjROeqyt5/dBRXCfHllY41b1Lcg0/ONzJO7AKkvD0hcZ907qVLA==","signatures":[{"sig":"MEYCIQDG06Osa4Y6lSK8UAktVmjM2fVFjdFHX7NLU6liErBTCgIhAM10xwCD7tFgSCIQEYnACZqyu8lboHCMtpzoh8f7Q04x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/ikCRA9TVsSAnZWagAAYP4P/294wlHnRuGqmF0tL2Yy\nOrBDrWXGL1gBGloVbs0jT9QAd2c1X060Rxqrf3CGrms/gxCDQmLYo4NE5t09\nYKhImHr3uw8FIyOvgGM3eyZ1K769A7FOREiplfnkQM+rOfcydVW07yypHp11\nbWzOl2UbkxNKNdW/bf35yuwuIWlL4kObMs/D35Lb9DqRm1SmfGVHPIMb00OU\nc8czvTbnQrohxxqA0HafojCFh9fw/z7ssrSvvK6TB8TNvSz9Ze5oS3evOJ10\nqCdQF1RakTvNp0cmQSetySUs0SXMlT/xVTl3zhaZSDXGVo6cefqWVdfJQ9iH\nvKLUcusYhEEoscN4WqNezPZqfgJRp3Vdn8RlhTksNDrY0bJGs/a8llazlSbb\nWFHqsU2tCe2Euc9xwm7/Q0z5b1FJ8x353Bm3ZcoGx+roDF/yy2VI/LLc7JrL\n39jKRkuGDjenmCXqIlC7/qKoFDtVyy3r7VoegbssHOr9Gj24QL2ZWllBvZYD\n4VzAvu0q3kDVsl5MQc47lk9vH8jSzcaBKkoP9rNPKUsIZ81HfIYlNnYcA6oH\nouxKp411McPeUMm1Wd1KVOKJHQ0c52Ku7eCbGeB1Mu4cikErwPbruwrtTLMf\nOVN7mMiSNcNURpcIkgZ9FUAT6wQoiuftzGefA+0KYREM4I+pjv5WIPsuzPfG\nAsF6\r\n=VZTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/density":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/touch-target":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d2ae6e17d.0_1576794275709_0.6010693589449305","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/radio","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f686229333c54d2384e208558753df6184beed8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ba30399ad.0.tgz","fileCount":31,"integrity":"sha512-4xgT2ASxKjxmk4E1iOZ/G5q5TPVK5c9byUwtFtQlJrruJPBs0qkidVT5RMrDeqMrMmL73EtZUOgzlWeTCXlWKw==","signatures":[{"sig":"MEYCIQC8kGuguwVi72OL26EZW0B+FKLndQj2nYlhgPljqBdCaAIhAMRRqW/DqcfjDrA68sUhFt6FCzNWiwyE4zwiITeHxATj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B96CRA9TVsSAnZWagAAaJkP/3wkejT3Py7hKiJ/a06T\nxcXfqyqZY7DhhZMGWFK4Udx1uNihbRCDvjFefF+Li5Wig7wXKPFk+PuaiRQR\nwzF7FhDMdsdvdJ+2nQHrHqfxu0f4187m6wtTvxewoLpPeW6592jyBM6L8KZV\noEOsIUIDLFe2PMr4oUg/SXGA78KtuIZaCrrX6iLxJAZ3wxAvTUP/n04SiexK\nl088QvQaKqGePWAYo+huEsmi3Xti3MQdPihrch4zvYt23QnI2UWy12fcUaed\nxYJZe4xI+XlsJvE6evx/waTzQSpaQt/dMO/ZwiLxRlvmcGamiC6En09tVD63\n/LqYZdvNldzjho9sM6RWqmVHCadRDzrJSEkgwYMIpabjSyFTVEKX/XVPfT4G\n1IeSvf3+3LVUYauugklTv5/JCO4WUjBSKzQ09vIbtjoDrYgMfyVji4uUCQcE\nPkOtO4f1Z422nx1U7kTEl+lmvOIgDNck7wVQbCD7HX/BQh7LEPT1evuSojQE\nXon4m0R3IHtgY+EC52SBFNzSfM3lGvh34MqCJCzcJ8ePLSBaZTdREiIpVUyi\n6JfmBk64QAvQPgetCBOfFqiw2EQkfD5t1Fw6beZq2UBQ1azq+cOp/pPlEWzA\nDuVBSteTNb/o39SUXGyBMI6c5cEnIKUe07Pg+x+TRkWN8rk9WwehUSqtih+/\nMkMj\r\n=ndPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/density":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/touch-target":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ba30399ad.0_1576804218007_0.7936527757970284","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/radio","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed2688bd3fa051c19c5074e0123c7b245cbf0b1c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a08ccec35.0.tgz","fileCount":31,"integrity":"sha512-YhGhZn9RD8Po7hcjNpO4LEBk00xLjiiY+NfucerFQynSYn8fzQYApTzYo9YYdc1o+ResCZ7KOFUz3nsCdFRWvQ==","signatures":[{"sig":"MEYCIQCbCSIL+64ui7lX9EqMftpygX+wPBFppydbGOE7/vmXhAIhAIVeY0E0id/umR++Gk0Ifsy/zVrPO74UCZ4TdLJku+mI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjSCRA9TVsSAnZWagAAUqEP/1zSw/btLuJrqDbp4QJp\nPCWWqmAQLUHGhk8L8LRpISpNXHkzXg5LBB+Chk/LbM7j0YfLqHhb9zi+l0F+\nCUyCVC8OyuWtOVNw/HXyzIBjA+JPdLld2p+kHUSCHzT2y0MAk7WuaQoGwq5z\nYeIIWZgvB+/2rrGEMEMR4pQJk4JSkn6bb7iJK7xWQG532J4xPZq9/t8Q+Z5R\nPTFKmIkcPNkOsc7qnfJjw79C9qFCLt6udQ79vzd2RoqV7Sxysx+xX990o9kE\nUw7gN9sgW5Fl8KsKTwqBnPkbX7HzSDD54nD1si905x/DwMfoOJAhTx2eaAzD\niS+DdaVNpw1vwgTGMoIwRNnoTyf9dN//aaFPfSGa+pCEW++VOd74EEopn4NO\nkjlW7zhIKSpfRyHvkLTR4joJhHXXHBJs5nLZv+CiCwvTwvnh3g3lr6WF8vbW\nOgELkuJ/JjH+pv8PHD43+L1ftv1fo7q1OnDfRySNPNUS5j0xCx3sPy3PF8ui\nwbzY8CjRUQk7QTz42bV9dStOltDegEq6l3JbyPfYRQJxQpM0X7K9Nal9JJ4v\nqRDGukb3JtWazCfzTlUsKflo053Ypqay+bOU/zmum+0QnIDyPijY0GW2P8n0\nIKpmIqdhwafOV9j7ib1E+ZmmAQY4REpGL2MqLD6rydBLG4EBiLBprZK11zAc\naVQw\r\n=zaY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/density":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/touch-target":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a08ccec35.0_1576884434015_0.459780038221139","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/radio","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed8388e1c95f4bf0e28cb976211cd268f098a28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a2f75105e.0.tgz","fileCount":31,"integrity":"sha512-v0+2NMdtq1B74RsqnSnyiJY783Rz8kc9C037VX50wb/hWEkckfDE2h12ohVhvb4foYc7Wob44oMdSuY0364l4A==","signatures":[{"sig":"MEQCIAINs/YCFrhjzhK244NJR88l4R6T64xufQyKlX3OpAPHAiAqgU09cH4kb4C4w3C5Yr+jO21vEHrXMAbVJHYfO1MqpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoACRA9TVsSAnZWagAAR9kP/i1uAX0YcHeh/0FTcT2y\nn80Nca0hq2AU7MtYe8/KDFNRrkhjglHFq/Z9Wqtk0rpc+EywK9SNcNLVzGQB\nSGWs537i8FZiYiYhOO/HMUbM2P+R1uqFeYBCIHsPj7lLEOvgW8clq1gwIvQT\nryxuvHwZ6nBx8jfFa4JD936ChRuebzccf6dx/B6xc+XLFMieRev8DjrcF3wN\nxAGqkiEgrEV/zTaBPx/UCGEoT5lmpHbQmfwnvgV9rsTMl44oif8CugylBcfH\nuej641m9r0OuAN5cn7wRAMpnmRSxqabEZAzUgfOKvuGuArwsC7m7be4DMIUn\nCVoJEMUeQSTB2st7XxwYHOCK1CIQr0QdFEmkpj6yHBbROWlWuGhDJ2k3Xo+t\n3H8thPMVVr326+rLuzOKAk/3Y37LdWzaTFmRANP+uGZFNgHg18xtezLd3zn3\nd1CzovcMZWuCS4nzZepKAo9PzblDORF/G/nFMrCLg5SP1wKf/yOP0V9gx1ZZ\nbbIBNo9aGgkdfJzsU6DTv+vNrlLlsHl/9Se414uh1mPRr000Pwo/tRmJzQK2\nmdArRQjJks3yZV/UPARMWCpy1uf8o0dzpGwn86mv6NYAt2Mz3aMtl4e8Uwam\nh3NMmf6y4UZUXV+02BKYyaNjIiTHS1QgvZskFEEw8C1jNseA2UT/gnK/A222\nnrrX\r\n=a6yK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/density":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/touch-target":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a2f75105e.0_1577130495941_0.027901771702203648","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/radio","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7fd2de74ea44e6e4965ca51f70f2c385424ddbb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c054a24c7.0.tgz","fileCount":31,"integrity":"sha512-0QKkfAYiF692R/NjJHiD/SRJtTi1/w7tAdncN+ZaDMbaen7iceOxlynN5AFaxMe7iiXpNT7S+aTtLQuOWvf6bQ==","signatures":[{"sig":"MEYCIQDJiKUruuKEbGG9r8W8+Mzk4DNiZ9JMe7wyy79MGDYPOAIhAMU7QsEOsXWGMG7C01eTbgbKw8c0DqUMOo0gdDEhzxxk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaqCRA9TVsSAnZWagAALtIQAKO8MufjyKw3dCTSxF4q\nDgg3gWJhH+SdEoM0tffQQc5EiGayk4VWO8c0iEZJpxgKOdrlDVoJnUz81kbw\nBImbt5c0/dnIp4RXHtYD12kXkjXKhGvy3m/Ps54RCuoX7QrxnjPTWCsOkJet\nTSAU2/sF5z1CjeRKpeZzMFTq6E83gUTmW9C/j4jHfpaAPONYsTiaejEs2KWP\nvy1rooIaGLoKaMnQJkzj4pJYn8hwHBw+4MJDgn6LMhiw7WJnkW1vk4i1GIWI\nB3zO8m1kpBa2wCwj3KlSJg9+pb21wZqsBzANiM1XrDn0ZQ3P6hMQ2RQhWq7s\nLIARLZZFY9j4ik7kloBRmiKyAf2kRxgzSOqahHInWy9KRJHwJgJe3bzXo4Qh\nPgPHzGXYuAAJD7YxfujUAnby09BFFofK8Y6L/naGyyrnkQCMvobqNbmxPbUo\neSQGz1/WR1cnm2AcDWP8AaiHPQMrCyj0oZULrLTkQKMzhpZQWmsoW45EswVv\nDHyIjCXRXOTbqh7BrCbR2MMJXPWurK320gA71T0wlDeYVwrEqaCYrVdOJaVf\nnkFlMjhMefMic/X447kdjzJWGaKkiuZEoYQTyKekcOX1Ve/bkuGigyiFp9MG\nJQIcIep0qqtO14Oc0Uu8zaoEi40YFcuIx6CnazwN8e0IIvQ5CAUY1lcVOYzd\nMhiM\r\n=jIu2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/density":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/touch-target":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c054a24c7.0_1577137833967_0.8557057683881593","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/radio","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"918a45b09d3f773cd8197ebb37db41d790c1931b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c6808c51c.0.tgz","fileCount":31,"integrity":"sha512-90FEOpaiT5Ly5GEjo3pW2UEWwyqhQE90tEcdoImpqQgCPjmkUhYd81loDivvXY/yGDKfaPHJUvD7bF/vcx7qoQ==","signatures":[{"sig":"MEQCIHpfblJy+tk0wD5lIkDvE+yiRfiV4vgAC+mLxG4U1zylAiAPVl7BirPMLV4QhfjtRSvcenHEKfEz6VF55wPNgcu4BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATe7CRA9TVsSAnZWagAAOZUP/23t6FhdenMe02w093wG\nnpmzZ7SLDgae4VH/DeO9cjY9cUsQ05MLazyrtN3w0mS88OHax7SpfhFWmMN3\nr6ScU4CFY3ldnBP4taNZc7qa887YVHJ118mgO6yqHbiRFWjTg24SH3VTf/Ag\nKVxON3f5fvN7ZcwsjQxaCDj4gdbPNVgswEWIm1hBw1Od6oy6wUpRG14O6e2E\nGtTUps7O6sZj9joESg/rSKu0syrbJ4TF/JDBXjsztlrnveXjVGViQZijh2WN\nCXglJLRvkRAx1PImo7wgSbCbJmZga/x56ozOKzyCODOqwZtjpKZms7rOLz2Y\n8ud6QryOssxRMO+5LUXxQIwb6dq36qT7xm+ngHLwHgIzJA2MNCCUagujWKsJ\ncT+ojYDAKGXJG0WQOjJejyz9UNtX74qZZbJ2xq4wCnKDUUI0UvmVbN4Zxky2\ncZzDe0eY/U/cCKZrlIZDazSCoeihNCDTISU9zzo8Zl/tEzR9VlXCJ/OukNrw\nsHOVBYFSX23/ducOLKdlEoSSfvsjx47WUbdH4RT4rPKFHdLSLfcMZdGpXXAk\nTWr2k8ajLF6IcMJJ/bXwxqXSpwIMaaXu9rhPlN0pMKt24287crw6vS/XeJz2\nlqjh25M626MY/BwbGywNmBwHV++k4dZRua4gABhZuByegK4IXJvaRILrPIJV\nn98/\r\n=bO1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/density":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/touch-target":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c6808c51c.0_1577138107132_0.1857340215432941","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/radio","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"101393067a072c9d0b95e3132b5c14b8cb217b68","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7bce9cf77.0.tgz","fileCount":31,"integrity":"sha512-UPEZHmX6uxM5GYmmfDU4Gxmr5OMTeJvUObh6DQL2WEumX42o5GQ8Ea4PSrUz56qB89Ht0FrModsDd4fZcdQzVg==","signatures":[{"sig":"MEUCIQDRwmMhtYpBY5SJ6N0VK98KvyElnaeP8K8XlzgGEWKRlwIgFG3UcbK6vpYTcqPfKeH0QPMf/8kQsV9GfgsofoOBeZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/uCRA9TVsSAnZWagAAuMQP/jCZryDr48mR9FwgmqEl\nKNXq4kW/iCQBPV0DDB11+IZO4rBuX8pl6xEJCwDI6doPhKF5DF5h0UrJFY9O\nAp9m9CRM80uvhJjYaf8zZwiyplCaOjvNJgyUiHxyQaSN+ietCeMI0dloAhqD\n1coAQkPTx0E66kXSxIUDSXxpieuesgiCpqXy3CkgVWn9VIO3WPf7MBd1eWnP\ndlsdMxboRToTBxO6qFdmcwYMAM5PvYP096v+wQnJI5HFitaGl1wlToLPQ2BE\nD6AV2z3LMlplOaw+2rYks1EVSWOSMHpD2yQT1YMhwYFlCVP/1EHep65l23Y1\noR8iExIKE5+iLgtmAR9YlxLgsXbsF8u51iuMSR7n+bp3Th6jfBQ8wvZxJRb6\na79ICRXA7Nh7LBRtBkGppsmgdTG80x2g5VABHlRpLpLLhvXylBUfz1D/hvJI\ni7XykigA/jJdf9UsXQsEdOrn/pHNuF/RP3DSCCHE6KCEWhMmWSCZbveK2xQv\nrLK2Xl5qr1lRPgs5f7CjDpafVkGv6YyWhhQYDFMkgJKH53FX/JQmfNdS6Oen\npo2xTAaxho3sA5kJ914GxYha1pcpRJ1T9LXZgrVtRp3keRycVh9IkmXl1ep8\n31MclCLtYUQYCjJGGu1LFfyIJl+mnF7QOfySndq8oyxT1Tq0PujtHdNRWL8P\nU4Lt\r\n=f9yd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/density":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/touch-target":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7bce9cf77.0_1577385965789_0.041854738444389694","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/radio","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"733146f38ba5cdb7909053c777e79815780240f9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c92f038c3.0.tgz","fileCount":31,"integrity":"sha512-3mHm3jdMfaGFXeP5sDnop2lRJJxlYEKZPcuaRnqoNEuF1xQG/JMysbKgcPgOqoHn1CltTrHc29YWJeVarIlU7w==","signatures":[{"sig":"MEQCIArNCyPJXhkUJRYhDYMvgRwyDYccXubVcN9emq9iGtkUAiBJYBP0HQsR9uWVIMA/dIJd/EFBeVzrpurzSZAnlPIT4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRACRA9TVsSAnZWagAAiQEP/0QTzgd3I5lbwbOAN4hb\n32Ob7irVfs82c6DDjy6nYJ0GzJsbVMr11fZIpd1BhhH+4mysQZ3GOHEG/8At\n/Ix8wN7b1wUQ/VZNeYDfXJ4kB1Kr3idJkloK1XjlSSQZ7uvZaWYuuXKBcW5T\nYEex7C7E1THEfux9WIQtdKECGPv2J+SXnwu03FIqrYGr6w592pnwMPYCUD0U\nb5mUFtrzye9G793Jf09zBfKKc82wLSF1EHptkhajSC8NYid/DuxufncIpHnD\nc4kTk5oUn4ik/ERnUsnNK+/pbSCud/d6Pbp65gwG47lPsPCP+j9Ge5NvJtsw\nJaIFSka+oHJ9QEzmoRaCYHdCB66ASkD5KJ9NaRXgqtcgnK736iFvKrGln+Qk\nSNYLiqU2F1+jZ8qHWCnp8J5FIDAYyQ5LSrz3sEXKWNzoY0FMRSxpcbLbHovO\nYcIZMRCCByvO9cKzz8PsExroe3stad87LXD8ItMNJcBcg7DjpK8L/UKkpaSK\nNTiWWJOwFLSvKmaarwGIqiVh+NSxeNH7hRQUb26XX0uBTnweVPWwLgbaY0bI\nbO78ePhCgdtmN3VsJhfb7Q3V7vh/rjspVd1A767XA7NlEFLzvcEEzQY9ZJOO\nju6HGbx7lKqu2DOWrEXiUPpNclf+YmfSSfatJzMko/RrkDMo4+R/pz1pqNz9\nxuib\r\n=nD7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/density":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/touch-target":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c92f038c3.0_1577743424394_0.16080568368522563","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/radio","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47666449d8c4c96e6f4c6b54f2270ac58a021b1d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1f1ac7558.0.tgz","fileCount":31,"integrity":"sha512-wfG++YWy9GxZR8D7fcyJcgVyroFLupRNLY0DmQOoBD/sR1KNwh6Xtq39S0xwXL7Ln2xQMPXYkn4fcz0A4KlDXQ==","signatures":[{"sig":"MEQCIHjF/XswZcWt5zNZ409dhZirG2ZEsYywpvjEtt3fKveDAiB0jitmjBtK/iE35vwBxF3Sa3P256YQY2qilLEwmM02TQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliKCRA9TVsSAnZWagAAwx4P/i/RnLBPYnQ0unRJW1CA\nwKua9gxAyRLapF4GWUluLzpBdOC50nOHPw9DbTpCXCpTi0rKpwYaPnKhA5Va\n3Hjmeto6muc8+JF7s0ZO7ihOQimwJPJuk4OF+b8Cf6W2O6tHsSXSbBvIFsOn\noTDtTWmCSC7nFEhcwzvJ0Un36M5M/byvmgbayJl06VRWwa+yNkM4SFRU7735\nypiS7Yi7emDZA0NHgoSb7SicbO6qEOWHsfn6jbGJSxIrU5RwEjEAWKK4oktR\nyrAW+nfryY3xUDq9zesuCXIb8hiMDnJ3W5Y1LqckpNgftFB6qBvSeC0iXF/K\nEM5+bXIt7qY8ik4ClByGMVQundQgmRjeUNwgQ1FbSZT6kN3M3Bx4/3crmL+l\nKYPjk+h2uKwQxgr08+Zkib5uwTzQ3JYjstIyQNaJL7AUMjpyPsH4uZKxAa9E\n4qT1Wuo1l0/DGB6+iary3sMN8JHUR+aznmvhOmCjm2spsjbXKKEQA+3CCsnh\nyPTu+RrRp5rkfwiN/50A8uMrGSQk1mJ59mOREKmuofvOEKZac+RZPJF8b/H5\nDpwVM6sbajXkjnPB6wLHxrDeBQGO0f3APCNjuYRogyRpfgRuoFOl7dZmD0uS\nEuhneSqLAKMgmDLe56PtBgV1wW8z0L21VjhMiRXzyST9zj4BPiPMlllTsIIP\nVTPJ\r\n=LqRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/density":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/touch-target":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1f1ac7558.0_1577998474398_0.2273882615214331","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/radio","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"901f33e2a80e943b28d3f859abcd7ed802dcc10d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ec26e799c.0.tgz","fileCount":31,"integrity":"sha512-BchnjSD70K2Smxr3FSEC1JSj6gKMoAijLOUfXJ/G8OinXxnJDAE/cg4GSlJhJPySZAgFk/Ys7vBUGr4+UcAJkA==","signatures":[{"sig":"MEUCIQD0lQQjIKiNL8WZ9SGYlvU1v7d+ddbATJk0risI4FqMkwIgN6k7gMDsRuz74KL40o7LjN2I4Sc8a3golAQQGOr6pwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPWCRA9TVsSAnZWagAAuYUP/2INHL3N2lO3QLI02tyt\nv5/t+Bk2edwlcv+bC+/HJeZv4jE5LoU6aiX1xKQc3q4AgP24noOwvIpUlZ0j\neBv74tkMYbuAR2blU27KsNfEWoeVkDQvYYrbu8LVFTCAJujuBpC63ocDL1HR\n3KlBEq5cOgL6+bREXsXaAUy4PTbsbM0w2APJr56OCeOmn4e0q9OjFyaJ1wuv\n2CT/hxgbq0HI21XqYV3xCwER9sOaXJGkThRyEpaxm2477a2AgGMH3UVU1G/I\nsKOQQyB2NhnYuJN4qlXHiMhMaxa6FvDF//D/xYHGv01BmACBHcQ+lTbCArji\nwa8OvHTBmBneFMCNoBvJZ6ESx83XYUYtEVxJ1+zjYQLGEX/A5/KSi5DpOUTc\nxNZZFs3DOjJRUao8UmOo/S8dYRc+AZtncKwFiAi/Tdx8/zs891oHAjeEUF+U\nSY/72Z/PnOhsiofYKvI9akbg1beEkWUB0f/PlKhVaQf5KaoFyuA15FDdyigX\nd2FdF9CRN6ySuxaxJ8eXgPMoWVdhNze04/CBbPA0Uj7cuK9l5RYcvZ2BpbWc\nmfsEYP68pPBWLoEZ57d7uWIGOYXdR7an8zVO5HDCLpBLNSsmUR6auQZEoZuG\nh/Mbt4pR1TA7x6iCZ0Cs+286zyZxo2jHfq5PaZIqWrh7ety4oCxS4lsUhAmx\nxdee\r\n=ixm5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/density":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/touch-target":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ec26e799c.0_1578001365620_0.9361415389497432","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/radio","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62397fa7b96dd6671183223503b91812194b7ffb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.0a40ced40.0.tgz","fileCount":31,"integrity":"sha512-J3tO2bxsSdl39ipu5l2R6PgPXeyx+W8+f2lKwRFjQJPA37coUrDkvs/Qgaqjm4LOcPTrbriPbRZgE93HThJV+w==","signatures":[{"sig":"MEYCIQDlLaWPJIDH4RiM61ito+8wJOXEm+HYPAoH7IRu9fMlPAIhANcBndOhTv9rMv0dwlaaLoubaDOPSuAfMa8aYShJ3WD1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VnCRA9TVsSAnZWagAAIjoP/iQjx2b21G0XYp5l5Ist\nL9nRkzkEe4q8N7IHG6M/wUG8MPJiVL4KgEet6YkAs7lfK6q+z6BOWYs1NLl8\nE5UDPBOy2OeqOoGeeqgOx2/w70piSbupXz0FhT9VpAdSugPBMLjgO1kUL1dR\nNxfDrUfqIUlNOMYnNuouf7gGwPGwyGiF8YnhTq7d2N3/ZZaJ2nBXMbmll/AJ\narp3IEXcIdZU/rWV3hXJzSlATzYPyb50t6zKOCCN5asXGp+CgcEme4hBjgfB\nOM3tMrGQvAC/P/7ZQlXzig6abz/t0nOCq0AwufCJEwQXqHosuGAwoo86eDly\nsrKrSbSGwzZF4vFsNVC/nCPLzrGAwr2T8ej+L0W3LGUkBRPJugFUr3IvM41b\nq5jkFfo6OthyJr+zqP2ZPkY5+EPZcgTbxDGpMzBL79UeKzAd9ncaxPiFHM3Y\nupe3RltN3Ihc++gyqkB//bBPMqDZt/PYJ39MuwzpMxvb5hhrhsgmHOKs3avV\noDSsD1D/0adNo0YjzEYPYcN+JVKWvv4+zURcUyMwnB2c6TeAQfD7wxu09A7Q\nzzwSi+d9mpl/G8SLSi4iVGDHgY/AoRon8oPn+uv49xti2Ft4hE5EizICV35o\nCyhR69PONWKBhPpsgXgafxUUYuNVSLOt+ojMPwD8UHa+Prb0cSepwVxl+HZr\nzAxq\r\n=b+yg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/density":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/touch-target":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.0a40ced40.0_1578071399013_0.1873322288427539","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/radio","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa7b3ab91ebbd6e3fb006231e180a53585b8a96","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3adf84899.0.tgz","fileCount":31,"integrity":"sha512-07++hDmFkMzoQoUr0YJmpdhUKSE5rGnBfEuYV8yRhuar2M2PBkowYjkPugVfbTuI/jQBwjliGzvtP5HfWP0Lkg==","signatures":[{"sig":"MEQCIFe6h3hQkCj/14yoRHUfZK7NHmzSJiDAihVHPeLZZeCvAiAT0IGe7jxn7CLwtmMRu/rNa75bYg/Nrkm7HRkeId4UiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aACRA9TVsSAnZWagAAVIwP/RKkvO75KjOBydChIPVJ\nbzN2vxlo+Gw/Y1IODLi61gtWfuZVbu7EemCTuLqmrit0J4d+HXhS+m92qCmb\n6o2hYCg2hxjCCFrrDrCJAfS+QYhn6AJLXq0IT40WK5hi6xNXYMeeUrIFYVWH\nRRJu/ajptAaq8kIz9lTDo62KPmUbkDc0wt92iZWz+O+1qQFbkvZ3/xVwvhkg\neM8LobrlakmjIcLCBhyu7WiwnA1w4/TzQpd3kuwcpdgQE0LoKc2OdIw3I1FM\nw8gLc9yqyENPcE26/Z4Yly4B1nGO0e7ozIA0cyYJqSjyCOU1YK4hz4WI2lzw\naQXRNyrhw6y7VeKI3l06Tx+mIP9g92aelQbcRxibnM+o0CX1HB7W7KZDqY5k\nu7y41lnwexI39qJiuTu4Y+3h4n1hmCCIhmjhEslEU7aa+cWW+7j+lPBe7ugx\neJIQ6mYdi9e15BIWxJrRSNMF6ROsL8qgyXWcpaH4CZoEgNTkx3+BeiAKzLyu\noS8EWdSij6yWJ6V1ahn3BwhBEsJeLjHgjQ/Idkyps2+U6+LkjLGL07iY8brb\niYtE0/Xg200Dlzc/ceTFNiEsTwRa++BOp0rFEVXT1Z7NmEJ9cuJd5ZH6tjXk\nDJq+4LdSbaVxfvh+WaBQvwOdHiz2pMMDIDmop781dzmUCDi85yd3MFLdyUU5\nFvTi\r\n=La0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/density":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/touch-target":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3adf84899.0_1578075776005_0.9402791469614744","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/radio","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dee376c552a81c99f3a4e8d8dcde02705e178225","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.0d42ee650.0.tgz","fileCount":31,"integrity":"sha512-iOE06V/EcevayruCRVDYgN1igB+IGnI7CB3z4rxgDeJsWTsQSQoMzM0pEsbXXnJZ48SFf3MGsP/jQ0iZhiW+tA==","signatures":[{"sig":"MEQCIAhvuDv2g6dWSBiJTFeAxrZRDpdOOz591UH2Am3ydMeJAiBNa37jCCFNY5aVH7WwDQY7fgsxItcD9D1NZTfxxYHfXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QYCRA9TVsSAnZWagAAWjsQAKChKZ0+zAxrg5TBkN2R\nUqieCqewa8RAKqDQMbX7BBtKz4McHDyNCR8C93gEpdZKqpGYF2R1m7uvy4GC\n1fRZoqrC8akYoVZcAsQMj0cCAzPh96AZy7vTm5XaqPYInzzHbynR2WjRh5Yu\n4qp/+xZQOqCxe9wbsaAT2TVkcK1HIUpfWQrsTnPs119BfYou++wGdCcSitVi\n5CnteRXFjk4YzS6W7invRuOU9/Bv6doVdY+DUERhaOsgK4uUaAF/bJsHnJu+\nyx7imAfUypGJhJMlepdaXMqMcPvBe8/Mgz46I21S0azDcaWJtt4+eRCknDHm\nbtjyYjZRWm4VDUX51lskORchlsCVTe6/hd3j87Csm+joiKb37QsmeYaOlO2E\nN56Nu84/zf8/nS/qfF+FWewwEvybxz9d3VF94A46EkNNVwpqFWgl331+PraO\nFQj5ZjlitHP0DYYnP0ML2Kp9yzeiut9B2L6YtQTnwyJ4ZPPa0+kycSoo6ezU\nqan6LHbU0O0uQbqNu30zLoTy9UVakzLbh8eoH6n/9Sy3iDVaKktnLrRReFUJ\njVXuwyD/PvbMtdaKN5ndrlvP/4BYlMjxtGUMZ2HC/TG8wwrWbPok9kerEXLz\nYGnRGdTDMDuYDoRnMpQ/Z3Z6i3cowxKFD6z/huLydwUTYSjEuH5Of03VZskV\nQNht\r\n=QbqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/density":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/touch-target":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.0d42ee650.0_1578087447834_0.9110426700750447","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/radio","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65159bfbc2cd7e07ea6fc32ebbc3e7762eb40a7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.847dd1ada.0.tgz","fileCount":31,"integrity":"sha512-Q9IXdhQMu8Azx/NU3lPwNCAFBodzAWsQLB2CMtnnAsftliZP8gsaRnW+L+MqTDA05AsGA+lhNQ5B6fEJ33lxng==","signatures":[{"sig":"MEUCIQC7T2b+gvUGzIAVZboa1ayD0KQ6pRwwCrrbxzJX3SvmYQIgL41tLxA+/c0dXBzDseX2El9EecvI8M1FEpNJS1Ako34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4n4CRA9TVsSAnZWagAAawEQAJcMWwGayMU3AZ5rY9GN\nfaHJIq/1hlvEB/6o5CWhurDqVhcZo4tS/a5qXepZwMP0MVvefeRRShzYner1\nUBZRgXec6tf751wQ6vyeVd2YzIAz2UKu7dXb2rS+labCAXBC4KKB3rLmOQZz\nCODa3IPKvn4GWFMAtKQU8UiE5ZRwa6uMW9byCZLWAYnpP3xLDmKpoGNzGy6H\nf/1O438Uzz2uGIMqFmFr+CA6aQXsF42h53Cp+8jZzV8ood1+A2D7j3kAEaGH\nB0a/jWhNhOMrdSDnq4hjFogousKeNLCfH8Fn1pULfHrFbPX3oSwRpJL2CPkR\nt8pECQZJZjtYmEKPZaFNZAUsQtoE+2VPEcmeEYhxFdomumXQfUg3KYjV21Md\noPDWNCkodNVb9TgZbSicxTWWZE6pdCukiF8fRehznq09XyZoySREBJY2mf2T\nKOb/bK87l65n7Nb8qOB9by3tuYLvRRZcD1OPiedFORJpniPoVW8hSll7ROMI\ntfIuim6Ev3mAVbyv07Lo17iFjU/Pvg9IUyLBIqw9l3BYRUVn3XhCdyePZ0Am\ncFKgtX/whZ0ilFAxRFDPQ2TY1UZZIpMBsZpvTXAh0y3vb20/pfgbS577FCXQ\nrleR4rNUrAB1aWYM0ghdvHIXAr5nVlewK4lZKwshmzq4q4CksFS2kvHTtb7w\nDcQx\r\n=xBEq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/density":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/touch-target":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.847dd1ada.0_1578338807825_0.03688009148561422","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/radio","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a83f5db30d3ae4a808555a9e076c7a43dbd481","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.39df7e5df.0.tgz","fileCount":31,"integrity":"sha512-n3kEuoZXVvrBz1PImQjD2Pk1TKtHxaV098PfOPddPXHj0eJernRSHzOKy6EdYkHv32XO6fIKRKKkeK1GhxVZjQ==","signatures":[{"sig":"MEUCIEnjSoD9BUjyEb85HTsYtxc39zkmU61xiCcwRlWgrB7ZAiEAud6s+3d8e2g65WZ6I1FsX7BPd/mFGdVObri8TSJzyoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cgCRA9TVsSAnZWagAAoN4QAJexmBioJPqcvuOdjCNz\n1aNTjLHGrn3tdZkNQdlxgBkd9Vxtt8u845aHcYee9v1wM6pcJz+w1iFyj7dw\n4W39nEiT/KX3PDMstGZjYdgD0h4c1vFMPCQ5H7nxPOEkmV6chhSH7bkfqVR7\nZtiHR6nl2KaWOWXX18cKdZX4haXswypfq95yUC7wCb0AFQ45bYv2gRlOF88f\n+ELrefILbXq8MGJbAvmGNAkguKSdP1P0cA7/x78y3Lolgqg+Vq8IYBOO3CRy\npzwChm4PH5d1xXiB+7Ygk+mSv5BptwUNYYDKbYn7UrR8D2XMEbE0S2lS28KU\ntkO58W/0PhUnnS/nlxAqo1GkLxzmiUn7h+QcAThcxpjuyMpFqgNjeK/hSK6k\nlPW1E/8iUw8FdqMhbSqNgglIwaCNM0SEaREe6Dw1gsGAfY2COECdioBRmXY2\nMhCE5uAUj3YHrlWiHgDjAda1vzYLjFvKN9htu+BeL6SETE3b9jk0KNaESAKz\nZTaWPYYL/ohGrYiml3Ps3kETJ09ABrnWl+ASKlE3zEG2sDlANeu9VKF0ZBEf\n2SOB8w6/Je2JX0zP6KnzPb/bUg0mhSADwKR/Jx4m+NXbdbyP+UjN01HJ/lsF\nzWBFGW2Klt7G2FKgZxcesTXCF6PEr4xmNeiLE2G+EkCfyyLYvlkKKdwLBUAc\ntnQV\r\n=Blqf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/density":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/touch-target":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.39df7e5df.0_1578358560482_0.5171005389299121","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/radio","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"469ab75b029771f81cf7b6d755ac0cb671aed907","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f1a2581ab.0.tgz","fileCount":31,"integrity":"sha512-B6PUIvGHzjkW+VGhcdx/leHD5+PWzF95QXkN4kP1oIX2TR1h4J9NZWXUxwC/RlIJn9BpsgFJbOc++DN4CYXsoQ==","signatures":[{"sig":"MEUCIHo4cEXGv/jOGruqA1X4mTaa7Nu9IPUbP5Gnq1mnfTu7AiEAhJn5uAKItODQpQ0ZI/jrO/53NW7wgdjnC3aZF+hbob0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0ACRA9TVsSAnZWagAAyYcQAIDklteQaV5OVi3AsuZW\nMQeoTS0YYygr9KJ7fDA/kp/yrrfJOMD3CMQYkdsgg2LeeetvxU3qA8nfD115\nI5KU15r6rGxDT9mhPbH+WfvXAPoHHsKKVbdgf7aJFkkhMmexFd83Hkz/KFaO\n15xDFjK2C1axsGx68o99v1wFHigjklSeqVIAxVOWKIi23U5DaPY8W8dYYNFi\nLz/cpz71eSfaHYMUBL8cd/VvOBpQiCDreH83riMn3KnLSesiSAOU4uFNLDLh\nWnQnE4/02Nfw3Y4x6k7EuS+1WQLD+p0xF/rdm9Vt3UvY+SVzuBJw/45k0rfJ\nKS+uuxh+2yRtX/iI6oUfkaUG3lAfnj1OIm3pk1JEIExqmeUMdOLC9UCfPYRv\njHQCGIGH6Qyg4EYWvyNRRDo5WlDTojl/GD78K8Z8F2EZ/cOjN2kTyv26A3wP\nS2Jk9WbQpFSNuISZLhr5DvLN2YwJ+NJSsOoEFCMd8AG4A7z/eOYLlkL9gjXL\nX/D5s/qGK95b17xbraWrsPwOxZnEOT1m8rOIyCyTZR4niH4esQCoR7wZF1vW\nsjoCI+jaXTf6WsyoANvSgXT/vAKJ7LJVMMQq8MHegQATj0ZpBAycRUV9uT0C\n0O/EOUvxrCde3cOlmQHHuFijPcGP2gWhaXYeo7kp+gIBAjaKFfCy1D67MpNK\nM+de\r\n=rV/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/density":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/touch-target":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f1a2581ab.0_1578409215784_0.7532293834698629","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/radio","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18686529a6b00588926148f488132562f0fdb788","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7c7ddf347.0.tgz","fileCount":31,"integrity":"sha512-zxIuGpq1ILV2dy3SmlbJeVsesiJsh2JoGUBHuHFYLgQEl6QJX+dtEBnb5oM4QeM1Ok+xj2EgAL2oMcNoAzXvRA==","signatures":[{"sig":"MEUCIQCl4kt3eU472F97UjTtQ3k1ZTkGrGiKXWvGBlqX1jha0wIgY4tqxhEimrnYOOjnfH/OvW0EL0/NjtkaDBcj5JKG+hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDzCRA9TVsSAnZWagAAPdEP/jsYNdPd+uAdzaOJBVmc\nOm6mz3Zxfj0EOAo/3e5EK7qsWvv+fE7kpcTDtoU4wHrma7vJqv+As3ODJTXu\ngsVMIxoRwQPvQzFEqB8wI+8zUA/ljOdI+udYr6vuDOjIdXzbcJaXBM2C1osX\nqHlw9knIi3XKUL8ODMViCtMhvZ8ULz3URUTgrtc50pvUcTHKPnK7evH1zV76\nmHrzajeQc/9YIBlU6cir6gy7hSIDiyffHTMZtoOy9UrtHYM7hIK+nMT9kaCY\nx9Wt/jrszzA7TDhF6xiVWdpk8NjtouKgewhmocDyK8iArb2GyQyk9UWyLmtZ\nzrO7+QQJtQwH3mG+HrRHv8byjhNQFd4xjA477SSOXbQBcGhVogZ/hGWOzaeR\nBefpNmqm3FAgyMRbPQh4k2rnzjiINx7Gaw8t4n1e0yGjDCkDrStjtWvGiP+V\nfcTadfqWhM5Wxuh83CNlIl4r5T3AgIqnwDuR+88fi3oAwXqsHxdci7VAQRUY\nrFDz+ZBLq6f61sXIYPieHwLUkutbddHFWLrxD5QfXnPQGfsblJY1asbZx2xM\nZRq2potvpg23/y5/xrO+gQY/2XfLtOcZGMka6JWrI/fcGRHOrqhrMIYUFC2X\nnoIaqj+dzsT9A8QIg4GR5SCkSnz2qqByafxtHEyEvAdKfJf18gwlVA3zz7jd\nqDPm\r\n=Aud8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/density":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/touch-target":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7c7ddf347.0_1578410227304_0.3823201916897545","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/radio","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f7bded01c9a9e9bbafae1f3f2135aea65c1c04c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":31,"integrity":"sha512-WNFsLt9bsUZa+Lv7Kohk1kny6EqSnYCTp4GQJFfIYCqiC5ubUMC7tRyfXulzWvdX+6zDpuJxxj3gK3KZ9mgtbQ==","signatures":[{"sig":"MEQCIA+6hln443jUL74KKUNqQiOuHgzEsiObcKTdSlabISwfAiAjGxN3o6ZZFNmH4YFvzx1jRa0PTwPWehqrf5vtDRP+UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmtCRA9TVsSAnZWagAACB4P/0yHXGEKJSStXpyMCwpP\nxFwOBxtNJwRGxt1Ov/sCY37zFkYh6jQh33BdNSZoJCTBbbUJ3E1pILPSB35w\nATySgbxq+KEixJgPSN+W2sIHCJEST7rAYr6H0Xq1R/tL5PoTBTSunRpywzI5\nOMZfP0rPG+MuxhmuaKDfAZwjp7K8pWYIki98ASLwCyRgUR4UwWf6IaRLndUn\nB0QmhATsGVyWQo29D+h8gc8niMwUjGiQWdQQABQwz+C13lCbqQK18Q1DCtU+\nj/UfJiuzOE4ICPB203rlyLxYSynIy4C/lVlJcndQs6Mq9YSz5u5YJYJJKrJ8\nqJV6pvWYE1qDuqFyfZW97BRVi73AXStnG7Km5qN3yZY1ufnRwof7NAz2Ois1\nEf+DEqw2gBR8oKhofF64VvP0cGh/nma0hk0cwmm+RE4bP6FNfGIiXe37Qf5/\n74HcOK/mBP7+70lphphbXK5y4WIaZkvv71rRVXYMOmHNKNZCImnxyhkwKn3d\nbkGdjqAoVr2kQ+v/jem9iJWvErb97yemY7ro3+o+8zLjFnH20Gf/7Ix/099b\nDa2w5aRYNOINCOZWeNBit4pw+ana1eqY9ZVAzuY8fdJGKTMkyuz9cD+dTY+l\n85vvFAVz4XZElvLxn8eLtKXLdShi3YFdgknkpr17GAauWUoneV40pfxVXyXj\n7VHG\r\n=hnpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/density":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/touch-target":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a1c84d4b5.0_1578420652560_0.05241035344569389","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/radio","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012ccd82c28afeae3591f48c8c59b213aaadc51e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ec9f16578.0.tgz","fileCount":31,"integrity":"sha512-mvuVulrftQNz6ukDX9ZzYUgu7G/RqGZ53rEcu6XVRfGvMa8j7o6dd74NH3X2Z552C7BsRyVBD3BP1RoUEMmGyQ==","signatures":[{"sig":"MEUCIQDPfUppP8Nzqz5wpzXnXds+MBDwD15tJ1TQBEI0d6FynAIgfCp9+6zLiHgIRqENBJD/5XCcWr0SiG0F7h5yHro9rkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6PCRA9TVsSAnZWagAAxsYP/2hQcyT36yr+nMx4AnKn\nrjAcXNu7MfjsxD1Lduh/xVJD9vzCOFZE0Aj5x7EcU8moEfGj8XPvAwvDU8hN\nCNdTbqqk0IKAS9ytWINYqHKveVXjBXEeov3gEIHtaZODaO483sOFJx0h5b3+\nOu4/g9302ZmVgWHxkg4csMh9Tn3NT34x2SvQvI+PcqsQgPTPOgls7Q2vqTVK\nrORfaMPyL364BD7UY8l1doRJNnBI+IBimcy6QDFaigkta3z17OJyu+z10TpY\naJEtWtRLFVQhvLRLLIZllrc/toE21/siT0fdDxb1hjVtAwP6IptRFGmIhw+z\n0XtpkRB2cHwXwts0JV1Z8jEEgREVaSLlZxqlh4q4sNI4iqgIk57hQJDpgYGT\nlJ4YVqsj29WDQdL8KQJaMWPjq3LrGMlfxvfkKqUexU1JKfpXRPGgapbdUzpg\nll/0NKQU2hVQCnNeCaMzNa9/zGx+uYw1U+10bSXyZTmDMpB4ufnMcDtogPSZ\niFm3NO3SD+Z+ZCd8LkrsOCpkYBE8oNtbztUvUpw94dlFsslFb8vPi/5HtFXd\n2OLMY0GEjGZVYETD4QLJBIaClt0YOg3wM2NhSxccXkvtCsN/V5Y+SXHjVy4E\nsR03aVGlO3XxS5c1qSB8DluKscWvYxCB+sMvKaL+nPf1YY7QUyp7gsx0pKJm\n7ZjQ\r\n=lN8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/density":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/touch-target":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ec9f16578.0_1578425998810_0.23246654472163186","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/radio","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8fca8117359049d12395e7a80aa70ef9c82e7fa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b602226ce.0.tgz","fileCount":31,"integrity":"sha512-qUR3lBTOfslBCtgD1xq8GxKByZXZ6F0C6SBYcLWUFG9C07f/GcZJYxwtk3om3jsSxaD+MOE5wEe51v+6jYKL/w==","signatures":[{"sig":"MEQCIEY7abhRpV0XYSqYRWcVowLGj6ZKzUcjBoefuwmUIM1MAiBzShrlOoae8r79iwg5apebfpVCku6k9qOzKZGxG9+nGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObvCRA9TVsSAnZWagAA4KIP/i/mLxKUZGN/o7am/G4u\ngbny1TNinQw8NaFg6AuZsGVQmh0TdJ/ILHqtV0tXDDnflItOKzUfbKrWDDPz\nSQY+/MPdhBldxu/RqTQZtgsVsHdE9wMQ0lEJ85bSIF+9NRNpZDqx9v76a1jf\nKY4PTERRBkNCPxfok1h7I9oPtdrkv3WgSafAvCf8BrpppkTPDhgsEo4AJABp\niEQJRLMAEzp2tNa/IeUWNR662RNwV2co6f8bv9aEz7W/q0aUscm5zrJ70uIL\nT9hI5otNd3cfrNKwatxpLtjGWKDWP0nGwjEc2t+kCkjwdHUvVrSWmB/g5CBq\ngMzCkJsuyAHGsl3GyNOEHZZ78k/sMn+ZgqQmeSBqsoaFiB9/Q0E7o7eWzN0u\ng8mlLgv3Co47wg4epPQ1PwqoBZ3Ree4393xiu2nVwDU1yoK6u6vjlzMskf86\nXVwdlCEcRWhE2QCmFv+UX9AKNCLAfu5p8KhLej6vI/r0IkHiJlXYIg9OTRAx\neznQa4KL99cujp6sUwUnkC4gjn/Mr0jv9lxzfPh2SA9JHCNiM67bG7mZ8lBF\nAUkOF/6yZGNHgE34324WmNIW3hcyebXg5qZI/AsYVqMlflqUiaArRRIHnhZF\nSiRFvJfss27wpw3c1Sjll90BQxed5Vskl7kvdKwxQaRKim0OES5ilmCa8dky\n7ILH\r\n=JMJv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/density":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/touch-target":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b602226ce.0_1578428142582_0.6579354258576215","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/radio","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4476e6a81aa54821123cf812ec50eb5a45781c5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":31,"integrity":"sha512-PD2Wc4Qteq3uJLVr9UJX0E1kkFaCaWhtdIhBvO7GrBV7DF+HYWRe1hP+kSl9DaQnPiiRZN4u6KmFbnvNmzIH3Q==","signatures":[{"sig":"MEUCIQD4//SQE1Gbvq2Ir2SY7GyJ1lBGy5q7abGl8eV4FX51ZwIgQOe6efxrIcUv+YAl3aOvGIHEmumUQBEaVYes1TkSJEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeICRA9TVsSAnZWagAAJJYP/Atx0YeXUUamuZ0+6I2i\nXvdDXX0po0qboPVUiWBgDpAqYJKTUpwWjCRhxdtQp4lq22WyVUr7tpjth71E\nntyVONClLNNuh2vR1k/X4rUKtVhtWe8oGPbctUZAAXbkIWIwcPLJyeB2T6rf\nkDpFF7JGd7COIi2blUyOkWdyT09TP23W2SYKiJW9RjtXTQpiNM8ppa/Ynrh1\nbhBmwb1wf8AWEhV9z9nfpV0QpdIzdUP7Bzp7quvWfup1MLYkKpzJHbM+0wAb\nJOXCrk9pzcvL6HjStuulP/IeVZArXAV5dHEXqeO+f9NwhvspBasOnt98I/8Z\n62n3Wwt5a+DobunJxmQVVbu9ZHxa4LN7OvgLdtwLTNQn4mEY9XqmS1bkC7fx\nOCVAWIHAH90M7Rpr1qvYefGRmjnBfUh0yYHkgwm7qrCj8FMQENW4F3AncSRP\nLTvSfh1KWPyosgEEenihTN640Mp9x0CjyX4MtP5LRFlCQLAu0NfwPvftP+nM\nfngh4uzz8OegVusUtxzzyMiY10RVtqwHYGjw0uU69hYexcY62toQUnHkupTU\n4kj/NeKDoBpKiF6u0uXUfQxEYau/Ik0ezVcojK8kGhca1uJWmSy4dBzrcsGO\njCDDWNQZPOFQEdX+V6hoXHeUJuOK6F6jFlhQ5qSgIifLyZjSH4PxzsLnhH2X\nXmU8\r\n=+Bb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/density":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/touch-target":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b2d2dc08c.0_1578432392172_0.46140850741975137","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/radio","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea39f444791fe1ac2d98da5aa8c1deec5f86ee1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.61f2d7580.0.tgz","fileCount":31,"integrity":"sha512-AJ8SxYhCQ8Y6PbRbYxJ0p/kIZBFkdj7ITgODffdl6o/T0dyqHTIPS+qlkB/9Vmin4gHBB09z+c/VD0/et9FBUw==","signatures":[{"sig":"MEUCIQDZB0dEfwTZxYBdl13LwStiBoIAjvn35iNToauBmUJ8jgIgFHNqqjDaAvkYAzCwCEziJHTd6Xz7CcYXKNHbq581r6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPq1CRA9TVsSAnZWagAANaMP/0MyMDg1PMoqwzqetv6N\nzYcbz0deKT+t95ipEdX+qADJRjcoGtYWNRgxpfIDu5F4g0gWo+OzL5NvLBh3\n94qkAf2+P+BVoAuUas7JMC2B3xPGncY3SwD2IpWHSmb58wMIr730g3u+uQre\nSTPSmydQHjnjfhm2e5Yhl7/uvILiN5XW8rkd3OfiGpqfObh956nXmcNsOBJg\nyVCtrC9BHi9jJaaML6i6+f1SjrMKMEnJ7jT7zei6SMIPwEYRyQaxP4QCKjjJ\ntSfQMm0gumYIkoUJZbeNMv3U19gW/Kw94CdWByVzNX7+p9cH3QBCXemLJDVG\nn1cxD2Q4zij0vJpHqZ2ue1zUXK691rtptbvxYWpRle8N/SoOWjkdLsRwbaHy\npPiSidLHfAxA7V7XofS4ysZZUWUDZYur4WLDPUpbYu2vM5GW+Sjgo0+nZFcE\nAptyx5GkPpMl9ZUZDSFn+vFUtinQdTWD023OHRLxi76jgncH1vIkbeXS+q3A\nfwQZpGx5oOPpfMjfLZ5hCQ0CChJeEa0l3Qa1VQSZh7HCatj4vL6qJp00oucJ\nZo+Q22mBavGYoysY78XHRfJWAl2/EkkPRnjkATwr3BadW0I2pgdTwdrR++YS\n5rLCiLqmkn3Qb2HxjPlc/tiMPNiCQlTy3uTEo/fhcLYbQ57y2kRfUl7l/ugE\ne3dl\r\n=TF1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/density":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/touch-target":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.61f2d7580.0_1578433205014_0.6034385880094391","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/radio","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef318d041603a95cc22f8bedbc3cd57d639a13c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d1be53a2e.0.tgz","fileCount":31,"integrity":"sha512-RdyAhOIwvhCY6uliHgDl8EzK35A5ceooCAQeHUlCSPVPFO8S+rCN/UdEItq83GdZUNrP2GFl8vkxLCkBBNbaYA==","signatures":[{"sig":"MEUCIQCqVTiXezik/4oJr/LYRJM6krna4LDjy620kR5haZD+1QIgbuvLjkOSd2PF8z3KVaPonLllvHD6LtFxdEPHM9jnHIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQN9CRA9TVsSAnZWagAAdSQP/0LKs9sRsYsA2NYztQIc\nJi/gl3ermHC0OFOssFEV/EAvmn0jSLjwAkyGUTiUMokJIvXUPc28nHouYb1C\n9Ut8xwcvMecskCvbnmr5yfLhaEF8MJfL8M4cK0sHQDVoUaU+YKLmuo4dzVMO\nJLZqqBy4vKDFOY2hCDI+qr3509oqdd6xWJUfFRjaHr1ZBkq/8GExoLXg3dot\nuHpjKajroWGDKT53/3dS8AxrjPw/MOvFTC9pkpJDltuD04WV+9U3lefcrW1c\nuM83O14gTfZxsd3eINtkQqmjMpt78hi5TBiJVjPaEd4tJQ/7gcjiARqitL5M\nqstK5hztRQLWuKetWVu3IrF8G/nV2yaNknkIPSUbLXSYMHbAz9OLsO4zXDXA\nUhGXjFFVb1L2YtaZ2NqTki1qYeALJGG95kOwHBika6OEls5ut1tQlmYh6+Wk\nsGzywBpTa4DQnNSmzbBIbBlM7lGlUAoKR4EDG7aiMtHVDm+tfvhFKLawLZX1\nyqcthXN9q/TkUV27oA5M1nHO6PNR2W2Tos95HveQMIja+2brC83FTTRizVAA\nrDCSrrEga7lpzc8dNmUHLpYpbd9D5z8YQYfUqTULJGqJ5jRF1+bW0zdvJFa2\nXOoZz+qdn2YzOiPrTbLddQMtYYDK6GaWl0vcdnaMTSwxxGR6QjZlFlMLZWVC\nHY3N\r\n=5bzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/density":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/touch-target":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d1be53a2e.0_1578435453432_0.8993234236211485","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/radio","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"670738dd8e8c0c41f355bb8610d8624643e53ac0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.9b0d06e32.0.tgz","fileCount":31,"integrity":"sha512-Yf9TKa3pc8Z33yoU7UdCXGLymR/0iQScPeMr6StxmR45cp02MJ7jHgXASuS87q0x2p+FkCRpE67YIQrDRnL7og==","signatures":[{"sig":"MEYCIQD+htYcuGuHzR0vGlYhvTZZjwe/ZjephIjkSrc2jgi9hQIhAOu9wBMJKK9vb94JwQTtV109KLrklplsCxYljwK0E9rr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQBCRA9TVsSAnZWagAABiMP/14OF+/LFKPPq4jI2WNC\nxRlYrYs3C+aVwBqwxk45pt8DbLMsGcTh6+zrAWGbrGRXu7XzDfxY8gouzKVV\npkQ7I6gHjVEcNkJ7AOH5dW51jmuwao/c6my0qPc09hRoj8Z6kAKegFtFKrW5\nrEmSCtHAVMeQwDptIEo5g6n6VfUXAB5fC2BDLmNeQdDJW3DfGklkR44Ywgnv\nyw3CS6wOaL9JcyogLnY/HCpZnBNLZ7f+B7BHuFSN3pciWCfRRvrjG1+SydNJ\nSITmNoFp9CowyH+r2B+CPF9TseANRbMWaO8W/aDLb4PTRZbntGoyV1p3TrAl\nPleWPKLGMqpVp7kmkuZQ1nTOmH72ckJNWIihjKeJ78+jwY0/JELNJfDt/du6\nhtR7iBGVHVEzob0kAQz+y8v2tPnxbasrxyKtXYxlt766BRuOF+CGoKOpCfnI\no+E0ckKlalcOZT3KVNfLmuHkUVxI34eKC02B7ihscclaNmlg5BYjfpQqVCKp\n80bxMO59LSozrVnStsFwq+CzR7xQ7pDwUIKPjiInW/ObChyJTcmkFF3CbBWS\nLTBd47sWfxCwhER69yuz9zTLQgEkPg9YBWarBNWBGg0XluJiDwK9hDwOdI5l\nTEBmScv8NvYB2hGUR9tR/G6n3gJ27svN8fiNC/7dt88VApzQ5077In5ggcMH\ne5AG\r\n=V7qA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/density":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/touch-target":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.9b0d06e32.0_1578435585195_0.9823955416106487","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/radio","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04a0be3002a1a9d5e94b59373f31cfdd2b9ff239","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.730c807a0.0.tgz","fileCount":31,"integrity":"sha512-K2fZio9undQkb0dZjHRq5YhParfLvaOCy2BZ9kaZlJLxmbdO3A84BSOTIMN0GeT7Ig3SqNkDTDoMu9fdvrJbMA==","signatures":[{"sig":"MEQCIBtE+etVUQMdR9H0qlU4ezkyr9kJZzEJ2a2Ais6bws3+AiBeeGXjI3YmAR2uLpaiIiSL2i27RciHuTygAzOkdltFmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRfCRA9TVsSAnZWagAA14MP/0MekBf2HiruFeYlQBnK\n3NkLV+XDTGMve96VdSzZOr3vxiuQkV85uF5dNMOBjGma70++jxM7y5afNWvh\ni6cjnCka8mGxhgiTbJhtTWMQPIJS22Q5OoaRYSVxyRfwl433NeciLMpY7Mpz\n94mScEbHXaiiTg+eex4/CzB1JIKuarmeiZij8oYXqH4OhcRGguiLYJVFBsn+\nkFkph/Wj3UG/LcaLEufx6ZSwSmdOU1r4NlO64yuWCzSHdap1k1pc3NbPppRR\nB9wzgnWvkv/OWvX/TQ0Sg3TA+WuBzA7Dmsb7TySyiXw8sJmpCMycb/QlcvXh\nEpmYY64m5byC7nV1Cnpou/+n5uxYATS8KqeU/8BBkoeGRY9u6r8zkOl9VQV8\nzpGSNYI2md03J6oQbZWgEsi7cDUF3XNKrriab67GaxET7PIiJ4IijhFhEyhy\njQjRg2fZFalZMJvOx0A6bVRMY8p8DLSS4m4EymtTsFpk8ZmjJjW30v4wEyCp\n+TItnjJuqnQe0wKczYx8P3fp/o1CTLPVV4HOxhjG6+MRIp0VX0+7ukiAsl5I\nBZVzsIjeJBLk5cYQjFnA8db2VbiKXxerLR+EdI1Q6UI3n45SDSpQQLi0RqmN\n56HvsGcDP63TEzpQ5F4LBpbYYkvHv09EWgGrCljM+dFb2+V1wdWWKZOKe7x1\nvULX\r\n=iI0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/density":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/touch-target":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.730c807a0.0_1578435678876_0.5113301988445738","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/radio","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8b5e25ffed610e64df919f27abe2c23bb9e61a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.2213152cd.0.tgz","fileCount":31,"integrity":"sha512-oO3mZ63kXsvDUQabvaOWg4cYpppB9gOX2aL2u+9RpHSZDh8OMwLVxsOKfB9LZDbz5wtG33KqzNBHRHJ5ft/+fA==","signatures":[{"sig":"MEYCIQD8M0li4CA3PSQtWmUby4fzBskUKYYc/lEtINNdfSuoGAIhAObEuYWEFfAyhaoOBpyKpuLFJxHL1CddpqhMnU2a0AWO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/cCRA9TVsSAnZWagAA6mIP/0CaMBrn7xGnAuA64vSF\nGNhqZ+uCWqqvu9JRco8XLk/jkKY/VDT1wWD9KNpb7ekZn8jazyOabwLynywu\nqsnNyhlZ0qS7lBT/FLHFDJ7W8jfoOFW3COWwg0hVTvyF/OVt23SteySrHM0E\n106X/797X22JnvcqS1nvunkUO82lzDATnM3v+ULNwUaM6BXMj5SSwNhTt+wd\nK3At2HK7cgDimjE6I0VonkZ+znMWuOFBcDd2X2bb/0TxYkgBkCfMSqakZkLW\nSS5/Vf3CBL21XS+ZguFR8ulV/DfXNJesbqurPi5GBVhphdsZnwVNtt3nMDX3\nR49paxwWXYD84wJV61/AdhMMB5Cp3ZKv1Nm/QLC1BfpumtV7Et0lAxxlCxmZ\nMxy41jyqupmxUk1xowiNkndbbLAyiEnXB/PWIva/Wws+u6FHF4sWhc8VtFTo\nyBpZp9ivNBTlX11wczwR9J9wL6vEfEo62s+L2iRBkN5O6bx5/Qgr7M6aRJ9M\nSHZp4fNqsxKT8/QuZMnLSPStMyEZBRf/iyd4FXqZA54d/MmlVuccsTR/7t2h\nECTi4RWQUTk4h7/AL+pu5NBwrWQwe4FoqAmGz3IuFa+Oiv6s/Vnei6nlPVPo\nVSIUgkyCT6TU8wcgbSuUK8lh/qkLy5yNLwPx5UGxGuMBGUY902HkSU81jw98\n1RfO\r\n=oGml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/density":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/touch-target":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.2213152cd.0_1578504156169_0.44831423869395315","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/radio","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e61f1d998b9bed45c627176febae54fc17568f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5750f7169.0.tgz","fileCount":31,"integrity":"sha512-WP6XDiNF3ae2aERl8MmZzuPSOCk8z8eNhSMl71VYdrLqqrbACShjcIprZi46VVDtanLgpEXAIKlNaqS7WtjpeQ==","signatures":[{"sig":"MEUCIQCHhoHO1FqdeYlGawmojjh/nTMEpsVbBU7Topjsdi/f8QIgb5RoeEvn+CcxglwFYgSItQWJfHRfHTVDLwDR1uw1gOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgDCRA9TVsSAnZWagAARpoP/Ap88rXA6A2od3mzSk+9\ndKoCc9ZJ54VFwNc9dZiq0tfN+TW1mJOZbOASerW+ayDXjpwp/6598881+v77\n86UkwZ2HoZ1CUaeWwFG8T8XYxuJgB9mmVNLxyZywxvzzuGcp6jjl1NX0hIFT\n0YzeTLxsA32x2ORgfpzRPa06wn1sMp2RCmzW0tY0YHpTL+7CHGhL1ael00Lk\nTWjri+lN2M+b3P6yMoI2+5l+tfexaE/OsonBDDPltSnJNZpMacjqpGMUwuym\nk2nWtpe/IThDC7ZswNAn3ffdGHCkAVxMSsu1ZHBmn28BqrWpVDG4lQH64A0k\nmNCVVb4FKF+7dCvkEKl7lUz4T4+6dR/v/YirkNOp3LbHXjkGuQulYiFbyALw\nfBmr1V2PjpX/ljdJAsc3L2npX7r0vUhQ6i9xNpa3DQXeFNtHM8d6Qq6drvPq\nBWHrkHZfuXH2mprlMKzlBg6Z+wTrDgKsFJPC67xPeT4olhhFJjHiNJ6xZtLP\nyrwvZ9Jx1lrUtyZIifPp8+CXs5d46t0VyOQqg5PC2ua67riqckuuoIcp4LXN\n3e4zeVSjElmwcjucMey4YEfns5iEStU9kNdBmSuF0fHVwZ+YXdXtFGydkVwF\nL7YWmyUnNltikLZNR+g6Ioh2a/0fbnYBEamp/sHQmaM1rrJtru9ZT31HJE/1\npHbN\r\n=aODP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/density":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/touch-target":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5750f7169.0_1578506243310_0.035496218363634036","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/radio","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3bcca81b55938506875c16c7705e93365840068","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f7abc7a43.0.tgz","fileCount":31,"integrity":"sha512-fEW7ZRl4Fadpu8vQ38ZxhvJTkqMCOYTpq1USFaQpzgyDDW3PEKTXJ8Uus4a1jBq6kUCN3AqDJCFDk4sqmNm/AQ==","signatures":[{"sig":"MEQCIAYA8PwKVXGOyJFzpNKecJuYR6ttZBiMwsTOjpmpxvNjAiATLgnHPdAViGmxPbyADuP86eqqsHjY3tokZuJwEGkLdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9ECRA9TVsSAnZWagAAmU0P/jwE1994alA2MePHP7zs\nrLl9nXybK3gRmhlb2Iq7UiO/cBvkc0D8OW8FLnZU9O/V93fx9m8c4XJXqVpN\nCu/VfMYsFkg5tKOXiMZSBWkOwmwy1vZYotS6LhZ6pfMy2O3jt/mdwD2YTF5K\nS0imJsLxFfP03Z+QhtTTM+RxEHvKpTFW6iOvpgBcvsAa+N8FL795qBnyE0lY\nsVmQd97RdpILAYupkip8SMoalDH1qRg4fxWNPfyXZD4bL7laEfleQG9tdVHl\nBp7t8dAbH9JDuIzZq4qnp6XtqITxLGR2iabCtBqriZUCHbEB653HHUXrcZ7B\n5nkWX5C8Ee/uvIYXVPea1Rq3y6VgCMDHNVl5drVP7JyZEh8kaKlvmsvCD/S9\nAoWBDGAxKi4u25olkyqwKsq3s2zpRTW3nGf43RpiH7rU+RlkLTVr4xBKYQSH\nCt091+hEUE2U4QYcPJ8MNXNxxBs/K8A7MFaqwBJ9wB51podUsM9bJjhtLBwk\ntHwaTrP6eBQY1dfWKYz7Furp4ev3R1qDEAR/bs7YkB51G3X1AwsQGMBEaRAS\nI7dDhsUrl5jJwKA5f6I6gF3WnV2s25N8MZG063/74irYUQA+4BQXRGm1Z13M\nksIHDhvHm28NAgcWstwyQjmVEu0Jw/4yf6WGhouRhXLOy6iVn7IWFzdjbXlb\nmSOX\r\n=mKD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/density":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/touch-target":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f7abc7a43.0_1578508099835_0.3107475031101563","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/radio","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"324e6b752d5309a1b0076fb78f2fee8bd66a5961","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.bf7b4a061.0.tgz","fileCount":31,"integrity":"sha512-FeA4jrv4A7xMTH1QJIilJaAj6JZYj6LZ8FmkPVQz/50fzPTOlEB7uC7QvKSjrSfC5FJ8kdx42qoWNgZsJsIK9g==","signatures":[{"sig":"MEYCIQCVGW6OLvlNijnXxd/M5dLwlAtKvwX8VD0yzGN9GCj+MgIhAO7jCoewzBIlJCe12YF9vah9POPPUkFw7ajkgZm/yzwN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJ2CRA9TVsSAnZWagAAUq4P/1hmpUj/uSKiSRxE0Qsq\n/q8GNeF7JI67lcjex4b/5ovF3tF76rQjRlMenBK1YSHksu+vdoErT+BgLPef\nHdQ88pEF6YSV+TRS7Yyq5eEcjSV1deMyQXngkhVF+tpWpfgl6m6OvMNGUi7X\nOjdgOdOXTMESMPVl93fkfsy8eSKWXgAtTTmWBWQLcXYhJRvwoiVHFuSu4jsu\nGoPjeFD26F2iYFJ4OYn4JzObYc5VMryU9YAHj1j5D+VsWCq3eWTk2yj2zfWF\nhcA07py9KY9cGkYPdYONpdowWqXv8ESjNq3hgwy67nLxrZKdNXhTUUISIGp+\nVdx+CvhDjkxL4KUq9+Ss0jjRK+LR0rQdjmc4txTBXbX6ztNONHBtJulSo7MA\nlNJdYQPJGz3jodgYqw5Y2osmkXE1dhpy9s5O9XZMF7yIuP1ObDC6PMG0+JxO\nnSoGjASqVd78ZPh2ceUVfATVKePani8xzvipmS1UvzsKEQfM+EWYrnVNq+eX\njxkdpG5lv2EBvOie02RJa68lmrx3JqZ1qRaD2AJautBx6QRtDtdfaw/jx3bB\nsRfWh8FxmVh/CsPmZ8rA3SkGSWIkcKpN7wHIHpE6u4IECywlpOUqWeCQoBqs\nCRpCusYdP7iSQM4bcsm4vGvdJUrmoqEWXlJhJVDOH7uy2dmk+WOi92EjM1gr\nrmFj\r\n=ZFYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/density":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/touch-target":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.bf7b4a061.0_1578508918017_0.5046174826887304","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/radio","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf34076cc2f0cadf50092f7c9a0002374d35098c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.784fa7903.0.tgz","fileCount":31,"integrity":"sha512-z28pAfXAVB+6F2Fozy5UWDAWq93mN6RhF0H8raJBCQnH8+xpacAN/mFVlp6xV3aScBay/lfijXqJXHmYVD0gRw==","signatures":[{"sig":"MEQCIBeIuQcpc7yHoCDIssM9BQ1A5X9fd1xWIycRJ7vziEjmAiAV2u0GhGVsiBwz+R+WEyyAOD/vMqv2UeI6OL4e/O4XnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFik1CRA9TVsSAnZWagAAmj0P/2c22l0botH+qVYNWWIp\nm7vmSXlplex67QLKqoQWOue8LcfHCYLQP+lji8xPI/FiaDtiAVPA9FC0WZ82\n53a2W8XdVt64qgb/krqzNJnX7Wn8HGmsBdo+4w6ym2zyU8x5GPvzaM7TqTqx\nN7Ap9yTDiK8z4XMYxaA+kF2nQFkZGglWpF15q5P1znAaeQudrcoijzYB6EvE\nyd/aAPOPi6UWZiH41/HghET/asU7L04RGA+S6vS9rQ33GaUT5XXpvxoo3p0A\nYYNWJ9w4T9lcQImmcf00EtCRitD5j73zHTXuj4Fen0gNKRv/QhhSRqA8iy1Y\nfVCVVAJQAyQuD+CpLfsey1//pT+p3g5u3YYUFT+NaGkZ7hw7DAGuu1HznGgJ\nP5gnIeR8FtG2fNcgWeD/dgdH4VkZyW5XtHgY+87sZYSSkAX/Ig6mIgHPheO1\nVQ1mGd+VO7RvNA8gGMmR9JkH4AE7XrpfoLvc6oK410DlFEJNRLnBwcwen4EA\nih2sLA+9c5PUt2/SLqtbcxtm9a4eDJUGoz8DtbCDnsTB6S86FLHaWk+cTwkC\nZvV/MdkSzatrBWffxWfh1B8ksk9HYESp6H9uHai47dEn7qUNn+pZyUI0hyzv\niGIA/wd8/fzTBmv4QDw9RJERzoJB+7JvlQGkY/da5RpZuIqkk8AoNppj6hp9\nu5CF\r\n=ijdi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/density":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/touch-target":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.784fa7903.0_1578510644761_0.532318910844159","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/radio","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a80179d8df2a0de156e78d648cf88435d42fb785","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.823c050ba.0.tgz","fileCount":31,"integrity":"sha512-lfoEi1fsslg2V8PKHWy0LfPxVII1n1O2P7Ci0hA/B/fAMtkfwuQGxnnj9fZGGRUk+1JDM6fnzzaP6JiilHmvVQ==","signatures":[{"sig":"MEUCIQCkKMonSAeKjrcZRCBkkYq7SsAn8DnrTJvLzwk72JBUwgIgWTHI8fX71u2tUHKNQBI1Yv9GbypWSPFt6LVfgJF0hQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdnCRA9TVsSAnZWagAAytwP/RK2CSexz3ppSoSnMR46\nPrTXniLC/DgZW6j4eFx8NdXssSpvH2SqS4Ti9AY62Vs1uK2KrauHQfQmc10p\ngiOl6OVaoGdQ/PadsevTnw9ZMMkGFg2X6T7Ll2bgNUmIKN3OBRP3WufzlPHy\n8GBAKqRRKvLiEFoZrcWtvikvt11oqYNd+XnU7RkIm0VBhqS1YgStJlvPy+8q\nUnPAOcIa+KgIveZxlY70j3uQBpMIpMZDaHJXYxVhxFKV4eosUGeg1gSDprTw\nBbKt7t1USts7aYK7XziCDUo2G2UIhobbTMTTAIE87W4ltEZmG+lwJ17zoQ2j\nuKeI5my8asUSSdXPZMAZHAT2ehGk4upWOPiObrkOTH+UNtUg0jaFUng4mP+D\ncmm696ek5ZzR0s4LkDeUXI7SKDIF+Q9HdLdrXgXLSsJtJ+c9iw4Mugh+7R3+\nGLMtp5WzBWpvc2h4p3Ir7OU2mLYny0g9kibDuH0S/1+/zS7HW+fQVXXOVYRl\noBBXpGt1znOo/0XYTHg2Dhl/gxLvnxXys37BbCO24jxMagzwQp2JS5y7K3yX\n90BAG1VSx/aTde2rgb9xQAx4LAbRDOSsebTdHp2j7EvaEYCBUycuBKQf+pIP\n6LVhfxbHwCwL7Z/MtXVFUHr08yjhJq+T+dVv93w+GXdzD8vGMpROF9501vzd\nW3Qk\r\n=mc1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/density":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/touch-target":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.823c050ba.0_1578514279059_0.5696626050200224","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/radio","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afaddecdcef014b839447950a9767ad9d971a1c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.70c708dee.0.tgz","fileCount":31,"integrity":"sha512-69xZonjLqQ+yBDSxfG5YIVheSDjuxeX6wxL4B32U53XKBEdO2z36v5hmQDflDPwabkx/hBOJYvjXtnzOHuF77w==","signatures":[{"sig":"MEYCIQCxpoFFuv/5I3Am0K1DVJ+BuDQ7yx2VuqjEhZVc97oRqwIhAI7pbWiTMZTyfzEd7Pqa5tfvEWsO12gIDHf4Bp8N8HXa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoYCRA9TVsSAnZWagAAGiUP/2uMJfeH/dKcD1bIx92t\nP8mJL1jci+WMX+OrCl3BSJeH0GyxFK2a61hdQzDWiROnZfaj07QHRsTMRvC9\nWDBHIXhmgT2P53gJdDViwDyTjY1B2UlzbX8Aus5GOX2RgQomSBedrBFPjvVd\nxHjCrlVdz8cSxN2cHg6oH+gOTFLHzaiT7+sc+U4cG5T6XAg7nYgw6VJeXHoB\nzT9bAXH9Z4oE4ZrS4j5WUn1yuBmKZORBXz1rxvYESEDIylanwNQBfmNJB3PJ\nCkgNP2PQyjiUAECvlLsB8PvT4vBlABXG6aXfj0oiMPocjIgVB58aOgPtw1eE\nl6K9HRgI6v5w8Kl6yhy82SH5+jo4zDIwHMKna7/HMJzd1n2GE0OSVKaeYDdW\nL9Rh1VJDP39wBuvZozccsdIdStr0wejuTZoUu+vQmbnHBrGXOwBwolhXLV+2\nPI4KXTxskmJHOmPB4xXs6CEE+8hyRvqSAxjkgThwkkPFhCt05/DaSmwLlp+I\nLG0BHUafJiFZtPm4PuxTQjK4CZ9yRU5n/ew/KbC0XxVUwpqYqo2OS/CWckn8\nNIxxVHThNBamYp6nkmLPlZfIVCnzGFwnokh1vnH5SqXneme4cgrnbk595zU3\nHdNsutbWTwp9RfV6lPy0YacMffuDtRfhDslfDCOHKz29HKoWX34X2J4Po+Ra\nBjvQ\r\n=43SK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/density":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/touch-target":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.70c708dee.0_1578514967098_0.10287206109170621","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/radio","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5873efe9d1d5156c2735fb1ea8eca3f9e1df0e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":31,"integrity":"sha512-KgOnSQt6S4UxCTe0470ziz3gc0VdRnJQklJQsKNdUJnSxT97MZ8c6ucRKh/AlVu1ARJGAjujyhvlGqcx2gilJA==","signatures":[{"sig":"MEUCIAccOdWL5r5L0sw0aZSDD0KtaZB+rSF64IctZkPj6X37AiEAkbHozArsSM9a7ca7TUOyIbjnLN/128e5XfGzBoMbJdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzqCRA9TVsSAnZWagAAuOoQAJM9mB+KMSRyXOQpqojy\nSnjb8CHplUo8Nru/ahuyaQCAlnyGZQuv5PrQOM1/oDy+tWTHQ7Wcp82dBnCl\nPXWrqcE5o5FQu5fs2H9bs0iOqmf7iI+uTr4kJuBhM0DIBjMACkaod2jE2yo8\n6cWOiL3I3GTEL6BoDHhpw0iaXPfRrj7OaRJdb4yhsBil9jtSygyv+7QNlotD\nkx85F3tnX3/haLhqCpSiQP5c1g5hqxhvPw/BLpu82MIASpYE4+YbnCazsswY\nrH67IhQn+LGt8hwXr9t/bpRb1ABIO6oelahxKWLPQhpnQKBiNJQQp1R5xFei\nF3TTeOmE3Ls4gW1yWJ3NVCYdKxi2+0HyxkmagHUxm5d1Qofpb24Qpb0vQUYl\nL36J0uFALwAZ+rFxNjWUv+uN3Xvu84qlsxcF3qDZK9UfX8mv/zu1+mCEPDEA\nQLP2lHvrRdrxjfprKaK6LfJPp0xskVgdhAF3TQndhPy9tUKn6lJye8+ayMqD\ndYbKU7VDNvP1hMqPje4cVDv+Y1phUCfGoIngjB1kyPJ6XXuVpQVhUzLJQbaM\ngKRRPjYK0BTdo2KowGSQCJ5o1DAYcvS/h6UOMj68DptHG7VeDZntVXCJr3bE\nvvCyWjPCdVe/MDX1mi7tKN/FXAjtSUb0XuS63PGBVyH3ugw2Dy3KIdVwSzHt\nWD+I\r\n=ZniV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/density":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/touch-target":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5ed9d13d0.0_1578519785633_0.5239251269658793","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/radio","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2212fc125a6cee080dbb3b5f3008382c07dc98cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.4819cc7e5.0.tgz","fileCount":31,"integrity":"sha512-D50/E7iLl7ek0iP698Y0vQ1UhRuv2Ea8ILVL9VCE3r94Dtl58IKKhul6DkCCCg5ZYydb+KzkujWssO9kI7QK3Q==","signatures":[{"sig":"MEYCIQCdD8c0PzP9zAnc2q231ERczLyf5rmFVRr7BN5eXMAWXQIhANpfwm1fdD0wnWytnaGHDSsEcbfxCrCMKsjGTxCCaOsd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCXCRA9TVsSAnZWagAAEiQP/0SxYv93TwDXPCxpXQHv\nqA8A/oq/khBEmphJ7+M63BN6WcCBmEsU892s0VVTb/Ib9uO4mxNjoUWsRH3+\n3UYrmtwdwmpbXyxXg3FdCEMcJS2Gr1ri9Or0+P/DlnQtw/bUVReSCQCjX6wa\njJ0LShRSoW/qrBUfxW1Dh+KkXvDkiOxqqAnOrQYrBu80fNTPNC+S/llpAlQ4\novC0EfRaNUrbaxbu2ivnLmyGX76Y3Re0H6bIR90Q4Fb9zNKpsw497jxwOllx\nbcvZX2IgtZDE2k8QYPZSFLAGvvoJ9VcCRh+R7uxJLHLzy9sMukG5djces38d\n72haqx8RJXpHVchvjDGl6w/tszzIHE9UqQk6wCR4FSB49M8r5KNbJvfQC+jQ\nsZmqq4jrwAL5plZEo/kvpnt5BjuX93ih8+JjoFziQn98zSO/YCHkQ29qocqn\ngBcq/I5g+hYISmas+L++PqTQEulDtgKuUK+8hv79/lOtbnHmV3Y1T9ah3Blp\nnzdP8k/x1poHct5S75G3/uj23fm5pb9LEax733krmXy1rtYqAt+/I32oTA2K\n3HAGJVGvxsbUd+vMVrFEZ0bmtdsQZyJbGFwaTWPhvY16PZRrlaonjkPyt0ql\nVSO7gkhpE+AU6MFzrPhb+ebVn4MMQqx5PaJ1ynfBLIQCgE5Z8+ejTsp2LNla\nr1fB\r\n=7kgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/density":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/touch-target":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.4819cc7e5.0_1578520727272_0.9367198671108359","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/radio","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83171209898cc115af5fd8d86a3c95ef276c8eb8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":31,"integrity":"sha512-f/svwlILrPDro4ugRxIl2FtplTzAvf9MQESw9rpGcUPS4mVENKmE3UlnysgLwscRH4mq1c3XXXRbkF+h8WQMGw==","signatures":[{"sig":"MEQCIB+0XX1AF4pYjVoG1NvKeKrhue92AjO6iKCQWHcHG+Z+AiBAlQjRLcFi/ike4WyUF1CkysrWPRcK8ZVZPTAGMqVEAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTNCRA9TVsSAnZWagAA3K4P/RK52JhXrCz6ocF3sFFb\nudvL5+KbgbNhV1cI3vusmIV148vlk9gKS502VNz3mQN+nWT4ZvNZNiqYtYnS\nhDHbmYsbvFHvsL6xxenQZEXTZIzw+oK+D2BHf7+Aqio/iQqzoYnFnWU9tOMo\npVjiRPjRjG2ad9WHV3S9v9SYM0DHczdFcOJie36yrPwAYtpekoAJSysiJrpl\n32rvFRdrg20Ow7ZQ3q4KS/YXA1CE8fQnk4JjqSsmQe/aA5Am5zS4MHIcW27F\nWt3nOmJbFtrkXzrtcjZY5dGBM9lui+9gZAborDnSjtvZRz0WWs2MpEpgft77\nfEUV3xkq8E+VsZrM9SV28+MsYyEZCQ5lLOPEShG9HbcmDLNJ+IVmUWHVBt9/\ntL8/D9GppLCQN6pirjMlVhBeh+QYMB3Ls1lje1ME/TORTm2xqmoidPdfks9/\niga0ngMsmfIBY+0Xc+vNtqXUMBqF7a0mJnkO1/hJEPLO4TQgfpZbAVYebWd5\newOmyxZxHtz95pmxcbD0qal29vv8moZMmAEzgtCdBVJiDOtiS3Z3Xlcc9Yms\nxHt73nLVpoqvFygNp/4SfsYV8ykgHJNUq7CyXySrY6ZoeJUxYe7vrKJdCSMQ\n4/1IHODyOfNj4cs2Dh8H8f7pbc7/lwE6bToeiqGMu6zbjnjtzGZ9Cy4nLvYR\nMavZ\r\n=Jwkw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/density":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/touch-target":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.fe3ffd2c3.0_1578521805190_0.8407539749013264","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/radio","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52f8aecd2a0c4a96ad93fabdcf24edb995a474dc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c0e850090.0.tgz","fileCount":31,"integrity":"sha512-hRSS2Sez0drinV1G1SXLUyhGSiOQ00+h27Z+SBEDQoa1DpkAhhg7MnwGj2jZIT9I6KOorTqUvEFpB0o4BvYGOw==","signatures":[{"sig":"MEUCIQC0Mufqu07r+jB+JFCJbJPQcqvDyFCdhjFSaoSz567VJgIgM1Qjd52sPZzx9eaFyu3IBRReXJQarzw2FzmB2IX9mWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZnCRA9TVsSAnZWagAAhmYP/iT1CVrz9gd39FtMptdj\ncv5epquHY6j0pQ/E953NyM3p9YWSqtdaVNhFIY83TOZ1fedgJjQg3viXOCYt\n5RjBw1XwDk5CY/WUqIIubwNgMc04m+rF9CzTjK0WTSQSBUSIvcYNknQXHSjX\nQ/0Y61C2540g1Ecs43uf3AqCWCkAg7qbQlqQZZ1VcN8Gopxrg2T7zFxG+9jO\n0K5wcvGRB/DOnTe857QMgNRIlrI6amWddd6uM4ViRTeyl6iWouMXkHExnKgG\ndj+picBWIszy+0fB0emAB7b8rZAFjZ7JuF+YIMm/ZoRr8fCyI69VMvL0HbdE\n+IN+Q16VYbWPg1sikABReH9iocJXc94eDXNG7CT1/Qf6OwJz3kCWMYhbXb6Z\nRlLz2yzFX3VQ/RggbCbhBchpOiED7OOMoxTzh3tVdALtPgVD/iGWT944RGhb\nJkitJ9HAPVHYgb9HIwoI7J+5yzKYp6zOXlL4aA/h5EcK0Aiu1NU6OaAAFhl6\n7uZDrM6YjWRmm4KtLByCHxdd/RakM1BZU0jZGufqfbcnHQzyeNOOFRuUPUr8\nD7TJHtrDoznSFGWDuWxmlodoJaVUmRYVwWFDa6N3Lwk/vVRctkPGoZmGDdPk\nsbgiTNkbzpAm1MJk+lTRPUweq1ZlGpZzWkR699DDBffoKdsJeIXCIK4y91om\nhmo4\r\n=YyT7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/density":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/touch-target":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c0e850090.0_1578522215457_0.8750730432003953","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/radio","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3295216ed84e47ebc49b869305d08565070ec00d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.615f86f38.0.tgz","fileCount":31,"integrity":"sha512-omnO1vrSw8mh2V8daceIdZtl7uZtS/6bZWgneVZmKwjsa11xy5sYj+K1b91QPhqMJwPKLPZ3pVdSpAK0AhayVQ==","signatures":[{"sig":"MEYCIQD3DiUjUVdQsky2pT4JL5Rw6Qk4+bcncp8qAuaaHrn9+AIhAIIH9RSaoK6oWT3BWyKU4zDVC8bQl750Ki0/brNTcDRk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpwCRA9TVsSAnZWagAAHswP/1xLmyXb2SDwJ/dqwiZj\nJtVugXbCZkwWq+PQgaIQme6htlTUI2+JQ6gc24fU2EjpS6zJDM0N6LeLC3V6\nv2UzB1ZPyHZHJENYkaZ2UYOyNzwJfG9Qs5/p8R8bhjxuoRkZBIz/1uAmd5X9\nbX7FLb3nmHa3qv+6xY7I7gdUySXd4RUgw6MacXTii7V8eTXXsufgVBVL/2Eo\ngie0b34k5Nsy12SPq8DHOp3wa4DzJ7EiM47CokqsJrmCWxR8XlkmzugcD78F\njlOHl48LDxeSjZ5cRN/qEa+dUEUoxKM10y4Jw8ivMZARC0nEvZ7dhc+0GkiQ\nVM1cnFH/oKQ+lbTJhCfi20TghJNHUxcVCO+gm0hfQCI8g/d8Xr/2fMBLVjDL\n9u2WA+R75HyieJxwXdUaY2nz3TcSizbQys3BoOeP0T+7gu9FHNfePbdxWa3x\nwJ/ba4RkvNDU03uv69m+G6t3nbCPLVJnu8B4qXj8ymGydXJsmXPl83LT9Urf\nkCFmtAOKIEPxhVrlSk4CBVV0QKvraVZFrvKWgK7Ylxc0vVAiZr1YBko28WyD\nQctdsu29dOPes+yqCctBx97ZgsLpAsY9QEB54FUEx+UGnYqXzOBKW8KNcrXk\nzasAK6PiJKbTpzdfy3E1uEyJWAU5FQqRc109NwCoO1pDR/UrxVM/i8naaFLE\nLoi7\r\n=iEPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/density":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/touch-target":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.615f86f38.0_1578523247671_0.9672423500924074","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/radio","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1237a63e9a51c6bfadb18a86f1f2daf472b55610","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1eb032637.0.tgz","fileCount":31,"integrity":"sha512-l9RY844gbrrsdJ4/G7E0SsI1Yqkq5clK7DCEpv7/DBrY0XghCgGWnL1ALGZ5vEt59Fdx7X+Isg/5DFSWQsixPQ==","signatures":[{"sig":"MEUCIAcvTI/Hxvtjfy61vHuyedCyt0pE69/co0PPu4WRMrwfAiEAoqjNpJT23Xaz/O5IhrmzEU+VR4LVHyAgG+t3UaX5NzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8LCRA9TVsSAnZWagAA0f8P/3CzgBuDonN0jafB1nhM\nqnqyUEGRDvhNhFMvYjU0njTwK41Ty76SJxtDW+CkhMO7bd5/5NhQjqXbUDBk\nJR+Y/4v9KvwJekp2AblKJH6mRAftcXfNNpibfqlSxrfnRkPY2O6OBfDpwhcR\n2JVImOIDED0GHqCu0d6JPM4UUAK1c/N1cYCYTOp2LEPj92G28ckTIu5pivl2\nHTuocyNnCc9yUqwXa3TXLVh2bZXR0ZsYZdS7Ma9MJS5TA1z8gk1P1E37zQZk\nUNOSf86eBrsKM0NxyXG/G12dmjBCpNsPrSIItmEvHhHLixqkxEnzU3L0BJPF\nP76U+WBRSpQ2ucLAxJhlnPve/YPMMb1p2ImlTP0nnB3MUjg+ZnG5o3h8a2hN\npK0w6jp212/+ePy5/t8g53G2hOOlyFWq45VV3nMMOkmNJUM4MVySFTdeZQFL\nGOLfCyuicpyq8fAgWwqZRwxzQiuAS1PxMG2UDfNkG9xUzSQmljkbEfJ+hrG1\nOtuEvJWIQFRRkbZ8QbUmpZBXQvMX9fHbOBXVnKEfLB2Wlo7QR08GgIIX5lEz\nZ/8iPDIqnijPjiD4CKWpzadI/0Vop1RV2RDzVVb/rxIDnQ7kgcrGeANAgR6g\nSsjoti/ZBE+ENN2AC29XBVyZV1GmKm0ZAJFKi+CzpBzXjVYzfGIcyTkl7DG0\nGj1o\r\n=de+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/density":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/touch-target":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1eb032637.0_1578524426432_0.056655710279859495","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/radio","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"700ff7fe158c56df6bda1cce064b3410ded43545","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":31,"integrity":"sha512-rq3A/JrxFyksSWa0s9OaHAb61emYf1uC06XG6T6aBnM/RkF1fMukJQIA7Md8DK64S/w4lONFyLWmJJJJUf/67Q==","signatures":[{"sig":"MEUCIQDxg35JFFYsaI8WmCL+rQHoG0Vf2hU7Sgw607yhQHNmSgIge1no28RqCO+psV35h5Hrbmlff3rUXzEhQ0oVQX/tOeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8+CRA9TVsSAnZWagAARXQQAILQ32F2mlyTaUVoA/ar\nXr4t9kYVLLIETW7xpnF1ZbEuo9d7ephlA5XpkeQBmXDCLm+4IS/fnfT1cnmS\n4Pndyjg1wQORTPZ9CJi+3gAjcd29MwhShI9MIQCmJmEmzseoh7etGDWIPuZB\nsDwffhsNmXMRaG83+MehWbskFLsodDO9+YwrbH7RC7MxKFc5MlJ/Fyu3cOsh\nUj05wbSSwW7pRADCFgXIDAVtbjX09L85tl707/GkKCNo/9kInL6Yf90n/wmD\n29OGnhnmP/iH4HJXjt57uvrz53T77Bmf7Oao8YVgk33ZYA6vorinI7PZN2jQ\n7l7dSGcyF+c56xhOm2IBcz+fTHcGSjzC5xti7LTrjsR0wuY7W7fotnINW33r\nl6sKmfBFHYCPjLHp5jtUkQMn0RY9VB87AiMdNsLoGszLkckQ0GSqqA1YGB2x\nXWEbRaas0jClqA72o3QBhO+z6laT3IPH60reRgPvHw8F8LEQrnEhh3zCEt6A\n/7TgCx3mWX8+WfUZ3W+v/4WorJrTkYfmrjJxtHB3crsf7LSBofBWMJWjo/K8\ntOZi4AiTCT+xIvrLmVWDWSsoGidnCGIc45h+sgC2h0kQbReU3JU7jnOHHVyJ\n6/bBaCk6hyOoD1eM5jMbWX5w0vNl6J95jYv/TG+JGvn0JaGby8rQieKcFpTb\nwk7S\r\n=oAXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/density":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/touch-target":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5bc5ebfea.0_1578524478209_0.5823698578445604","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/radio","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa22ed48509138567d67c76bae7357df7305681c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1112b8def.0.tgz","fileCount":31,"integrity":"sha512-G/Wiu6/80iQMxKABK3hhQ9EC03DU1mHGwxkbwQLnScCUZVIbWwYAHWLc0Zchm/TtAuVIUMVXz2sbqMERkVzCmw==","signatures":[{"sig":"MEQCIHrpc4dAf6PwhaMX12ZaNuvVJdQXvglkcStd2C9e15HaAiBZoRcT9LR6UkIXCoYycPdbYPbpu+WW8LXbJz73M7pstQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TiCRA9TVsSAnZWagAAjJAP+wX8nVn6c8u1fUqQJM+S\nG3tfpdE/fRCNELpnr1WSwRCQf4QiOjXQDE9UH8xi0bkGK19A6jchnZxBp6/4\nm6szCDPJ/Nqf+8XcGtou4cW+erRSv8gkkZ87BCG0KomRV7rvIB/k7sPwe3jo\nIgJTXxhxJwyuq6jfqtG+KsiorMStQPCZOP1hsb9oIyuzZde86Iqg7foKeH5M\nqbQtGz19950V3u4rH9N1oVfySajwBM+SqOrfg36w9LPeY5aDjEFJDRxmIEXt\nr6yeGE1PHIbcdzS8VmQv/mitQWt9L/G33wDwqYJN82kx+PkxycdmkASv2pgk\nWQd1Ckla3P6tXLxfXqZz7sW1BO/4usBWYXQE7jlk8lhWnu4vfWh/TgRJ2rGn\n5Bk1JukfKiAJz3pIKTGt5drlOSblJSLGrc3OyaHumfQGlweY2CtnK53Ka1gJ\nzrmvTCn0mLLYyNDKi+Y1U5FZXKYNV+pxbPnUho+AgqZY2SJULu0ClHVFTVxc\nxPA/9Gva2jBLTAsXrz3ENmr5JwCH5Wsim0OqRojwGO/QP1/kVjEA/QGDBb26\nyM5eAv/ma+sMtwNHa3Shoh2+9hsYhAnWNFIlJopJcPH+oD7p93rAovOPAmZW\nhBSK306TA8419FafQao9zvM5diHZ645T+QmpmOY5TlyACBpG+SfB3fjD+QE/\nKEKp\r\n=9ZU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/density":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/touch-target":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1112b8def.0_1578607842333_0.8791332365217177","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/radio","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd8f3faee8faaae42651bafb27a2ec70d9a194d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.aab102017.0.tgz","fileCount":31,"integrity":"sha512-Km0KufSbVVw+CrV3NzdWuvme20cNQuYFIN3U1cchB9xf7jMu4S9WiGRrctJ9URLTG6oPcTC5TImooYC9TDeAjA==","signatures":[{"sig":"MEMCIB6xxI4XB8I5du36LmquIP15EuffMnrOCMcfBRguFqL2Ah8G/26yI76q4GXC+2xp+ZiG1fldE84npbBalccRQatk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8F9CRA9TVsSAnZWagAAGWMP/37r9Iq1x6H82fIiNCqD\nEyua3MnO68KeHH24XEDWebzx/BOYo3NUMEG8eGiSAxJIJf+Kpr4uo+6NJ6Bm\nPAufrw5sSznP9zlZ9gbyCieBFfC1yyJbV56gtkTjZmvmm2AqvRi/vpJMSeRn\n6U3PZYl9zakVhYxvqjHn2ptOLSm+j0iWx++syYzyrwUUXROwLJmrm0ZEX/Kg\ndXOpdKRpdxtPX77qcccwLq/T77qKJbOLKkVsgSaBzWLGhVUp/y6QS7Xzvojk\n9Ru9VRMyIVTAdmq7IoMLCHf6VxcYjRxn57Kd0FwOzRy3/BicD6kBVzgMVCIr\nyYdroifsOoelp3PK8/RXzMnqWFGshmT+II1p3mPtN9i2fBUyGitgvemkvq49\nROWCkvWBt1pRnGh9dVIvFOoUO9wqqXWvUuUTF/kxeR/Samd/eyGxcMndIa4c\n/1uUFNFtQqWAuSx1fbyYdUm88nXCQXa1qSl0MpNKSOwaQ4/yjchego2fN6PP\nVOrLMntPgnbqqe+EHbTl45Dek3oxWQLUA8TChS7+cNKzatzkesl1TjsF7wPE\nylMuIAmTGS1TXHjV8nL+yEUQJw3Z1cORUkWsNKqwX+z6wwstYuKQlcqCTvKs\ncFQKYcASfaf/PVLwifUeYXZDIbwIjVylOKLv2CF/lKHEGSZDVmK9zfAsKWa4\n41tj\r\n=4tQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/density":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/touch-target":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.aab102017.0_1578615165098_0.7403492850239082","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/radio","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171985a28e51f2bccb6b2800d89bce94d901171a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.426913342.0.tgz","fileCount":31,"integrity":"sha512-6Aebi4GZ76LY/D837ed3lQde1ydta2AO16J/z6/f1naZViFjuXTwfXr6BIAdzohaKqFv8nJPM+vmGAeem+fTwQ==","signatures":[{"sig":"MEYCIQCXuQhn26J+3OAoY+0A+C9OQbg+Hy+KvXurbQvL2EJlqgIhAMgMna7InUmnLg58te8IKg1h7AGMM6Qr3ud4/UW2PzVI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cMCRA9TVsSAnZWagAAHu4P/iNgLyR80XL1Y95dPFYw\nuRhzx3fyJbNPnbBHzXt864JveyS4tYa5ViWpT/v37dxq9AAJR38HFDJ4IODa\nBFuuRLxy0LD9D5WVdKFnvBLd9iP5x010sNPyGMjgSFdsf26bjzq0XlEEdy8B\ngydXzeDxV5S7A9lpoV8N9AgjQkFxChkY6mg1zuL4rXE25Ce+hvAaBLZvBnlA\nP4dzTNFmEVjW6fS23FZAMTVQC4x8dx23onQACdvJXRUqYTTWEstluC3Xcxrn\nfIwPKa3L5e0YJ+ZFHNpfpP5akNXFSqk8h+Zutvb9GUpc0jzgns4KxegkDLOn\ng73YrByxa2+sWlfevu6Dup/Z5dRSEpDrGdF/KCK+wxXIoLADcmZMWoAwrtzj\ngPodUA9Sry2Uf3/PuJunWXqwXqOi0hvZFp57PeM3P1MkFIHgxfgwYi2wgHlo\nmvfGybzb1z9QWS0V2Ht4+ZKkkLDliaxbaim+yeU8hHW+JZrtX0VKmEGkaxMz\nsT7KO/fgneGNFgjDBETkU5ToLQbtj4ipmXuW1JLWB0toladxSFwOyJnIZqlJ\nPC1lYMrZLnvMRn6eku59JjI8GzorJub90uOjphEREgnKUtLckZgtziQP6Mfi\nJA/M9kkUtplKCGXUGcpXujW4/jSyPXlqnJZ4d//CaqEnJWozZvYxklPyv0ZY\nikXg\r\n=5pIH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/density":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/touch-target":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.426913342.0_1578620683603_0.5659515383437737","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/radio","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49544e0cb0c33852b1331ad87d3f6895b6bd2f10","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d4ea9a706.0.tgz","fileCount":31,"integrity":"sha512-FkNhjFtra0C2q7Z+ABQerc2Y0YdSB9OVW1+eXqWaWn0rf934qGgB0/OMk+twUHh6jkv91x9/iIVN4OiVidG59Q==","signatures":[{"sig":"MEUCIE0CHvFd/MnGROBF+Mk043TMj1pz9ErkeZzivZY2/afFAiEAiwWzXS8nt1QN1tJQFjXPM7ISBvC/NUzxm5Uqc0glPwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLObCRA9TVsSAnZWagAAZr0P/03qy9T1ZQAAzgBmbekY\naHNeN9U/2V3NP+stDI8sN7s/8JleFutY4bWFIikDr8W4QPgP+inZW07uyt/k\np1gNDMbY/+7cDgcCphJILG9svM7WRfbUHBY527IofdaIvAz6MRX6z+fI6fQf\ndox97TH+AN39il+Rl+qow/5FdwbkzHG6BnAux7tLjVJhkfGJYb2bF+xZ3JLJ\nxMBYg+j7ZwkDJIiX23eKhhrquzsmbFhf4hXFm1VCoPDUPhRNkG6IxozMubZb\nUmCQn8DJzrot2TJIiU7ZFicwLevAXvHZpIN9Np3CC0Fj3BmbfHlwmm04BSMC\naU24L0ETxDfYDOEoXcSONtn9k2AHbVvb1eHZO6IWBQqT0RYPMXJgLeYJhpo1\ntkGp2A9lehWXzA/sMNpUdUXjtU+wOsYiRPqATAknpZKX1nGyGBqNXh6ty9ze\nIIDVlK6P2DiSBYq2jrx7n3yU1MTBwUMWCcus1W9anKvZsueiHUZBNSV1/I9M\n9KhXMbyhROrlxjAIjQPlQWsgUmVA1faOR2QRNS03AvcGnzSUT60mhYF6rwhC\nwD3h3joDpJNZxQ+9WxLM9iu8nLhp86Hg5Np0sD3KI1H/WGPhhdnPTFEwy8d7\nImnCxNniZ9NenJ57GW4hYw+TqxuXWQlnB9rJGTzPB5cW6HujNaNwy5arHPTL\nlrI3\r\n=TzNl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/density":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/touch-target":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d4ea9a706.0_1578677147243_0.011270887769109672","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/radio","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f4eeee03634d1e5e1f816eaf64ad8ae27c7af9f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7d4ee2996.0.tgz","fileCount":31,"integrity":"sha512-fcF1bobmoZY/Gw8ir7OzFwXO/Br71CkHcq+wq27MCbNQKrlxsLNwvQuC3R2697XlqD57qWEV3z+Nc71sB5vVMQ==","signatures":[{"sig":"MEUCIQDbZFuUz2XGu292AH1vD8Rbunky3G5KFoQEzav0s8qKvAIgIldfbd+GZ4ooKd+sb36S3NyMgzsk7D5WY+iGeqTiG/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsACRA9TVsSAnZWagAA4woP/i0Kola9KZslnFZox+KK\nVcjKAJ+sx5RxKjRsPRJ88kr+r6QB040Lar7Mkf18s1Qx4sxHxE0sodJH/NEl\nZzOf3DZn3Z4IkY0kgyDfFjLs5KG7PmR/PoB49a8/VIpZmk0Tc0m4BebMmUef\nxyt1rlnJjIouJ6H0kQSugpY3fRe74aZ5/zxyxwr5/a1f1ija9NVS5/kCXSTn\natNJ2sZyWKI7XsgPeF3vOBbUSDAchi6rGDS3X1cO2lugnfCi1beQ8H0g5maA\nOMTqQa1WpPEt0nnJQB08K6phsCBtqNakECezFY4DUpIQLZ1ov2QCDKEKi1hN\nSk+fxv2L7VkDfg0eTAMM0wHukkFLK4Syh7X5btBeMD0w8xm3I5hSulJWBrre\nmXpACCEIMu0d1cWr1lpEsce0tIxUA/tfU+Zg9cAV7iCmkhIepTFMMbAMoQRT\nsIjaBflq35PjKs1ftTQoJHQWdZPAIpc9MF0lJ3URorqfM+uHr2Tu+K3gthxH\nO6xfqHxKOno2KJemzogStW8L8mA5pbMsRXzIQ+UbXyKOYaBwicSmhGr0eVem\nVw9u9LHlDxCkjNGQcqw2AmLM3MxZWmSSfbRWi3uMA3Ay6HdAhZghqEIGLWVD\nWmcbn0oOB6zJF5EanF2J43wCV+lMVTMQtqXR8nyx1YGo28PHYlbHrUpIuSF+\n93qB\r\n=m2IG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/density":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/touch-target":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7d4ee2996.0_1578679040388_0.037720245239200256","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/radio","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2241d1a021152a92e1eb54c6b72ef52c9dd5d4c4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.981ec9b6f.0.tgz","fileCount":31,"integrity":"sha512-9HxwPUF7DmW2WEMz1Q2PpIUB/lzNJMPF9I2h2RQ8TqIRzfippbDgDbWnG4M2nygjw4tEFj72EM4V++ILr0vvPQ==","signatures":[{"sig":"MEYCIQDVVFm0vyFHRGTGrwClwt/iHIkhFTIca9+N/iYjTLgW+wIhAM6IK+13arC1XP1b5TQsWhWDUcr+niLOcguqiMesf9Uj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAoCRA9TVsSAnZWagAAV2IP/i0nrIYmNppMjnzgHYBt\nUNarOTDy0ljqSXmgIXYwQywPY4XUWrfUuJ18xduPw/Ovns5tUp8ESZtqHhAy\nR/TD4q9ROipyq81t38Wz69LzYbin9hwPZlIHWA/ril1/+Twyw0FTRVQKH0vF\n1XhgTUSyMYFrGsja49ieP6w5DNU11VxDqWOISadmPFAgr+2pLnoPG85sK8WB\nx4mFwQLQLFey9mWRPzMGY4j2kNnLbtxM8odpF6ZGCJIThMCNQDOhS285pKuv\nw6rpGlkpZaUoVoFkP0XFRTNa/RPNwwSwMBQKP/qRACbCKpzzBSW9yod3Er39\nuHl+ZuQ0trhTXheR/wJLiIiqVQkXfj9DtVNIbKEeDt+RdaxTCCYZg6GvSIdK\nOOyypbG/fyTbr9E02KQ6CXJvqB/9xmAZzgT4lMBAcwM4ArmW9+UcMs2LRmGk\nvrSPkHGCjh/ibKl0aDtdTRHZPfGJH1rfuydFGmgIyfLZLNoBARUHhhs1b5kt\nUSGGB+ZcWzSJZIP1pcwGqsSOVVKn5wnWUvWGrHoSusLPih7KSYTmC/q+Ihrd\ns9E5VB+7xf4Je7UkkWL2q31gzhHo6Dy9YemMSgifQ6KJPZHJVhjkjYHCdC9y\n4UtuGWdci6Ar9KTDaYhFfbA3CcI5fZhYg4k6UnYue8//+yLrWRmHexkl5rQ6\nx3pb\r\n=Coxw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/density":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/touch-target":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.981ec9b6f.0_1578684455583_0.9396414110935127","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/radio","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b39ec620fdbe7d011d788a78bd8be7d06fc6b0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.737da83fc.0.tgz","fileCount":31,"integrity":"sha512-ViN6jPhQUlaoOfpR5mowNNQyedr+zncvO1GlKfcS+FuAISd+VLkppUZMyjlbuKOiYuFoIb3KQetESJk8eQmYqA==","signatures":[{"sig":"MEUCIQCpNBEhWiX6h8n3Qcll+EKc6/j50l333IYizJoDg29k/AIgSrRzZ4Ts5hfm9DpMAXFc7FLPo4b6B7wf0d+3ul1VT1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpVCRA9TVsSAnZWagAAO9QP/1i+1Nsejx1NXGdPLZxh\nAh9jRM/f0jSW25a75vECqGBONZHuYjrWI0X5ari0Kmw47+enj/wckWc8ntGX\nk8H+zhJ7jtL8dBlEM+C3Ja+QJ22NjgR0hWFsf2luwD9B2eQOd7+lHtsUoy1B\ngWWNjebhC2Yx1Le1+V/9cxXSlmOyHxt3QRmWhRuZX6tlUB/7IEPeLP23yw4q\nFOC6lOnIv5TD7v/cWS082lx7/piNaeLUZ6r2Qhi1iE1x5a1CyTrJSVN772IG\nt7YuMRO943c/+9RRgW/zYjGg5XDsxHPY+sSO8QgrDgfABC/eiAlEkg4N0tXo\ncqsQlKfHkDe/NUxfEmlXnaCBSU0ZaTdPkC5PGsRzeTC+Cdi4RiQSjcqZmBAQ\n2vTi+ALvtlMk2sX3Xu/i3UAwbGdP8wPDasCz/ZFMeet3DPm0n6PP7tuz1LCH\neBLFTBp0sWH080DebmwY4lMEFgv6CMBVl1dpN0LgDp1qubyBWTGkaiB+gLcp\nqEFH3t32yD6VI/k1cpmgzBOp9QtH720mWkqjgjV02klQN3KQvWd95Rp6iPOX\n1H32whi8/+k5T+bySNZjPzC66QGWwEqU97YVo0JVa2vPDqKsUC9nsM6ZQjin\nAyMjsaiF24u0w4DXyljO7mN1pGnRicKf7P1eLJv0qo2aFp6wOmh+qjYNP3b3\neiWC\r\n=L9UY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/density":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/touch-target":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.737da83fc.0_1578691156643_0.6991343870208409","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/radio","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9ac676d17799efac2ebc2ee4c58845cae6e23c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.aca8e6c18.0.tgz","fileCount":31,"integrity":"sha512-N63Ay96CXgmq/8Y4Luh2Bp6jTaiuwUUkU516MYg+O8RiS+uiiWR9nYfjdxh26Hspl8i9ZDvEZWbfaFPYk+H8sQ==","signatures":[{"sig":"MEUCIGkBs+1IrMA3QwFI7ql2O6VrbRVA4Njau6iEuOeiKSfkAiEAh1jF7jxLQGHrjxJmc/gbaiN0Yje3BYOgqJg+CypMBP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXnCRA9TVsSAnZWagAAzlUP/0fhKFG/2392f4k4O58a\nYpas6Fufe7BaH4NrgRjm1BQVr3razqGlwBV3dv/HjMu0pyIqAkCGKWHb9Qey\nsAQdaJdjaKWn7dbzKhUL2MhPWT9vrddqF0mGY0mznjJW1k4TCpsTdMcRlMbs\nO3RezO0cTkBpcuZ0g/Hch2N6GNfbqJPl74qnjDMAZHQgGp6/o8D3rliVDxvf\n9fuBVASN0awA5QFzZtzG4KF/7KqlO0M3GwWSzmyGZRqkmGzg8dnM5nUIKsBz\nVpjuqrCzzvTk5J3zDo0seIgMqgflJH4qx0r+hFlyDh6Gx4dAwCmvJ81PNF1F\npLVQlOBFWnMiQHeD9PY/qCOmMG28BNWTGsCChL5SHtBGRu/mh98lFnq30cwD\niIhNq2zg2FSZ+uJWdGMJ6WWgNl40Q0z92Zybs5OBS8/0jkD612A1y+reswzr\nxUf4ZqxKFibsUjLGBVTEYp2vhPEZA+nNzTBgv6UeMrfFS8hyb8O7Sqt+NIOe\ndELyBDPPxfyjlXLQrbBz7y2TOAbhnKsKwxPxyu9cvb96d6ykXB2VIYxNPBoZ\nfpem67pS+/wgHKEo8B/VAqeW0n/vUtQ3GTns/S461h/n5FOO/XRArrOaqzKP\nHvnewbBnzIzN6YsjeF7Y24qrX+a9HMSeOxjOySUFwFOd3hqkap/2mZm1Lwep\neuLl\r\n=X4uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/density":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/touch-target":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.aca8e6c18.0_1578943974789_0.4758184494189819","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/radio","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20455b9c4056dd4e57e0429f49cb565de554155c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c38d84e21.0.tgz","fileCount":31,"integrity":"sha512-5Ab1u/Q/k2saETQWRmpYiYz7v3NXMERhB5CHIPC8CMk5iDlw05+iHLgoyvmOdTVBFpEqI0WrvXq6Jk8ywd7XlQ==","signatures":[{"sig":"MEUCIQDnR5Qz0r9aO7UoxdsfvU9NFQhUzY96FhiaImu3+C57KwIgHEGTGrvHhn0W44QQ+QqdWUlwm8IaYSschqMxSR3XYwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuyCRA9TVsSAnZWagAAIQQP/RCPk4m6lOc+wg4hsvqG\nKHbpdKwKvl/Ga7uKPyEibqN66VzFnuiPIbqhOV1AjYpPwKSHyhiOuNRpZrEV\nHHE1SB/AAKkbL7H95pHyECvXv4CwWPlOPrhpRsJ3ZdOIhi2VBGfgCu7kpHi6\nmVx7ergJCVxyNApF+GupExy2u3RxiTDAvvfF8FEuAM4PMy//O40n89nNDdIu\nQbaplUzkhLGIehFd5GLzj96q0xF6p7l61yptb8jMdfn7aK/l+HIDMr3KdgYc\nrarml9BQpsIBWWRgpNHlXBcV3ie+zjoMDKUZ7M7KcPQR65hKb96X7Vsd5SIG\n8z77x+V+Z4x0+f99vHZW4raIwtAPpmepUusH7P/HiF/jysANXMbBJomKvfr6\n09Swr2mzhvT6nK0WPhTiVAghTBR1BSShmx5NIVBad/o70ReiwbNxURA1dV8y\nt6Ct3LvWfZjdS1ozLXGUY5YmQqeQ7fgVISn/c9yrdtTh003swlKjOH/KvdoG\nNAmiKNWzvFTFoDCpQOTQGqyBSZbPNXffk6MQ7ZIlk18CSkRCt811VmJxaVTC\nSLYidbrQJLntN7KedPUS6IbyvXK95DpBge34X4EYv2C2pAtWZB3727NBm5oe\ncnBQa/tO3YM8UOgQRxnNYMlkMcEvrpt4XbL/AGExIPUdSv+0t9Yvak/bOMG9\n9DQA\r\n=Ayi3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/density":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/touch-target":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c38d84e21.0_1578953650449_0.8387718118404375","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/radio","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"852e003eefe904ad98c2916e7f610b0b8b74a266","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a4db5fbad.0.tgz","fileCount":31,"integrity":"sha512-+1gUEvWPmeiUS7gKzoJE1OtMA0B+2Z+7iY/NqkOpXNE9lEMhHEjn40DDkqU0z60Plrn6BXxXa8LIryP7eW3Tmw==","signatures":[{"sig":"MEYCIQCWna1DGA0ytDIXnocs0hSqhNz74yYQ6bjVkLamLLKr/AIhAJmZQhI+nPwMl+7c6Vw60YeeRY8Mjo4E55l3nb5jnhiM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRUCRA9TVsSAnZWagAA/xcP/2hVd1N46jkO9DaTCvtQ\nM5Oxfo3PEqCfPY2zF2r4ZogvMdsxMk/W/gz7xnD5zu4pU1lLLNzt4fm8FLGu\nXjOuM9drvB40S+4IzyLWHrijGBzVy5Lr2NlRr3ca1BTcxYSMaNfxlLOIAAAQ\n9W12dpdKcQP3YqvhtnEJX4a6dtHe3mzP6WAKe1iXCrG6XK4bCUVP8DIMhWSq\nmtw/8io8huv6ofhnsl44jCeAcFIKCab7b3dBjjuzE5TBkTid1Ru+1AOsKGUe\n74VP8fOMxE0tCDFPRXWPF/yxj2iUnao7MX3bl3piLecUtZstL11A6yGtftwJ\nRrvWVOmYJWLElhlxgzjZQlCpsIW8PU7lPLMBzrnftxBFFbNN1Ixz3bRWQNIf\nu6vpXiRdkKsKCM08yYHTI4qOfPRNe0sUldNP0n4/qlPJL8kRcRdPtFk+I3xs\nN327AtIH38plajopEhwd6h8Ez+SUQqZSCEgszreha7cRDbp2o1mCJ5YPW4iS\nNJzNFKPcq/CiD9D5GITr5lUyr7J6Hc5y/7K/0l+2WsOVqhCO9xQSZPMVhPcx\n4i0ylCo5v6HTQ5j2GiNZovm6G844AqqfOWdw44D0wMQT4EsiRoKZYsZKdBrM\nisQ41ykM7Jn6RD1oIXDrKYwmploPKapVD/phtsQMkpoW2Xax1W5iwQxI9qw6\nbrY/\r\n=I1Wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/density":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/touch-target":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a4db5fbad.0_1578968147795_0.26869208938069833","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/radio","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa5fddc09befe50e2c3f695e609d359b4c58f888","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.faa9af310.0.tgz","fileCount":35,"integrity":"sha512-p57/Eg0P8mDbTtPumGgzz08b6BMNH49Z0Ptb/V8hWKV8nyF2IHlYApPd32g+1tOkEwe54S5vwxYjxYSjaZ4C9g==","signatures":[{"sig":"MEUCICVU9nXNmdGSe7KaXacUTCz2JQy+udeXsBoiydzOy/ISAiEAvxQgUECFZJnoMe79myjyHacd2akRgY+p+t+hur8c/Lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIcCRA9TVsSAnZWagAAQsIP/1MV9jWdkY7pXUQGUvY+\ncfLo4/QM86sVS+XePuxOQX4528fkzcSVf54ZduuE9HoIUHHgH4s1gdGP45sa\nKX5+pMLDzuBRLGr/QOwfb7K8rRKV1/BpXv8d2l99jpv5SiwG9AoLlTIBErsx\nDAGG5WZ/VhPQnY1MnAhwKhUpFmtwXfERJWrdCNXXgi8UZQ+QlzSZFioVQcq6\nt2HKKYvV1bB8ecPkab1vdbcoPYea1og6bbEVOONZIejj9RU/Q32zDhPiYlXa\nzXn19A3NTER7NtZFzv7fRJWQyWMtzJrNAQdsYE32AVR7r9paxRPnW8uM7IlG\ntX2TS/X4wx/448FiclXRSKbbj27WtEpx7AACV1FkM5MpnGIel2TN+xmBCxIZ\npZufmtpzdMZjDW8m3M+H7NuNZCP27Iu2nan43baHotUrKfeaumRIJudREcXe\nMXQJ1KWi+gquDOdWlCxeRI7n3LQh65wnsam9MtGo1mbOvN/11n+FqbWpluVG\nA7EWkaIWVs7T+HMf1AG81crLlMIip0C7bUIAFwIOxVjsjIQsyUjixKXjGKjS\nfGe0YEcxykU6y6zQuctZd8KktJib8U1Qye658HNQ4AMD03qZZeJFpokyy2xs\n60m6UHCOWd1x/c/FO522yTsfTwOwY6BSjnw+dzTjEEOdJxko95kHafRb4qwq\npR4I\r\n=Bw+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/density":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/touch-target":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.faa9af310.0_1579020828349_0.4661135847383695","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/radio","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca625448a55c67a1a21519e114a4fb25c1438fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.60354c577.0.tgz","fileCount":35,"integrity":"sha512-Q5wHLNWzhulNSBtBIx6Y2oQsowqesB8NhZsHwo+qXKkFjV36DFLZzOeOZdKmL5058eKWMekLKEwlCbIv83JB1w==","signatures":[{"sig":"MEUCIHvVhAJqGdSc0+35uykSS19xFD8LrPKx2vID9Ky/VPT2AiEA8AHR7Nfjz9yZVp5CyNHm4947HZbhjgbMp1vUJh/UuqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkS+CRA9TVsSAnZWagAAphwP/AqsCaU5IPXjsIMY3/lR\ne+oxf4MJIuLMLXsC9JUNMAfMKqtneOWFmK7EwnadvMVskU3gseL/n1WlduxU\nRuRuwIdj44/aFYY6vow6EZHEZ7DVSQqRbnWzlPT1hDGneb+SUGeXL02DKY+6\nxYFidzyVUi/LP8AwFTH/C+jdW2/MPaNupZxNWHgTYf//WoxZ8BES0J6GPxp+\n/1IzkQCO/S4MuT8koRB8JWpvhw6EqYL+bRxeWpkJuowPeiL6sX2G5CV9cnEL\nENloRzOWabf1oWruOW8+m6yYbK9wD77gOWZ67QoSx2oILwln2WH5jyeGlzR3\njkHQ3ATHZWE5CKRL0M7tZ0GXmO4MvR7N6pkpjOEefX1ekamMCj0B1UPAkbPV\nrYFlD3tjT9bfBog38LPdB2hKpePSOSC94x5S6YNQXFjsDA85JLVdIfqakSzN\nmCnQ+0WXfkW/t1p8GASdhjobK/ORpAhT5GrLVgCWd9sNt5+kcI7MO8Td+Nqn\na3geUVTUyxg7hc8qmcj1Jg4u9w7roZHCulQctNaWvJ4J5mLrS36d3AoEHsdl\n4SMCaQIgTYcbEeWmU4UeuKunqARyBDHN1Swt4aBdIBbVGQ0+dx9styYkBq+c\n4Wn7SUWnmXRvIrM7OhVLEK30LU8RXC3YwJ1TA8p0c86nlOAE6pQeTAjk2U5w\ns7Kh\r\n=dDsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/density":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/touch-target":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.60354c577.0_1579041981619_0.7304759874391917","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/radio","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b892448b784d125e7994df1f49a29320d697b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d07c78daa.0.tgz","fileCount":35,"integrity":"sha512-WMA3XAGsLGiItACuPtO+xBAnpI78XBrEkwIw+Fp1UgnMO//0TtRSxBR/a2Zx3D+IDUMg1+b3T3qIZ0dfLttPsg==","signatures":[{"sig":"MEUCIQD2BSXueMmxwe0PLAC/4p8G7I47YIicTxvXAv+i14f5FAIgfl9426pgxX100+d2dxkn0qNoehzMJLn1wKyu7na22ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEjCRA9TVsSAnZWagAAdWIP/2SSR1ludQUjrBfUD4iV\nTQegEChw5jAsoO6q0PxUEgmSU3gJFSgrkwRF3xkS1U1aSj5RFRclhek8RvnR\nWNeT0H9qYkXapBPF4A4D4qCzM+lnP0q+DJ4oIh2Xfl6OLTgoVNeJ3QeEgAdF\n7uuNFFJE6vdA1ULmqRMrj+G9Zcm4T+8f3eoAmYHuMs+D9MahMgoBseFUp+L+\nqHfj2FZZOdOiM+KLtvpm4tBDdNycY0mvQAeFtq3DkpxqXMwibTAIhWcM62HJ\nGz3ZoBhKRQpkIFTh1A3A7Y2CKOa0yvYm0SY6xcJJ71jlnCQjaFHckrY49Jui\nFhPD9tWzSgMCS49lgcunCaNGrY7h7WBx67dpQSZqaY2qkBTu+cEjfTrQ50Aj\nSzmAy3z7Jzu6tSWiJ6bVnjSVvo1VuXcH9SaPm4/Dj/3lVkZ4T8SwzZDuV9kl\n/gmTZPzr/atOp5r3VogukGzsCB0QiqSCyGM8MOAWF7GoqxQVuKcTlkEhNkYH\ng7Pj4IlRy1IwkxPLE/8x4xEEGVrtsVs8c95pa2uL22XSH0yk8/wIF+iBiGgX\nwrK3q86ZR+L0sNy8gQVMUhLu5MEnyruTBsiVbBgdXWK7809o+6a5hg4op4jP\n3fek0OnYDtaP6AtbqN4abMW4EKQfPjwaUc3nbO+gSdPuUjuI7GM8THtwD6/r\nmQc0\r\n=rb8W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/density":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/touch-target":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d07c78daa.0_1579045154902_0.6291156407659226","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/radio","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35c72ad1ed24b13525de43448aea6f574e745208","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":35,"integrity":"sha512-u8Qiv3ZHxTha39IIWxTE5wjRtL1umxbyNm2SquU6MpfgB4mH0Eul0Kl1MMUqpQ68b/K4k41agLGMPkcS1FzVew==","signatures":[{"sig":"MEYCIQC4FwIIfJ0NW+yTfK4s8XTCULJe+2AWeqqJ9u7GN6aIPwIhAKNc2yVuxc74kuUOL0Pj+FhBk4uYgk7bbjo2LYpLlz3V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5OCRA9TVsSAnZWagAAG8EP/jqG+k6F+ZtYv6hCV4JW\n00cWQHrxIxNUgbjuHr1xBT/Fm42hTh3v1CWgRaHeOe5Cypr+Y3wtqGiTUloS\nIR+lPxaaLg8/BKbuSsK0ueVEe6NJsTOwV/Zu7VFQ6VrMq7i/joTM060HWU2X\nlby1RIBwjYqyZ21OQLAinwfW6tKi09j3vUR3JR52yCG/qGfHfEN3+VED4RdO\nxAJ2OEy2hpB56h/0ebyHg+jI/KJQNuxH9/Qxmb6SNRN0HhgHMi67knLS9bJh\nfjhvrkLdGOJVH8W0SMRiUER6qVDG9R/3eiu711l9TQi5KQR/BLUDV6WSu1Fb\nymyWwE5pKRf9dCCBg+Aov3/BsUEpiFheKXFgeIoMC+A2QflH5WhkC1W+LsDa\n5F77zNK3oZ+CY6rEx2lpjpMdY984SdE9IGe9BxhScsN/vFtRoN9gB8K5CRUf\nGFrDT73beQrhoCDB9y3SLc/iEn+l5x30z/2f3T6YrFxf1plRixuJ778rDItI\nGfEHxe13GDyr6kz4LEkLgTtlcLINzgpLOwkdvjhYwO2u1NI4bBS6pGVWTmxP\nD1JKhj6qv4LEzvwyerRTQdO60AGNkDQfPeCTffned4SHU2JKmbkh9c5b5P20\nW3jiNnnGJwp2nFfYymxvsXOtC5fe7vDncnthoZS6u7Biyq9Lyc/lYx1221Oo\n6Htl\r\n=tYji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/density":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/touch-target":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.8ddd5c6dc.0_1579052622439_0.6712972559472021","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/radio","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ce844a43e84982e1108e2da87a49ff00e60768","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a9511d870.0.tgz","fileCount":35,"integrity":"sha512-paw3Kbv3NVtM5B1UPwfYqNyTSVu3u5hsD+npAdA5qbhYvKusbbwmeGfpbtZctKhrGfrfrThvAaSVyxMQGzFCxA==","signatures":[{"sig":"MEUCID+ywdu3c6CrCACMxl26xUImpgswcyy44OU+Zz/5GHHZAiEAryxzkm0C+VvLS3bXd2ATjSFyPBcNoUVzKtRzeW2QDyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2O5CRA9TVsSAnZWagAA0aIP/1hKZlHJZhZxnn7hTiYr\n6VWF7Pll4wTHS9NSM/PvEXxC7v6jZHRR9XbvrcOXeTU8bK/eV0CeVcpJyweA\nVriLcvbNkUMFqLqgE20PubnQgTwYUsRav72rsJW/EuPmlxaLT4EvB79NSaQl\nD0T5J7AJaF4S195vP5AknwqaHud19K+C6bxBpVjxeoiYgI2DlImAzixoXEIv\nqxDdmUUzhWwwGSWfaeOe+70h0IOisXV5f2j/1Utb6Cj9YvLvg9j8v4sMshNL\nOFGDdlYLNhKC9nwfcjzOrtTxCi7S2SK82qjo12kD15GZZr9+3278sKt6fl53\nzmL88xklkIEpfSX0V2Bbu683W4r2rtLsj4twxwVx0TSbXTNDHzIGAvq7eo0H\n9VJRu8tSHTefjX1l99lv9jT5B9J08H4gbU9sUvh/pm9ofpgIw5MDg6QbfDH/\nhM3hV+rwwt2BH7n/llJXc7hJFmntx5JxA7vvda/F4HS8XyL77UKHx7T2C4wU\n1thQDU1fxoJctrD06ryGD/vva9XWiKZrJY2Xn3XbAeyKPftTnxHUOhxfghfu\nk4AsLfjZ2qvMim3RGT47cM3PUAYe5+P5RD11DxKMxJNXVDuTa2Vw+lfU/mJ3\nkCYjg2Fu99LEXh4j+nWDd9Q3n6f1hN+emJv4fMnaVaxmNRNaG4MCT89sHejw\nhpGb\r\n=Jpt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/density":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/touch-target":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a9511d870.0_1579115448857_0.1624411460628854","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/radio","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7324977cf8d546fd941a4decda87d238532ab216","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7c8583c4c.0.tgz","fileCount":35,"integrity":"sha512-GgKkos+wcccOXDbU65PUTwudNxKdMExcO60S9tL7BCT7b8ZElAIeTWbFsgqq8CA9kT4lvwfPmExmlKMgPllVmg==","signatures":[{"sig":"MEQCIH+/FWaza1GXAa6B2owUxrxdFSmDRP5ZEpGkMSyxddlOAiB8XSYBw4XxTjybTElinx4sPOcFjn+GOfVgzk+IaPft3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a/CRA9TVsSAnZWagAAWQoP/ApGWysfva41qfLqBvqR\nkGexV3sPg3zsm0oQwavLIEmtfDLcl7Fs8C94qf1Z9z63nyvJOiayedtGU537\nP5LHNovVETuT1vp7cOdoHW4geblbFzdTPUJZz/R7DrOnWsMLnshnulLIiZYz\n+TBdY+txxg5Krae3srTySoCP3bwjYsZ8Vv2mEHPLJbl44TSqEGUxxCyUSPYz\nF4/1+7Dti6EuQJr1LCDmZvTi54QB79GQfzX3PHt2jzWw3zG5zGYmxfdC0x5u\nhqfrm2UtNja4g8QKXOHBr53R/4AYNfZejaBcfDPGxRnUQkDfrnrqgn9nnYGp\nNhTZ+ircDd8XNCMbDOHeNHy7YbwzLCYFJxtmY93e2JkHpFFJV05SiqZipUOM\nASkCJaCDhePYysLvRUOEj7holAde7aGJE1MNFXqLQDG0mOae0TkbeVMmPsbd\nFEyyrvX7Hf3OdlOClu+CtA7nR7wuSPVImVadzC1ppIU5SZGn3vWeeZbQxoqs\nBxogmb5SE07JoEMuRa5Eqai9tSjeim0ZJjqqS8Cs3lamtIEMzC04Hml/nVWP\nmLOYg5EtuBlHd1Xy70jK8ItPM7+LqZByfRuxAJnbVC+Qim2A8DIHZPY+ePud\n5wxmpjADSXFEJGbhBVOJuBYqsvRKyMQH8GBAHnhqzS0ikCxl/6xu9tZ6yCLN\nFLdC\r\n=/rr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/density":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/touch-target":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7c8583c4c.0_1579128511390_0.9242792685425476","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/radio","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e87c07133fa327cf006db7b8a0335a0fa45c8a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5d4b82bac.0.tgz","fileCount":35,"integrity":"sha512-T/4v3GNltpwHh682VyT0huZ0c5KQIr+LmaNlY7aq35a1ufoFw6SybJPGGLuap/WEC0OEjzcfnLxPbfBLp2J4bw==","signatures":[{"sig":"MEUCIQChYJ89L8Y7vZ41sqjG9dDa0VKwZ4igMwZ062f4fsKiygIgJAIGEuJ0aWFGvjmxkZDlorkrnMnff8q3MO4JFVmOaKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bSCRA9TVsSAnZWagAAhLUP/0Y+1qNrh3eFfQZ21NX/\nb4sEGgxQap5wvmnQUrjt5qjBxezHhewgskx8ZWfWrfWAtEEVUzWCEJzywydf\nVyxjEni5ODhWuERiSyaZruylzwB0KKhoqvH0XH1nselmtqDqOa+MZfyDYTjm\nDtsiGLCE+4e7HFrJAj8c8K3nOYJkxkWtS55RaeowmnTNGjkUGFsLVluKGm8k\n7xE1pjfyaEBqBs9FJHJKiP4A9b14mWMzFQhPr0bAVt18b+8F0UncDwN/BjNB\nVciQkBLI9gAx9xxHBMdiuBzTSXuNoD589pvJ7mFbEzzTbwNNb3ksZGLyb0uf\nWk7HUAfwq1YSKTJPdKoeG29c3aLbPhoM0wKV46CRwswCrD8zOiVxan1u0GUA\npA92ABpA3z10BLL/Mhrpz+++Gjn9kEkYMPebUQ/h0itHylBN/DSQ7q62mG+x\nHusVTaEv+OW450AG8TM4wSCgnGhf31rk8R+y08L8lm+sFq5DbPDSOOiCWqOH\n1kFjFu14KE5lnyYZiQ1I/2xERFtgGZloeLIlWHDxETHRkhjgjV6gNz54viDx\nh+O2QpJfTx5dWi0fr3KWI9vdceqrjjSPfDu1i5eyDHnzricOAKq/Kfc6n34L\n9gBjP7PjYR2sQS+NVUGWukmuRYGYFCiP7TCKLJh4BvgqgrolBu4GKwzcsjDn\nV2Y0\r\n=xvf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/density":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/touch-target":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5d4b82bac.0_1579128529898_0.37944200096276437","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/radio","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6cb099ba32410cf7eb28aa923b4548d3784b3d9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.57d0186e4.0.tgz","fileCount":35,"integrity":"sha512-XNH8YrquNWgoMaAARoaHKVju2+DQkFnm1Jy0y071VnFGL75zWNBKFEdE4d5nDDyLEBWrU9FXs23LwGF2GPzRiw==","signatures":[{"sig":"MEUCIElOwHfGnxtb1P3km7lJ0TELGZR+uMSziGKw3STDMfdoAiEA0NMZNCugqZ54UepFRRLGl0PEdut+RdZVKh1kCazJBKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjSCRA9TVsSAnZWagAAnZIP/3xGRMnSts8akka4hSuJ\n3ZPy1oKMWbBTxsueLYKFxVcwb85C1MARJG2UssPojGFFZdPbHifaClIUHDLu\nJS0HeIKcSH+Vs+S45BaeHcmaLjRvcReTtm0oicIfEcwz/3eIQyfqFo092MoZ\n3wSrLJj/DfZuq4mGBa78ZJFnZ5t9gMWeQrFraLn6eytvcugMHrLQ9mOSEE2C\nXmnChPzqLJ6h0ctgz/fmW1NsNHVB+qC49Z60bAvLF1G7EWKGBYKts8GxYemv\n5/PKiR2rZvnuvfmoC27D5ki/kPHwl2MUGJI1ux85IbpgBB3I7+yhVR9CLuIN\n0SqQBPu3baTuWheSzURG2QdQtPrnSdk7KP7L61vIpgr7V2WItNLnsZ0NN9gf\njtjcvLzQVI+V9S9VokUGBcmwP5No0/BsYrU/3ueQVZu7ixBgvpg1oG7dWGSW\nsNMqHu9MGhe1PlX/xq9l8WMl1ot+47WeSaERXqD67IEI5PV3GWVY8n0NDnIN\nKsNhOBsSBGhujtTCD4sRbLWYhPocGK3VKWs8ZFvsyHzPui8IYVwfe7y2+o+K\nTEkQHZSXVSg39ZlE+8dxXVV2ypw0uCLGR6XTRVyaVRAXc2V80gV+85g7BdFh\nuqonJPVO/xwiF2HjcRV7fRY2caq9nPz1dC+k/BgzBJhu+fUiOt+WtV2+I96A\npEeF\r\n=HHz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/density":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/touch-target":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.57d0186e4.0_1579198673548_0.4885573562703589","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/radio","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02bf9698d1f311e54229f7d89d2bf12d766b779","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.071a6ab70.0.tgz","fileCount":35,"integrity":"sha512-lKwIMw3NoVMbLVTDbizavAk0Ag7qahi4EkI56gB0NQR1Q4H06tqgLVVFQvyv5d5nSofRrWspSKDTiH4ORcEkLA==","signatures":[{"sig":"MEYCIQCpcktCHnY6EmAIFF3UxLQbyhrlU111KiGeUmSK7zimFgIhAK66OP0H1HrjYLle+oXycUqj7QRX/MetAbu0YFiezO5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpZCRA9TVsSAnZWagAAWrQP/3m7ylLzJ3svYA40A2YF\nVkiYhd+Rg7LdIYf3fTuWDWLleH7KQ0tjHbs1VXVUH2pkqKYFQCbp5VRA7LEl\nnVaf3jwQrtq352Cs67HMkahPNZsA8CQ/m+PJRCvdmeAc+gOMiQM6KXF8cie9\n+60E9lg+vv4YiEvvDPVqq0FLsVcaP/nW/Sf6Kr3p1v/AJUdk/IuJNfF2vOba\nKN7XSEMD7f2RkXJ1m18MR/BJongy63A7bfYHCqfSpDa+Za7H83XQ3+BnPPyy\naf20mI28U/Yme4wBlznqnNzhQf/VKs+QnmLPnXYmfvuuF1WXJI0DkjstV88G\nwCwjbBS2YiXi7bSZQmPeCjgEk40Xlc0KluKEuaSJyWeIBh9jqMSNwNEcMly3\n6zp4NbT/JllwzstFO+7K6VjBZOkpOezFIX9WnfBNK5elt1eFsRCZYCKol2KN\nVAdk0zduDkMvTj8CCEJcrlmw7nyu81QsoQT3pi5AASwGFnvk9QAuuqdt3hhe\n0Kckl8T+yoOBo20QbYO5l+5NeBP+acyWalLyPdTvBzsBdEKQaO+MqR/t7IyV\nkLpdDutITWiKD9poO196Oeoo0dHCYxi2gDlAw5BvZG8qfsEhySspfbaClZHQ\n8R+BAWPsmPzZzM03siMEhuM11nY8BnJ0YbiA/tx7UxOslrFXvgjsYS05PSrt\nMfJs\r\n=dNXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/density":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/touch-target":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.071a6ab70.0_1579199065190_0.5851013825670319","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/radio","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35812c9b5546b343aabe0474051e4f86f86c63f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.22e0cb618.0.tgz","fileCount":35,"integrity":"sha512-H/8ivY3ij5xCoM8wpt/vs/HPyrM+zPLGMkzN0x3Jf2FobZzzO79MlB/yKl7SM+zcGEcN+WuFvkq7DNeRQiiC3A==","signatures":[{"sig":"MEUCIQDJ8Pk0uLrzu2AeJoAOrjA4E6IPzcQn6NQ3xgsHy+Y98AIgXKXTCC2ZPnKdcXyIEd3b+FPvnsSDwVsENtUTuEK8ztg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK++CRA9TVsSAnZWagAAEbAP/j26igqssmqNIRo+wmnS\nXoy0ZoIR5WcCn31chRxfL6u9pvn7I7GlRz4fvqSbRVGHopjQARuR4yglRBMt\nX0iwOB3Z7iPG9Wwcg6dYlLTdJlFSPF4V1wq0T5m3Dbf0z2E3C2zIXbdD5xOo\nSY088aTqJmHsYSBUMPQY96cwz9FUl7PhhPRLvdxa9yt+ZzG14b8FYGJ99zCh\n89UfTYlRqazJIACZA3NN+FGn4CgvMurUc6PyIfHeBltxaA+uM6laD9wqP21o\nRa9ZDoQQExMISZ4IloXxKeiHKHC6F4VThKBc4RZ3Ur3UdOrlcgS7onzSwbMf\ndJ7b73okAbkUtOp2YSw2Sgz33HbXSk7FGAVd4j8rHseajxl0G7/uiVjAQ+uI\nUJgzw9hnFiWOMs//E0N/lj3shDPInGxaOBkoOW+/O/zYaxDhEyDVMkJ7Ql5W\nc+H9hvNjnP/zGQ6aouDQtPdj+PT2hOqhjHFngJjNeL53FJJWnZTWDeYDW1Yi\nHoBh0TDmzKWEJBeOGzv6R/vghuphE+VpEeHzf5QAUyNEz6pj2kXHu5L3Fzhv\n5V/yUBd60OZqRa6sOhhhritPXbEqRFW6Gz05sT+OAFqSY1Tu9Ni+eFPeNVyy\nuThrmWgg3oFjvXBss071NOAif8Ht7VcROw4OibQ1hsHAwapi+gg/dF78mW36\ncHdk\r\n=3gJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/density":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/touch-target":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.22e0cb618.0_1579200445886_0.17927049900508063","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/radio","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c62ae83d1b06c41f58e3ff0e1fee5dec4a7e79f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f16f15b8f.0.tgz","fileCount":35,"integrity":"sha512-A4Wak/9+iBPc8Pw/iMEIQpPb1B58n2fzyj31p9KRd6ddJFp8z1/3jgTa5Aov7IyWX7gB9NKAO7mxzSixqlRZCA==","signatures":[{"sig":"MEQCIEfRBcnlcedgUVO80cb16aOG6+zmh7YuPGA8kVbJ8C5YAiApT8jLozWR/tfbo+l1my9WWsic/G1mVC9LY/+V8ubAeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrCCRA9TVsSAnZWagAAj4sP/1dtD1FcDqCBkq0SCCqS\niivQru7G+Ff4qkI24zLkRlYZwifVSv7QtHjEvx1k3IQQPL8bDU8QLwiIL+sh\nzy6omrVm6o/rC/AdhLvqy3odMAK1L6DB5hhgOcv15w6bhwHQV5MLduf98mw0\nx3UPbC+DPI3qw+XfoT2jLuNBl43aaRDTW2DAOUCTKUwfVBSZQOSfQLxVtXkK\nH5SG5Zl3C8IlEDY0nk6BgmezTcVDwGvweOP3ExSkzfv5oY7co2SaKFhK6ft+\nnEY9mHM1MWVyrfjHCsh5bylPq0bfZxhxLPYt+kSwyNPB6IlGPreNuprTCJHB\n4vB3ixbqwbthq261Z9SQvTtzoWIeXc/WdK6lX7/w+5ZwZWkdfaRNHrUqIIRs\n31OGFglouL5hZP0PBuEW3Qh9RYvdbpVwy+T37kiYIc05iC4Ua1BuRqdGa0iK\n+bZx5A+u1FHL/Kyju89k/lZ04k8snyeHkoKn+e0whlGDe+beNTxB1g503EaS\nJzCXWk6qTNgXXBeijvsuF82RwkRSzfYnNr3WKw367HMRKo8H4GocIO973kwV\nz3xBzOqOl/du+K8UxMYf3bcL3ORByT6hIVbc9r1vZVfT0NHB1vkL9Om9UzhS\nPHowi11KCivUnrAVXbAi8WcwbtLypJy2aijT2XAWNbDta3xTvLrbQQ+fMj1i\nKO3t\r\n=4Bft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/density":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/touch-target":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f16f15b8f.0_1579219649760_0.18821612301614432","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/radio","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d69bca941772a67a49f6b18c01d183b019238ad7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":35,"integrity":"sha512-15moBpzVVCQNT5z6lma2u3z8jhW+Clad+imub/qlvbl1NwoXqlw2KJPSZdaR7grCB8sm3kNhxDcY1d/P/no5hw==","signatures":[{"sig":"MEUCIDvNI6WOjjCoXE9s1UrRnR6wKgIXTWgt4rukpLf8k+eRAiEA1q5IWYrgTEz8zFJ9xLjUbCPvEjJ66m7c8NoUTZy068g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQG2CRA9TVsSAnZWagAAgp8P/3ugCoFLzA58wNT5qf/q\netQ6n+G4x4swO+TUHkthrPs9XzpnAeb0iaLuPfniNSimYtFm62oRjldD94D+\n9XNMvUtXbJDq1xXWeSp1xgpDGlKlDf00lUg8cJbPkoxD4L6jGfIgU+Sp1Cl9\n0vSMmUCMbuSdpvOzllMZVeF5+93fUjEvUIBGIPRR/dwI0RRZGOxGN1aP8bjd\n+S0kQ0P/7O5f/cFTLZE8s5bm/9IT6j9ytq/JDBnlLRXKujvuRy5Ez/0XaOon\nBZ+1JV204S1Yf+luQWGOCkZxNOu4jVBag8nTXNxoC9in7xx3uklbAT7RC0m1\ndsHpdwkizIVgZ0HyM8TLm04uGGwutmanarKp1S7cEWeluQNRKR2NhFQvE+ac\niZ7bVmzOoaT/qELvoVXkIz+8iHI2zs4et4Tk0Xh2CcB1ZY8vyl3FtnH+donx\nMzYFSVmfmHG4uvhrxyW6HFK8Jzn3/TfKOcZQ7g+Fu2ZmRV/Ik9uvRqFEz8F+\nRJ7Knbi5Jj4EvWzVbJTAJsBKzCjuBFLpNrd3/D4NsX0ThNzxbT52AJl1rg9L\nPyiRWUc/hSJX4Os/PICpBBYTPUUPfckefpn16yfWZCrMksF7GVIUY3rUFvY1\nF7/tBenJWxTZ+HUBb/FQh7IH+Kb1PEx90u3URlPmiVH4BSkXR6WGaJVz417v\nx8FP\r\n=Kt5T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/density":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/touch-target":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.aa8e43e9a.0_1579221429887_0.40205752360133684","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/radio","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa47bbd6a8891617e48698fb14d87245a655354a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":35,"integrity":"sha512-UCDsa51WDS6YbjC0oQE4PCMFUk+HFdeu1CrHmZRPLJn+I5gpI42B/dScE3vc6jwRFXCRZB7XcYEp4bBLprrpEw==","signatures":[{"sig":"MEQCIDpg2QF5hhMU0SgaJBrjdXh9qeGtW/KeFVYstmUyokZYAiAijTC2h2pb4vIYl3MRkyHZ0qO7oj7kKePvDADxPGqYew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQc/CRA9TVsSAnZWagAApP4P/1cxFcdx8fZkNcJfyG1s\n7CgYBYeEuAQ3MWuCtR7v3hx0gb58MwU7qIhEkvohx3R7btyTfak14HFIi+gB\nOMxTJAIx8F7Y8zauT9U/TTFc4cHwBSkZgDRw7NFX+lFee2JCEYWcT+mzLjdp\nGd41+InMsCEayULXRoqJ+akWLDhaKoxk6pe1EiqoxakjYhuoxA/KB7ndJy+q\nIWoJpLwRhWU0RqBSzsctHOJqYADV1/OrTtxNIbx9Cf/5HraA7eEMqWiM+hf8\nhgepn1Zd64Z6WheOErdoiJ6kghvdWmZN7aOTcHiYZJS+bANYzTbn7iwaE7QS\ni5g+4ZoLn0U08dTULGitdKBwX/uMixtsu7RZZawY8j3OsakyGH0UT0czN69U\nIb+Wt+Deuvl69uDBYuM71jR8lcXxLQB6yNC3nDJQSHa+sRMBz7MTy/WL1NMn\nRIr5hOF48CnHzetNoXYPD5YcYR2gUPAFymw+IRdko+rh9ugIVs3TtM7Ff1TZ\nXk8bHZqsqPFNzFefRX6ZWMc+K8DbyeDkKK6Ilgbk07H4qD9VzeQoTImTrW+j\n31RWWW9lz+3jzfacFVS2UqQPjnLtGiiePDdmw3wSX8HR7ybLL221pBgr1YaZ\nQ1SZF+lmFris/YqdPIjJp45f3znTSB1WSg+iwEv04ldoS4DxHcJYntcz/Ne7\ntu8s\r\n=uTGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/density":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/touch-target":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.fe1f3ca07.0_1579222846319_0.8045134222939498","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/radio","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a522fa2a8f0308cbd36e82b12f071123a53041b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d405af26b.0.tgz","fileCount":35,"integrity":"sha512-2V9axSKyVBGVkvhN5l0+hFsLxcc2EuLB7exJcF2jkMGNCwAygU+BOEx61kQANO+rpjEHU/NgXf+pWyxkesMUWQ==","signatures":[{"sig":"MEYCIQDD3jb1amDYENULM9zjUyRZZuh6qJwHlVu8Mn3vsWoW3AIhAJ8Dv0VRN00wD0J4RPALVzmLVoEM3zTX1NdSFkF9qHEp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpLCRA9TVsSAnZWagAAQJEQAIQ5lNz5vHqMMKLBvP+c\nlPUYa5+CymjwBmQ0Oni5qZiWXE6fc+hOe4AVUIzvrDhiLa9tObyVCoGmcswy\n1v9622KSOvnq5nW2R0qROgIcMoQ+Kll0A7qB8PyBifJiM76bfkaaKyR8GVZF\n3r7qm+1MvVWtfYBKQpuQY4AsRQVyiBJgrLOryM7MnvtFFr2laDMklLB18Xjs\n7hGEhaHcXoL87bheYF0U8Gkl1kvt7XPw/+KQr/lBZd25khtrkygqPr0BVuWR\nCMtN3mZy3W9acLaEiujFJRnb3O41kbtg1m0uTEwj7SmJvfBA2mX3zt+p4wri\n2teZvSSnuS5i2f/5ddJ2pYkQKJyrKcpf3Bv7O0Rzg1RDj7BISj12Bc0sbfcF\nt4Yv7KaZcCrLxdjpp8eJqSeQ5i5lnUvwyUZWD5qzSu2UQ3llUYoz1XKGZ6QX\nNQsRGl1mj3SNt5XRKSLygRK8Rf7xHj7z/JK0qDc6R+02XYTn/2ucJKC4HY6A\nvV1uEgLcqUrvjr8XZTdfYcpQzHiLGNl73UHyljeLLFayGGPrfgBamBZCiM8b\nD6gB1rqwY+wipJCgWmbUcH1zNthRmhQNVRIV72IBckRXKi69Hp0HYSBe/an+\nXSJYxy7fT9HNtp4GDkpXThK9ccigP6dGLIrkEVhrdHdJpVOhs/slK055GjMF\nWaVF\r\n=UOE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/density":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/touch-target":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d405af26b.0_1579285066706_0.32072889924868986","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/radio","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ff69ca3ad97676d5a2decfabd4e0e8b2d80fdca","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.6e857aae2.0.tgz","fileCount":35,"integrity":"sha512-6LAxGK2IkOG4gyW71hankSNUPq/0UFi4418AgiM44j42P+0YW107GuUfmFqtbW9AQWDMdl/S7dKXRVgqJpvMNQ==","signatures":[{"sig":"MEUCIQDSa/9RnFtXX1RT6m3R48ujwKqFkJAKaeqfuCu49n4x5gIgCaSuSf0Kjm28hpzZQgefVxaPpUrxtXl41JvqVHA7+qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsWCRA9TVsSAnZWagAAKlwP/2scVQszx3p5Y41oj9Qu\n6bxgsQIMUZm/a85Uw1V3ZOTj2MdylGs8G9gi2c9xuWml+7/nxTA9IZM66VlN\nGwFDWXx5cliqiB/8ki5aiPBi7z/8VStAoZtG9NqKnLv5is9J/Hu3akAGjy1/\njuwR5psDguI/Db/mfy69he3DVLZAGGQCkZJ2naG+L2jsIvbj5TjQdVQPuEM/\nyssr2CDLZG/vPszO44oF2Oh8H2e43++qS6FSGAzEJglwUH6o/ezgk75uAxWv\nfTgGwxVXVzy2tJXxwfJ4VczetvRpNUo8LgL873ly5LMEhVC26kfdrVcOF04s\nuGmvoad+TM2XZ9MpXO5N0tai++WT4eWfczlTw3rwQYYmETgV5hLIZTpJxg1O\nII02BTkgzIScEg/pAm0Kft0jvY/9egrh5jl+vJ9s2EGmYwF5erW2sitb8rN4\nZQbLANsBMoxHyoiB3//1eY/X72J/xvKf+6ioM3OXqBVTA392UoU/kX16tMXp\nwaUxPw6e53+eoGHZzRwq9S6xh6O0MwPzFDN2QhZAiDkw2wrssjJp9eM8Vvoa\nxhidAdZQFipVTE2LAEAt780oUbpxfB4eR2RCv5jlKpRU6vvyMit1qm247tih\nIJgUHa0K7zIYCchf+6EJe0VQYCoaEs4gf2UG4OgU6WzXpcq/jLwfafZiXT14\nDECW\r\n=zikk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/density":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/touch-target":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.6e857aae2.0_1579285269709_0.48942732756076435","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/radio","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc5927d0d23d6ffc42978d16f3559794dcf4c6f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.e2e764f7c.0.tgz","fileCount":35,"integrity":"sha512-fO5zn+dYXw6mzmjXmtRa+S/fD6nsyM9sN2poWuYJI2UIaVXb88XS8F+pvE1DY1c8CkYfPoHAIMRvOQnXrtgxMg==","signatures":[{"sig":"MEYCIQC+uq/FtPjLNzamnnTe1qur0Po6tqE7xx8CU1zdmN+f3AIhAPfKMZ2Zf2MusS9g/MCuJHHOHe3ydbJXpZgRAVeuhbUp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf61CRA9TVsSAnZWagAAAEQQAIksJzrv6mleuYHRjNK3\n1Dr1MTaYLBz4Yxd8lVRW2yz6nno54GDbT6eGdr1Hyf1u6HbJuuH9e3Nv8WL9\nIteIFj0qx6CRtaPFfWdfzDOlC8qVeRZeIU0B6N/V7N+Ox197c8w8DK6wPWhS\n4AO9ZispgRI+PDxVUue4NPjLn/WUNemOuh7+OBcDjuefPbnv/Nz4kiaZY7ta\nnYH4Bfp32gwMhjSZC55uplW4w1lDNTwvw/Peoz6oKe+CiobQQgXGkGgz1Xym\n1GyDAnf/48M9z4U0blAT7OsR2yVLUGnqQqF1u5gHe0Uo2R1s+kJJn2XdoMew\n49r2kP0um6iXTA0smBVtBR9M7f3euk9JKqvNVx894pKQ5VOQXwqcj0eDupjV\nxSVDxWy2vdy0a0y5ZAE/FfETmTGB/oj3TZmCt/kfAhvJDRScBG16Qs4TaRmE\nQYHCVP9Qw1lhknT5p4arTi1x7junmQX2jWlOUt1xWF5ME0SVX8UOF/YV/tYa\nZx3ZNRoQSNu8zhzl3NxK1oP3uJSd8OUz53mzI3K3Cs8HTlVVcb0jm5sAx6hM\nS3HIhPIPeb1W3DocYUME2swgfRYRirgKUS6J0461au5MolcA16REBRAJ5zBw\nJwzJnEShoc+/zcQ7RKUdlf2pJ+M32zTH/CSfqRZLgG4Vz9o4iWh10UFUtvjs\nW0mU\r\n=7rnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/density":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/touch-target":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.e2e764f7c.0_1579286197390_0.13852590146938448","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/radio","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6e75374826258bcc34057d3f766bc318ce27f62","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7ef986a87.0.tgz","fileCount":35,"integrity":"sha512-jGsTyzDU0UJbIx2ECgyqd+uxjOnJj8v7wKKy/W3XWApsacj4yhpAsxUUtX0zyu8DQNUosfuuEjg1vXpN2B8gBg==","signatures":[{"sig":"MEUCIQCpLp6NwzliBQj9DOIi+Ue2BaI69ADqMp7azt5NNolsHQIgNDsBLvu+5W/W7r2ULimSFv8nuhMOlgMphd9G/r6s+Do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguBCRA9TVsSAnZWagAAtHMP/261NRrY/GdXdzqTc9F/\nEQ5W077f4WPQsPK/UpZJ2jWvwY0oIGta6gyfCgGvBRB/3q0r22FLoQfr3lwo\nykds7WYttPqzbF2pLp01J/R0za/DybZR/BSSGQ3VU6+cSNOHnJhc7PUycPDi\nH48XLgOLuOMyizkhrpEViz4jlcbidquZI4Ovp5vso77TJRyir2v50BAA5FpF\niRsMm73wyXzt88VtI9HH3YHafQkhb7zJ3/awRkfOLTgOdoB0y06G18lmY+E0\nM3QncaUSxX+8Q1kT4hD5z4lzVBUXuQHD1RzpAhvq6oq+qPPEpdjoIQcZsLl9\noKDCEPT2ZP2TGGO+tnyOwjphU90WnRmkIiqA+NrJ0byD8dG0KrbnzVrxAkqC\ngRNGJ1Xo4brIzNx4yfUexA9G8nBP4XiI2nNw20rDuPYYF6FRN2NhVSXYvQ7l\nsliBqxEsP8cKlzwb/Oev1oDmBEkMLu/3d33vPZTXRRjGrkxErN2cH93bPvho\nUg71kj4ZpTTgpEAXzqSA0Ko393ZgECtFs2NG7pk+3UfB2fI5kCfS9+bktVxy\n8VTbtojHPGdL/g2FuLgA8dVhouHBv7AhYkYGrTJbQaTcRQpoU6i5Nukekt/L\nBcmpNgIM0dRhEXEWNDcBFbACfm1UjCgE+Recf+AttSfldcSyzJnMKdDBNozU\ncLWA\r\n=dvuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/density":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/touch-target":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7ef986a87.0_1579289472874_0.05453014065366735","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/radio","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7940ae8a298d3a70d309a8f8337e9ca1d9d247","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.29402e2d4.0.tgz","fileCount":35,"integrity":"sha512-gAaw4YADCi/MjoWPAmRUbohtV2TiWwu93X1HCOpwSnRsnWq/Dkwb5teVL3BX/s5Yyn3QvJoCZTfupb1abU69sg==","signatures":[{"sig":"MEUCIQD16bRKIOQgm0cdvOkZPJbnuzhU/DPZNpwkjGJCOo2sPgIgMmcDlRP6MUnk4z2GV8mbEgkUQ8kGhNewMN8FFnjx5ec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuyCRA9TVsSAnZWagAAFuEP+wVv6/gOFMLVcaAmr7NW\n3NCsyIlYQl3gnlzPsH7YmSzm2ctLQZDlZzm7eEXM6od2YfomjN7hU/sxVn8E\n6wDCcTtMAIJthi5UM+xOT6EO3J1ExlRqjvRt8FIEbqVHXs9tp7AMOa8M0yxV\nOb2ALo1DMzsg2cLeOPkZOmhhj/JVQ2UXRO5sm9esehIf9Db0F/iQeEbrPUmf\nbs1RlYF+1jEWx+AKynsRUraj5iEB/6GW0LGzb8zc+gWgjxkxzlFUcqM/o7pg\nM8T3xPlP1RJprrVppAz4l8Xs1cj6dxKJjQe2aBgg64rtc/VcJLfeWvq9/vC9\n/n64r4ZS9KR7fSV5H38oennR3+tj/hY8VYGWDeWO4yPPREaKblWubb5fIe71\nIg7jPBijTT/dwNQbfnO+PIcoZ44dSszRODUaF0D5B4JTDME0DbK/PJkcDHQc\nbGxiqiI4UOo4mPyzdn6LaeB2nr91sNOPLEh+pECT4ipRkHafsp0NO/hIXycF\n2llU7LffWB9Ppks0JGKI70fu4CsmbmD8nyXPbvWRH+QBxuBXgxjpe+Zh5eyt\n/BkRPJDgcg1RhjNsInjT1ePdPUiCtqMwrOyQUeAiH+eC6ieRnYnkYOQZr/A5\nfvtqpGlkZw19tY3fMB8Rv3mZY+YA7ddkIwnaoxGoPk7H9qv9PcsLItzYP3et\nWViU\r\n=ZJox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/density":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/touch-target":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.29402e2d4.0_1579293617967_0.5235912181077333","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/radio","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11e6592602f1d1d998d0f31e341360b50a584598","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.2b3ec563c.0.tgz","fileCount":35,"integrity":"sha512-SZe5xhTs/Cp/zqSWBXXZ5cMiFFIyNOBvW+prPncshR6HY26Kz3lCOKstmCIkmIzc5H0amLsYwYDzZ2e7TVaQnw==","signatures":[{"sig":"MEUCIQDcEGeulQM7eMQS6GAsBFYXrit0LqxpIS9OtRGdHMAzOgIgLf672OLyGPEO27/VVUv2jGUCPqSxPQOYoujCtjQl/0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9DCRA9TVsSAnZWagAAnW8P/3QJy+stiHkDpBaA+0xt\nDN6qv4czH6MzYs2Rr+eyxcEeL42clfmx1TZFl7ebuIS4rno5qetvp+GTjojr\nn5LFBNp2USUzSfrHOKdt0Sxk5T4Su/a9blUCHx0IRV7eIjCvtV3jrI2z1XY0\n8Ek33vQI12JRYWG69dJS8xS0sJuOs4zw1IcZ0sISNpFIoS0rxkF/dWj9qtUs\nzlJHwdEL3v+V3/PMHVcwP786JphJ86wo6iNfzhCIXRfN8+J7lG3NVdnl0k/J\n/SeHmYyh3WEMXhspLpzvqzI+xGC+8bbdvKw53abTlcFkeMkg6sAfY/uE27Kc\nNw+V3hFNeR24khcOsakuoT+x6ZIOGdc2JCvglI2Ac6CkekQ/bIQCx7TQ7ZgC\nfClYZa/QsCBgjvPd+yJBydSZiiEdqDhKpOQGY/qGNFcvUTv25ocxGfrNI96K\n60WQjbmqhJ5WZeyCLFCSwQAQSorr9PAWjh7TuNHR+SS00ya7b5zIFG9zSznY\nvQkIYdjojzOAm2cyD+FgNrEEL0mzwf7XCdmuBhpzOj6W8uor5C/wtfOCgyQG\n3mpihGXXft0wRE4HyOJgfOoB3IQ5JtwBiF8QI4rCPp6IBq1vGA+H4XHTW8D8\n1pxS/sqeBxeaGhDdjvz0QN1lzHHzy1IbKhUh3NXK7AL6Cd9Ttko48ukZopGX\n2XNt\r\n=f/3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/density":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/touch-target":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.2b3ec563c.0_1579302723581_0.5097427242801684","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/radio","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"062e4417a7d82d4b53c3965990f94dc2a2629511","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.e8a993677.0.tgz","fileCount":35,"integrity":"sha512-PGS2s2NzXdn72gsQNW9L4DAAAKggNz0RcZiT697sTSyyjXHrXmt/oNBx9PxzGOJG+TeuZTLIqG1b9rAWnj30WA==","signatures":[{"sig":"MEUCIQCWhcZcNvxW3H71SwOl9+YNi60cuqZO7uCjnEKqkuwZ5QIgXvjlbHTEWwUJimqnwrLDKb8eOW861fTpSeK3Qb7f+WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvRCRA9TVsSAnZWagAAClwP/0USume7QVMM1U4ipjfk\nKDYzJZHA60aXy0HYQGgWlonmv/Xhdf+M6nxrPv07Tesphn2Zf8KSC86LdEDc\nvDTqrCYhcO3fBdEMXcNC1XjKAMOuRite4dUwLCcwCHnir2nwOlNPB8tQPUso\nT2C7E+jUt/P5YYBQHlCasBDe8d9Lv5QcIfdf5CYHXDOOrqkgelrMLOs1kkGu\n6v13VOQBj11HWW3lTxNYrH5KnkK9bwWupnJgA4QWqfjMPpL7CocAx3FRPqvP\nQ1PiQ2VIPtGXNfhMMhjfeqn/xvK+ZhMTbiM/uHvSXVvivmkabtqfIu9M45z8\n2lQyTiIx2pazuNtWsOhgti7Md24MPm6erL5H8uWykxWiMgHF/wxQgE4A1rX8\nWfjNa1YaPgyHDK9hZDFRVgBFzbeGhp7JYmGNUyqN4kkR+TvYosJJjS5Q8iOs\n/8c5j3TtNjdwtCFSRGiJ3/YOFJpnpWWfm3afUOdaxSJfWUopWAMJXVOBakZn\nJZTKaDBGPjha8XDrKLdmwV1HsFAMePw1Mwz/WZONI1zg4veOvsGjyxR3x3Z5\ncDsfF+d0MUNKmp9Tf7wfSB9I16tGG4enr/QAzgC++Ln0Fo+p3qRsvMXHfJR4\n/S1GZi55rNAmelmrNVZIGsYhbjGMwi1nBTT5+QOPtEbzbIyOgBI4p0Hn42i8\n5jjD\r\n=c0Nh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/density":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/touch-target":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.e8a993677.0_1579625424714_0.6977239598363698","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/radio","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a145b6c30d391378211010d75e7ce06f64486a78","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.cd4903304.0.tgz","fileCount":35,"integrity":"sha512-vAjq8+PnN/WUUnycmZ+5jcpe0s9BPXaM0oZCzGU8N2g3M1cu0oZJmP4jHLs7Wzzlh1dbVna+0SdKazwpXAiHqA==","signatures":[{"sig":"MEYCIQDYOVoEApwJEYdo2GUkfc9MIdHSW/PfUvmuXq48smHuVwIhAKlTHRNemj3TevwniOQpuZYeDNV2IuOSWbNAhhbF4QwD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28pCRA9TVsSAnZWagAAUnsQAJ0iK1Ty24QD3bykfYp2\nUbv/OHFdC+c6bqmQxuhittEeEsjkt6Qs9ALnodNtCAT5VQSA8zyn4uD25Nqj\nAbS0awkkoq96SV78/L33cfLI8BhsJA78jEvmSoWUAgAFbZ2C5DFjH7w1VJgO\n4BKt/ucd6Ahi1KUd8ch/BW3MpCNJllnP1L1JKPnPlIYXYi0x8FbVtoL/2NlU\nvsSu5IenV6TPpxgvcC2DMaacEDs1iAwqbsS2Rk9/ifAg4byvtSvk5I8qqYUj\nLVkrWNsiaQozJNcgj58dmXiEJ+RPEx/cisYQaY/LmfBRX4LcUUFL7Ozo1gF9\n4pZypJ723oNm5i98NIe3/HfZt0u45qK/xq31UX13DZC4NnMx/DDcLalV9wh0\nO4FycApk2oHxJysfXMVdCgvXo2Oc3BK9uXTcIhe9FMI1LSulNgC4Ag6YcDIG\ncmymZvK4JwDrskklpmfBkImElBH/S+s1DqLGaLT/gc9BIyjmE5Stej+OoHmK\n4hQDDHF5c8xcYLeee8eIb/GfLbPBpZ/ks7q3KMT1/DhDmuoJSkn6GUwcWqCX\nO5SSIJ7u2ynhmviWvTFrVg19gBsBk7l2COxTpRlv8L8hw0C2rPW4n9jYgjhQ\nsTHmwnUqGQxgnQDcy8ZaGXhc2Zy734Ghih2K6hrzL43604jzV9DTOe7uxUG4\nCSjd\r\n=oYVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/density":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/touch-target":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.cd4903304.0_1579642664771_0.428261747369165","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/radio","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5a8b28fd41915981d80312009de8d30495eaf88","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7e4b04b25.0.tgz","fileCount":35,"integrity":"sha512-KRqAhcW7PZKOMmf0wzwDGDAiwCgAIZQ8auCkFFWpnyxWNFs65ZZcviv2Hvb1sYsIr30qKLgWd708Jhs9IoZk2g==","signatures":[{"sig":"MEQCIHUzKlL/KZf7A88xLR0KN8fjJcSlYjdYwlfww6hGeebsAiBvew74TzvwPTr5GwoZTO+OECKsYw4rxj/JQa4iPH/iVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39XCRA9TVsSAnZWagAACWQP/36yVqK+yTV30JHXtldd\nwBlDIBtBXmMUEZfM4p8ZC3ewxCUhFFhessVBe6BJSucdGQNZq9Dzb878oPWN\n9t0ufCkF7H1xJoUP5Lz422NUE7moMhlW+4DeKvYbaj9fN0rnKWvycbO0Y+pD\nw8gmWXnobUT/9G4T+Ay23zByISyyoYGr/0pkgPzsgYwfH+hRzX3uuPFuBinE\nOzlUyEgqT0GBiQRnpieeYQW8KZCCicZ+656dV5exNYNiXOMkitPZMBx2ddLY\nrYcq+gm/KUiVmz3B/jKxhjUhJ9VG0wrGJcpNyajQ3FgUHDYV0P5yx6IxBvCp\nT9Sy/j9VWc2a5CsnkW+QREpCdHnJ1Tf8CUsNu6f0Pke0+teK3GucoEOhHwbd\nriMtYPO6pwPjqoId0eyOYmlO5SpV/IFalQIUCl2qj51c9D1zVR+LvpQ9m0oB\nJS5jlKDGbUJOUns/K3UWGkIdv/KzUpjz+IUbZ52yAKkatrkNVsZ1/IwIyaVQ\n8meg5TcddfXDP8CHwVNLI43NbnrpXNPatwRQEPeYdGjIyN1F7T/U6imYCCex\nZSHKZmhKsTMRGmESzEA3Sm8crQ8lAgtFbkUOQlSVZFxwzNzEL5lK3nmNOB0o\n8iE1wu9bET7D8NuIr+xYBuv/cjJNEIkdk1hR4TbXcsw42Izct5HArx5qI5o7\nlNke\r\n=FTfy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/density":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/touch-target":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7e4b04b25.0_1579646807164_0.04934309992272845","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/radio","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62b3a79f1f6540066b529e2123e2701f8dab0943","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ebc296937.0.tgz","fileCount":35,"integrity":"sha512-xkhLnk5u8kDpuYuwWj/nISo2VJCA8ptbEfmn3KS3JdQ+8L1QcKfM//XOGC8cPisS8aNfEcybRyZSh5sAb97iIQ==","signatures":[{"sig":"MEYCIQC5yj7OzX03EjIUQvs4cKiE9YdKDoGrvS7E/SMoliLGEgIhALw0n6QxCXEgpOHXoyDBKcwI7xKTYn0xrXzHf0twDW8u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40WCRA9TVsSAnZWagAAFRkP/22UPNp0hPdf3Xt5smut\n2y2StfBwj1o4sKjjIwgExD55IenCoMrrabkQOS5GWVoTUNZroONJ3lqFl5TT\nvVpoy2zOQGnbMrAHZBFvb/b4fKEPUuWDXhzQkiZ9YiBQuYp9jk6tJpK9B3C3\nBJC88hFIKwXB7k8NTjvD0Su3ryjDSM3bWO/dTmtg+vJ+dCAIiirR27f6PBjE\nERefH96l10FcUg8oc/5tSqk0U53vrizCNf+8IGH2yeuYDz6WH4AShDg+p/L/\niXSmVoY0lnDh+GZ9WnKVl7mURjBRWrkvPv+B1vugYuSomaL41deKrpwAqT6q\neeD8ZCNL/ohkHB14KR5Nnp9b2IZUTUYIhBkp9+6HcdMRzTMZYq4GaaRvKJLs\nex2tvjzPe1/75wyxCa2YNWXMPr0EWcvXsolWx+Of90/JZfpyn6xoVAqmSwGc\nvKEmwNvb6wvlvydXqzKdcILr2CrNKOAz65fStq1alwreb19osfhR2OIJFekv\n+AxUty0xzRefJzqDyQbnEUjKHdtn6V8K5fqUGCo+q6XsshQGxvh3P8GMSIe/\nFPSWC1cWdU02AE6HqD7/M4H+tjP8jzzQp2nXMsaS04vTRgqdEDFX+R5yxY2k\n8IwEtiqgNcF2/IC66ZZSeCgHOZyqS8db32BN/UEPXZjTueebhRt57OTpytIS\n1nEX\r\n=NvOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/density":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/touch-target":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ebc296937.0_1579650326247_0.016359672398623237","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/radio","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3419a2f5b957e834d7ac03008c9dd0a7a06cdff","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.cf33f113d.0.tgz","fileCount":35,"integrity":"sha512-O5MdWXaPlJLKlKnpspTnD8tAQG4Y6TFJFLHFusqIfmMBQx5TzerqN7SVD2cbCcjtGZtxdY9LMkfWl6yR/e2gpQ==","signatures":[{"sig":"MEUCIBmnvDYMx6+9XpiCnbSadsOrtQ5FPKMWzg2mCMiJqX4AAiEA12h4/vVR3a/50ZbGtt6wPWkE9VmfdCBxzPUUhOrLVrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6P4CRA9TVsSAnZWagAApXEP/2NYPOzjPHehx7qOUHfN\nsmHf60VQfC4W3pQ2moouk13GH2K0wAmAbMLMqcetkmbb3fbGA5N71yKQVjRJ\ntqNGGSOUJ9B3rHANhYqUokxQcGHd51xAuySIv3JePOGU6/rBBw5L6mkvyNEy\nPQcQIgmTMK2n9ayJRKevcs4iZLNSLX+4Lbz1rcIMZZIXLrs2gPgTSSt/pMFJ\nQd7YdGseWafoSHWXpr7qgWKAX06BIJ0VkExwt+yoOBCfXy0i3SVEk8jyElUE\ncca6PoRngT4UkfLvKPbmHp/JKtD2ZtXRcylSzOetQaMMhs/cx14muDZBfPfC\n8cfdBnp4NOoWwdFpXQpVrFZX94Gt8U5U/Ir9GetEG1NxhpJnB9aUskTDcGLv\niK33ZMxwc/yyr5cTFRqk/VXlzJuzK9zBcdXiKLCVxz5D7Q565XN7hPpmxd3v\n1EkL+GfSBGYWuM+qQjmo5wf01DThLkg88/AoljmHnKUbZ6dG2TRKP9lfRGDb\n0XJSmRfe5RQ6p0C9SSidp6IfatqYzuax0kfI6fl7nTsHHRg3m6/v54HiHOls\nskL+Pv/FUAjyZdgFezCDSaC9JynAhKAH/ycpuutoivoNlcgH3Ztd/d4NXFex\nrdZcGegLxY9F2AsN2GCraFig5xzTeUJ+GA6jzKLsrq6BwGqzJzLx1IRRxlGJ\nBFMS\r\n=4SIL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/density":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/touch-target":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.cf33f113d.0_1579656184039_0.6216919337282256","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/radio","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578e124b60ec4e3da5b533da775017d5fb9d8774","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":37,"integrity":"sha512-KLglFDSAcaKmnRMEH0IzkcgC2qew+oX70BjfRU1w7H+BWj4uT1w09OMDA2PaIYbCHdfvfQTX64qvhQ9t9dBq5g==","signatures":[{"sig":"MEUCIQD0r7OWVXwh2V3SjS3dmpDvCC/YrSVZzelw44rl8jrc+gIgfSCnHMGLObL1IwTZLPqpyUWvpj4O4LwUAj+P4dQjnfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6iCRA9TVsSAnZWagAAn7wP/As7NbpddsMUMUF8lFoB\nOIzCPkYFkystHJI/koeTrPI9Lq0KHhFOo4KXZhebUWn0Lc6GLptFbW7fKNvl\nUKFraXRktrIEqXqqKO3HpGmrvFDvWGN/CYbYqxDAXHVngPLMrCr+riwcjs27\nJQ+CPanAPD5VijzgAFqp2rI/4E6GKRJwrwscCI0YoEPXW8raE601B3yHqz0K\nzycv//sRhjcJZbow/qT6YU4f6fXEeWLpsigB4uPv17C8R0WagirOd5Wx0/AE\nAXzypCUTwdIuCxGCkOkyCSR0JkLPz0w9s/DM9v3ynoLy85aUhcj2Cn425+hP\nFXeKsWu28Fous0qCUErTuz0Sx7wDYg55KCmN3gu9U1ompEKACBgyOOC83PWT\naFTkzXfYXWQ2E6q4TpQi2VDbDCheDaVP9E6l/jNDJ/0jIJXWr5qy3UdUEI8Q\nA+oG/MKMD/eAmOe7X2T0RGKWhw3m1MAbYO4IgLI4Ddzv+cME17mTC4JuQ0HF\nkJeuf5rt1JCqXO9MBt2NCySq54Mar6JaAiLHg+G1nwtuRD/IfRNa1hnOGlDh\n8o0K6TdJrAy/mv31bjKFpfpDtiz1+T0UPkDNCD8tyfV1a7KoYzh+vSEgANvp\nOed1VpbC9L02sxCOppMMtyoif9ygvo3TiDQFR9riVmnM1niL9JkxKtZ3iPgw\n0dod\r\n=CnQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/density":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/touch-target":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.e1d5f1be5.0_1579712161769_0.7681405159106234","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/radio","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe9611815ce9a2a8e5fedb9a6c302bc4233f4032","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":37,"integrity":"sha512-4xVyW2Seg994s6eX3ugJf/FIZB2t8A2uhSWGVV4ohvvHyZ66lXSjOp9A1pq+vai2ahCgLkUJTdOenMNYUbN9mw==","signatures":[{"sig":"MEUCIBiDVpNCu/KeO8+j3snxCxuqt6n3flcN18rqXZXqwzoBAiEAqq9JaJ6Vfuxx23cXbNjc9euYVUIuqQhQPkBBOXfU2HA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0xCRA9TVsSAnZWagAAot0P/iqSB/mjlRYaOFj2PZwR\n9st5ceu2HlAcWOO3h5bcUcovSAJtu4hS/3MyzwYipu3VsJrCzyaDsYxnJ1bP\njUP0B8+CDtmDrRMqYqgBSHLTd3k9XTE2GfOvqvhZ1x3/FB/L8RTvLj133oXE\nrjO4PDEgQRcw7+WBKJUElDo3JCc1+xoexzlh2WStcW/jETV6burSHLtg+fxv\nUQZy2dTlAveL6A52qWZ6FuFLOfmZXFYLsSbRKH4DENV7/o3TRtBLR3LgGsc/\nwks0sHLzOftEUzgzfctHO+Ms6dXOXOxvLHFQ7nC6aK9WvIe1/kxzCHaDapu8\nhTz9EOo7Q/W2Y1GTFgCDd3PkQplibdC2TdsUebYbyLLCyIMSP1snq8+8ILAy\n7kXrdS0PULnA/kkJcoQZ6GsEBMQ+4F29CSwbY2Yeqepg6DA1B/WdV92L7v0o\nFP/jx84yE/VxwYVAoTuvXqUAHd7AG1Jf3MxI+K34/SKMKnNfmQ2CRwAJFjT9\nufRtIW8FRvAAEi93/hXXF9ZKkHxOhJS29qIuJmSK9vYvBWi44iqMVOxVkJhN\nBglxqGVPA9YOymYXgUKLqG4S0CPX43XvjYwTNDgpeiAMfzNSSkHtwxCITdq3\nAz/B6Oz/fSqLgg9F0SPdD0AfTTaJI98vxArbm8K/Dr/uP1qFp/Au6JpHk0NJ\n4Skd\r\n=oz/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/density":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/touch-target":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.6b6a4ff92.0_1579715889361_0.5895109986905691","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/radio","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8fde792811a063a887975edc8ed00caec0dbc8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.6092f71ee.0.tgz","fileCount":36,"integrity":"sha512-KKY6z36XAsXbPDXlc33WwN8DfUDbm0Aju+zeV91Ik1QJ8ari1EFmcVKl/t16NEZ7Pp7JGC6PCIsHr4j0yr8sBg==","signatures":[{"sig":"MEQCIBab87gQJcfc0S6iJcQ5ChY0/DVQ8RbcVzVDZZ7BdyF3AiAeLIXyMxbcoomGnxuh6n01ZsjEjpEDy08XmI30TLxoNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvmCRA9TVsSAnZWagAAT2oP/iyeqeM82TrMGcrsZu+C\nFOM9k027a6Dr5fRkyZvyGPy4UBUYhw9N9FctKkrDeI19vB7cSYS1AiTMphZc\nj4fW5Vl2YqCY8tKlg79anhZ0+RFTHPyrIBG2MgmC6KPD2yB3kbiDXkMO2ca2\nJP6MMPDLIY/BW8OVZnhHNsBNzkAhJxTAbzCBCnZWXw0umDrA2R9PYO3viGyD\nnncrZutH/ue73uL9bbUqTiGBDFQ5AnNDWvKNmTBSeSCfE6vWW5Hc08JdxH0V\nGDTC3mwPgGjfdSQFFTUchTpBg5Mh0YYlaPe+DsQ2guXrufQgbhvbxYZEJKz/\nvLmPQ4fMaFAv8Bm7gxPueruHwvLUVksG9CTTPQjZX6bDsh33KYc82ncNN6E6\n+DQpKN/prZ6Ix9mvq9dajn+GhM67MN1XDXac+gizDM6NO1DkqYd8Y+E1X+M5\nZ8hAR28m6BUEBsEtAo7E9J04AK7wsUGvv4GDovLsI0qBbB5z914zDmmgn/XW\nQjyHVJLZGOqq5G6bEWkgWl1W5xEXA6jX/+OvBQavzTjSuiw7ua4bGBLbjw7R\nm7uYSw31wgh8SUaZzQh8jBx0/7PHBJZeHl9pinn83OupBFhydr3df2aClxLt\nxCkkLoj8t3fM6KbcyMjWSN1+eLbycU5AfJ6Se8ZbgXgO3wDimNDLWWijaB5X\n1lMw\r\n=RCDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/density":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/touch-target":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.6092f71ee.0_1579727845950_0.41083643764315725","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/radio","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b01672f915526f1304ae251af7c4cc4ad94d771","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d8d95020f.0.tgz","fileCount":36,"integrity":"sha512-SVwUGoRPfDFZzlqgWK43l7H9PWLj+TgDVJsPDyAydm99SjZknsSEXSv1tUJ+J/VBiaKvYXuvXdoYVPN63zOryA==","signatures":[{"sig":"MEYCIQC0xElH2AoeGBk03xlm11+Zsi4waK+H9k7X2Gt/IX/k9gIhAMDH+eU5VX17NyG0dJCDxIrBuBzT4jk3mRbygqMCtSSF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZACRA9TVsSAnZWagAAiqcP/j54Q2e/3vjcFko+antd\nns2P/85qEE39khrBq8OHNLEkwRgUbac2CfoF8HoLgLV5K+WfdOXwG0o/m+6W\n4CN5cW5P989SG8eJvfs3LvF89NF/EWID+SBIs1RE+pXgbZ4mQwYqlG1/0R7c\nmopi07hKTXOmGYTtLSZNouEPgehsqsRWjqc7TbEg+Uv1EPrWEV8if+jCHxk8\nKvNroyVfQ2Lx1+dsyhRNkNJPCYRuwl+GQ4qiaOhxKiGQhC+e7hqV8b3Rkg0Z\nfZB4u/qtmJmzM3/P4f+aZOHS7eNuUF61/536Oz6DXwOMvaoXb0RdSI2qXMPq\nHfy9NyuGrEAvH/saAZsb5SQyOYvYL2ZTGut1qZmu4EZC5ciel8EM3fU3vzEF\nnGQQcWhuTn2mYn354pXof1MRnA640UBTNV6l+/V+khihK+8vWOYcWO8GbF8M\n6VdhC83YFcnl1ekllEYhlgxNHCnz+BHa3Ait3vOK339b/9zNSO7GxSIXSvli\nsAj90rZulbLKg3kIYqutvm7N8XxuhGOit1zb2Wfd/ZxyRuBZ8Xr/X+Nq1sIB\nDFXstf8tZ51IZJpHpM6DVgsm1fMIvrr6SH5mDviACZPBPTHIj5Os4Us7ZoDc\nipuMBVVGZrpVfyYdBAZtgbvlYSaJ+eMAacrI98m1wox9PANTwZXiWtzem1a6\n+GUB\r\n=r33Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/density":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/touch-target":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d8d95020f.0_1579734592316_0.31372157252535904","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/radio","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"529189035490ebea4727cd32453e3d83c38dc5dc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b7facc628.0.tgz","fileCount":36,"integrity":"sha512-PtlgzP4gTJAoMS90lf9de7fvOVmQoYiieOQJEM4zrScCGLwnb/pl2oH75JxJZ6GX2ibc5A92VcOrxrpM7DOu+w==","signatures":[{"sig":"MEYCIQDUSR+wsAbgvSulrDUj7tN3mViNaXaPbiI+mR9xf9KOZgIhAPBw1Kp9AHeQEHEf1u8ZB69QfvegB+sph4ZSgGwR5rW4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIvCRA9TVsSAnZWagAALPoP/Aw48c0aJz0nd8Ki+fZc\nJdi5qwe6k0KBxKKN8ynm9r6Ua71+EpPLjyhpJ824BKeCmaz9CRVmdanMK5SM\n15/wNzllgkCtz5UjlNm0XSlbN0PAMp0kRvNnNHyKfPTSXliYWP6Ah9zw/rmI\nCMdZdOHBbrmQngZxfHk9ynswzCVgoWh+M2WAPSVTgy93frCY8BTewncsnt1V\nRukpvMnnsnSKa4+njNsiXPbP1sC4cQmeGvfQHAlBi2urGqpumW935obQnAig\n853lCjcIHOola19JLKmgw7BBqGC1DSBBI+d9Sg7qpVrQBff/4u8ISs+SLbz9\ntCJvaGYTUwiNYjykNmVvHOGQBkKDFm7rnWBTvn72En1M4icL6uoY1EVexx37\ngDxOH1i9N9ooBpNAnEAGV7oX59QV6rxbYx4sNhdtmo+Lu2d5n5zS8x3F9777\nuqGHdvI/blbwmBnlAhDLJUvMa8jy04n7gnVcdrwBRYp9tlZMzdlvN+LjDRni\np7o1jMg5ZjX17ij3JmSUVXu9SkpZig+sVzOmz1pcWSupg9mvb839E8mlDZZO\nkLlKk+2nR3Y+zF4GICGRRsQJken5o3WT8ndw05Ox2U3sk/fvJB/b8zBxxISd\nFirgvb8nIfq3H6otvufN8A7B1lg5OwW3XbwNWiVkQAC5/A47ob5xxN0l4voa\npEZf\r\n=/7ZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/density":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/touch-target":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b7facc628.0_1579803182996_0.44469067838684806","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/radio","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9679a8acb8ac6a55348d9b02e9e9cef5ea44cf4f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.63f357dbf.0.tgz","fileCount":36,"integrity":"sha512-T+/IGj7Mx9I3EuOr2h1DRVCBrfMSiTPWH7ONiZTXSxmtu7HKUbrIZ8HH5t/E2NQeXS8sQheKbtnmJBXfH9xlsw==","signatures":[{"sig":"MEYCIQDSV/oFHCw9f+/Fkl6kzlVR7QemrqPwxJup+wO8DBJObAIhAIJKMpUaQbyKd2cGqPOrZghkvFXKCTXY39PV670n8/Xf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZdCRA9TVsSAnZWagAAv7cP/RabuLKco9vOA8MC4fJt\n+igApaDy2zKMiKYCb4Pu6qS3/vLDz+6n6u7CUyxrh8puCpzgYddjtaeoChVL\n5cr1Yeg6AsCxXtnNdpM54/unUhuho5QyDhn15ZPhqdMWKh0bXFlilzI6xz3h\nI1c8yMgTC7w4T3vjwbbWl07EGYfJP7nK8dvvdG+E48N54jphOu5vqPCxF8nJ\nOO+OLFQIVt1SkeujqaowYsKiyPiVd7qlvC5OV4zQJaZri+OrPeC8BmMUfWkV\nhPOSt1tjxx1Vv0PTodxbSAlRmTyHIxYgpEpRxenRhoLp0DITji9lsZcF1q/m\nOQ8Q8gEnD37BvcR7r+rv3JNBcurMNOy+CtS5/ii8vZjsjvZioP+07TBeuTJo\nUgHLWzfIozFcdq1cN+xTj15b6foZvsPlarRmauYOA2O0tDFh9hnoVPFZcjnt\nbJwKBuzqgvMNl5KgsMPaVqamEQDwGF4+4GMxo38rJZuAVaQ5G/icGPJCibOP\noqnXefYd9Wtg0mzeL/VIWOzvnE9lSaT1/h1PJXAuHfXJm7lZo6kCU71SQkfr\nJ30qw/2EQk6Lkqtjgiav0t6AG/VioJpLsgVMvK4Sha3U1Y1JlpTLMMojBATL\nwv8IOrqmfNW2QtAB/+ugB3CIzlrKJ3OhLRXkvKIsavRjJpMsWUgMqd3Px/31\nPwud\r\n=BmcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/density":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/touch-target":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.63f357dbf.0_1579816541169_0.6526071239727635","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/radio","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35dd0b9cc044b1927028a8c93e4b4b0a4ba27405","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f2426d26e.0.tgz","fileCount":36,"integrity":"sha512-SbB2YHVlXO95cnVz/DSCpbIUGabgSl67ckwdYCCnUya//WMX6+kOonFmlUcWdCM8VjvToD6fUhdtD9mAIHTC8A==","signatures":[{"sig":"MEYCIQCeLaapYFvzYXL392z98xZdEM3lKDgoTKRLkzj6/9I4wQIhANwOc7wxPimJL6vEHpXvGSEGKUoBHYHYLbbM15btuodA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJ2CRA9TVsSAnZWagAAU/EQAKA64OsUH3DkNbHYBao1\nIVd/RbXbjOSngffi+cU+3yYg177v/lP6M5ds+2brPgIgPvP4EmHouAGo7AAJ\nuQEUep3sxQ9Hv4RDLRGF4ht8SMOisrZmK1MqHU/wD2zyUhbWIgMYIouUf49J\n+1AbcPu23x7W1FMo7cToSFndFHQsvksijFc5DRV+pmMrxCwI2h6U/JvHHyCZ\nzj2ZE4fZs0aHJktEdZe1tutJJgkR0/PtOMcvlXlR2/kkfK9MVySnNomC5AE8\nq9tf3PRw3IckSauVGRU4VmnwLaRUL9+8jMrp3bEgeevOeM8ByVDFyNIiMx7F\nQo6+paxUSfiwXMEZsV9V4Ug0WF/8ujGYrXA3ZKgPDbOmeQiENoxPP5ZrO13M\ntiNNCIpNXBK66Isi8ooaKC0OQBJW6samcP/jxGSYrU4o3qKUGLrONEz1LX7L\nSj6sbEYp3Jegl+H3glV/7yuelPDl2UZzYNyW5MjX6CrSm9ii5MraIq0MvUc8\nMeiknakWPj25h+KR1k6p6vQllLlg/Wd9X9Jrk2wswKO44bZQ+G7J89PUePd0\nrv57GcJx8tIRUfZWYRsSUpw/7Yar3JVpuegqCh4UFczKKgJZkWs8O2HK+YDp\nEnv/PyKxE9ZykI5OO24BdBJZ3n5q/BKdGDPPJf3jonCsmpXTpEM8bMrfvM3o\nAkY6\r\n=Qwrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/density":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/touch-target":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f2426d26e.0_1579823733672_0.20055330874620392","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/radio","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502ae10ca95e0f99923e200368e72973a53cc4e7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":36,"integrity":"sha512-70y17KbZjC+kzeeSgEpXoN8ckariCP2f8AcRvFLNBavuzpnpBPYki06lGtvz6GLSAdxZ+ERTYTZ0WgMRJIr8XQ==","signatures":[{"sig":"MEUCIQDdqPQ7NvWMyBVmiPj+Kacly/MCL4FMP7EgKeVjpEmTfQIgMERFoPquTiYxzISHvt33eqiVFg7y+wjiKAjmH5F/M2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/BCRA9TVsSAnZWagAAItUP/0Ba6cKb6CGv/vBZ0mu6\nz+2smnH0wr9+V7QrNAOHp9uKdXqurC5D4aVUIHehgqLrj4Sb/QeQXZG+E1yH\npyKj0755W2BcoW7Gp2xck+J+I7klA7N6YE7klHbrgQARZM3cBp6c8pKPGs9L\n4wLjiW20fbsnR6FkzuIrIMpIJQWZY7/bSrVtJWOQLOYd1eJw8wTlyQ2eQQ4E\ngA+yyNlGJ+7yd9U3ou6pJ2xHmCsGz2/pOTtSbAGcx53tB60/D29cwROu5MQD\nXxrvPOzI8JySG6IycastNv/F178reIkX7DsjOZrnoxRNID8qA7OZxOCR9cg4\nq1qPnSFxyIc7DNqh5yIFKWwIgVAS8l+CqiK/QZUK/J9jw9a5gQU+H65D+wwP\nDpFWg4wFqNsAm27EMDW6wwP+ffXqpZZJRCiIucFzdJsJAM6jQXwFyfpJnqoC\nzq02lI6TkyZQIAkY7vhTyyLYYdQtS1ufcJpk2K4C1rxZwRnWt+/rEVktgl0l\n5vYpKgVKIwVkZTqwV89CeDIMMsAsjwjNZU50V3Ax7tAn9abzLwjskESuCzPQ\nVhGf8VU/PwlRclWOCmF0uEfn0/kmb36k3i+f182C7NGs7c53GX+3hRB6xoq1\ntO0U8/bgP/W4cSiLOQLmFE7XUHCdpU3CboVR98V5BQW+vAwzJwnB8rtlvdar\nnNgg\r\n=4QnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/density":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/touch-target":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.7f5e0c23f.0_1579884481233_0.3563499267450312","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/radio","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"240391971c9a325bd9b0ad14955e99715ef921b3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3fc3ab520.0.tgz","fileCount":36,"integrity":"sha512-wsIi63w/cm2N6u8QgKDvrN040G32+tneLJH8avjUV+vj9gffPs2IGtk6JL+5fv7cxkNl1I/CrmWn1wb7KwI0cQ==","signatures":[{"sig":"MEUCIQC7dxtqx0+cQZzRXH9xKf814pwgY/1mbl7VjMcL2bDjogIgUxEG4056B6mZrckYuHVIuI2GgD5mHVvKGCSS9Nir4s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyebCRA9TVsSAnZWagAA1Y0QAIV6oEyPwJxevFt2RXyX\nSM/Dn5RaVw0k7iFLzIf7+Ki1299CwnRG8XPhQaGegtm8+roeXS8xxfDikDoN\nySAmnqsWS3+D3BO4dWqSl2+sOnLFKx2VdYFC2P2hpmgV0gaG85Q4f7f6fZlq\n96XEBebaEShZcX5Q3gkES8BZyNzPC31sSj/3SQ6nCxk4DdbBsdqbkXlgvtie\nkAXsmWQnp4S5HZfMCa4O4eRx0GDreOBWceCqAqbrONhVcUgW3qcK2v7T+2WV\nG3hP82F6+iNTwKNhjx4kdeVW21RYfQx20MrwMBSaX3VS1At8S6QgBTJVJZu/\ntZAdnkEJzNUqn8aRURv5y+ipebowPCnVIZh8s9n5nCv9/LRs0UHoyIi+25ra\n9RDv8fLLDT7HlEOVM+42FaY/vQH6kh9Q6soj9/akkG+ok39uG5Q+z7g+OO6h\nnSLddWw4ugf+oyYFCfrgSPG/EpTBq7vUdxgyt4wtTJH8aD9DJUMwVYEHgskS\n0oyNqhsXqAsZfzLSpwkD+mPXXK5vNnoNQXUXJIwfFGP9+2JYBagimoNrhfUs\nCgJ9l0heOlBKlzFU9XnsLnPmvtCaktMdSp2j52kfQ+3BJ9HJCadV9uwiG3JM\nzmPgG5Q+NeuiBVEEjmH9l3TM4D5XVBKYGx7SewngPoAAdPuzUDVUtrEQHXSb\nbvwk\r\n=gh3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/density":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/touch-target":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3fc3ab520.0_1579886489952_0.8457152115337649","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/radio","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a31d0f14158ccd3730a3445f594d318d4abb10d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.80a4d326f.0.tgz","fileCount":36,"integrity":"sha512-JtbeCPjDWjLMwSalBknOVBRE4A1g0oqdFHs5IEtR5JO+jTvQ3VhHPlQgIxqxhvwKW2AgcwQIe1sMZ+jmyQe/Yg==","signatures":[{"sig":"MEUCIQCCxhiPjG8Di0wC9jiB1/WAL1ojRGqcuwlBK7e93qN8DQIgVHyzwHgHThHKPGrDJx0atMUI1hUv8TR1wBxPcYckeO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1edCRA9TVsSAnZWagAALk4QAJlwSeMWG0DT+XQg/iGg\n6NLvJg3mI1Xc8ns+hjxmZ5vyV/GQZp7d/nbb5wxtVmnAjHAolumNHRqR5rCH\ndpM65qD4vsXMKqJqTey7yrDejRK+8MENkpSKwe5qyCdRxrK8zW3C48umysk/\niDxy7oGZCQNCYMBDUGPp0My4sSCfKcrjob17SwjaLZmgtn8SrB8Y2ME9Iih4\naRAmLmqLg1mdisqVC6L6tgT6vpgw1eBVCtsuEk8EaSrnFofHNJpTNrBCT7V3\nn1LMEhNyRaxHRgvp4wuOYl/p0VQPybW/aEUf3YzVYjjas7NKmKmgb/yK0OC2\nepZfv3VrRt3ndTnZcnf4KYtMd+UKB4h82mHVCi017m90ZP7CkpFlaMdIxBiE\npI9TD8rCSmJSezUV0CkcMMC8Dq0MoRUQ4B4lUeJ7FYHhLRfPRFUj6i/+uFVk\nSqmlFEfJnBTI47bLMkYwp9B7gL5+obMCumJ3Fkpok/3wLODEcqROUu1Qy2M9\nENowAnRdVgzPDOzxA6/PPP1y4l8yp85ujNdWEAQDtmr6Aa1WCJgOuTELA3qe\n8k8MOMyWg37plKrMnjppnezxC5wzgxfQtbq/Y4HOpF3SRT1Xm6idhcqNq7us\nfbzjbLsz7Blj+DXzK2CtU4k14niu8t/pCROywZtQRqnV/Yz7DREH9DgM0MUG\nG5G3\r\n=iE5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/density":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/touch-target":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.80a4d326f.0_1579898780566_0.5751783079127493","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/radio","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bda0cc49cf9a7857b9401a1a6997681751dd86a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ef7de4def.0.tgz","fileCount":36,"integrity":"sha512-e9JMt3nSXHvjLSD0wH8p/X5vTJDRxQCBbMeinWmBqzbuXO54NXWZrh3UDvGuhftrdBMagc1vaDxAgddlYXJBSA==","signatures":[{"sig":"MEUCIQD3coBgpuSNg5kAIwuhXOogseB4GzAolDj1QfM5kn8UkAIgTK3BgbddCQuK7g4qMBNaaWbAlZ0fdjQAaHFCXlc+sdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KBCRA9TVsSAnZWagAACPoP/1NownVuY3mQ1XCU/oTa\ndyX470KVoOPjiV91cUPDsdMPcAHQMSCJ3LcnGlEyQyrBnu6bMEwrVd20kgfK\nu5fHRRutMXPjPS3YYFiDGvkPN4Z01qxcjIhwwNmLf1PmYd5a+KxNawLl0Cvb\n+txoIZ6vPwD9Re4LfDAen6wwVwoDwJaShB/4zfqc5XChfIaciXcZZwfOaLM4\n0ZeQiQeoyzM2K4SK1b7tzf1FzR+eM7Fn+jCGvHxEPVnSaGMXUsDCI8PfJpC0\nP6dsW1JQDgQnVfvZiPg2zIk8PeqSA/XTQ/BDsIAg6ECegNmM0XFM608Pi509\ndsNNmxWOzPOE4phe+fTOPWIwEVDSOUczRrUpAstWothGmnCsO7rhrOmeL7bC\nCwBV6xjg9d3g1x6Mo3D+YqqMI+A+vKV+Y8i1H298vauVQ2sQjYuRmvAPA+ro\nuyi2hMaxQpP4N5WVxSn90GExv0GsAsadJen3IG5mLAbRhsl7OtYINCYV3GbQ\n+XkxORyTZoPPb1/RnHkmVKdYzdraI0ofH+cqdlGxmVvxoBE7odZJHIi8yokC\nDHYyEsqinxOfX5Z4zudTLxBQUKfLPGrzrKk7iOf/Tp86GvKqvb7IZjyU6GV3\nFEvGDEDgT9+p6OcOpZfgbTjNLH5p8QnNBFZJzAM3tAqctYrJSxl6ohjyJ6ir\n1w57\r\n=4jdq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/density":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/touch-target":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ef7de4def.0_1579901569282_0.63015266461332","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/radio","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f92e3be04323350ea66fbf37adb53b0c3385d05","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.93e2288b6.0.tgz","fileCount":36,"integrity":"sha512-immVB575JOdKFWHtlRLwKNO/TjLo2Nsl/T2LnCQB5IHwvVN4fvBIlrgNWaoQtET3hBScGye5z+A127CKdtKB3w==","signatures":[{"sig":"MEQCIES+VzhJrJolvvHO8a/KwzYooCKMN1fDjRe/LTzyWbc/AiBoLhYSdVSv85R7ujwbXIUTr6/Cia92FGM2bnLQ87yNJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGe7CRA9TVsSAnZWagAA78QP/2jdJ2hip02YTTLHZheH\ngSFrk1nbDg5S3JgDn6KXa/2+12G85+ld/PIfa9M6Ona7P+zyXINPlF2wAjvw\n59cMkM9fZMRli/mxuwxOnCXNoM0+p1t1f6x1D/Z2RI197+zDRhUxZgUkSzp4\nweWEhRttRo3tMdgdhJdqscWqUSjneVKI5cS3cKPzH5fZskizPjgXAJZJcjjD\nQkaS4OLcUW3cZpoz/QLRF0vUf/qH+wzc087OA7qcFXhMfAVqw6C/FYlceEsq\ns7sfVUE7yay/DqT96KjKEqr5sITfxLgi6Wtl3jzMFlyvD6KuATP6kMMTq4o1\nyy0HwFZO8qw7D0Qttai9HIHwOZBhqwIHGUi7xcUz9iHq6JDvZ1MKBJWaJeFL\n1D9Qbu8sV/YPz0NOEY4RH6Hn90Ee6OJYw/gjEL7brgKyA85WpLR6Fi3LDUkx\ncK+UGHH6EpfijGjb7eyZJ+Z/Lc5aud25RTpDMnjl/NPpv1IhqJGbzoeV8cJc\nJNE1puV9dRY6oCA7SYzy++EYsQNdysv9dGmyoORMMgQ356X+A5WOxIbIX2zJ\nX9kY0tV1BOQBaQg6svoDtOhUvs43kGOK84aisrqGHtm7VHICHYoEzokJ4GPg\nwZBaGUTWLH8ByhhlmfZSq5TwreMqsklzfZDiWvsyiFwwxGLAz6nVfgh3h0aN\nGvRO\r\n=YdY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/density":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/touch-target":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.93e2288b6.0_1580230587146_0.22058259864757934","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/radio","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4adb114c89d3f8a3649808b521eca1b4b135896","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.34ef15f67.0.tgz","fileCount":36,"integrity":"sha512-kZOvWyOj6/Umuo4EgoBabic5PDhbQ0Dta830ZM0nZhsUvIQgQM1a2tnmGOg60RAUyK9//nVYyMLV3eizDWv7FQ==","signatures":[{"sig":"MEUCIQDRLvRD2nIWfjL6cSMcWps+ixyDqBQypCr3S72wJHK37QIgEmSrN/WL2/yMoENR7/rn2qyFwqXyLMCcMEQHxUlu3P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5YCRA9TVsSAnZWagAAI8IP/jsdihAR4ixK4AIvaTv9\nQ6pwu5ZY7wVQKUdk0mSOfPXP9eQnAEkVsLt0uPwVGC0ntQtgmmCX5fvBeqcm\nn1/22XIY1JtsrR/5MDyIkLohx1CSVljoEfyXmCXV4bIdK6gy1b+D7SHt9tEg\nyWaDInajNJd0VHZu9B89kfhkltKUdjmhaaTheSxV51xRlATRaqGKZiOEXzir\ngxe2z0WXwPPckaigogSUcBl+Z2ZqMWRxAaifhMw5g0vBmH6ll6jIAfFiJ42o\n7LwfUtWM2H81yF1SPdY/2FiqsVSXj9EccWfHyY2UWqjlvylrVN+ifH0bVxqn\nJYVjHWE9D0cIhaQ8ZAW8y+hH/MesZO4qbkekq7YpxxCSper74iF7srH/mqMQ\nHUjhgyQkkkb/TIZEggGRwSCQpyzkltyYfbXOxzsY9QsB7PDrBK4x8yhPRpAv\nGJ/OuqslwA0bYtNBmwS8i+Bxt4JDRFn8XtnZT65kCB4fgXnh+Fpi/lwszfTg\n9m87pemq3cYXb5WyKe8JZQ7ano3baoFquMM6s6qK+cVOdCjEplPxJGgdd/TV\nxQ8sp+y1gHtu4hWq41rhRoBn0KdLBnGqXVLXmdv53fW97q3tqUF0Zfb7qGIl\nxJcz20o1bGSiZ1NnVbqfq2jJw+wqfgJZtjTl9afAVdlp2AOqpjjFTNRPGj/3\nHhuh\r\n=pAPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/density":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/touch-target":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.34ef15f67.0_1580232279572_0.8051093803887033","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/radio","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d121c521452200ac8826b0bc2a78e579d681afe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d3d176ba5.0.tgz","fileCount":36,"integrity":"sha512-sYDvVTrjYgxcQSJbE9hoHt6Cl4IWhtk4EmI0rLTei++Vdtree7i/zUk04WWrcx9WLyMC+IiCSibnzKOCxD2ESA==","signatures":[{"sig":"MEUCIBobwbwiysk7Xk+ieRWsVspZP4YxDGHMpKgzonfY/WmOAiEA8lu9py6gG4T4zsOE6mDQknd5Kpaz4eVf9Ffb00w8uxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+JCRA9TVsSAnZWagAAOF4P/1y3utswfZbx5LXrgvy5\nT0xJ4qA6ggsvuqyf3qPtvrTm/oYRmr/NQZWn3VnnwqLE5fThyWQBvIrzs4Dj\nJcknkcBx6Jh977GJ5tuwvky939Uf54Nk4tRTrdYFKsuL8JJe1FGYP1htqWDW\nZpwi1YZv1P5ekFmprUqP7cZZdomFzhVwj/nlXq6LZhKkIa9wmomB6BQ81KGL\n+r8WrpmA+mu0m9nfTugSAw/2HVj6u5Nk7kBd+mqEbwNfHFhnB8kuNy6EJmm1\neHJMT98jQgRpSUuOCFe2zQDOsisV/ToqP18ehhFvooRSkFM9bLQrKdJKY8J2\nAChfmzokT+LOI4gR+/P5H+qQLlXTsN9pI0gt6u5piVZ6eHV8I1+ygKQSpqwy\nPpMEdSxR8lY+QWVKIQoR4N0eTu4E+svFRkgU1qoV78/i5OBieHJOB0jLZV6o\ntDnRpwvtxgbkKvym8t/J/8tHWpkMuje4LoMXo5Gzl81pwtJYVwFelDYdMuis\nNPhKqD1DudoErRscQaB+0N3beLEgoY2X+PdM7uf13JzRd9w1oFqT4dpcUN6Z\nnxslhFM/0k7Wmd8Bg9Ee5Xl7FHVhKLWaDq6aL84zGEAARaPm0gmwVU74NsbJ\n8hu+oFXloSSgBPBWN31bG2jb1dn6spSVJsSfmPOZumgT0pk3LiknU/13oM9b\nCkSp\r\n=kVSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/density":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/touch-target":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d3d176ba5.0_1580232585385_0.6826927057878405","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/radio","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b194430cd75c8624142cd17aa7693a1fd7bafac9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.32c1df133.0.tgz","fileCount":36,"integrity":"sha512-p6t5szVMyNl/OYvMJDJTeYfp57L2N/pd3mh3ezu1SGXAlqWbc3ocLFVetHBP1Xupu0jcpiJxT0+5YTdsQJUmTQ==","signatures":[{"sig":"MEYCIQDnLCTibfuUaerRuaSHWLYCQfjUHxithe3Jli/1A3yWmQIhALfx+KuwjRds1ZhMZlDBb/T3E76YUHsGfQLucqZ0oNP5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7yCRA9TVsSAnZWagAAINMP/A7wEgUt7Blde5fu/hMO\n9Dn7Ky5bbRcBUxd6pvhmxjBKLANBug/58RqYn2f0KZF28rJrvk1WhxOap1fx\nTEUKYls1YEtLRP7UHet9ldfya4GBVVozgsNcLI2xJY1r1BVLQ7uip2B3Hww6\nant/kcRAGwkCshQ14ZgMX2b55cF9qBkQDiLtoLhqkEKsHyd0xqCyXGqL3Uiq\ncEAF54gBPmw2GrSnntW3m4Tz451R5TGQgNVgyEPeNlfMRHmRXxYOCE4prPb3\nnZY7RhZ1MdP9OCkbV8Ib4H4bGf5tT1cc1KD6BJ+6aCdu4e8zoI0N0FeBpgn/\n4huAWlAW1Q98+AYcf8TdCTdS2jyf+ZX26/ZKF86Z8+Btmk7MUUeZcINlv4EJ\nVf66nM8U6w+RKmCbVq6QZP6y9iDX+7/zjnc8ix0DoaJKixdocETte21+L9zz\nAHyUbgaPWqHK9Q9JcKWO+KF2NFGnouf11W6Trut1nUT2Ti+zEGN4qtjT+NVw\nuqIpebd1PTzlrzpv96Q3vVKvGa1iqQR+rY7GRf//+rkV3pLcW0pFgXttHsUZ\nhEH4R5QGnHjPoCXZWDTRGw5vtj5zn3jF0NoZzZ+bjRFLDP0vbreaP1mxjMum\n2pgII9bxiv7Yk0Vb+jkCrG1mNPIla08ptO7N2Q6n2RgwSQD2YKU0J+KfH89V\nH6SZ\r\n=Op68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/density":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/touch-target":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.32c1df133.0_1580240626272_0.07910979658783979","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/radio","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8e5f63b201d57aabacc2bb2a1b29626ad38b2c3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.f3adce86f.0.tgz","fileCount":36,"integrity":"sha512-q0D9o7RhFl4KgS44WznxqIpB0B2HmLVYkGW/z4cc6pewA/azAT3Y79ZW2bhydvXurXfIErUaz8j6LEbj4wPNNA==","signatures":[{"sig":"MEQCIDhs2QiOveDNpEMb5+VLxr42KS3VhCBmrtsgNeBSxpVOAiBmYd9GWiwtPGwPAbWykmBdAIF59rIlDurVZOXTzJ3YzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxhCRA9TVsSAnZWagAAr9YP/2mM/y5kzvGFFsfByITx\nxqBVBfzSgJlzFJf77XEdd7+XKx2uWETDVPo0Epaws8qfmqmAuSRVj7t4Udr7\ngqX+Dk4wF3FGz3LsoY2Qxk8CQFaJewSuGYNoB+ssFU2bUGFWSJU6sOSGV3KA\nBg0hXYl66f4xdXlwcpDtZSL0UE6W+C7OJ6EoiDHHW/KT5NmJTzYXat+zquhU\nJmgDCQpYxXbqRQBfovu3h0t5CSfTc2KN1sIHnmt1odbM+fXupbpph21khwUX\ntV1Whu2u8C2O5J2DPwcYRLg29Y8Pr49/puU4l3iYv67N/wv2R6bZRpq3xi1+\nNtr3kAfACd8HsZjAmAkbAHqI19HhvxmhFFexbFPupzB40Cg5UtMT2LhjF1zA\nUlrni/6w3AdtUbCtetY5kCUwpaDKuUB0HEfPzNqDC374CkPWvnM17c6/wooe\nrxYoiW8z1UE7UIf8X+Mtsb5S//qhVaMY5Qd6Jd8X1thohLumIssN8ZDSsU3W\nscFr1VHT8SScgEvxFXTwcnlmSZ9OYEllJLMZ1v5kmDaHKI+ur7kzOYhKqr/y\nak9zxYQkCAOySnJC+mIGTPC10ezfp6NYBaShQ9tNBX37cNsq5mzvynni5C0e\nfs6j+KLoChr7GJM/KQZfeNgEKQY6+SlBcqg/7zNCUzSmQbk5tFL3oHjLIFqN\nNh4n\r\n=cpr5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/density":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/touch-target":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.f3adce86f.0_1580248160997_0.7566591128486255","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/radio","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"554196279e9887abeada42f199aec80e730d7735","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a4423f890.0.tgz","fileCount":36,"integrity":"sha512-8ogNYPhATqUjrxKl9+tDEkt9bAciv7yh275+IKzNxSNr/mNHf56NCCmdn7OSyYg09hCJbaXuo6hYglY5JXafyg==","signatures":[{"sig":"MEQCIEzxHe3Xjqlku9Vww+zY/cXl2waoyQW0qW1obVez25PpAiAZtc9RB49HPgG0kT0o2XXzSILQnA/o9w1OZ81AXXsy9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSvCRA9TVsSAnZWagAALXAP/ROdChcZhnw0DIsi1ZqJ\nmi84HS1UgdCBo30DhmUVumTrlyInYwrYP8fzb25mC5Sdxr2OAYwfXaPCCZYf\nGMgiq+bYF0UZHISZyiK26WaImUXisM5kL68JDkxzZRbGdsij/pWSyHL3trHn\npBWADlrKCvrL5Ro4JPRELtH7OzLPqrFkyjh4VwSSq+VFsalrrCzIT1plqEmy\nK3mWG10Walep14M1jVcJ0ZziK0WPGHcSeaf7rx/WBS7orui4OwCFmu38OY2V\nf8aN6cj8cIHRRUBTlojsWIibiLoMvCCZF/Y7inxkwq3UKLj7GPvCopRt0W9e\nnx+vHORQGNOSCN87Kawcu4RQkCV5S4sWfmXfDOzaHtQhlxWhp8k6Y1knf3Tq\nqdOhaUqDv01Z2RAibTnRAgtiokqy/0mEB1OejswVEmGMtjTidnXLjkRDLf2Y\nJdo0WQ8OiP7uvdI6wGo4Drw6JZ3pDoaJfzTVLJ1iuOQZWPYC3auCQPjClDgR\nXXxz3xKZ+oyBXyLwcoV4Sg4fExnfdLRoRV8phFMudPZiNyNfN4Ow2wraxVSz\niKZyHzaNBsnJulWKgxnov+CkvD0ceZX6XxDBvo39adGC2Ejp5Y1KdEFgN2Om\nDrjRmDMoxfrXaFj1AQD9Gy2HQ7StqGgJMSoiGt9/LYHfKT7vYNOzC5SZB2M4\n5KJ0\r\n=Ca0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/density":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/touch-target":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a4423f890.0_1580332205862_0.06419717891583687","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/radio","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ea0a76c4a2c33a7d9a2710a7bbd6eb0f8a8c047","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.9351f167d.0.tgz","fileCount":36,"integrity":"sha512-aU6/a5nGEMPP23FUP9QbptYY4yy7axOnUR2U/ENvLivhu2LxFRBYt52K6JDHEV7iWLYNLH2dAxbjygzsMQwIUw==","signatures":[{"sig":"MEUCIQCU/OZKhkBrJmvIBxracmZU97BeCz3cel5ZjNPthpni4gIgbGPDNn/hp2lyRIL+/jWQnpFB05B9Dl5eePoTsBO2o/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf93CRA9TVsSAnZWagAAK2UP/jl5J68Sr2+35RDSJLwS\nVjlKMEC9FlfYS9r2kGsk30dn2Xca53Kehbq1/71a9/A42KIp0l4UlUWEUoIx\nhUMSSvINwLQziNjNF5JXjw6qAt8th3HcnxYEOlKWAGObDUaAj1/+4rBa368j\nCEQhTazXtEa1nGXw4s3AmJ/jfpt1DZriqkuikBe3TcOPHvfOfbs7OTKEArw6\nNdnbIKA74hZ1d8Y5t7C1axgOFGIPtzfedMiZYHUDNoEj0EhVmt+/PUJ5Gx7s\nBPzSlLctIuQJP6X/grdVOHAHPodazzLWk78Zucf1NlQwAoITSMTDRoLziThv\nMQx/vbLhnRXsvoxOSaHItTgjovBmw6INCnBmd1lmHdCEor+B9vndvoeQUJ/w\nOg5BeaQUsdsgUfeOTThzN0hE1IYBc8lkPVMh4SVke4MWZhpvsBAkI83Zjzm4\nTCVsZnZfU7RJiGd6stVqD5vFy1JlKTfKSqyiQnzailXIBCH4p/pBbvS+6x1V\nnVRhMTYyL2kbxlru6LxLiWNwTNVcf8PuEkJzStmc+RvV1Wd1oE6T9sW0PqAf\n2Z1huh+3JEMSAPM1+4Shs0HlB494wnqwbAAROMj5CPYCiXY5nxZwFrJt93JJ\npnlmtyz2xg6LdjZ69XJV2F3q2ZTSdV3nW4jax6BvLrOwP+gW265xFJboA8jD\noAF7\r\n=Ka+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/density":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/touch-target":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.9351f167d.0_1580334966525_0.2346135261045441","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/radio","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78b15573293a0c4ffe83792cb43d0043dad19b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.29b89dbc1.0.tgz","fileCount":36,"integrity":"sha512-XTfkS0lLeFHXUEVnUfTYXsxTM2UVWHZH2vThkBA+5h2t93kC35APv57//mU/YQIuUA56k+7s23s5nI8GkbZVVQ==","signatures":[{"sig":"MEYCIQCPRyt1Qg/AoffFAytXCtcXO7XX/kHAGJ86gdod6W715AIhAMO7bZKeAq80MGT5wD1bLg6go86lJYnrnnlfVhmI2w2n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRhCRA9TVsSAnZWagAAut8P/1gVOdUJgYshM0hOy+A4\nmxC/q7uoQ9GVWCO7a3NLuQjJ2jXKagB0k18zmUkJ8L+9AOxHHI1aaDRIu4li\naizPAPQrfm4zm1+JGosoRRC+IhLrGc6afCMGdKHcybD0PRJoNoV9h3HZGUI3\nIUn5xIB1k8kaBASx9RgbqoSIi9VztXZR9WYaPQhIw1YJCMJz4Fl4c6R3z7oX\nYzz0RL6rXyVkqbGbOO7PpzhnuPP12EWN62OlCMhNqcCfAF9HzlYckQQyT/Aw\ndLhFe1ZJcnNtge9ZlhRKHLgcnmQOqPzZqy9/bCR1VWDE8nQ8f47lfQU3VDjX\n0sMqUbxF8EQTT7ltMY3z1Y6PvO205H0ZkIdL3o950LSnuxShOCWBhEJOgALA\nXLg/pYirPOJPGbrxknzHuKIFF0kDwW9xsUuM1vonGKVGNqwOZPdrN3I824AU\nvWsr8xDSyU2ctIcZnOEmQaQIypWxcZyFQKs0bhZIF0PvxcvpYWKQUy8756Ey\nSLWY8DfFYWe8h/ZQ/c0+cu8eINxzujkTPbCntPm0FT+1pottHHMludOmlqIw\nGD+vqYq3+SnPR3ux3pL1x1p7Z+gzuLZbj9dfwJF6OSDh5PEyUXaw0eOdSSDN\nRaQ7pvH5/zqCFYPPF8hjt7qVl63FemeQomP2hVuXq2ogueI2USoMMcB9yX0N\nh2up\r\n=0BX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/density":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/touch-target":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.29b89dbc1.0_1580336224872_0.30385041758369913","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/radio","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45f5faa7f5d52d9f0b46d99e070a9c2e5e03374","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.45985457b.0.tgz","fileCount":36,"integrity":"sha512-VYOt88FuNQdqjKHHlJG3sDZKPCEcpIkPysiJInVYv7pC3KAw08B8zvkRLabJEljmuAOyv+foiWAnZTf3Klv/XA==","signatures":[{"sig":"MEUCIQCuBVpNPmD2IQk1oGs3O9eQ754ja/6V9Ans7uolJ/BzeQIgaefrQmCqheuOMNyDShwFF1GzMJKL7gnVGSeH32vwV1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZJCRA9TVsSAnZWagAADGsP/3ykLrff8HqHu//q4Qx0\nnXxXLXJMMC6Zuipj4sXuG92bdTjZxzST5sCnMmbnYSrfZTkXvKAQ8LlTZvtu\nBQPj4e2DCxFPg7gtp73IJy20Do45BGp7v5S5yyxAmkPPal6BgmdHEzGXec62\ndyQd9pG1hZrH++6txIunlSJjh0z13xUQInGrgAzEEDpcphLrIbFJP5UquMXN\n2Z49ppudgao/NCBMLebnV0WOU2TVDikZRd/ueVPEfuAM1MOWVs1m2gVAC4XX\n65U8hwzTJduBv12OYwuVWsyBz0N5O0kxsRQVgc5CfqO0dguoGYwpbPuHQBBK\nfj/hf+7ILDaPWOGtVqEL6X92ZHIGuMKRQosQ4uaYmNuQB6CNb0Mbh/vtoGe3\nyX/Zzbvc3gN3ozi0S52AKXL4Of0D8OrIxFsqnKaNljCRcCsv5VxhtLakn4Z3\nvyjSx7fMZHFq3mJxEwu6zOlDE8WLYG3Uu+UOKJGLWYhYu/0vpE1x0PcaAg8y\nSf+vDtEGhw/IatMQvm/8N8c8P0RqnI5aaIY50BfIm9i4FqHitFmJ0PWSXqz6\ny78WwBjozxIF8Yfcc+HaU3GtaSgm3dNKQjVcMb6yZGNGPxEpqHO5lAXm5WfA\nXB7Op1HycJ9Zz4Updr3FibLco47LFk1ddIwkIHLkMvHo/mAVesd9lDuvYXvx\nVbuW\r\n=ArGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/density":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/touch-target":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.45985457b.0_1580340809162_0.46823846311839956","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/radio","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5932a904382750fdcf536b449e57404f21d2009","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":36,"integrity":"sha512-onOaQGf7krcs1YBfblZl4xEz71kSpuToW9mulgdS1lwu4GuRPvL7HiPQh1OTKzXjXfskQ74dplMd13FVHqv2Bg==","signatures":[{"sig":"MEYCIQCRacCFBsf/ebdaozSUxmk1gDk9VyWD1wzjFxEYtDLoEQIhALkWm2IrPPQv5owa+inGp079xD9SOc9xlWNTqszZHmr/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRoCRA9TVsSAnZWagAAVZcP/iJoDDkuC0vX0I0ZulPB\n71ovAi/T6+BUNYigUq3WLvnwMEbRwjUx0mucM8tAnLjnVK72IAiDRLrv1H0b\nP9PnS0ILaHp5VoXQ7gE/PIZYO6WKHDh84M+N5+IILtXJDf3Vya3yOU0ofZMr\nW7IdIZiQlR3HvCASuUi1vyPnA3cn9UOVmLEUgRtndpbOjzr2NgRzgkz7Fvcv\ne+UB5OP5cT7reZbsb7Tjtez8lUMkQzNOiu+VcKlP9RmSWOXKzspERwUI3+3X\n7V2pmdgnMNEGThiPOy6pCLspYMUckRcRGSJltOTFxGrZiCV3T7bakvB3FXws\nP0sCjoHLSVqYOHk3DwFAR6aEp/cpw/ZKTLx1P6gcJAWM0dQJvMZSCyeIG4wZ\nzDxTEwpFxTTkIAFPlPVik48N+8iN2SE/OXeYZGmeSVnU+kvXkGrz9jTuDFX0\njxAoGcC1zj/ec4x6CPMj2Tc+v07Dzh0XtR4lq0h9TcGAuqw7G1SeGQmBHNX8\n9KhffVJpGwZd1tacw/qDW2knvcCVx6acyMCahi6oDtw5d25EnixeG02QFx3T\n6p5Y/HudpKLEspzRyPOHTY0AgoU3EG18A51gehBTnchfdSaJb12vkWRkz3UQ\niENl5cSjS5XWtee/o3CDhyc//dZ/AqOqm88VVLCc2Dth8jHrTLhOPuABsC9z\n+Aqs\r\n=30B8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/density":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/touch-target":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.a1a0deb3e.0_1580405863607_0.17095679554284593","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/radio","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df69e05409c8da7e79715dc4359d419ef122f65","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.181486643.0.tgz","fileCount":37,"integrity":"sha512-fRPXYm5fddLRIIumVMGgJwxnkFI+HF8zgKMWlCYvNjEjlGSAMoRMEK64r73Wdj9E0WChH5sdS4PfpLddg/vqFA==","signatures":[{"sig":"MEQCIFjpwOlPS5yE2EXqP2erEBPPyD10MWyHY9PEP1oJve76AiBmDbu3paPva4LjDyCbDW6yzWTdLUXEJWLByybbLVqUDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MECRA9TVsSAnZWagAA2VQP/0H/M0EuVXET5jCeRlkp\nqjofR1fW19tGidSqOUTthgwkKJn5Ert82YiAEDAJ0CVVoydJntp425CQvQUE\ndQ4dpUxXEspOO3WxauAGvTTSHkVzhUkTslTEy4hQjJs9bF4Sg7rarw4e5FRP\nsoG5a1t3dC1vLFSRzskfn9cmi3NIfBTPufafWpnfN3aN5LOsiRdxlt+hrwdo\nFUHru1zeXssMQQQMyo0yZ/BVJJs1dTSkR8ftn267Li6DwcM4Ud5xebMdiiQL\nqKGhzTecNd7oXnXck+GyhMXwPI+WV/iLEL/Ugo/63qwUexWtGrBU1xs/HMnY\np2AmATekdhr36xTTA3XDcplQ8XAoD45VsvCAGfir/wbYvOdO3HM+BKh+/jAm\nEioqaJTvvC2/chYKm+d19oPYM8BCbShmvZ7jFvYEBFvv82J56sw808724PII\npYqyMU6Ju7ujHWThaTnyQwSv1L7l+IUzlT7YZx2aPGSAo5nullm5hHrDYGuw\ngFNRjkfvTAd1NNMapvMc33HLKbyVf6aRoqyzrvQXm+gbJz0cR9lKaXTdAez4\n9VTckg71odI6AncXZEozx+EV4rlyjv5fQFxaVr+TGqYx2rDjzD6ZnO+QEulc\nKWsilwTZ9ZWBVKbqpyJozGpPGwnsmwbBii70243+/lK9fAswcMd9HCNs4myp\nLOHD\r\n=0mzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/density":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/touch-target":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.181486643.0_1580417795740_0.4299192278203612","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/radio","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7801f6c1f07d666157944a53e7144759796b959b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3a85313ac.0.tgz","fileCount":37,"integrity":"sha512-MxDFB+7lDF4VP9EJKY72aovUye9H2RwyGdBVhKzg2bDw19UGiTYVpjJn9x3ol3EeEcDGRuDiPnmgvKQUbURwiA==","signatures":[{"sig":"MEUCIQDMD/CLQx1hT4V9WaJIAcjI3NeODN4C0ZyzUQ77uSLQzAIgWpw/oaIj0co0jdzRN8JngW54MbJ0cb7of8anskK9TDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSHCRA9TVsSAnZWagAA7kwP/A2knSgsBYkGaXaRMwL+\n0GxVn9pFaFoDxkJ4hWzYl4/lQmIba5mPNn3rx9q1PNYda62KXAQzf55iPC4y\nI1MgDzzIJ4CzU9gcGHQAftkU/51aavWg3nJVIc4IVyNbC/cu+QGyZ7TGikQn\nVpA1dLlF8CDhP2FGSqpkD/Nb0wmNl8bwUupQifXDmYPRbmA9da/sCGnG4kw4\nMTCgGFwhM5MPKK/KzZyWAwhpwytVR2TkgAHIDwQkkJK+K04oI8LwcmmWWpk/\nnxy4J0upYRIQlgMvIXxQoV0G7LaPThQPINEMQnxDoNuNQOI/DSNfxPvtJUfc\nvaBbJF/+Q7dmtsa1pqKm3E/3nR3emXlapgCPxFT7Y1s8hvLHaL0ZbQVDj1vd\nnLeIbWj7wCIpYH84fgUfsznibZXq9L6b4F87KvBJFoox+nngTjo/1WlaTecX\nmbNWOuAjXpqCSAdGzDLvv9VenYaOxoC/8OLyHA74tem9AEHfgfWWPP78+VB1\nmz5Ly4u4OKn93rcA44DLHlRUw4bnqkrzkzmvxiBVgYl72FI+RVkU6BsXgiAJ\ny2MIjrjte4tHLEYo2EENlRYdP4mWXadFm58POR1VlwyazMmMKXGfyr6UQpAv\na+bR2ha14qP+yByHCcfsRPig5Gjr0eVIXEvOTme0IhUZ6+la8ELrfpUIsSWM\nyxtb\r\n=rJiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/density":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/touch-target":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3a85313ac.0_1580487815239_0.6893611839287734","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/radio","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6e819ac5a7a3a4ec5d94fcf9eccbf5cc58adc5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b6c7f624b.0.tgz","fileCount":37,"integrity":"sha512-FliJgHXrDyERKF9kaPWG9KmufDvJSt8o0IVe/PsdiBi47zr8xZAAYB9xxtdwV0UErA7LZWXCx8opcJrrD8mANQ==","signatures":[{"sig":"MEUCIQDTwj/xbi9o4J+d0tWRNo/3RsEJuk226FDWjBDTh2BEhAIgE+oDDA2rS3LItXDNKHmaj4C//i1CVSLfunIgeS8cmr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3eCRA9TVsSAnZWagAAvWAP/2OPAj7S4rw4iSmcEwIi\nwA2cPsAujtrfqtCyiZA/l4+9b4SfDwt4DVnBccYGe3iuWj4Qc7T4NJJRcFGe\nG0tYWgKvxV4nwG7RB0SJMmFgb94p46882efi7zlcw2V0gSYQbns1e/8hMNyi\nAWJScqFQDbxLvOg4fxo0ikqIRBHq0iMvuANYrJ9krFkNrjSKMmPuWuoYXZsC\nAHK0SaJgC/6cpeXkSnhJZ3srW0vUOI7Yr/tI+ugzVezXYlSxTfnFQOGUNQ6Q\nDhfe/WVG8AdS9sPHa82dbRLYsB/sKEH2Gj3TSx08jcmkPDt6NZySUtZqIrC8\nq/5ya3dwD1CH8cLYnemKTnWoI9iyAiUFzmV1BPVAQAEU1+jmPzJslLU1HG41\nWXddw4zhnmw31/M7bG/vycn1lGTfwgyW8ZDp4BHx3km5Gjki6w30AbRSpLUN\njBK7KMele48bdnVekxX7ijIuDSWknfUKO7amVulDCZuaVOor7n1AghwFl8NP\nZ2OgyXcbXH4D5+UHSFFvsdJ5jmSoR/8FHRCKonHJFr/J3Biyfl+60ibkfxHj\nEwo0N5zCheaFNu8QyXzN9P3d6dKp6BHpSvg5hGl1mP6dJQSNAwd8Jb3PUOEJ\nTH1y14YaBerlF7b3yzG708oJYHzC5Lpdbnt5qc8ac9CueaQ+dq/S9zkY5ZDG\nMPoo\r\n=II4W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/density":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/touch-target":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b6c7f624b.0_1580490205842_0.6596325902411393","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/radio","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43e7d423689dd960522e17305b51a74fc613e2fa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b3f70ebde.0.tgz","fileCount":37,"integrity":"sha512-fH0V2gVPPauq/bYPUGgFuD29l+QpY3Z4t3bT31yjatoQ6ZNlFOa5wSOAQHclpgWEcXOzRBH9vCmZSoAyv5iIRQ==","signatures":[{"sig":"MEUCIFAwUidHR9pSlm3TEHZ9dF7jDX44FdnZ0ml+LaibW5oLAiEA8ib8R+Bf30ArkzKPX8cn0/UG7H4kDsNrEqp9nn0Ajt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIm+CRA9TVsSAnZWagAAIoQP/28TqYcz2DrhyVBEPAfU\nkTVy+G8AG/C3IFA7ItdZOL102SDGQvv2+Sh51HGCOycGIBNHJjWMC9o6thQG\ndAEb/UfjwxUe+4f1kMDEaa/wr/3CXT3+1FAqfkgqmmd5og6pqVlOFVZfyqNw\n67bgS8BMKTHOMQvRbJo+5McLKO50BmxQDDKoEmiUcDT/amIzncCyRn5cEBxv\nVVjuSZL6OhkCl0nMDQMyVdCxiC4Ar3BzHlZZIOic2FeFwltjLqvuCFH3jFEg\n8Z38Lt46p1ehgSYBG4TKjwN+tBlEP8A6VXMdb/o+XG42HAyNr2LMpe3XBe4A\nU9gmiODL7H+Me8QR1n0z4ZS3WwCvBaYWvb1p9s37dcGlN5UixAh7vY5o3KFs\n0ii2LN6Ta2nsL8iBoKDKQSpFLjyu/jFsS3oUAgojwsNzM3QWHyGH+sCL95bs\nwxnqLLKU6WqQBCCH+q94MZuY6crmk5lMx++dG0tup5mDT2ZIoLzU/XWkvR69\n+Mg5gpeuA1nN7KdFrP2UZ3YBO/NezC8LFnUnQSDWQOqEraXA2Z1zmWNrxEAe\nF0tUrhuXqDSno0gFN3feFMhoL7s3IfYgiUM5uHFNWmLD7B9S4Acg54pvhoHu\nae6bDJJwAgpsCTwECalPSOEGOdxasFDJh8da/Cqg+nUbGUGJeiLq4adbTipm\nH+S6\r\n=zOMm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/density":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/touch-target":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b3f70ebde.0_1580501438405_0.24082948971843754","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/radio","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff0f4759a14be5b95e2581b9167ce5898c18c1e0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.3e782d8f8.0.tgz","fileCount":37,"integrity":"sha512-+uA3Ei1Q1721HXGfuZL9N0eFDpA9EUZpqgy7SRsAa36gmTxRQQDow2xY4GHY+//vXaTg1UuGfUUZCAK5C4dd3g==","signatures":[{"sig":"MEYCIQDSGAiLJhD4YuYd1HL3zofSOgB5ihYNH/bpySmTAd97PAIhAJMWEYVOGg/+EXTjvvKgH4EJG/P5/pZkRFUh3o6PftOY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIdCRA9TVsSAnZWagAA4mQP/iHHXmbnTFE6cAmeDK/1\niattgOG588WPT9sNvhsQCO7q+0CoMtZz2t80JNSiLEiR9NaSg6Nh8D/EZXU4\nSnZvIGPo+7ro6QcXBDm6dQx2t87QaMdrm7i8pf6xD/EY2W8Vxj1qgYXfb/iM\ngrFiwN/om6YnfIDVSv3k5sAn8pFmJKwzg5LVMrw/FBfP1cvGqyMHlIK2aFLS\ntsOW5xtG+1IOFOWXdg8/dKv6kiflHxOwo9QizpHuCLOnleyRBz1vRkrmGPYG\n6FKanpY++Wsk1Gusj4yFfvzvIEEPQdVqjIz3XeSURd8TcAyYcI/qcE4DsYz4\nafrdDqFFnM5+nZQ45c7rzjqQdigR5iS2cagKNm8u/CLzrlqrVaF+UVY1LfiL\nZ8RGh5l975jTzrjzADelz0BF1H3+WC597ICqyDeTG48b8aNuuF7pBea8sJ3/\nrFAr7Rz8v3Nm+DSNtu+yolPSYlAxAPV6ZK1mZgckLJfYyZI3lMH5n750D/x+\nvzyNIdXWrMgnPMfiYLbFHwm1NqPBN4yaunjdOjUcRJBUoot4XJu+ieSArOHQ\nq22X5tXNMnIPiEHniGxjrmEkXcsmx26wYBI3HoREBpvnzue8L1I1vmdbqv2Z\nW9rAfZKdF0P8Tk9wrPrdE2KQl0fcKczqTbhjHsu7saURAfxig31cN3D3qd7M\nc7RN\r\n=YPHT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/density":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/touch-target":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.3e782d8f8.0_1580605980824_0.31860035428018163","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/radio","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3f47270a6f317c294d7916450cc5e4aa806246b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.535398572.0.tgz","fileCount":37,"integrity":"sha512-UDLsq1v/1Hf7w7oG2s5XzUt8YcyaAAHMiI7Aj9Q0niplNmtvtxoB6tuj2IQ98ZSBLNxohwO1hSwn0RmHVs7VNg==","signatures":[{"sig":"MEUCIQDzDN3/Tw4HigRzLYE6I+eG3186eukTw1j09tNL0gYSrAIgY7OkTHcM6evv+/8KWHEA9ZFqPzMLApbf0KnOQSNkL08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKaCRA9TVsSAnZWagAA6fEQAKI4yAlubjUmUV8hCo9h\nPi9m7ULvf7R2v/BTI3qtPIV0FRjf++keHKluY0ma1XgM243e5lDxa5MakEf3\nnBsCTv1NpUPZ3zTRk23lXzMMWSLggQ8YDurs83iYXqpwpe3kpcfl43kl4RVu\nu1kr9Nj/q8+N36SEvSV+VpYJVX2k/75w8y2gC26hJ6cHIi2EXuNz4MbRHaTi\nGeF8cR1VQhmt1zreagycY7Dsl/kqauHW4NEOOxGHDPbhcNE17ir54dRe66KN\n7iwzCSukSGkJp9w7l8NRpVuXD4Qe5xJV/m1WB0NZHOw8EvBIUmjZrjo5++oC\nVUCp7ZY6ayg00J6oAAsXEQew3qhc/ln0qYi6kJgULAePRz61sHIJhZIMJSBH\nHLdj8NhAmV9yt1gqhP2dpKSfZVF7H9KlGDoGX+nUE365ciI0hfKwDOLuyeTZ\ns46lHw6lPSb70UwsaOcCBYrX3+y19ib+4ZMuF0XOcALlTbOc3F2sN3XAwU1C\nyJ/lrMTckUKpVXNhMye8cyIjG/KeMGFartkPpSl/aeGalBg0EmYI9N14ZXmV\n/gCsgX6860ECTW2tNugjGdoZDXJ1Ai/chSnETf3THZFt59gtVNUQCCzgHmEa\n1ApPc3eh/oUsNuR1KmEaLRTc0bdvvvRuejC80eInlHVDSHHlnyjAWquSC40g\nbPuQ\r\n=asdM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/density":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/touch-target":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.535398572.0_1580753561782_0.6200292988818499","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/radio","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dfa5fe69e5c8ff1ab8f959547abf8e2b012ff63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.5ff33802c.0.tgz","fileCount":37,"integrity":"sha512-MHJPKstBa3tVHJTmDRsk/zg9H9ofo7z00iI0D7L9O/hyYjOGS6lDUe2K/kdJhak66wS1ZUP6xRZ4GiZNNIV3jA==","signatures":[{"sig":"MEYCIQD5IqSxCL4ZRbpy3oh+/AizR+yAo2Di2DISp2KS+SECbwIhAOdtBKut+ySxpXbSHs977WRPUl/CmXVTztuIWxrb2AxA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIdCRA9TVsSAnZWagAAYGYP/2pQXfPRoNvoiIb5dNW1\nPsz6W0cbCTbPohoygfT2NMYE9cKitfNhHq2gMpDZjTxQWoqZoCnm6ukZYkOf\noDzpucvXfmXA8Y8VwimV9NJNJVURLIuMqtmWTIYDhfCafKk57xOCK4sy+/9h\nG7dz0dZC20erLWkKlecz0v5kQ8/teSIgRW9ppmyXEKt1CMy8sKowhnzvSXiX\npEK9qgQjCR6Sapv0zZaefU55hfd05qkqZyhIyP43eQoygMLMC45W89odRutX\n3Vv5kj8fCx9wm9spmgukAYMH/Qs+lF2VB4GufLSz3JOcIe3iBosMzCAQMH0N\nRe4G8a6A6hxFVOsKVkBLX1MDnLZkWjgkO9xaXFYatpBxv3pITmTZNFBNaRl1\no0AnUrqi5XY9xZiyWW0GI8vVXXO5XKDJGri8BOIorcexTosKeUhSMsGx/8yd\niPUctLI0YGMrSYTfO2b6mXdY6ef2Ie5R5KhiE0kHEwM+uE3ex1QJTXC4qN7/\nFCO3/NgdrgD+r3KFWeP2rweXAbl+q++1Gu9NzgHlPdX0NaTs/Q7kataI47Kh\nkCxePSbixHPyqBLo1fuUBZj0xyRiPI2USTBVTg1ovD3ywu1P43BF4mirOF65\nX9xksx2HL9BFCVhLSVeZFb9w53Ry7PHc61rIui5xuFGrTncBiZN2mx2epf/O\njC1r\r\n=Pp2s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/density":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/touch-target":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.5ff33802c.0_1580839453061_0.5167906395331618","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/radio","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e343b90e0cb98f09e7026cdc428de87d603c8dd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.1eb29491c.0.tgz","fileCount":37,"integrity":"sha512-R22iO3nFmHjiCp+iE5/k8ndC+u4fGZffbcuoXFi70g0hneG++a4/Nais/DNfhS00fR1m3XLO97AVWf0+bqJZug==","signatures":[{"sig":"MEYCIQDLJNS+SM6XkUClO3aooXWD0EXXZXqCdf6IfWeLg3KqbwIhANQyMoel+/n8LcBbfa+6yDMRxCVzpK+sYoYAxWUZADgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduRCRA9TVsSAnZWagAAQvMP/iKxZl1kKB9V68FvUr/G\nfmgCZ3nXVACSk/Cy1B3NzqRlS1nf1G9L4BxBOm2QiwTzfq2aLa5QzatqQgan\nOwZprug2e0Yqf/44W6y9/kPaRdcwarHgMe59wuMtZDMb5IRcxA28ycIhRDY1\nYtLifGCc1MKORh7c9RXk8oAeQJ9bywyn0+UO9MCsnwZ8l1jSpoJ1Z78GilvW\nBsQT+ulX/rP7tw6eE8Er+k+/LflhJsnio67QG0vY71qCm6wXg7wy4z2gdxQ3\nuSv+a2QtoJ6TNrnx7nvUEpdpSfY8WKkZLxkGkU1PLxb9vJR8xt/H3yVu1CGN\ndpuXGYsQap4OzwvA9eHI+T7F7tLPbCr+awdu7sVf15sJgr64ISH9MNudQaon\nz673M07ahvDiK86y+GTE/FqWtbOTUU9+ioeFF/zp5uJgdAx1v+YyO0FAwSra\n0/AzGGLsNv/njXcbvl5L50LluBbrbFYietLWKCDzdaU4v2Rc4K+UIUHJtMea\nobDSYqiQpPw3GxxaHBBUkYuawv7hISebHKuUsskKH9aZmgMJINqfJpj1TdQL\nFOT5hJ/A6OeQUP/hkKj/feBhcYHVaa1pkR5Tfhu4IDFRjuSlw2Z/aGlTzJfU\nSa0VYj5j74es0QJ0PIxWpuEVvJLBSUXqgfDqXDeIPpNEpQmL0zEs/AmoKI9v\nScpa\r\n=Dr/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/density":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/touch-target":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.1eb29491c.0_1580850064579_0.09609710022375961","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/radio","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff95603f883d40c52e4933d92d147348b75121ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.4c7154b26.0.tgz","fileCount":37,"integrity":"sha512-Tn8QpLvhkMY1i0GQ8Vk6T1GAKr0vlehJDz0kFMl1+/DqNAz+FHluA1ciD/QYSQdPiFrfnq1Yjeg1S14GOIjCrg==","signatures":[{"sig":"MEYCIQD3yuDetIWFqDDzJrM/MtkkWj56sACDpCxZ1piJjI7grwIhAPDKybEd69aMO/2pl2GKV3/WornBP8rXUKZaW7Lr8WHD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOud3CRA9TVsSAnZWagAA0U0P/jce3N3Simawibyik7Sa\nmYN8mj2PBcyNxonP6OuEFtRNJ2h0xwE1RlVbwO80vfefw2AfxUjzVOYXiJGH\nNs0iibqo2ZBrKq63fCX8wTNxuEwhlPbxrWFbj5bp8YC4+PiU5/TLAmJ9FdIB\n1zC75+WPDrBV2fkZjyzEbOSiZQAGUMoLgQT1BRBpCQDV23sNMzc2LmntKr7t\nSnBwtfFtDX5ZH4BvZGQVt9+FSjkGLG7IAtT6yL2lS6w9uwOBHPANAUkaY571\nPe7b9cDwpcaj9YGwvPlYZMpSOnhSSUYAP07/TlN/q43AlLQ3xBx+xIgi5AOc\nCkFW5/V7d5eFUT/PQL5UPkAEsO++kM+4o8N9DOxDf0Vrfj436vvdBVAERBae\npvisIcAlRItf0gUHIiiPwcFTpmRl16JzNRukMZk1o/Ah+8mRmiy5oP0d+O2w\nUYZ2SNUyKcNyoVGQQl+4rqZz76tHB/5N5J9ILaAS1QBpCuwtOMhS/kpVn5LX\nDvRdWt7SwM6CE8dl5Ya5eg5/OcKsX1XKeGzNJDh1ofav27exU+7iK8mzSwuR\ny5hdtVFcqTihaOOlqApuvrWMPM9EBqDUc1g15QRKd/ym1BQ9cWVhIdUC7UHN\n8n1MBShPTH9VvPAr+twOOO+ZcanGRK77lm5udUIVZ2HCyUK8o7Blg8WiqqYl\nCm2G\r\n=Oi7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/density":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/touch-target":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.4c7154b26.0_1580918647264_0.1953439236542831","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/radio","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dc3b5284bfe0f103a052f15f6417bf1dfb6ce81","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":37,"integrity":"sha512-2YuLecCuyc+QfUaB3fqLq+3eM17KfurHsYmpLC5PzPctsCuaFicxmWLa3dC1IiHucUfvx4M28GxfCCrKUUcVzw==","signatures":[{"sig":"MEYCIQCgyutTq9fqBnS6dAS+SOT5nkiF53WS75Qew1IlvyYzfQIhALsFlycFKXRCUCFPi+bf/T8+EyoMIi4dJtKn+HyvzFut","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DTCRA9TVsSAnZWagAAL8IP/jbHPUDehz81xvRMTqEG\nsEjBC/60UGClEScwVeTPuah6KuVn3FKOAyWDP3Fwy6yxhNBZUTXBkdBGxW1r\nHnc5Fjh6U1Kbu2ueFDzcCr/Cby8l5fGxRefGwdBFYsYvCswucD81rFH5iLRG\npcHAV9B64lRExlyIIEsnJcwnVwUueHL5yqDQyYisWysIy2QpgZ39Hh0VvjAl\n4cDlOePmoMv2JezV8EQwkT+zBiYOtL7ZpByIHa7wV9NAHEQFBG2ceyYZGzM3\ndY1psG/GW0rqveBQFRhfWGlG7dd/aVu1IX/9h6oixEDK4uk2xMAEoEgS/kYm\n0F8kEYfBjDGFx8u5Rd4AtXyrcwz0aZAT/L2VXfeL2W14CPOGpO2Sq9R/WnLm\nrsyt1Yw+KKT07g2itJazYqvQKTIVXVXrQaxcjztz7mkXKqJ7ZEzBK5/MjwlZ\nvCgDdY5NOxnMRF0TGaPU/yMOgT5eGh4DvIx2vbuuJtEp36wSHY1lqrLa+d3w\nGBetJ5XHiI3/R3u0sHVGco8sp1PVWa00S3zvKqOI/apNd89L/+eBLV3FothD\nkXYmITwEH7GHNDVdBpUTOjwywOJ2IacCG9ohCXgLHYtxR9WT3U8bZueVVgqs\nR/DOVxN99aMqCgkReCm9+Wi8cdYDzcJCQkgh699uVUo4DZmvZV1OGmcu1eWD\nihFG\r\n=7ybB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/density":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/touch-target":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ab5f49a2c.0_1580945619295_0.015108304748850943","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/radio","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67598631d34f215be6587f89a4e887a2c382d4de","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.c541ebe15.0.tgz","fileCount":37,"integrity":"sha512-nG8WEmKCL9azVy4xmX8ZpJ5FB7rrRlYhZxc+5sEa0yCVZZmJwATwrbGoG8jZqIzdSqApeV4u5RgV3NhfNh0t4w==","signatures":[{"sig":"MEUCIFa5xgObccsxUvqT4/z53SRR6Epl1zu7CMrO8YkukeakAiEAzOxMtrhwqCJEsO//Jmo3na/HVDZAaCDHMj6vTr0QW80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJN0CRA9TVsSAnZWagAArrEP/R1UoEYpTbkw8j1Vl3DC\naOhIb5HCodGklaYx4ww+5z5glL73uT1J+rDkl3MDcLAihyvUcmOgLtwZq2Mh\nD79gSxoBMegKuz9gzik22Gjh8Ie6F7wInKp4Crdp4vIovKu5h1UDa6lIPsLp\nx6RtvXyhFpm0sAMZIdPgD5r5lVGVvlRTI2PvpQYAKQJ/0GmkZePuovxIY7A5\nlHNFvTotPSxYeMMq2++NyUgcizMTdcYySaJu2ZdMkzeMwK4vjkwAR9uv2x9+\nzf8r6xevQqPmLTq0QZrCmuonH+2aUnmt4vhChUtK5fylQ/sHFi2wL6N6byB+\nXzWgCfewOIi6Vk2B/AytQY38091fmWdfZDxo1tThyI5gBwWUU87rM0eCBbtt\nLhUgEd0XlAQF/1rUsOIH68pNZepcypzCY9gyMuJVAaOqiNErcTW6zLKUn1di\nZrZI1C31vyrpeTimm4j74EMNnsXHDIsW1CLflm2LxeDC91dGc8/VcghtY0U1\ndwnX0/PkSWpqrkMgmVFIBiKX3Q2Ink83RR+iHAyZfuZvf2A6BmIjqViFaYOh\nP0AXcMxSm70Dyxu+t5845EPAppjz9TciMVAxmwpjeb8JZz9jSfxdTWyRlKLN\nyq1SHIi6zLekobmZUoUoMEB+yXpBow17G/xIhEe/03VJ/UHsoBF1ZWbVYTnK\n9W/u\r\n=tNw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button\n`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.\n`mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.\n`mdc-radio-density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/density":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/touch-target":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.c541ebe15.0_1581028212133_0.4892830576297882","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/radio","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"362cda78681da51f90285f1c06e93a3b8c18d424","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.98f7faa05.0.tgz","fileCount":37,"integrity":"sha512-Ku4vTR/oyLTnuQOUvTqmy+C+PZ+1P5lr54lrr9Wd6ONfboH4SzmahEaK7gHS7oBJUt+EuvGQwAczvOCHB2CdUw==","signatures":[{"sig":"MEUCIQCk0N3p9SOpmF+Q3u1iS8iUo5HFViVY8lXUbFSMWxZubQIgPk5OOfzJANdS6Yz0uCxkNGLxdvCplxaB567azV/EGdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjACRA9TVsSAnZWagAAMwwP/RbV53Icx9WGSgt95jpt\n7ZRs3HGw4QAWwOaUR0K+RWys0AYUzRmUVXVyw+nK/oe+NpyZYv+b9P15gqnK\nFgh7fUPx9UWYy7dl3IUYKD9L/UwE2G//X5Fl4BpxW7aBNYcILjE8YMbA1G+e\nDJ7FzZeI66tOKoziDIHdAMmJxyfchouHzvMd2TE8DRKhGYrpLnJttGcbKQMF\n+cljh4UBYhVk0rw2Hfd63A9nwtMcHnmNTKaovzJw1/GGM9yLZfDPOI3RNRBE\nL+4Wxlt/ev74bTzxkKuCiJeMYt54M2aUSIKbbTTrltHFkJ2raGGKY4yVgNrx\ne8ehzLAAoNbzVJeFtERiboR1nNx0+XCOYL5cfMp+k/TGcUy23Itjs5Nq4NPs\n3il/NM5CRCZCcjEWtSaj94AeaomyLmrupXtapPwO3/XAfCex2O/FrEtDEMQv\n/ZFlSLOWruuUej+hF2AIxa5TCer1LB1xjSA3ZnFRRjf9P1mf0koyqkqND10H\nfz7UDuEbtmNj6JwWcE9x+wKWylsuxA9ug8cRjFybZrx8mYznbEwPZdj3+2wD\nU6fg7NqcbgqGyOXImGMrZxXrMMbDKeptRRDoFdlVzNgJQ26Hyh6r3hWyQhBA\ndhuPJtahR9gbs+MM/RLc2oaFC7vv2mCqLrq4E/9BJ8o6T/1ZuLwOo6gcUMOF\nI+6p\r\n=KSBT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/density":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/touch-target":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.98f7faa05.0_1581103295936_0.4833730293765941","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/radio","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"957e2bef635dda3930426aecaba915581d70ec17","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b4727e43a.0.tgz","fileCount":37,"integrity":"sha512-TVco12KBjxueIBWnqOFmTbvzYSP0DF8hiC4DwumZwf1IG1X0+wxyIEcqpiXR0C+Dv+FQIS7JJ2cTn+7H//Ft2g==","signatures":[{"sig":"MEUCIQCHNhMFu9axvq8slk68zUNMDilwSTI0c8q91QPUpdJ+JgIgcXWkCGWiWqk4lewN0eFlUhzBs5iED6BM5CtYM2j+ZLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDECRA9TVsSAnZWagAA2XEP/3i22bMvz1HFeYBt0L9S\nEeeNxOUjEWYUIiJLwb6XXkkWXNOpXIww48eWr0qS24pGC+54H5/UkX6bLvY9\nnwLlpVJObMnlrgafGJS6GlDrbaK3rvCD7/QbB51BmDAOf96gr8aH50omHcAe\n8TWn8MkJpyi4l2pd/ax9LaTY7A+82Sq3lJ2fowILnFmcCZT7/6Zy0tAVdmXy\nKtMBqe6wpNeI3nrv23PKHxAIRF8x5wZn2yc36A08BxABsBTX9P4wjIX1eLI8\nEJhirYod3fUSYlL0wQ7IuppZpPNPy7pLSpgGrzHufMwUj1iQvsEHx3pzGujL\nmmWoP4pPrYHzl1FJaJqbtxOCMdoSyr5nGQkaRGDGWOxp3AFZYCkrkhlO6gRb\ngexg6Lv85aiolHk57BKUBw4LYA3uyLDZX4gkNEFbTQZFHXfDy6m3fhETb7N1\nFPKz8qfewSHgDxNxUQbx1eszSo51O5reImbUrXHd66UWFK8+PuXd6LwW5OI2\n0B8NdGq3XqQGOqgMJ5XzZmAmJ8LTIK4bx07xjnd36llDDPa9eQ7eV8P1lJd2\nmnC+yP28bzz7Soz+beNK8f5XIRABGdUkKjs6ouTBpWTPbgvsRRCRpN0qSRvK\nB8TLNYe0XgCzY2P95g7u8E0OxquWK8rMIEQVBSLkkSN90s+b1m6A42/Mei//\nnPT6\r\n=4YOq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/density":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/touch-target":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b4727e43a.0_1581105348547_0.505047807559283","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/radio","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1487471dad7ad2f98cc020663b13f52ae75d49a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.91d9d5a65.0.tgz","fileCount":37,"integrity":"sha512-DjaTcRY5b2lwcEx0h4Qv+ZcFjm+IUlQklgbwJBeALJBFMW8eRuRM97sWryQfhxSHbH75E/0tKmOLjODb/DxSrQ==","signatures":[{"sig":"MEQCIGxdE/V/yBhXct9P02BsYpjuIaRnbBNMwazQtO/E7PlXAiB/kfPAwLHFYPhsQQoLXS32NdEk+svFOYn1cbCk+Kh/DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevlCRA9TVsSAnZWagAAeosP/igRxyk0lSaSdAyo/An4\nQdcZXJRe/8yadrjojcsMqjGmb9CIs1p5zP9uBVQ4S3onVTV3mlSYvp1CPa7P\nRfMzZDhRIztrG12+tf8MEO/rOQLKPJeAvKBO75VBPoGOK8Y2RLLlJd8nlMWM\nbrCKG4xb0wPhMuYxICfKDcT1PIk6Y36OpBR+WH0Jrxs1o1wU+dbCVK2PfhAw\noo5Syo2SYm70Y4GXfMx5NM8JJqzsGFEFxYBsT41GEtBwnqciRMC9prhhkWpK\nPaepp4iQPbqxtKbdlissA72a5s8AH1nrk7xjVpr1dshcT/cWE948WjQ0owNG\nFfY5SydSaGvjVxXSNmbh5tNKbrohdCxPNDlWYMxJA93yyiJ4/EgrZMiXfn+v\nkPaERRJ5zL8DpR7XJWbv+cjSANA1k6qXY/cDFedhk61ajWbLckjKd6nxQUr6\nO/+QGRxt6emXB7sMSeIG3OaT5mqA8NE5p66HwsbY8FtfVPl1xInmicogbD5c\nIFxP/qut2zPq5S2UPwODI5FPEwp3h5s7GKJ3XN+plsiiqeisqiMIBMZceq+y\nIYeMXgIK1sO6rkQYd2xZgHtRFW3aJeWTO2qRDs/kZDk5KJ1DfRJsLmCsFZvf\n1PBvTBTn8HYUNJqHjBouLL+39R1pbcEIJDQKTxz9rgMFU0hV62GBQFYrWDSK\nDgtU\r\n=SBlK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/density":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/touch-target":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.91d9d5a65.0_1581116388662_0.6898325872012252","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/radio","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb15bd2f418e03b37e04370d08b16ef30d1cea8b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.d5c006ed1.0.tgz","fileCount":37,"integrity":"sha512-j78MKC1vpO3pW1qfA9vyJvoEYjYKqXpws33IEmyqvOUJum5b4hqtZq2ddS0BsOO3RKrSbwP42q9kV304ETJS1Q==","signatures":[{"sig":"MEYCIQDAIWCGsJ4Edv9q6JjTO53wiGJ+tsl+dzHH2h9X62rIRgIhAO6Tghy4lDgAG0Wkt+AHzupxGa9vYxua+6WnHlqsNNU6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmGCRA9TVsSAnZWagAA2AIQAJ7Iln2p8COBU+4ZDin1\nCO8zYY3TttyO1ioEznBg8707JGsKKfoSbAjXcw8odfH2Vx+ETmWhk9vHlj/P\nAOraWkPCcVh1MmhlR4QI8tkqE0AOUo768m8qqpcVAlEaTQy7SXgsZihrgChQ\n7weVAdpwB8qCPnexo6OQ/l3+TfLkHpt35KmVlGpt/aVNd/hEVPE2ddk1sWUH\ntDOGzhybyZQ0YB6b+DFqqOwkSKbR8X3RHJWE/tR9d5OvJ93WQ6Y+tAkUgTXI\nwMc7H4yfV/RrwaT+DM1mW8MeuPzBK4Pd3IrLNOgeyCPIplpuW9r6P3nYwduS\n88g+cOAzWcauyh18NVH+0hUrOzm2FtJfPMCR0jql29S0IpQ6Gr2R2mpuOmLW\nvdV+8uoJxHCfciEOLJBUkCexbbZ97kagt0wmRts9IL0uCnmhvnFWoOrknSej\nq7avZc+V+5fRgrfjshXzqcix2/3VqVIuUQdZyX/3lPy1X42/buZbYzNKreX6\npHSZTTKLyimrzEhOx2uiKx6Hip5ogOiyS7B4r37jutmW6Q6zewVRquKQryOy\nb+lewAhfIc67BxQHhWt972sJ7b3Kk3oEF/8t8YaxfnY1L60arRLF9bghBWlV\nwdQq5mnheyaiq683Y3CEJvIdcN+zgIyFwYC4MLUoD/SeJosVX7F0CGiDj0yk\nkiVB\r\n=p2jh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/density":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/touch-target":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.d5c006ed1.0_1581353350262_0.760588012410544","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/radio","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"350ed00869ae51066767e3889cf971987dc3d018","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.559f1a570.0.tgz","fileCount":37,"integrity":"sha512-y3Jtr0llgc9nITpt7kd1ibg8iNmQ3qg+DNFvXxUe71Gt2c74OZvIr/0sAeVItcl0UeOHE6f3RtqbzC6tYVNxWQ==","signatures":[{"sig":"MEQCIELo0xlJ0rWjfDAezfnSjhjpd0DtaeeP6M0Dh0MeKbByAiAnGwGzLIcRwTca6hlqaZaaU0MyQ07kBGdQEglPlrNlJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIQCRA9TVsSAnZWagAA/GkP/09DAWbQJ9IjiakEXGi6\nW6emOZrpX8VzAuh8o4kwpMpgwTfmKZskcndiDMiSwLk2Qdn465WLRiwwfmT2\n/YpJ3MsLYevrDnMlsOT7qzLPINLIPD1cqhtZZTtUKCfbyRGPj2U197lMauL5\npsdKOKRQLa0UOzHrrplnrwdvSHgzgSts3as6GSEQny0IeCvkIc9kPXc+nqWN\nh+S7JLI9/4ElF6Oc1QK6N9dbS3dsDEj4s5jZ7iC8KhyRMY3PA4VfIj0hacwr\n6bwlhxgDlP7fWLT/daZstQAzcgcey6olRW/Mex/PTNOp96Mm9JCPWysb50e+\nCjuHkDm0p+8bY+gkLJI27C4iU6YDqgP2uwP2z6KxWFRcHSGXj8S/YGMTevof\nrAiDQRsWiiF2FMRkIermJTbQs1mhxDjeANu3Zi6VKjudVqNRa+CxJ/FN1bZF\njuIAl0QG14GzRN7K5ZOJ2BijU3ZkJgEsLCR+wULonZ53jBKsZdF86n3yR3ER\nhyzlCMSRs8lCul6NCwWe9ENtIM0enF7C00ZaNON3yzWj5kzw97ROheDR9fVz\nEoPwccO9sFSnDdpCdUJn0ZlrJFEQOX45Nuio6NWMLjxTRg8VchgupP5TOs0v\nqnXqZ9ucbPDBZEViCohXSdy/SP813jnQ5FTbuSUW4/gVzlTGdNXZwBSJKNZG\nkDzY\r\n=A+DJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/density":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/touch-target":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.559f1a570.0_1581355536090_0.7880937790670557","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/radio","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e243e438e193e0171d056f3eb048ca619019836","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.ad3bbf782.0.tgz","fileCount":37,"integrity":"sha512-YpAml/4OwhHc+Vi+bU4vUbeTyuk0Ec/KSOqB3vtyksQO4aw2NkGnMLPZdLX8OO+dE+7JBGEBPk9wl6i2m+vGQw==","signatures":[{"sig":"MEUCID+rU6iT4VJTRcGlbxytbKDvZVFXkJ5tWi//7xSsFR0eAiEA41RPgiiB6hZQQ0yw+zCcgLzTGZYRLuVeJu+be1Bm1nE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQar9CRA9TVsSAnZWagAA424P/jn4c36xzLdJV0GrDwWr\npIw94yVIqNoeVBBzl/mSBNfo17AXF5qcHO/QccQR9hPIRBXt998Ey0l0Msbo\n2tLRKpHQf43eKzoF3cYyhcHXromDbjdKDqBl15gH7L0OzGbSDmVPcBy+8MSZ\ng5k2Nyt6nwp0SArEGANC8hBZlaXavJapR3bv4JA8D2NZ7zeCBi38cXePVXZv\nGMYfe6mPeLXl6paKa74QHoNUtau+O4ISKH5qpyZ83ISWJJPSjuPf4TnqDza7\n1oDJgLSMCd1yhJbJLG6SMXT+1lXzqnN7r8PcLcC15hczmm5Svi2bTHE32SF5\n0TAPc6EMtMA6ePQ9WRNSRonEgD200mt0WJJxDl+VkHdalwvsZdLnv60g/X1V\nKZT/0lC6kNKkDZvqMe1Uz1gW2iM6oIftoVdH2icfqYkxkxlaVqxV34OD8/12\naOyhZDh5h0l88Co4ctVDeofSd/1ho2Odi0MUqKJdk6C/+x4xSj+NaFrd78eY\nDAgoED4OTYmLEPcbIsOo8qbju89u90eKEuC5a09SaCT2h7sUke/PN5pH6T9A\nas5IEa2mZ1m+jjm/1hyrKjKGoY6PoJktuVB6ek2zwWBh9Lzpfm6yZMbSuwA/\nBrce/8bCndzin2X3qMG7KsNE4vPSFdyCaEgDlzYe9x3juaFNJlKB6D620QMa\nr9FZ\r\n=AtFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/density":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/touch-target":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.ad3bbf782.0_1581361917272_0.9709134051745998","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/radio","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16f9fc2c8635663dc635594e4886c0becbc32c7c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.570d8e49c.0.tgz","fileCount":37,"integrity":"sha512-OedYx1TKlIF1GGAF4KEl+17aO2BnjfDrONG88eQqdEH4P1DeTx30Ob0vevtIiPhmon8fXtU1txYmMm3YZcoOZQ==","signatures":[{"sig":"MEYCIQDqIk4JQf9Goss43QYW+/ShI1zGL2zv92NDyF0WYvUOSwIhAPFl0KxfutLpx7ack0VTJDufxdhXCkyMJDDJsaeEn7SI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCGCRA9TVsSAnZWagAAqS4P/3TSyJjEYXpQQTmqK2Sa\nrUGeonnRq91wdZLrwaJO36bngj0n0OoKqgoVP03IfMD1MyP0ujD8ZHVqN+fy\n9FtZJtnilggILSSx5bB1A6U7jaiAOlLr3ML1BHYpdIFw7mhUe1ggnQNx6n/n\nGP97D3129eDwgY82r4bImXMoEnUn/xE+8MnTync6PgIdcnkif2WC0OpTKtRr\nkvBMxY/faAc9zHTK70JYF0TuY9aYeDIktII9cvxzLjVGEWqqVhNkT28iz+cT\nH0h9+BHcPdWgD/hl1mk92s1vyJULmwCACYHBppw3FnZpyT2/ZKwNscMNXSzN\ntObRR6Ju36CTTXxQ5P/d1ym4AeJJuqmPNQ+lafUxo6Lb7KEYLTOyDdSeyc4+\n3wmn/xbe+gDbqhClVRT+CdpvSTrTSRxedhTy+qAH76Wd65P1OQv0f5bhLI9q\nt++S+c2EVKrSl0zbiO7YFM83ihSh4UKaxgmDWVtH20eaHUJ5/uX3NhJYAXCK\n8edSPBH5Jc8/u5aJ8BYnaiQkukZhsXEWa5znPCLd0RZSG6tr1SHHEOtgMdPX\nDuIB2BAgMBky3Jqatwt3DPhykTWnawAP/toSMXGwr5951kduOjoF4XtTChj+\n9HER9bA+BBBNANbHgC6iiCjowFJejJGx6pvk5mSWQ0dvegsqZxIVZ/EwiWSV\nWTtL\r\n=EoqS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/density":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/touch-target":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.570d8e49c.0_1581367429213_0.421751506209751","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/radio","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95e05f8b3a594a2594a2b2befc28a6e001cdc5ec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.48b06b89a.0.tgz","fileCount":37,"integrity":"sha512-280hdINnR28H9oR4VkGywBoxTUQRfIrA3gCLyaEF3G3qiMmVtME4GTpAxQ8kg/+bqrKu/Q6CSo34rdi5Wn3C3w==","signatures":[{"sig":"MEYCIQDDsUSB9LzAOpcrTqhF+EUYDi+U/cHVUdUFoGbcb2sytgIhAMq5g69UWnJrRxBAIVj0L0/eBYhYgcJP3NpxRdXQ9jEH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXUCRA9TVsSAnZWagAA+50P/3A80RpC70ubMOuuMDmY\nDssGTxKJQRNiAq5BtVCnEMgDhv3nBJEMnpStPzxW38h4AlkpmPG3S2MGuU8D\n7MImFNx/8pk8Q3fDlvYXG+BFAOecT3KpUE8LDtlIni/HG4NII2RmrwEbxfiY\nmvgtAqrvOqV/oZnFGXvWvfqVCA49KoOp3GaMaVMnQNMW5AZEPGuMrYXJxiso\nteydz1+PE2lf6kF4MCflWW1e/JtNNMeVMo+S6YaqUpuXzeG3MlA9dm1rVByh\nzRO8/7d/efFsf641AbhRd28b2EiTQBK7RkywyqPbFIw/Xyw/+m7opV1RoFhT\ndcCfjLhvs1ucKRU06WwAx2bYKyZVQsrWqpT1WT1QpiZQZfThfn4mGS+iB3q+\nMiM9UcyR49HvQflQ49vn4SsJp9OALPAVMqJ9sO+rNbR4uWTrI0l6Pt9GmZUO\nRfR3YC0mrjRiKkJuFI9psmblC95IWcvh/DjZRbhPE68qjW7e5vl3UOKPfceb\nufEGCF+Z8JDpgUrb4JmfIBylvjX40hRZ5ze7I2MfBe+/diJQRcOvbLSJ54m5\nTzhQbrUMdyXkYesc1gG2IBgKmUU0WK/FzK+ydBe1vqy2ihJ2tqJBoDAj3tfg\n978FaXCrpY3nJDI6+fRcV9RpGwt+44a86aNX22b6BWSrD8BkVAclKyIWhCzw\nOge1\r\n=nM1y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/density":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/touch-target":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.48b06b89a.0_1581446612078_0.3125339916775254","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/radio","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f7d9edf4e8a72cbd3c5a73c1397a03edad685e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.612443dfb.0.tgz","fileCount":37,"integrity":"sha512-9ExGR92gjUnKP6zTW/skcBImwGih/+byLXHi02xwsTQr3ZJv6VX21m48W6Ch222749dpaETmDf23wEu5uO1pUQ==","signatures":[{"sig":"MEYCIQDf2jsz3uBZQrIvVFlao0SK+TYjFkZE71fswzGapXu+OgIhAL4wSrEEHaDpxXfyo5s98GhPlmWQNE1J31C3fhURYk+c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwVOCRA9TVsSAnZWagAAVD4P/2LJOSmOLOdjxkQzBwrH\n6ga4l5T1d+Pi05Eczg/Sh4bg6+pk5cS+Pes86MCmzZU4MdZQvA2ks1bvmtR9\nAQ660q4Tpo3xwWR8rSYE+td17uEUHucgMyv49DYJNClz/ULqNqWeXgOX+l5Y\n1oI58IjaJTFoqn5REf0G7KAxemPdI97fAHs05HJYKRrXFrclZ2LsxKMIYlpf\nk43yWtT1CQmk5jLtGbH+N63DLg+NMn+sv8KhDQe6aSbJuB/ZMtMmzlm79nC6\nASXQmTZEQJrEC8ZTxIdWd5/JUk77jtIlFAQCmetG9yiUSuAL1ERLIL4xVUuF\nHdNLGDXan0qwjdq0uphOAMOZEYgeZjIt+J9DRrlQN/x84bbLniuQu4bht4e/\nDxS4csi4aq/UeprSkZY4gkGNV1MMpOBbfiXCLaI2q0ldBFxXHg07rgOPCpI/\nkIjWFcIp471444gM+CbaUuDIDy/+nOPdHqX7hF7FBzovMLEdLlapehDNCyP7\nmnyphohxKYvkus11EoAMlM6TqGhi/B8wm7KrpshtdPY6BjXTsIStzd1NsSau\nvnCsq5Ic0w/GQrUcih8fJ6dVFJcJXg/fEcb7alIRCZyk2p/q4mI+e6377mZ3\njw4mTTZye//Hd6QG8sps+IhDqZg7Nuj5jqvaq/BOZMBN3MBdJYthDlO3RCFP\nNDZJ\r\n=VkDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/density":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/touch-target":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.612443dfb.0_1581450574036_0.10602142935665904","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/radio","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a413c99996631f5f419d28bf9c4ba4720759efc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":37,"integrity":"sha512-Gu6SJ+V2vtq3kfZCmxKgERDXZYtPDTBzkaS0vaAXk4j1cSMGWCPqHksKSSpMjcCkTfosXhs63QN4VGKxio5NLQ==","signatures":[{"sig":"MEYCIQDf2mBFMSCXaFjPrOThz75+v03LwZ8N2PtUf2XmVNORfgIhAL4dln0/29PJG+/GRiy9iaW/BgBdG44B19wQKjdJfqre","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yuCRA9TVsSAnZWagAAKL0P/19CfOFEhChue79TBEG3\n2LgEwXZwbFkfL9fgOsN315RA2s/pyYg/lzIHzHZrnv7rt10Q33WF5Gg9LrCR\njZU3ky1s8+knbykkpoILOHz7cwmO/ue/GVT1HQbp4jUcXywbiTdBYNOqiwU7\n0yjCPuEVN4UnpJQl+wjJ0tDutQB/fyCMHyFe9ttHS/Ie+cTgROuXX2qWABOa\naHR8kWvDwjX1GpvgKdUddXQo4MDHz9vBxvuYx1wkjshvZXtTT/Z5mXpCmWqc\nJf5sA5s3F//NWXS8wvrc/V1wHj8R/OCqjWvW7ui+V99sDkQXzzHfKTZuJ5A8\nJmPV/6sB/+7nnwvypJ17Csx6Wij8MKishvpGYJOnfOIgXCfL9enTT5wWnpJm\nhZHIYSbABoLCAQV7ChDb/3t+gSQBB8qZQu6KKPX7V1WioWD7nrQg+8XDtxrI\nyWk8v0ml/p5cUmLByf+ZbfkLXcan2CLcJyjOOPSRwmdP1WOkWXvvoIw8hAwm\nyMdixTNVSAR3FgRHcj4l1HQB+yQC3B0JFllZsDUptsBu1JJbR82i6vRRN6Oo\nB0yzvBXWOv4FGc6FrKwO87YMBPSS5RZbYtZj/TCy+UK7RpmYA2iT3XYCKnAC\nv4FQwVOpK3qPRN9RjJ3bMCUDrD0kKf9fD9NGTW5zx+UyJczIQ8lqihcoYslw\nko84\r\n=Xpwy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/density":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/touch-target":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.8c11ea2a3.0_1581497517800_0.16796047184687568","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/radio","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c07bdfea1394422217a3b8ac6f1fc82fc211b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.b2f3d311e.0.tgz","fileCount":36,"integrity":"sha512-1ckggmxUVwEfJsCNkN6EKEAf8z3HYIKqOKubwzdReXzukRs8FtHOZYD7grl/H7WsBX2L50RXVi0Bt29ZrkFH6w==","signatures":[{"sig":"MEUCIE9W8ZmwM90fiHZ4z4ulzBfotfE0Qp7Vu98VttW3/fNEAiEApiwQMP1EduH2AZO7TTftorxtJ1VTDc1kj7WT9gAxX/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMnCRA9TVsSAnZWagAAX1EP/jRa6TgqUiVStVgPQgqA\n56F7u7AMKTKub+4GmgWs4MWUzCl3WkvOp625HzARR/ivPYgtOW77uR23teBE\nRMc24j61eEW9zfA9VXNhnDMNPH3TDCN4Yybnu2oDbQjrQYvlBlueAirhetBZ\nKfhBQNNvD3h1ATD2LmaDnyn5TbWFYpRVQF6JPEzF/2y+0AtQ6lRF4qSIhmWx\nRS8SI7Aah0vJX+mXL1c1ppASz6PgRIJ3vuyfIbOy78DupuK3f8JUvvgQLvFu\nk6MSJVCqsjAAfjCYqTnMdwTrXin1Kf5ow3uEU5P9NkzhA/P9FZ1rHKetTDAz\nniwn2dlvTAahaDMzenpgL0fLT9J1DvfN6rqUg871Idu0VArKpgIC1TyOWBdc\nWWdH6GeWZdf7xpkYjY6X3aENg1+rNWthZVp0pG0WNfSPdQLWLVZPhiPeUlkQ\ntKp1Ev3j3hXVltHQLuq+Stc3gd5mNL7imrH75u1pFsDWHqQk40NbT7IvQiGs\ns33OeZNaAcLCem5pGnAz7FE9PLLPk75DLGuAN9isF7qNqsgKHsj+JPgAZCwU\ny4cfk5ZqEoO4QBxEf7kCX1LntUaqHeEjy0GihOypYZXwNcn3d4oZGbOETwFE\ncM6eyc6gAAFs8h1uBuX7ikS1jNEJFQqiVCswGmQgM9TGJgE+lbsdYGvScKsx\ntWTB\r\n=94Pe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/density":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/touch-target":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.b2f3d311e.0_1581630247025_0.6062592826055591","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/radio","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a4e1fe9f613308f189f40ac8088359a4976085","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0-canary.4f488d0ee.0.tgz","fileCount":36,"integrity":"sha512-jaQCQxK9X9Lvp4fxOSkvl1BnK3+L6j4RFGIkDDP+ZRYhzoRVDFIPMPG3b4QqbuJPcNZpwAvMI7r/XPbw+GQC2w==","signatures":[{"sig":"MEUCIQD0Si1GCfZJMzgES/ayfl5/knqo3J+tabDd6B7uCabsqQIgfRiKTg69jqQ7Fu/X2m+pEkLP5X217/RsTVKEOBbFTcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZ6CRA9TVsSAnZWagAAbRkP/jCg9+9XOoU4+NOKVmL3\nSWwavDsovkDPGYcsMtlfM5jQ6RdPTS89zo3X1Wtx1Dl7KUyhwfRVcdtDs8wT\ndicMOPDzNzhUro+y20XcpSW1D+aaG9Sd7fOikUsp0inePzr5388q7SvPjbiz\nvCOX4sFFKif8VDNLWkegDMJbPfb4/TmeefF7H9ymoolYjN2RECTCR9GEOPKi\nGUn7qTD6n8/9R5147clITzha+L//hub/cx+tBw73OUEx2dQ1SSSfKH8ROocB\npu3+4ZHdo7MFyD+ngVPrqLbt8VuCv3T7DBxU32LTVCqa6cyF+K9Zq6AVPUxZ\neuSi6McOPFKrdD7m41dhjzqcua7+I4B+PGWR4isy1PJUjMh/o55jGo8HeH7G\nvcFrSThKdAG0Mnl2dRySxcT9yNa7+Sbd5HY1/xQgS1VzbFxGB0BY4xTloggk\nZXZP+GfZIQGH4TlC8OQ0F+p1VnxFGGmzERdm1slO77Rmy6k81mvoiXDGA6hv\n/WuuUSKYPuLBPSvAfR6FbTe7bUMBqUompDcPxWfWA8Wu+N9cfFB4PNJmO2OS\n8hGEoVPN6K/msK0T5UErAYlqixBDgmg8/0dDu1JqE8My7tNc/lR3c0lbDMw2\nqNBQJo6RhSeq/2SoLlhfVDd5NpWjF154LRC8Q5uLMfifUVXPf2JtdON/DBDp\nn9oF\r\n=hjXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/density":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/touch-target":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0-canary.4f488d0ee.0_1581635194350_0.43624001811922053","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/radio","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1de36134167220c90a6fd07ff9dc4012c3ac46ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.fe79de07d.0.tgz","fileCount":36,"integrity":"sha512-5yL4YptGD5i8RBtXqQUdjW9tUxWj0IOs0VHciH5juvQeyuSUVrCPQTTKpHFL2gtCEnEmNE9A7JI0Gn3q73KfgQ==","signatures":[{"sig":"MEUCIHQ6qtPRejyzb/fyp2uIKVhP7QTmGMopE+M5Bydv14hiAiEA5JGydd5g7GQVx0r8oFdnrkYRAwf9BglLukh/8aiNlpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqSCRA9TVsSAnZWagAApQ0P/2FVZ3RLFs2YFG83mkAo\nyLEUVEkNJDFOI97D8Tpg5dWFXuxwCFqSkWFPUFjL1NoQbHBDooHu22xWl8qy\nm0A0QR746tkaYVtegDhnHeLu4uEVRC6YU3lq++GQBrkrhV4FLMiO8ilutcPZ\nDaw4al39YGZT38bBiksq8lpZlr66UHRCRaErd+XuFTnMIOabvdMl/hHedjuq\nD/EgAAL4TThDLr9ETNX2jHqCkUEm389yulH0i6asWZxjtiGcELNPwqfV/o9B\n50Z4Ng7bjlOaF++dPmzxdfbAGWrz6F7mb3Aecghgu+vC+mDpcQNiKttTksW1\ni2i+LVd+SX/cz1iYpMDBm13aPZU6a+gOuJ4tZM/hy5YLQ+uAlacYAXpyFOAw\nYZTKzsooXaQjnULnmopVDsC5wlp7jG4YcI/fbznKTuERprYR2MEG7LhIjOYm\n0HyHktAQwtMCJPcvn0IyBSn8mrkMyYwB0bJsfDu1FUiBQPW3/KIvwLyTqcLt\nNyghCZs37fwGdVzdvmUBoLvEt4Xy6PmKuwibPrhh97j7tDWl1GUSwSqRFV4j\nG8RE7yEEcKUvaABvgON5eWateMaESpAwMmvMotBeZgTps2AHwF1QYVrQalsN\nknH/t6+95Zh5V3OPaiQzM5vWMqieD34dszvhUnVIfU/DgRX2wYj5sJ8jxUUZ\nuttE\r\n=a4QT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/density":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/touch-target":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.fe79de07d.0_1581636242286_0.008590492168110364","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/radio","version":"5.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26da6a9c1f22721834791b1361451a9707a6b305","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.0.0.tgz","fileCount":35,"integrity":"sha512-G69yTT0RyguyWxy9fczr5x/NlkIibY8JkrywAvohIZ3C8Cfd6CAJze1uF+cjbM4cmDTkhHSYoehWdwQ0Zq4KYA==","signatures":[{"sig":"MEUCIQD0tWJfyU2fvKmRgbQPv0M0tfmX+WFzTBds/wi8GDzjyQIgYXXORQUkaEFQ+03Pmqg5rYxK9Q8da9Oz+y63216dJR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":381729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUtCRA9TVsSAnZWagAAlzgP/3pN9atyHcHf0VAGWf32\ntqEt1ukGdUWEYyOpT/RY5bKTUyrmsxomPge1dLD4arcIEyujIINR8LrMNWB2\n3LBqcqV9e6c84LLtiOU8mice8I+C5dLgJtALOQ8UGa1X1+pcmBIP10KKmvx3\nisYN1IqL7xv4hfGQ3bBTmu8jLKg1B9PuzfbiFO1q8jPsExmzi4f3h/2SAwT4\nWckB5SRgY/JNMGNLmGmhIeZNypIgbG/O+4UUU/LECz4qyUAQqJTuWJaaaHrG\nOk0NhYEpi9iizhpyfue+LUQOinXvQ27WSxyj1XDegCyknutnJguqawJ/tek3\n1qoPTyk9kV+Md+DnPvwzdvSQP1fLEBlDPgtu+ousMJ0So8Z8Vkkd6BP+xzWz\n5VjClqqmz1XPIxc7GMNl4T6ZuyE8RQ60u65DrcQRgVvDzwGMwnETT0THGGlo\nVfWQoxNFMqD1VNTCSXMac01COtf4giFWjFr6Xw7mAfa16t+U1hHm1Vc+Twxj\nG00hTeLtX8WKslndn2gbcrHCNRjDL0NNi92P9inUW4rI3gwcklY20Dwu6X/8\nZSUTgiON111SSHbONPkyD4d8xmVvpYhtRwWHNFVJ1X7P2a86B2MZpADiWoU8\nJ4KmaI7pcPwwEU8B+VXeoaPmFoZMLxVDMVFt15/+GvS/xaDOJY3nIyQJXcWL\nssUe\r\n=lakb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/density":"^5.0.0","@material/animation":"^5.0.0","@material/touch-target":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_5.0.0_1581638956582_0.19708920742385172","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/radio","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c852f0836fc4e455dd0c3a199b925d0f315a7f1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.5e313b1f2.0.tgz","fileCount":36,"integrity":"sha512-lkcBmHRqypqcK+wUX9jFIvjfLWKlb03MemxVTwr3b+ZS6MRb2IG5vN3c0upkaq/rPw0KXbSlo7JmDyU4JTHVWQ==","signatures":[{"sig":"MEUCICvJIwiawuK+gCWFNbLz0BIwxmmRU50XzBOjR6dir5oSAiEAqd1v64kKcC8oIL98nz6yjt7kr8bIhfCz7BCouK6binU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHQCRA9TVsSAnZWagAA60QP/0Q/aXSXcVhwWMsBpTJv\n9+NOedCni9Rid3WxtIlEsUKpYqZCEXDK66E9ZStbD6YmOJjH6m4UZpWE/1Z+\n77Eye7uHZqRDIekWptV2MRQb6rIGbtjEtoDbCFqrdUBc7ppZ35v/LkoS+Lht\ngvnLxxdR+JVNfP2ajELidwcwEp9Olx9q9+66VTbD0iQtiDttc2LIY6hNcIaK\nEX4CXqUUum+T2DslYaL7I+MM+KwYxYrFZ7iH2J1dGqIwxEvfBhvT/iYo4rWO\nOsP9AQAUGWPHfp0IOuxIrqnsD3ZHuG3bMRYKIuOtYTxG2TzTme6XII6FV+/d\n4ioXHeSgwihappZJN+BbwjrX27mwCH1RUcAaikLnszHGZIFypY/RUwA8dBi6\nMooWtdE11cAKCJ2aldBx9mw0KZM8ojeZCKrXGyt8JJ4Q/dzXRjXUBivbI9vL\nemtOu/W3iaVMayJEi+H/c67GUp8z6Zf2/kIf/btjRySX5lXFeUMLvbLHh5Oz\nAjQYlF/tNMftdbmlIVI6AOSYY9h6WOYT2ngycBes6VzLPSIHwRBi+GwcZ8RM\nPDzomN/1MysWMpSYXne8AK6mSzWIF2QwQyHSTE5DozcFASYJt+PfpgjEfcdO\nFD8C7tCGSUZ0si55p2nHOre5hBsJyVQzcmOnasEY641mWEGzqAI+P6VOAcXk\nRn+T\r\n=aZBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/density":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/touch-target":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.5e313b1f2.0_1581724112034_0.43082469930561595","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/radio","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2e84bb004367d42d4b6bb8ce552e8796bf1d4f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6a56f387c.0.tgz","fileCount":36,"integrity":"sha512-DgStuBb4LX9BC1t9bjKme7iFotTIb0SolVJJCVci0zUCouvA9SBUgBgcdbkQRjx1X1ghV3zxU64TApPGmlpxOw==","signatures":[{"sig":"MEUCIBc1ZMQkFXGOhNAqm0aPNpgruJuyB7U3HGEV9vsE/8tDAiEAr8tdTroukca5K0L0lwaFdPWY3hna48dM9Fs+3spWwes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD50CRA9TVsSAnZWagAAYAIP/j2J4xZHBi37VSA+Dm1f\nXmUIQEUx95Vx7EeNS6vJrIEeXNMWfJyxJiFQGXLL5oYEH3V0HqtIG+2Jg/LP\n6CcNrrl81Ja9mR96VuzphGReWA88K8oPus2a4ZYoCx5YYP3oGJtJ6IPhLQ9z\n0VI4/HWl9R+QfJ3vDoaAn1q8S0oV+hKYRcxnRRAFXAmi2+VseUQJlx8zPdp8\nIpDEPIUj8/pHpbWUe8sZAwbpBxeCns8edjQoXe5t6AsJIXiyPja5BcPFINoD\nkK+xyp7M6AV9vxLnUQoKAcDJzMSP4YS8/Yq9rJFX0FU0FCBROwmRY4cTyRq0\nhbqjNQiR8MOoSNCnSQBYxUein/xG+DBlaNnKYMh4UuJtmauQiVJGCDiH/tgA\nbBk0r8qZvVbqPLDXz/gvNgKO7Fwi8wXvt9lSNcI5O5GckT8dMN6cdxyLb71Z\nE8YGRDsiad/d+N5VQCVwtUu6E/IqFzg2Xap5VfhoEw9bSLta/TtAkn0qZN6r\nPUA9djmLyV7ntHM07TzjXM0BgwCrmjzcgHztLDcAKisT+18PyG0iGSGUFHvY\nkAkuiytpZqdMKW+u/rTE+aW5MnHwCi43c53xFSom5yAeAWy6Vx0VKepNqWVE\nI/BF6kZlRyasgJzbwhXRgoBPsyQ7LdVtFZCNjFZvEzxwzulO0PGncV7CNFsh\n+8wm\r\n=tBI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/density":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/touch-target":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6a56f387c.0_1582055028015_0.08870333587833645","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/radio","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60735817eb7534b256794e9488598171c04174f6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.bdfd52632.0.tgz","fileCount":36,"integrity":"sha512-UbbnYDo4mSKkqTfFuP+ikKzRHeTFVGTwoBEH63Ene9Qc/37KVgsUV0Ukek3mqbaOcSR3i7tU9pF5DMZTBRiaug==","signatures":[{"sig":"MEYCIQD96V4FVM6MC1DTDPxC6qLzbzB5/qgTjWJ7M9bJnnCg6AIhANeVje215NLhhB0WRddUmgg+KswCS/Lt56Q30rQggWNy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkMCRA9TVsSAnZWagAAMZEP/3hNAJxwyeFiwq5RU4UO\nqW9g2kJZzq7udbmaUxfye3EaPr2PhDJcagncMlxmybjeo1lFOHAVl0+Jv6j0\npSbn8MTgvgQhm4de1rKfNTdTmAZCQsQ6kVP4zMzCTrcocd3NlpJaASmQohK9\nPZAQbp/rKg6X0Anu/RQSgNY7G0wF8qABp0itapW49NHRTztBL09nWbXz2vBj\ndDTNJYAc93U7c+JjPN3ygu6yUqlkDww2c/aT0eXxsC8z6C+QA1SDg3CwVzyt\nOvmcbYEVJr8U4O7qi6LKP+ZDZm2JfWHkZ4+Su8DcoaNqNhm4XIct220z0k5u\n+UCl6tsCC+Ip5aJi80R2nDA8uO47utHfl3gWvFd2FozGzijaOrcXAiynFg1a\ng2gTmsNnv7HlWuIfeZnAtDmdmkVOyER5dvwLmck/VbVTMyYvnLvTtvSAUw7V\ntQd8O96TULtGYxVJG7KCXTEEs++/VQMpFAfghv+Em64SHdwxjXtV5XDdUjLb\n/yctgLdrKc5fsESgDcsm+odMCl/DfHv3CQOkw4FMlJmIg9omr/MF5v89/xOw\n7kLWWd+BS1hCnDdrVAOvrW9v2Xwt+wBm/vhNDQNkLDJ6Wakfnfg1bwyRKDCM\nYQSV1xaOCG9luqS4iKebNEc57nGGm05cR8+RFaJXbZNz1KRnSi6UNvQYRoF5\nKgxV\r\n=KS73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/density":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/touch-target":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.bdfd52632.0_1582143756270_0.5379279023132684","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/radio","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8254088dc0e486f6ed68447fa7d651748c9b9e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.ad2e4376a.0.tgz","fileCount":36,"integrity":"sha512-qznyXGfZ0dxdh0Vfnkvo1RjCAdRFWWNsybA1ACeCsGik+rPW+NDOX4n4pldQualKhJ5K01JwnzvVKLRmLjonZQ==","signatures":[{"sig":"MEQCIELN6CPiRFiF4wo103PqrzGW5zyTbkKRXj6g+nblgF4EAiBrA+Bvj7G4D368GONsDv3MupptzO+9Cgyd44hxYLcVvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxM8CRA9TVsSAnZWagAAMcAP/1e3BiLe3JxT7SJUnx6u\nzmVBFRLsBa09tCYb61ncTQ6bl3FhYDFf4endqT2b7t16HyYvyVfbTiorIdCH\nCYUlRMsMNOFqgYpIOoLKixX+xzGyltWiYVqe3v90uyK6DYoGryTohffcUa1A\nRAjTfnyIMBbBpmx4TaQN0JVrPnGAcW4SCRqp1eKMrVJLN7/OwZ7cxux88JpN\nZyLeVi+Sut1ExqqLdndvGQ4IgDm4+b+jiF21ITA0+vm2reN8aAz3ku9zebec\nWpNGCU4UAQXkxPQdtxgLIL5GEpJVrkg/07NMeoeJYUUk2+WYkiN7WaMbYYMO\n7b7V+wPdwy0yHllzFY1JDLfA308HZdmmdKBr30UCAp7L9GZi065773ntCMTR\nk6Prl8EbFjj9KWz6ZEMxA5mqZSqeaPE+Uzf9v4u6e40R9+5NLowpKHiMQI7C\nLzmZU1TNuLksoZU24OmuLtYdCJ7gYxl28bpHp+M32lAKfFNbna5bw0Wupxpe\nsN6Zn48A+KYOIBx2LaT3NfcjhfP6rB9zTYxwG8Ga+H6rQPy1YzbMk71BfNT9\nK2CIM2SNLqOIVgXNuBCcodMaX4ZodMcSNO5eDXldu8vt3HAe2YTXhRFqbcxv\n2tYrov/G5JIbmSs89kqmDxSH6Cu6HNjPJ8bvo0Le+qgzy3VvoBa3MN/pBomI\nzAiM\r\n=r6bM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/density":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/touch-target":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.ad2e4376a.0_1582240572285_0.7394412100653243","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/radio","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b99863e375475037c671c567216a9baaf871a263","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.765caef18.0.tgz","fileCount":36,"integrity":"sha512-IPPCnDnjzJQYGAhsVUcWhgm/OqxND85jNi2pNax1zOvgjvyLBOKUnXcTR1yE7tYMH2cto7X6sAXHs20txI9Log==","signatures":[{"sig":"MEQCICmjzdiOmcRbkBUU3vv4tE0olTXpGeK15BckHsm/Zr2FAiBlZdya0NRtIhon91EDKy1JsrzF6p9a3HYBzS+GThIWUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRKCRA9TVsSAnZWagAAMRcP/jQkT3n/8W6a3g30y6x5\nQAMyVHaamgZk3vvuan7KbcbkZ/+u/7rl9Q0IU+baOk5Pr/9xRjU2t6gsfIti\nHFQ4BLWn0Zl4lF64UotEwemBHAFXDvGkc8ic4tgfnSIUhBLaLxpm638yuXX3\neLUOkk6PKZIGzE+8B+vYyq96g8gBoVbhse2uIXFFrRkcmEjuVEM6dh5X01lY\nt78GXFni2bAL89lZZWWzksYB5D54k5LJjiOtVu0LRgPxaN1df4rfcwfpIt8R\nZkRqmWYKFyEQV7OvV1vN1s7W8uYHny/zB5AzBY2HdkbJDM3PF5bxUEG8hB1Q\n9pMmgfCl2D0z5uljzsfhQGfOAl1yT1Kr9YZlh0css5vjkQ/qzKl/NHK41XeN\n7Nv2U0eOOP6vWkme4fMXHq/vIrQlKdlQZ/ccEhi+Ni/sjfS8hL/TI7CYwzbb\nlJkwnQ/sBr2YC8hM4Gx010U+xDaRAYiqi8PY1s/8xEsKKVLQgj4gz0sDLBeY\n+F36bEPUNd6so/MZXtBSCycZ5iOtGcQVkuklK4kPgmMADWtCPtAw91Tk4awD\n83qijyXeMW8vHpIW/FSKVgLIuHJKAMGzoGstQS0Dra3P7Q1dpFXDiTHM0Izk\ndHNXAZyMmG3TjvSyNo0M4iLm+6rE8RMdvlGK4u5N6B0yHc/YPCgrD560gaum\nibym\r\n=P0ar\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/density":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/touch-target":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.765caef18.0_1582306378308_0.4349109016622572","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/radio","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7209eaf1ae99bbb47f9c0a972f12bf2fbfb0231","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.949562303.0.tgz","fileCount":36,"integrity":"sha512-OuZl4edLK3CrU1RdbpZzl1TiYaiBTwm8jyDmfXStSVx4LemIGuqGYMHecJ12Qvtq1aEbFxWB96FpttwJT7UQsg==","signatures":[{"sig":"MEQCIHXFsvaVIEGmkWC2RkrObbh/3sOjk36WY7X4w7pq/uTIAiAavFbZdWnz2rFZOYhGuFYWYvnlxbhnomDlp4URFGNw7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+aCRA9TVsSAnZWagAAtRsP/RkOmUW6f/I2//gmy5iS\nchabT+yWAeDpU0Lb+zdUDDry8SHDHvlgachOItQvxM6pnQsJfXr80TebjZCJ\nxMfrUnf/O9LRGvnbhFMAe5A0w+jIDuqYnyNnRvWHkzMyxeh4/AzguH/jg64P\nLPrFA6HOd1r/qzNzlDPqVW2F2h1l8BxqQkmRL4pKgbfPOxrHp89gA4vMM8tO\nRFVSM8/MFCSepMgkF/ZvMTVTG/bn33VHj/7/ooEo++TGcGilvHy7YdkeGsUc\nMX8+4fAR0WZlTfbLy30+Yl8ufIVO1k0x5DIIZ+V88spxlm477ggvxSi0B27x\n8Atc6Y+IuGRNkz0T65NEarSACS+mnUB/1mrmnnrz5gS6uLBcpwGUFNW3lfnM\nYK+1snFtAvQetePXQ+7F2zzTLPR1smgRA8iAp2WPaxFlwiNmMu/8IQFsCY0L\n4ovjVZe906wcaUfjC5eyUt85eVfWQfelNSWGUr8Wi7QChlw6S4KOzvG/8A/+\nSNTtedSYTtvHsmClx5fy5EFkiBsPxQUPZr5kW5YlEQ/AP0lDGxd7uBvPK3i8\nhvgVDoQCAMr0ZkrxzGJCqewg6AK79oyI83aRs/cRzRZVbPmFVpMJC0OA6Ybe\nFuL0PsMQo0CpWYQxSio5OXoJFEOhGAHcdqPhVk9k+m2Yqy752sYMCVxiFEOa\nkHgH\r\n=43P3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/density":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/touch-target":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.949562303.0_1582317466426_0.7202427984733508","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/radio","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df6dd81d9985acc9e2603e8fe15b50b47efa323c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.7ec96974e.0.tgz","fileCount":36,"integrity":"sha512-3nuSu41bhkwZrMH6ZdMRu8vkTabQMdXhkGGMHQPpfbwRi7/MqQ70YdwSKSS8KwYTeETADwP8DATPE2MCLOQIfQ==","signatures":[{"sig":"MEQCIBpoGDlaob3oPjEIUBIQHVcy0h+woJhocR7uEf7jfuW8AiBBGQ7O1PHacyx43GdcuxpULs3sDerWnW6ouERs4Je7UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzACRA9TVsSAnZWagAA8QsP/A4k8kXEmB8XpnotV2ys\nO2ZF/Diq57fxGjKNb+1v/T3QpLfQGGHTwv/35mFZUfXZd5t2BVudnMExIRO9\nR4IToz0D+rn2z/8w3SEjcckV4+R5VPl2cyGsGri15/fK/Nwu4dS6FCcdaQPR\nABALN17doUq01igCHqZ5ZH+Lsb0pEK7i96T8n3dEdQ/aSiamIjCWXGNSOsOR\nt/vBITMo80IlcsIuotrkCiotHdyBOtk/5RfPJDKgePbw5quzlO+6TvrQxZso\nZkdIYZ1okrhvGfks4q4Qq3lw+hdFn/ToZFvsuF0LZaUVBmyzLUQLV4FlRcy8\nv+K/Y5f6ZQGqjhRI0IRMwLMBgJHNsHcIU6NWc/S7SGTDmy5m2z1yB7h0LEO6\nKHp1JsjFsO6O5tN1BmaiTuIHh4nIzeJHB2K1JX8VxrmpTlhupmF0XHKhITPJ\n/8OLpDNr46xR1apEYiTHouiFuQWH99ZDIeV2dIy7uG/RN+qkRuoe9H5cpN9U\nzxnRtqdqrxLDS4mGIXb3E12tzYKLKpkiRQvmZXDuKTiGMggL+OrorFmT45kf\n9ArfBjacDns/B3qmc6qmrEpeF+ASrEZM2Pv7KumwuBy4kgiEC06151cl0YNo\n9BDaSs2jNnViCcrGhmbylPEa+lkKmNUY9949FmQZLF6aOWGbf/3babKNFRam\noKTp\r\n=mEbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/density":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/touch-target":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.7ec96974e.0_1582570688488_0.5939409286758504","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/radio","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de26bb674aad19382ccee323a48847285e94540","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.265ecbad5.0.tgz","fileCount":36,"integrity":"sha512-Bs10EZ0Uw34SVHZblDk0cn6QtxlzEwzCEfEpyvkUxeRZD4u9O+KlQCpdpnuqRbkX5F9UrjFgj2zP9Xzu/lm9hA==","signatures":[{"sig":"MEQCIFqxKsrtQUpqyGEUNcbG35CccxIYhjozzyihWk0AiGsHAiAHJGNlbPOS7wEpxp876dmh5BayIOSzkCRUnqMht98egw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsACRA9TVsSAnZWagAAJrYQAJPS2e7ypav5TMUzR/Ak\nwtQic6LfYRO+KhtqpySXrRUUsgF+1fkZa8HHJmGoXOUyMvuitzFhwPrablU1\n/CYBiM7YgPLPfhyt+KI0riZY8yHgPYGq19CslHYnpGqrysWerqoaDz7HpuC8\nPEnw4JkscT6OCEyegCMfzCrSyk4D556ONrQn7f0SIAuzJi/T3I+4xM5uM52+\naji1sQ4S5JaZmQN8WWMyGFLHMi8X9MSzXua1gUtaNT/QLKh5nespcl0VuBTV\n+u03hS63hsF3F1e0WRAiZZk7VSVH0bQq0JN79+l+HMT+yItlXfophYLBg5V3\nluctRSBEqqsHZMPjCfOcOa+UqTPclzupfM0d9u9lvX7tK0YYZgiHgNyYDqdj\nJWwWyAE+vGvY3v4glg+kGkvV6Jpk/qvn7TwSuvx9u2trjwSYbV8kBlttbpAQ\nwyl9F7osW0IApgHvTIcHpG9goNJT01NR1DVPA6t+HgJ6R36Xz9amJhC/4hgq\njHI4z9zVRSODRtPosi0g7yBnJoXjaclPt9YCckbjR2ac4whdNqOZA8w+s/cl\nHZ3py/zjXXoieTbry70hF0L/w1wn4xiAe7ShnJNgOLolQUvmeRzOby3c4b06\nbA9guhWg9a5cjFnPWIMAFMVXCmqeUGVXHAWvwihPlbFuopJXnbIqQP1IPSbT\nZ0iw\r\n=BOCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/density":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/touch-target":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.265ecbad5.0_1582664448386_0.8311689587439501","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/radio","version":"5.1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4220369fe89c2cee8a9549b505d857a6efc6108c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-5.1.0.tgz","fileCount":35,"integrity":"sha512-srAchlY1TKkmQAdMHqbP9vLkN7gmiWX6FGzArgKomd6Es8OqF2P3jvPcQizqz4OFYZIMrxARdW6r8QvhG0lZEg==","signatures":[{"sig":"MEYCIQDPs/l6/Vc6Y82O8W7jkTr13iJZrAVnoRLLhhnl6DWLlQIhAIKPX77VY7dPwN+SoGoXE6WQMphAEVA/ARUH6OgPnt+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":381729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPACRA9TVsSAnZWagAAtj8P/AgcS7/NbOOQCxo+PThy\n0PEk6aCK5ckk+hTtwSW13TZe4AfGlU3Ojf3El/YiH/kio+MVJPb5pq82fvY2\nwO/ll7TrrFUiZxLfPrHJfvGDtmJBTAWksBo3nAJaOUGsGWB75bP50vns97iY\nd+R7UtlSD93+CFShQFASYHVnPAmONvKUlzcaXBK9shHhSbKpOZPKIZ78+qyO\nsQl+Ms+ikXhnz87phA071fXaPtOqNlBy4Q6VMdml8mjcQPwtF968D+kyxk4y\niBLzsL5wwudhs7NUqV+v84iTYU5Egv6MbFW6ZJYu+hYhfA9UEIjAwjBF6je9\nqiI8g14kV9dF185z7MuydodGHmc3OMlCR3BaOkhYRK4yuJVASVccEfITp1LG\nbYYJbNAusn8YLTHfKR5nZc0+X+c8avt0RXGFpJ2C8L//phtX5wCALnDuiFCg\nlWea3t0M1UZh/6FKyJyHmmxcpn7dxvL6rKWTD/lc2his4rgeiW7yXfb6WYeB\nj4AoSlRzana150jn8G7AyiyAqPv3kHk3IR0qxwAOhqPhum7B5kyag8WvaXZw\ncpJsH41UAZiZIKMe2vgxGauY6FV5aAtkByygVSWOo7MF9nmuuQfthZIlgQm2\nSKSGdy/crthg5JSBCRG3yMRx7RIvdDoNybHlp/QRwTT+QIhbARxQ9wk3P+jm\nkcq9\r\n=ilZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/density":"^5.1.0","@material/animation":"^5.1.0","@material/touch-target":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_5.1.0_1582666688215_0.28328844959384325","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/radio","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96c36af7c550e9c019d7fc09d9ccdb65207633c4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.2cf87456f.0.tgz","fileCount":36,"integrity":"sha512-Jrt7QxMb6u5gcj/a4FDHm+qG/lLl/Ij4CoiyaMDuMqXOmk8wcNQZYZ4aNf+cV9dzm0WL7uHpfg3tgrlTli0pBA==","signatures":[{"sig":"MEUCICpNBwITVHwx9WNCoW9dMR4No8DUCLiq00ee06nPf5F6AiEA42KnHVyPNYjgEb9qryHuOypriuCMYnfbT95HwYx0Ihk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPlCRA9TVsSAnZWagAA8kkQAJpm7cmx3RgZDZbFbJ94\nUKmkgqeCd5UjUnfbDsROrHiqR6KPUx2GNVsUHqURBmyaQXXGufvJJhTFl9Tr\nyFQc0vJ2BM61tBjjlg7GZPZTtqPxkZ8IpjvNiF87ttF1j8+S2bUsU6xhofJL\njD1EdR7BFf/7ZSc5cyymZGGuAEo88JZ9C2JuFOHkRM9pdskdna/ce6GydxEy\nnsztydNPLsB8dKKfWMMx/zwWdVKiPB4qvFoSsQ+vEi2b0/KeFHf8h2q80wWk\nL5K8eNbD+FLViHxVGnyZg+z4cRpG0wa0zFROp/yySHOZJOcRjx0qvvti7rD6\nJi+jYGm+cUS0Y+zMBv86prDZ2wABSCE1ar4ISFiiXwrB2gzcTxWjpl+XiNuh\nzLsZ0YfjfTprt3DX6O1oAiTxMeudMxY48kXXvIJ+K2PErS1OX5nxYT6/9FID\njfk8/cAspK5R8GcUV2D7qLy0jD8u/thSOoxSuu2Er1Bw1E+X2n5qJPbc/fW/\nwb75+GVz3w+rc3pWGPzAuA7hjqyKp3cMloX7U72ZU8/qCaF2hn8NXS5+le3I\nXhyVAlXO+blOvInuIy/dMl5f76dPj0ov624cSEFRvD4v/Xnl2brkJrl88WnU\nLcyukFtsP9ltBRPuJy+H363rhe8McdGd93P2sDi4dsX3uFOvX4y/iXOn+gpm\nP6ba\r\n=2B5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/density":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/touch-target":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.2cf87456f.0_1582666724314_0.5747122189770066","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/radio","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94dc686abec0e436f3ce3d5b15c4f8bd8f18f890","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.781434a92.0.tgz","fileCount":36,"integrity":"sha512-tTSRMtOw7r141csUaJXV0bRJazILyFHEBznT2BDb/FVVRDqnvJYXKDqutMTcqvkXUtYnOIqNbq6QE8KJOWRnaQ==","signatures":[{"sig":"MEUCIEpF+wa0gBjSuXyjVaWI/KqfB4nCZfhH/ehLOLXCZoVkAiEA397qqyXkc17g3jC4923ikvflSgDQ9HoHmrFE5xJk2ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2BCRA9TVsSAnZWagAAmBYQAJMcGNLu1EfNonHvekpc\nv1OKO/nqb0bInhaFQ440Orb7B6546zK521lY6GfmnZaMlR/phOBDn7QfbWip\nvsg2BIRc2grfbzFbbtzeayvq2GRZTVFY54u+NEI+8sY0nQrYHLPleM7Bt35m\ns3Jclo8r47bjaXoHFV6D8TNab1lZ3J8zkEMpivldHGshuqCQ/un05eanb2Le\nwGjN1MR+ehCDeIUz6tf1lcx2hDl+O24fAwk8cYujIzdM7jokXr6KFIhCWwQA\nmGbSOw1bQRzAesqow+7EZ3sMBgvteoJJ4DoMC09H5vvtLcxfzaYC0RzlGqp+\nuGvsLcwowPewZs6irxc6dSdKzPHv7nAT2SKEbH0/F371MavX2d1FVf5ZdLLZ\nPdK50wmZgGGBrQk2deiemFOBt3pV4jUMUkkXGyjhO7AUj7CARgrhnfOl5w8K\nHQSk3KCVyStQ1Daap0kl5J9/sHvJJHm6O2V+k3vT07sFLlB9Vs2qmRQ5FXlz\nNTD3307L/ll9l+q7Uqby+zvbmSl+2BNrB9yDrBkAk904o9Pzb15D9I3TAxWa\naMm/bvBmeOsPmqVuCW9+ShCieXXrl+AN9HC7L9yi3DxWeQ90uvEXawZ6qnGJ\nmHAvknUXoNSFoSrt5tHPmJ39KOawfCkswh+Sr9k8WmWILyCl899yE4mX3Rtw\njjK/\r\n=MCAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/density":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/touch-target":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.781434a92.0_1582673280632_0.685834972081456","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/radio","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40fe12c217d35870c8bb45e6b755378a0492057","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.d6f60c98b.0.tgz","fileCount":36,"integrity":"sha512-cpfvn6wrVgWEzvbVorLwY82ZL4NnnnZHGSrtkptabD4+LqYWA/i6Fw1Bes08dX9wT1Lr5Z7mBQ/YFkGPT56qGg==","signatures":[{"sig":"MEYCIQDSOW7kPeIhuijDrUlmPDLKjXf3DJ3davrhZhUdXbITrwIhAMO34XhODTHWxe3wlFHvlkiCneqwgf9y9H3K7GB36mi0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY40CRA9TVsSAnZWagAAmeUP/jDAm6DsX2o5hX6095mk\nejrQCZOaOGmhpp/C87dBLngrCJbFQ1PZT9rbvnDI2a5EeQZ1dLP+Dny4vc9d\nGzl8XfURAteYN8YGzD1i1sm34NlkKxxxjE++izfWAKd/ukJJ6GBP8s8/tpbq\n6OownCyGkDMGvPA41/rxwpC25222cMvEP6QpoJ/+pyRLufJ675ZO7g4CvMWY\nvGAhsk6g34UekaeOT1+W2RfbJybuGM7IrITSQIDr0OWBNo2Ym5jjRT+NpnO/\n23aenFQXGE8S/b1BVMnT5GZrvlvYi6hLLxqQAREimqYol39BaXoMx1Eg/HYO\nArxad8d5tqSQ891iRAF3Z+lQUG5X/HirKYHRaUB0JZ1ebHe3X1uR7764NT34\nze47r23ujgxcXK2oh6WdgitziJoigLaR815j8aIvDwsfoA1AADG5nxb21vsj\nGEFVuOzbNvp6vfpkSaQZbYWnHwFc7mNx5X+xdDkHN6vO4+2eMEQItsUo0WfU\nlDbgjPx8jeoRwjPeIChhtD+FLBDzJ34BhlINLkX682Yu++w3PhXrVwVlV79I\nbWZEUWmrT9KDYkabZxHWPS68i5Rue87YKhwBv3P1yrqFfQF+/LtQzczHh/Uk\nKqHM7cW2wAjA4O+nlC2b5UAx9SEbu3zeL/JpgaTFDKNF1un9O8ak2I2NaR0P\nYaDI\r\n=st4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/density":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/touch-target":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.d6f60c98b.0_1582927411885_0.9609422433652219","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/radio","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b58b59cd029de880ae93c1ae6e680706f0a33ab5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.69edc6e28.0.tgz","fileCount":36,"integrity":"sha512-yQahJkq47O0HZOd0hKRyS550FRL4HimfXUerKu2jukNuKtQlceScmD3xYKFL0SnR+TmfxhYCEETcoa837VJhCg==","signatures":[{"sig":"MEUCICAJ+4j74DUM6eVXpwTkkWibxAtepg46Hwv0eXb9VWnkAiEAsMAfiUiDXunsvYcy06ez9Lo/HVRy4K67A35CwUUvRTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZA4CRA9TVsSAnZWagAA6xcQAJJ7vxU0zE0rO0BGEzIu\nqnEgqAhHKd+TWkNhVW5CuDd+FQAz+RaBU7lpX6CekH9VgiWDEWCwPZbGSoMj\nxXN9/d0HDoaw2dq8wN7VZuTYpC9XrJVibhqgU6QqbXHMU6hOj+Myw5OQ8avJ\nx2zJgY8ZM6IscbpY1X2azYRG69oZXwALYjXqej1BT8KTTTi5hbL0+M/LChGG\nWEjFrwmPQOFo4lYpi28daq1Ib6Q4kMksrG7JuE4R4DNB4d39NN/oKH1XT7Cs\nVYuv9XiuwJw9A86WcJvhWQww+CYRhrvkstOlXbbXAfX5eBmH6u8h3yt7u7gQ\n+X6HXbFFQpOwzFIEtlg6lJI0xlTGrPK9ciZhnSbcWAMMsFMv7Yld8Nw7gW6o\ncGNdx/3arAYzTtP3WvhF9eUqbOx6YEsmF/zb+C5XdVGYsondMjuEvzJcvlqt\nmNBCl5AP29hC3i7YCqCSivOJBdJrkzaUyREz15dHKnea/ohAeb2BwQe7bEgf\nTumtAiyS3BfyUhVLekSFV3mI9WE2xv1X1uoBBJGuYLot35NPkaaY7+iLU+0T\nnb2Zqa6YG8IXmBP9Gtsfu2kroUIKkwnAKN3OP4qRv8bBZcTodwN7QVGZa2KH\nqXHJ3ZDvNpjUcASDvh4kZsNgqsLqHX9qAa6DetKe9wJ4u+trKamjklkRAchg\nnn/u\r\n=Ex1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/density":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/touch-target":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.69edc6e28.0_1582927928263_0.23021497444723815","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/radio","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b521dfa098f6d76ac631078dcae950a1f8a71178","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.9372e4939.0.tgz","fileCount":36,"integrity":"sha512-QMh5RWZPHZhBPeV4BgXdc6bishhC60fGhbPW2oOFTJbgeNExukRZ3EGcUXveP1iYA2ZzVSLKAOIfV1R523N7eA==","signatures":[{"sig":"MEYCIQDQel+I/yv7yzdoeNp4kaLsV6Xh7FyNvUPruTN/lcFXjQIhAO0gzzUrEDIvEQLo8tFgfqcJm+qiIXVeLwo9GRt+QD1j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXquNCRA9TVsSAnZWagAAKZAP/ivqCczcWcTBpRbpCYK4\nlw2EzpNHOD+oCiCtxsphw5HDo1+iM/z/LmNEnUwrvAocJ3ZIdnioXpLFCaHD\ndmO/40+mIfKe9ex6m2OqsWkCLRheqURHbzYxwL7dTn3IJgWUHfwYx6h02eEZ\n2Nuy7T69mABWNNBTUHohdiBt56RhVtVPqsUBO0af6p4z1GHCOOCvsGVccm0v\nOUyOL7IrkCOOTpiW5klbvxkMV97nSKyJUKfYnvxnAnnHeUNTC3IZ220Wk9Di\nC2qRBFI7QTQun9p4hTxInu2sdoaE9w+GgGSbqFMPY2UNsPNc6tQDXZiKs4yk\nzGkfSz+vehO965kPFEkFQb9eQAeyRA8Ku73wDrjA73ZZZ5AITlznFtoWYzbP\nvGadvbQqTyBegJpepJHnBR+uePusAGqoxmgE+y43H4rhDXKHRC4vtx53EXyA\nfUI5/JsiDRNntLQmgDc/+viXTOKYQdw9iPmGdmjmUYmKJW5g/oUNUS1VprhR\negc1r+TyhLEUPcijp9iZtLEniJOAqLwruxaUUIELWXDG8xA24GaIgXI8l/27\nx33amfE54F2iahv//XBjpKA6lIQdvk9N+tEbLjVogcPlfYdnnQja2PxmBX+r\n58V26hrHrRE0oFA7ux5fyHsPqeDZbF9X2NYupkyTsxFdrEywSTnJ2yKXdG6X\n3YDE\r\n=d4wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/density":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/touch-target":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.9372e4939.0_1583262605138_0.41294948085300565","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/radio","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c51792ec4a71a4f5cf0326a41f831837d2b173f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.9cf5e9842.0.tgz","fileCount":36,"integrity":"sha512-TCGuch6TDZ/PXRj/gG+nqmLz/368UtE8m8TbGTDR6biuTlRUdd3uD8YzufyZXVg7hGQKNkkFDstb++WmFIH8pA==","signatures":[{"sig":"MEUCIQCnxlzaPLm3gO+tuW0ZT4USgsjaKvmytwzulmJTyJ4ngAIgdFepfdYS8RBI/atFdqL6kj6q0XFdCEVx0LyIdew4ejY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXud8CRA9TVsSAnZWagAAMQkP/RTZvPTGW2ly2RJvmCdk\nxOIH9p72oY1AcnX9oJTjHm3+yccEfsnMZv41URp6cjfhBVMoE9RA/GtI4ur0\nnseKc2Pqn9oEv9PBltLSfuAtXusXsd8wH4RKzOw3lpDsAcuuTjqaUQQnYevZ\nOxV1kbv6TXOYhy8kCPITqiWvoWxeR2PzXLZ2nEqblDF/fvSvKvI1cjB9RrCK\nNncSFLZKRGAs45AKvimiFWjkTbBt2Wr4lJrVACvM3Hj7jF+fy93NNBmjo7xN\nTBE10mRb0OnIDTEgJiaQVgqnnJgCJ2+laCJ+Zc4cn286puvzblYX6c6skqvI\nitAEJssezMR7SQjhfS+YP+9gSPr0ExlcKoF/9+H2pX11sM4H3VSXFcIXJeXH\n06rgQeCtJRq4/yK0cAKwrt2NoTYk8kAyRq1LBut71PXS5NsVwR+hJihzpV6c\nFbspy5cPm8qJZQP6ShhRluShswdUtuA+c4RnS1j28TbkDTj9Gc0vdjssoWjM\nTcfgMptcs3HcxVD1EqXy8l3oTBwvtiSaXOdkj8XZW20QAba06Hmb+3LN935h\ncupgCi0hzbH8GIyNCMHGe9Ow0OcV+xN3o7N+32mJbFcTvqrp4QulUQEvQnQv\nkhcUFTgnrp3AN73EOeOs49eRg4nD7q8BfTlrin/20bp5at3DfNtw2g0gZ4Ob\nbXen\r\n=0QwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/density":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/touch-target":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.9cf5e9842.0_1583277948333_0.12308054504442656","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/radio","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fdad2c527e27ae91496819d9987e377db65ff36","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.3657f8863.0.tgz","fileCount":36,"integrity":"sha512-1ziD6nCbLCVU7OolTKsyL1moCDj41il3poohrXwZGVefP7VYwHKH+iA8bdVY/eQGHXWSx8t0Nh7TkFlKkmxHTA==","signatures":[{"sig":"MEYCIQChvbaUo+MOxe6aiJdvAtuiBo3NekiQ1hO6u3x2L90hJwIhAMt1r51lB451O2qW8q3GuRCspDHY8Y2eK1M6OcMn9tjb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jrCRA9TVsSAnZWagAAJY0P/3GBPG/xMgN69ESRhGxf\nxdr3g7sou3pqepXzcBQAP5CUviSPc3e2Ri7b6AvOGg/r1zTdN7xV0EyrhnJI\nQ0MmJ4r6zrLDtsYnTBLUJZKSapz7IH4ZzrTqiHRSNDAKjtYXp/HCm73q8U8x\naLGDYQxRAHweqWPR2zHYrgqTaKaunyU44vxQOmk3OYKdHbSdVnB+lDni7Smx\n/zrw4A+dA1wepO7+b0Mc0xj31QZ9Bn++pNnwy5MbY1edIZFt1xQSNIaBE7S7\njYWAXhx/Hhqo92v1sHvBFHNBanxzEHoZzobKVA2WaZ/VShpxAbWgsK01mlRF\nvjw5gs6LMdcI99d7vK8Aa//5bEhMyvXLwgEUECAQA37pIw7EBL+otF2ReEEa\nWhAUjVXXoltbT9RA1FaX2yfoSUE6f3OACe0RY7dD5ICjYMkdE9mpkLCCRBxM\nfDWd2WodMm1d+R0mk+au6SLouXmUwYGQgLkk8IGyZSXG6KpcAzXg/lXx51XA\n5Oq9MRj8pue82G0XegDDDzW1v7ilBCNbelxHXdzCVWkTZZtP5H/uirZsO7/n\nAiCBqOuyyxE72yQjOwnsUVqVDA1m6kg8Q1dGM87YTSUqVlykP/Our+JcQ5uJ\ntMSyild9laUTiank60eyf3mXjMqK3BQR1X9asmnlw3+PPrOY4qlorGCAQdHe\nhrcQ\r\n=mKJL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/density":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/touch-target":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.3657f8863.0_1583343851377_0.5230630739515547","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/radio","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66235e66a24d01ef027ad36e9b3a4f4f8b6c6d35","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.98b843417.0.tgz","fileCount":36,"integrity":"sha512-YhSoBz+KmbHPHCGPcO/3CCrTmeJ0gX3UyLBkKYtPihBHCiFfxbx1FRzubB4byzCFvwBoTq1Dxr+NTwGQ7/IpJg==","signatures":[{"sig":"MEYCIQCVTB6ajAvcZaRbJd7IZetK8DQGW4hD3+yr1Ts9WQSUWgIhAIPEPKtusFjfTRlhB+npzopP/mLwehlyv9SSA5ln2voe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVpCRA9TVsSAnZWagAA4UQP/RVCuJ9fE39RwvjuSLTb\nPuvDc0PjDIo/wun6iu9NAOgJwASA4+DyLhWyQOKUxBie8H9aArBaGSaK0OAo\nAliGtv4gD0A34a9xD6J4SnXL65okXoJazb7mWd9ya4L0hjh6WSwecZdpbbS6\nFVnojOcMMvQOXgPJdff1gsjCw3Mdl7huIp3v4cPSXz9Yt8Djiskw1AmjDEzD\nWl88CRZrDxT7739cr52qT47gArmRVREyusYDxtqYobTe9jgdhqrKKT/ydeSs\na27sNgplDhxX4gIm248PcarkrQRDXVlwxYVB0PGEyGyloiKMXltiYCy9t6i/\nGuKa3jq97R0TtBj3VODdMFcEPvvelESZNMj7kUMCIGk6Aez692QNa9D5gC/z\nQg0uQa8SsGGwn73veyTNtpjw/xJuAg72fiZOt4tk57B1UgVYpegKUgqnW7RV\nKEld1v73d+YnifMKxTcWFSyRFfq+7o4WtppT4ey3vyLr8IVy35pH9GsRmWDj\nORtk4dTe4AiP06vJ5QinMks1otMul9IVSFtBjYifuexI2DSEs1sMItMExXk2\nEEq8Qn5qsR77oEuTuEmU84danKFM9OkfRN7/7KTpVFFRVhHmQGcIiaLTXyK8\nW0lC/+rqZjBQwW8NAmSO8SAF35+AYi9XHsj2+YZH217i/R6aKYl9yvoHLoW4\n92vf\r\n=e1ML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/density":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/touch-target":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.98b843417.0_1583433064795_0.07024643616385151","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/radio","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5d9777c520bc495a42e044c49a01d85f6319ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.17b9699c4.0.tgz","fileCount":36,"integrity":"sha512-8Mt4vW+Rdb1uyjHBEvvdbeRzG9CHVVeVxaxVGj3F5sJCrZaxICXjtHRME9qe6JwNSV01flKO/WkIlQLyanbOPA==","signatures":[{"sig":"MEQCIFEHkSo6aFy++H9dL+DjBfPCbbHulKycDq4BmFJ1Ir1+AiAOML0mXKIHIObAedotS8fCqDAdMyrxx7vcNCIvh5U+lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFtCRA9TVsSAnZWagAARCEP/iO22hG59ze6PGn6M6VO\nsmmzv3MNFsVNK93FHwJpcp4KWq8w3R3dEXyBaOQjIZ/G0DHEdvFG/QKy3C39\nUJqa/zcEESk9aK0y3Z3dt/sjlpfQ22yuc50JIqyapxJl2JYzK6ZWrCmi35+b\n68v7Zs8FBI1IofnxmDFeWGpR9a7V5ml5ygqTIv/8L9eAKwbhPAdjyAJ0B9I7\nFSmyJGWG1Q0HA5N98jwIGZh3iJkLlHYmHTT1ctUEjuVsxuNnzMMqDT36Zahm\nTIIkcuHJ9Nyrl7Zisx0Cb0SSq5TjkQt6BVly5zvE+DcHz9IbTcCdARWULBJA\nsv+PbRWbplELHzUvviONg4NI0O0v+6U93GxF+GqAtwvPCyrz9t0k5hfFLPQD\nRJvLvrQ6DeY81Ggb83vFVkxMqP6J2hLRXrmMnlTXuQncLtGIPfnfGgztm12j\nKQpNVA0qmalVlp/Cmin0aQuBytrzADD0p/kQg9qPY0T+pAijE4QGhBK0NoOv\npgksdJuPtcsi61Ou2uOM1KzyPA6ch+wskHfgGdvHtoG/pdduzwzk6NO5hbRI\n+RrfmyOPBF7M7ME+oUSqIT1sw6plTxcXscD9wWRoneZZFWDg2XTCex/Y8oRo\nGWnSP8gvIEcKSibWBba1gdLZRN5GI7IGV5sjquBuXgE0rLi15L5zhPcvTYke\nd7d0\r\n=3TMc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/density":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/touch-target":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.17b9699c4.0_1583436140748_0.054585665597387756","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/radio","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22e212c7c3b06257c1c271d74c8d27ae6a2e621c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6ee035572.0.tgz","fileCount":36,"integrity":"sha512-QLO+qNteFE+PeZMao8/3ND1RDLe88awWeWSJXxaiQNK3bUfRy87whhaOsLKQw+ySwUw2j08/QneJoG1PmI2Mug==","signatures":[{"sig":"MEQCIBw1jJVAbde2tuycsIRp1tuLqI1X3NZQP6Qdnny3YIBgAiA2id7wO5cZpHykFixGQgJTxOlEVEtzco/J/lZ4dRd1eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnL0CRA9TVsSAnZWagAAhnYP/0haBoX/QKYQNt8+T6Vx\nl2rnPLwPHd4MMiHSkyRmhTsQkSDGGP+Kr5LUIBJZh1dCb1K+6xo7XET32NfU\n8s0KEgmcNt01lCOnjgKDS3l7F+MGavTXTAilsrUFXMQvT+TgyT5CnZN4DVSn\nJj5WJXbc6bjiLm+oMLi7tqeadlwcD0BNISVcNL1kyDO8rS7wKB7Rw6xrXgtk\nOu2EcGPNFduLN7m7Lk4svv/yMpJghHpzABCDmZRMnKV4HzhpHehyNHXVDV6B\nzaW/NYrB6tQ5FPqpZtOazS6BKIA0186lefoijo3/s1HtLmISKz0WTSyheLi9\n5j4OUuZWcrBzahzCtDE/XsNNc/SaRz6HRCrTL2z2P2pI0mDRWeLYbsLTXm5P\nnfdQ6Yz1myaEWUyT9r8qwKErpeYxNC8cVtOUzJxlO4AFZMjui9cVyvVrw2Sb\nxoOFHwt7xBmhrLhu2gUkzCX5WIGCf8Kul5aXvDoirK2YbvkOOVwodmuYVqtJ\ndl/1sh0YND9i8uo/RN0pVk2W24m8hEo1a1cy71bFZDZz6bRHmyMCIEhBylcc\nzLDtNw1hfwD0j6Pnpl2Bvxp49qwdN1EmaK95G+kVV1FFzA51St+kSOq1R5KA\n4w/58i++846LFTDuB4n3oTAq5XWbwJ8e6cPEKDBoLfOFYqNVgWe4DELgH0X2\niwbA\r\n=Bfgt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/density":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/touch-target":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6ee035572.0_1583772403569_0.22917660099964077","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/radio","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbcf81987b256ecf3826337ba19c5f12ef941c70","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.bd33cb56b.0.tgz","fileCount":36,"integrity":"sha512-3Oeii0P23w9dkAbP3K28QiNvMVCmX8BwD5a5kzgRSvKIBJN9NkVnWfhp2bcQzP+jqGRLaYFc3FprVdjDnYC0mQ==","signatures":[{"sig":"MEQCIADGoXdrKDNBaTnXiQjJ+WEiNjYuaBN1rVN5I7HzdwbFAiAH0+WTlSzkNtuT7kntwbG7G06jEsrhDpIo5Dsd/N5Bew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZns9CRA9TVsSAnZWagAA81AP+wXUpHIaSKCMgnk99Tds\nSsDS3zQFswLpsKxbcgqT0Zud91RUBgASb3Pf/nFzJIG3K8Kt8wDESx7yHzjT\noPTbtgJ0xtH2xr7g7Mf5dDqoOyPHvKZDO2igy5U7814ETj3/sXlDhhZ00p/C\n4Tc/LMh40aREMbZoYbzm+ZWjCrms+jKOUXWlBC56hqgGiWB3QqjyZi2kRFlZ\naOcpGn/ZGJ/HiP83OqzthxBMHmN1Ml3nYmqKrKNng3DSEuIGviyaOymSo3Gi\nDtQa+Nhto7BsVQI5H1qBqCls9pz7jgUsKYtzQfMHvMMxXDJXOfjr0WSlvWxA\nPmK76Q1zVz3usmH0knRBtY98gmehxVI3VFM/TZ9bmV/twZ7+Y1V/tTED7fV4\n1f7oYBXm91jLeAol5SV6XOJzH7yALWZq1tO4nhmt1DJ8mCJzSPzwyR5zppXW\nGLxQu/PJea/oVlRJn/xjK2MreqFoa/T9xnYOvQRsr0IvbtC4UUEmLhWj4JY4\nmSi6CvflP3Kwklc6AogNt5hyYmsbbk0lbIHL0S3jabf1flnMjBc6wHH9xLs9\n8/u/bjIigeF8b8J77AYwlKHzbvgkWG9NAlF7jiMZVYHMOFpF6+PPLNsX42xE\nGDniToc3y9lBm1+EUwG/pMerP0RxO+JdmHdD5zYwJBcHlEC5n9XNT7nK5/tT\nrrW1\r\n=vXGf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/density":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/touch-target":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.bd33cb56b.0_1583774524845_0.5370415663259382","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/radio","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95aafe6201fe428f3bfc732e6b7aba15307d3728","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.26c049afa.0.tgz","fileCount":36,"integrity":"sha512-yQ65cvOKOFXNPeSJYjwL2UaL+rn9rlx1u/qCqwq7SwUqSmvuuQR6TdTgAWfS9BkZEUo9zUV+1fPUuFv5vt1y9A==","signatures":[{"sig":"MEUCIB994Q9NWbjsJT4TvYPJHntB5JBrUrixM9TA0JT0RtnNAiEA9czIcBIOFuRxJWXGrvvxHfb4tQHSqhU1KFpU7H93cFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8giCRA9TVsSAnZWagAADsYP+wcYUruzndTJbpI9JGdX\n7OFn061qhfnhyf8AH0FewJacO286NAEsmjFgkhk93IJ+Vk8srb3QsfneM84m\nCJLTQ80ICLFyxXXUvjvPYTBvwsRpnwtgnVtwjAGHklhMKHdZVMNCUUNpdb4S\nclx5uNiUmf8BopaOJU/wS7Ms2ULO7wH9mMT/ME7CQzV6Z03Sd0mlZuE3kH8a\niNObErqggLPNbqYy0GoS1JS1E4jEbD4oMbdiW8SL63iza3BWrh0LpE1KQ3/R\nfNXM7aldZVQdUyjWwy9lF4QSqC7WsnpjNlIJ4t0I2n64/ezyFi0QByEWQ7tu\nqu98BAcAc5/zH1O/1xZFHWR8hslM+BOQJB49JR/hZF0QcDSMYJGL3srC3NcN\n7g4RhcDb6LUsMGm2Rj60dT0de8eYRvgtgNq2EsjFavkzQpqQwzW2mMOaRWLZ\nRw0IS6h3zxjQUnx6SGxrNE0BZM+1ekNGQQqNGMe3xZIxhJYCroYBo0nFPGYj\ngykbr/nqNL0EnTQXRL/sg1vZPX98MOizJ0izamXZ2PkOykQxiuSblU8Togt3\nU4KfrCs0acqUeUvTV2CTxkiW3olONMt27MzcUZZXQe1V6GWJjId5NiPNS1iO\nVNfsPhWv9MUDpbAtgxmsDqXrV0zgxRSzy1tcQDDH8g54ndaRjwfC7WdRPgew\nvLV9\r\n=7YpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/density":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/touch-target":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.26c049afa.0_1583859746486_0.7882715225066566","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/radio","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd25f5838c91f965db9429b40d1b3d046f87a0be","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":36,"integrity":"sha512-p17WcEM6Xgx9yN4eO6X1UuL647jzuMCKqZDD4oPXpLhB8MAjJQ9PJ+1u77NleKSGSFJiXuCXpAMvXStPjpC07g==","signatures":[{"sig":"MEQCIGt1GTdOAH2DNpxTgf8Ul1iUMhLUS/T+7zsgxlBgttddAiA8jDptR5TNAQ823p6qLwZRrQ2rE5nqCYC9d9R9B25wHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/p4CRA9TVsSAnZWagAAzBsQAJefBK1ZXfHWpH5oM3Hs\nQXThQ+/J5gIJXJUGW6wPz3f5iRCroF42c3Gt2LYKe1ewByzJcVvvS0J20sRh\nlq9mDFaEoC8yRhvfleV4VT7HVWNiYrRNyixm007CFXqtCMB6zLQClbE23tv/\n2AnHFoF8Fxzk6eBXi8dM+2x0cRkAJP33F1BDwKnSoQXGYWhESRb0djk+NBTx\nckfXWq7v3LGR6YgSs/SH4VSiI5lm2C/GWLY2VhP4Phf4CjkK5iv0xmTB+tgo\njjtCuXeJUoT6iznCWUpNrDRhWAiNpBDDYLZX8x49j7exqnUn+BsQJpZl7cgk\nsr4Jb52Xhf+OzRssjWNVrK3Fk2Fh8boH1wxBE7GlaiZ7rR3YP2MA4rKpAFqk\n14ttTlPFrJFnOvmmJ4nA7vLR6vYukakEhuzpEdTylk3vkKINnL9TobQTBHye\n3GYv3iWTstPMOo3mBftOiH7NdYA7u/tV21N8YfHi6RaqF9jl1Lau19S5dgUj\nyCjS+8f6xCT8WbxqdjNEm5/Q0HMrPVTb/UvtbDKg3p+4x7weMe0QuW+7loyh\ne19+bf2us41Rigr4zQQKB3biZ2B6puhdDS4UWF3JJaLgNEghEZZRSVTOEfsA\nKIP5rAR2XuxleYnQH3BN2hc+iEWg7ZBeUXveo9BI9ymVtppLQOoE00Mj2zK8\nwExH\r\n=50zS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/density":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/touch-target":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.1db5c9fc8.0_1583872632164_0.4474753233089055","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/radio","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2a9f95b450dc5844181700f46b1f321a9a25825","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.4971637f4.0.tgz","fileCount":36,"integrity":"sha512-thj/9mv++QBDrhW9zWL13JhFPoBynZNxI6AfkLA3+5nJqFcShGftqT83P6ZuMbIKAoCmo1MIMuC2JXfy/+asnw==","signatures":[{"sig":"MEYCIQDkADS7Fv3IhOcVM6+RmH9fOyOGr79MUehzgbcBPIhRxwIhAMF5rMWrfldSGgNqL5vh4CR2l6SKIF+untyOodXtDied","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuTCRA9TVsSAnZWagAAXZMP/2dtqTxO58aHYJh43QcA\nbRKzN6WolUw/OkhzzofZauVBb/fEnbHUl/pDq/tJnNp3eaE9woPhWKQlqaKx\ncSGL3tutNXS6F91GzYsJgOtj9L3ub43bXlytpZ7rEbl22Ob8xBKrtkH0CQ9S\nVH9/F8FUNC7PQ6zWR0Q5PXV75gxjxHNUw5JHYuukwhJThk9mTPsio3zvkBXW\nPh30IGGGPV/sQTmNsu36gzI8DbAD/7zhkF0ZKc6+hlz444rLZaqg5PTw2H8P\nPY1udmL0ZyfxtmOcwbxacJdopEJfwIl+HZHSg5HdVN9qCPeblGhZu2KlU5nY\nqFqyG16ztP6g0TeGPbPlgKiM50dzb68Sskwcw82dJds2tdiuF0KcOzaHyOS5\nV/imxl7ThjvWEiCV2bnkKXCeLMAp7Hp3sQnNwP5zySbbDIQlxRkQna/32CaV\nzxMRdv8u1sgi8DZ3bJW5ghJETCJj4HrRtYUZf4ZIYXxpR+txdeZH+gZmVFdp\ntnqVFda8pLBp7fqo0z62BnPAqRAG2DdtnB7oak23GgVj3PUlySpYV+urpYrw\naDnXhLQa+hmRlbWzMgf2Eq3A9N7VhKed9PZsZGTlT5eK3A96TgIXWvP15gMI\nXg4Ivb6u3t5RXf1/IYX1soiNSvItxw6equkC9uHLHSU53LkfBgwmh+8GgAiz\nG8UE\r\n=T7wT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/density":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/touch-target":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.4971637f4.0_1583881106739_0.815481070222809","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/radio","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13c5298cd1238ded3365bb4ecfa6fbfb98caf34d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.1ae8130ce.0.tgz","fileCount":36,"integrity":"sha512-4ezgUdx6bSpj7LVSCWBSO/+6FvvX3di4zqqE9nIKP1CbffR9vUG3o5L0GAmL/QVcKqUTy5IXGyh8F7FYwgdFBg==","signatures":[{"sig":"MEQCIG0K1pXvQeTnnsdMD1FPHYhAjTkKXQpzMztICliPHU2LAiBRBwlHNjxn3m/A4WWr5PA0RbIesuSghkuXctIbtgOQ3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB05CRA9TVsSAnZWagAASFcP/RgJsceQbywgfQSecjDM\nWFWd5d8Tunx8Lpt8hAq6SyHRzLuoiI7lYwU2Wh7nqGbW+j99N+RCXHLR/D3Y\nyqyShpiCHk2ZPZQoFtxp913Eujq3CYdQLJGRZRo1uu1ImEByx3BHi6HDcaWE\nCI9LtdLVXkFF+rSlt27pQ8+SLRb3oTLB0BqBO/XO1M+Nw6+ku0y1+qm5fpml\n92O9MqlrdfoD+L0KUVmGDCy1WgA2HzUwwmDXproH36DnovQK0C82+jasbfrT\nGGYFb9TrDf9z5IjiJ88YpXCk9fOYgzVeZFTMT5IGnjzATXCQjQpYhKqbkrX/\nUGt3MjZaAhS0QfjctHCvavEAIQ+BNlDCtSD57dAvjiTE37nruHAWeb822FsU\nX2YDCoNZf9+0gmrmGSG3CYpfuIt9KrtdvtCu4ZkWhM1ViIJZREXCypO33C5V\nyMvSOgXjHrXXVtRFzo0iigUKn8/HInE20RsddYzNaHLgqmfLX2Wor6J9tWbz\nOEEs9vIAb9YWnXk46O6/prL8lvKYGqMpVfDUqAxoLD2s5RRTOM9roopM9AIQ\ndVX6u8VW5kFv0I3LS1fIiZ0mk6zm7tDz2XZmqX8Zgzy1s/Qxa9d+dgkeFDHz\nee/H9WyEaWZcC4OfTTNO3x5OD2WTxhWd1GhrNHomR4f7As4ATyHcp2aF5w4F\ns2QO\r\n=tEGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/density":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/touch-target":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.1ae8130ce.0_1583881529399_0.1405348962340327","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/radio","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af4d2ddc00d00a7a85c1f6749eea802540b833b8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.8639c2690.0.tgz","fileCount":36,"integrity":"sha512-kbtzt/H5rZ0CGSPutstvQQ1eHhnM0taOmfGwCbzYaR+Dkmd1GiiWgqcdEKYDzFDivbmJrRpXhnKrHkwbnGAvDg==","signatures":[{"sig":"MEUCIFLDFeJVXf23m8zhjrtgidCYUkj0bAWYd/UV4Id0t//AAiEA+NDx/dTTJnDmQ0q/mKLsGjEYgmheAAw2IJgIiA/Ccts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYwCRA9TVsSAnZWagAAy5kQAJAoGPQExP4L2aEVCsCN\nuSg/A906X/2Tx/EZzEzUv0+PVYqkZCNHbslzhV15IWMpBW0TaLms6IVtyhHD\nCjAhQQmwmiVCXe0PBduXr7Qc5viC2Dq9bmOT/fZPO54Nqdmxgw/p1MGedADr\nc14ZtVvOO9E3gYWDTt2jSyDjxRz5dq3Ha9Sel/vYzSpHoekxuLYLAP0DPYoV\n+wqgOYodCDvbKzpFiqfb+O0v6Rkl4T9tz9gFIBg2ikQ/UoCcOoULdtvQcZxQ\n15q6saJ4/jU3p7T7DwUX8AC9L0Z9gvdOlBIvMQjGN78QnUZTy1mNvdBAOuUX\nQG4R+3X8mkaSiFK0SZSPELIYUVvZTqzG1FbiFQyoclNlvPPUE4eSKiLAotIS\n3/ERcRAYbC2HXvC5QCe/6tBcPsySi4WVmpTCJPi6ryiLve6VaGnN8LjWix+c\nv+bPSnPPLkIY+64MdILbXVraBD7YZp0KcG+Jcdjy1niRtKtVmeouu5MCBsZt\n0BRfzvQr2Wrc4ddGspBu65opC50fYXmsCSZ8FOtwFzb54DkkvwAXqlWOUXiM\nZPjE36O32LtcJYBvdenbuaewJRODs86vRJpAf+d8lWhzpwRRiUMuPgdLOlkf\nNXmsMnUuub9gy7ZmKMl6AYU0NiMMyYaLZa5aIEpQ9yNTNERxgxJWCXGec6ue\n9suX\r\n=qkRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/density":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/touch-target":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.8639c2690.0_1583908400417_0.559141037190495","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/radio","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc4d91ed0a09c7741073c0894f8a4d2c742b829","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.d5808057f.0.tgz","fileCount":36,"integrity":"sha512-4jwY1aqxqhpzEEmMuYcGxUhtV001MKFAhaPcsFoDSNsTX9HAXnlnkIg5yqaRIptkWWLG9lVQboMmepXetaSh9g==","signatures":[{"sig":"MEQCIA/Y1bXQpYDG+fvzGYPilg2185CMXFbVm9fGAIJy6XE/AiBq6/UKLytTe4f81X5DfaHTHBP2/Pu+OWDv8B1lkdzEDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD9CRA9TVsSAnZWagAAq7gP/3R84YDh3+1h7o/S2ufQ\nXiXNHoFycu9WCjG07VlgsbG5S6o/pQ2ys1Xye5MDZEq8vHamy7BIEifQSYSF\n1wQqA2zN9p39mRQ3vceYK4QXZ7pIdrcUNk1gbSP5VJ1mhpPAvAuyx6WuUJjm\n/7ep+eYPFpTL8xgO5EPsMAv3qHDFBwaCdB0gqkGpg6spKmmNFdAhxIKF/Fkv\nbvjLwqf0W4ukbzNeMoQc9H/ifV2txqmjXfU9HqqIlOdJegG9eZZ4UYhx+xCn\nthrJ5+nGZ3uo/74jY25WulxRontbRJc0IZaA66p2g4V5WlaKHtMeG2y0bQKY\nfPOs1WcckK3xLa1kTYDWgrGYGYgBH0+Cq+0uizH1tayPh+/eFatGSnwsrtq6\nP/trX5PefJLRivxZr3C5Wa6rx9vGvDZwE0W/GElJjf45OqzGSU7mNsPyxDqD\nZrBWsEiQsYnQ4a/OXlqPb0tHMH6fmjgZHKzQAHu/GXYJ9nFncqddIE8WR4dx\nLIugk4YuozVd3slDEJlpI1hlf7tGA/86bIcteiT7i5nPCcy9YsgPkauco1oD\ngMbWh2PyCZmUVywSf7hhJNztf6g2q/NLxum12JUbJ1FDwPvCwyDFLcEL2kwv\nGMD+hC06AY53/THB3yE3PfjgmTw1+eiZvNrwIn9/3RSvq0Di7yaYePWS8wDi\nAz2t\r\n=YCi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/density":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/touch-target":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.d5808057f.0_1583943933101_0.9013534530860245","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/radio","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73abe9a1eb6b36f597900463666fdbad73643c8f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.b3f58203d.0.tgz","fileCount":36,"integrity":"sha512-6hqSLxPGjAA4a29lyBDdWN7nYlkn+8cUEuYnl2fhgKNqxwFyU4s1+ZH6doVRNR0dMNMUqlsnC73gHOOyQgdm4Q==","signatures":[{"sig":"MEUCIQC0HKnqNEhYw6GH5+Z95LwGaR21QCWmZF23f0yelQ/7FwIgQ3rdpkGxQeTESyHn3v9JQMjxXVH6PvKcI8RrFnMFDxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4hCRA9TVsSAnZWagAA/isP+waSIUSVQuSQwKAInijq\nps5STAiSMxEe+BB8bz/r++u/zKCCaIXuJvLF2/bErwdH/tdvANYkcgQC89YB\nIuSs4nqYPerLCw6Rzznn4CEJyKn4sQ2IwnmTrN/Bpf7KLiU/ez5eKEWSb94X\ntXUg+J4rz5YGcWCiL5SzGRmeHhEP09uzrRQTyvhEwMhKfsJ/4LoRNHbQ2yPl\nZ8ffXJzRIWMgwrVQWnCjAHPO4FUsumpqv20IzHS1761MFfRr7lsN1lMMLkHB\n5yBxtfmlhKpg4JpkCvqmVbm2/wEUGNwCoGQaZlcdsFLIKjbGa91Ch2sIf10f\nKanLA6Nh9HkO9LuSkvJtlKkDk86+xnFw6CriYov5wrAiU8EZaVhWteJzN965\nLL69iX3tqxK3TGMhqAZShzZNQJkUt1A7Dpv424hpkw224vO1p/wcfu8YT9jG\nUFrKZPV8GSwqvXk8EqpTXFG+SNa4xpZaigFZI0ik8BuBLElJrSsxpjF3nCi3\nnDmOd6lUdi5uOS5Mr97/GD1CGD17aSQFN7Lhz/+G4tr+TD43WfAyb2uVXqu6\nWmRr2Xz3vIv12kLPujmyeh9rPVTiGgcYsZ/wB1eAoRW4DFFJPuQisawZ3WHu\n+eAjBOYX0zt4iTelaUg2If2ZZaX/K6J5Ee02N6Ci5yoEtreZKXU8vgnHIjRr\nfhOX\r\n=uctQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/density":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/touch-target":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.b3f58203d.0_1583955488648_0.8367666844503172","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/radio","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79ce57914a7081246ce06891516d9b5f2be9e478","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.bec065920.0.tgz","fileCount":36,"integrity":"sha512-GIwLpw9B9eYw6MGqPZuoiLc2DT/w6a9MCopGhCmZk0ud8uZcw/EDYRI2pNNiSZLbMsMC0X/LrAM2Uer89JLRzw==","signatures":[{"sig":"MEYCIQCxWSdrmQdfgUUOG5D0cDSb/yFvALQsBS6Iz+yTtFX7xQIhANbJ5wavTdAFFyiluoczZ5d0BQmNIr8ERJbmhLXW3zfJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapl/CRA9TVsSAnZWagAAaSoP/iRzPXuv5MLu5IIp6f2A\nph01bl/XlxUomX6hNcymt1J9+BYwr2dcNsZqCBY300Uq05upBqAGqFACL7NC\n2utHR0AA8gzXIt/mwX3/oxgC/b1+XuFBU0vmU/zVxn64uuyvI5qe8+bBMQLo\nkTuEcEa7vRLwxS9UrIKmPi3qaUXa+nqs+o+G72ZzX7dSkmqTiBTo+kj62auz\nUgz+Gjq1LbZiXqZj9sz2/8W9Zj4otZBkZ1ohf15HhyAYvlfZDmAUdEcoCWp3\nLvCsoBm7RnOjegyU0DX8YgFKDpLpxAxd3ftUlliOAQtMbes0gxVTUEGRUm9D\nO6XUaIEf6nprFFsmK3CrR+weklvS8n0ho3SxluazRi7LxtdEqHmoWPyMqelf\n4bepORAMM42FXY3QnAejYTWsBiVQMaVMPwG2Py7RAlWk8dIitRYPi8RbxKLV\nwl0mbxNVQshWY/Ek34RnRAjFhKz6C0G3frNP/EHOJO63pmooGYi0FadeQC+1\nOi3YgYdwxpJp7D/SvzY+IHT/p05uRItGh1eHEf08/odx8oag4NRXtOBxPrRd\nVOJzNroLgimNFnkWxdAjZifnI1XlNJ00dgyGrgi/sJkwvwWhLCbyZ5z3hsHD\nlIpHVlTbR4+s09YE7KvdBeZ1JF99GiRPqRidqnaL1B1gTQJc9ZlUypuXIczo\nk//f\r\n=IJfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/density":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/touch-target":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.bec065920.0_1584044414550_0.20794767139595338","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/radio","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64245667eee047dc7c62e6c3dbc1a28f0bad2e70","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.776291ef0.0.tgz","fileCount":36,"integrity":"sha512-hI2GvzoEF9t4U1PNThVbzvMoNTdpC68Je9SESxrLw09gHlomgBaz7svVedZ64IUxvAVluhvCUaWLtLfSclOnAw==","signatures":[{"sig":"MEUCIQCofP0aD5K5EwTG0xHdJnBEkj0dQmtzA6COw+rAA8lXNwIgWbGB0jKUPEuZcaCwRRFou27N2GbNl5Y/rjAYLOQyvlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMrCRA9TVsSAnZWagAASGEP+wbU9eeKf5XhQnbjdmhm\n7wBvU/94DUGslsh0U68+3cN+/54A9FXJftjW5oUDe6Wx8VLGK6yaIx2qLplt\nvecxvRiwOIo/y5U2Euh9kXmTHHdY8R2JD+Hee2g5Ma/Uq3P4FgErM2a+AFMP\nB0snAZspwIvNm3V701AQLTxc+9fkwOxYaUnhHubBZvxOU/MXrZez2K9eqSKF\nK+c+IvIglaKCXWalrAZrv589BAL4EoEvbJvsJKgh7kGS7pFRV6adjoSLs/oy\n1AvJpGyyjFiNEW19YOsuao0EXSUEltFngQ6sZqHgM4TZXXRqMiX3C2f3B4yi\nGqIMNWYyTFJfnMfyazmsMCkJvDgh7fi4DvjrBVCuBSELgfGpj8FRVQG4OrrG\n3g1xXJYN+oZkWW1YhZTMHAEGqY4ZnUMxgKPrBesGBuWN5zOTAlukZS5avZBM\n6I+LKYxe/x2pzsVPJDiQaw5VtKu9rramTcLp8Dj7vAKb3fz/whIn8kBwP7iC\nmAlTk24l7QysTNw+7ostSn+nc2N/IsFvuTg1AJmLX5hfqm3B2MrfB/4JrwUs\n/sDxqr5tqIRkGTNh66mLsQwori9pohZwqWG/rcGlSYmQyjosZI1CgYONkOEM\nqiIqbX1U2pEP1TaJzQEInZvP5qMxPtUOjywWS5Ub6c2nEAN7jSdldfuqavV/\n9wrw\r\n=8Xgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/density":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/touch-target":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.776291ef0.0_1584472874306_0.3587299041175822","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/radio","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40ad124ebe3d4b2ee17bab63d4182acfa1a6eb19","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.ece19f3dd.0.tgz","fileCount":36,"integrity":"sha512-sMxDNYo3DaSsLknoF+zpdR0bvlo+o8Vz415gfnCkNPg2cfr8W7VHg1a1D5FsxRU2OMZI/yv75PcWV73L2wosBg==","signatures":[{"sig":"MEYCIQC2ff317Pgl1C0UhNA87FUCWBmTvcZijCiL2UjdBzWNvwIhAKbvV2tI2AK75dsalWxvyDVdWfC27tNu0y8Ss5E45N+/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiuCRA9TVsSAnZWagAAceYP/3Q/VZnQXXBOWsx8xw/v\nwsDhVhT6jc1K07CNeFojQmPyq1DTe4wNt3ja2R0VI3B6YXiGyLplX6Y/b4YM\ndX6OznYBSm/PM8Pt1UTWdCgyYA0YqhKFUc06zQ0mIUk77P6n+bm7QDL7Zrcd\nFWNI4wvaYKKaRthQEkQ+xsvzsi+MG3FJYWvuXzFuyAc6LjeMwDomApC434Ds\nmW1TG17RnftRsJZulQCWok5MfOC52DKbh7i6zMQuabVyM6v9DWVQWlTrR6RQ\naypZGhmCdY3Nqc89bC2IteRKk5kkxsl4yMdj90EI9sMfzXh87TAd225iuHDm\nsVK/YlwegzOPQLLl5XAkY+QZdVgrR/dCw3aqc3oSd6jkp/GwvzHSa+uDEpeZ\nNSm9EpDKn4UXnPGl+xfRtvXwrkU3pIy+RYdPFfOtrdIRh1WP/6l95F4C+seV\nhQxp0hLLwPd6J9B8dj3NADucrsiIn7x976WqxYlEjwoJ4JrGyIWbcNoPzdQ+\nOB9qr7HIgoPJbN1NsqrEmEZkz391OOH/EdA7GEGvbGCRbBCx+RoFbnqpZreX\nR+fDJqfsU9F6WBn9ML5lFmdzXuy3d/FqyCV/FB9p4rkTca07EE3oCqN6KQhL\n0uTWuQwtR9vZMLtJXYs2d6AsqDj6roKv/HjVRNVU7vr0KCUNiKZhbLiShWWc\nkL+o\r\n=Zp+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/density":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/touch-target":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.ece19f3dd.0_1584482477908_0.959060020455047","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/radio","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3119758d2257324a0058f5d40398bc9adec51cf7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.4dc45af6c.0.tgz","fileCount":36,"integrity":"sha512-twWk0XJ2eTk3wOJJeh9GXs3g5bV0HfoI/YR19rB8dxRxYh3DQT56dwXYXHUKhoj8isjHgoVOdNvmz4vqWOEf+A==","signatures":[{"sig":"MEUCIQD/XKDYA3gH1WtZ10ONn1Qmrriey7p6bdPqRQIU4wPSmAIgdgHCJZnwEVud0gHKOfBEEFJA9eOEj6ysjwlnB4m1L0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3RCRA9TVsSAnZWagAAPi0P/1p8tDQXOkHrvcIRX2+j\nB6qPdxQVgO2+qQgWl+4AqwMC7pAXXmFVHpQaEpJBPbPVFooWNOsBWUPUrrIK\nn4YaJa8dwOPzq6U3931dczykB2TK5X6Pkt6XBPfBagBWsBws7+Vd9zXUGs9I\n8TPbXux7xKuSIHmJFT1bPqmwAV5139G4Gp+oytW+vRglyG8l3vYa8t1rXj6w\n9lDCZSnGTVWZSlGTsX/hlaY4twGcFFB9vFBjnR8isUEN3bDihccSxu1OUhLe\nOJpMZOGlYypBjKkT4RktH+pBM3+YJ3vrx6vQucOowz9zwGEIo0Qap5AnTaBG\nssPyJZ6OSVsJSULFGkqB+caSzK5ErrzaP69EPiYoOHhE5GcpuvJMN7IOb9vO\n85i1kCAdaOReb7y6X+MfO4+V5xgyt62aS2y1QJ3LEZG648gvG3fvJuzoWykl\nA0K5qhN9JWWTutfG3SCy+QFniSg2CzrdJx9Y4a5OJh46PZPBHnRhzJ1ngx4/\nteJZhrzbQ+t844yW4I6lHqQnQdYOusX6JLvzwqYoVIMXzvYVkxxfMhK1tEw5\nB2khQMsnhu2sPOJsJ8u2q8COadjgyhmDf7wR80kf6R8ocO6WDgpn35xyErU5\nMl8ha1TJYH4vOMBgJT2/Rus6mmYTXqfpvJHIWyaiKEKImSiI2qq/6wUxTH0K\n5tGF\r\n=Rr9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/density":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/touch-target":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.4dc45af6c.0_1584496080580_0.7538917358091342","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/radio","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe3d7a92f36b336bec2d4eb871aa447bf19482ac","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6b48781bf.0.tgz","fileCount":36,"integrity":"sha512-uC7sngMfQkPYAp3g6C4N5vzCshL8NuiZduTbSKRk+UzjWHmNPFE1I+osqxA5xkszzjW3gnaU5+txeK6SVaJUZw==","signatures":[{"sig":"MEUCIQCrV0KUD8rbHzlO6/GkfYxPWOJwlDCB4Mm1p9BLoXMKQwIgTzSbjdY9p6bq9ysBFmrL6ONd0QhXPCwp34gKpXDZRMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+aCRA9TVsSAnZWagAAd38P/iXMnquD9QOZrnIzcvbc\njO8DFff7kSVWWy6iEMsU/wPUJjiXngBoeSTP67EjKpb4/+qtDYLsVqPg7LCw\n0v2ft3vY3DTfxmv3cCrr8+qPtxjSshtF19VcWmuq0s47WZF++kC3G8ptyun0\nUpNcaQbWR/4mCd4zqT9Ncmr5podqw74ueBw9ermR6s1Ioxkg7yUIiQ8OV4PY\nmw6U22jV4C7AQlBJE30bYCClkzhfIzPTU2cKQFjd7A2L+x8LMzQ3s6X6F7eg\nJ6pCZFK3G5AUyS57YBqlIjYsqiyLjaTpoc3kYV0smjOc4A4alsHc44tKj/9l\ncYa6WY88iUwvQbeeKF1HmjtcB1028+CO8RYSgzxvIXX3lRmMffvnIS3UImF2\n8MGeybuepdwX1DSOXjMWfJmgT3hxI6TyYOQvta1VcPBezt+X/YmI2HU37++v\nZFQOAzQzrAhdYTA0mDsB5CDUN8w44Yu0driT2T12z9PY9ZWStOo1MV0MTZYq\nVt8kA2GrfEfhHxNXgAbPKHYHBb4dSYszWpBx0CLFYVHNYR+Fug6xFOvfDk4u\n2gk0dYUsTDbe5FrbvRP8A7/PbafUVgAYZ7mRIkxdVer06CtKKbGiAdBeXylg\nho+kMJuv0zaDaUoaGZ31ctZsUXJooOrZSOePCGuXxBQAAiAzTrIHKZa4vjb/\n0b7K\r\n=dPvo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/density":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/touch-target":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6b48781bf.0_1584545689747_0.13052349124819096","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/radio","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f43ead9740bb56cd3b40895dba633bea3f3ccd24","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":36,"integrity":"sha512-iCh3OQf+9NFanzCXNdL8ycMTHBzhsWUumEWZ1dcxm/1EfuBM2iOJW1LRumNIy5/LEJTOh9yVtolRcqohDQpTfA==","signatures":[{"sig":"MEQCIFFmrqBlRtUNlRjfBDVt5JeEt9RN6shwfVW6GawiEEfOAiA2vWYBNsEsS2CNvZ04uCA3LqdOCvE4bPO0bd0UnE7JEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61+CRA9TVsSAnZWagAA8WIP/3OE7k05EVB2ZunbGcLf\nO4lEKVvgiblvFSB/5ks+s2ub1kREO1IgHc/d3T4+DdD8SLRuy74ISgLNmxwC\nchxZkJAooI1g8T+tFtNGWqLiqQ5qtghr22C4rarc0bVt8Pjwj6B2cB7tTis7\n35SlxNEsvPXBHGarg9LQD4VGXM6VVwrkBL6q81gt5HjEGpw8RCX30jYRMjrO\nmK5TOnj3DRs88pu9vkE8pCHMwAxZICnuoYeRiWn4aH1XqlgX9zOx7rk6sG44\nFSQzP85/kJovco5FKHmxP08XxnGhcoVnHmB/ORcIlVEZhpHFpqHCrkE2GbYU\n05KLM13MyjVYv3orO9IJYx0Vy5oMcHOgwLdQEoYJOi4Te1Za0+jlLi8HRR6Z\ndxoQH0aGTPch//dquxbERGnENuhiirzJUVsubkHfyxvvRTFuY7PvP2VsvPXi\nd0X5b4CxY9aEWtYBJAGo23nSa/VGuHujmzWLXzHC/VKuV+zhXvncOBPmhSyd\nLTNx+FpwEtRpJLrunHUWe9NP3lWsclpFaClkaOcbLFPu2GHCZbaDlQ848y/O\nzfPRl8tsULOKuYlwgk7l33eMlVGfX0TBw/NV6UbhedXAW6cla07byfXxKu9V\nT4DU/4M9jiUTbrQZ9j0F8uCXhmaBeYryxtI4E9bFEp79cRs+p30cVihPdhYZ\nbZ/8\r\n=uFUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/density":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/touch-target":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.a88c8e4dc.0_1584639357689_0.8286638494075242","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/radio","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6761a0b864c62f70a88c4c551f7301ebcd5536c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.cafe18860.0.tgz","fileCount":36,"integrity":"sha512-Rehj0HJyGLYOlqNKXpM/MTi0arSSJeVbjpd4Bz9qWVgEk/yYTmNIvS5N4Jqh5qK6uJwl+5XnJMRZjgc2r+qFiw==","signatures":[{"sig":"MEQCICamNk78Y4nMqOjnwvvaRyCQzVsCwOVho4SnxXfqmzbYAiBYrbWAnD5aKI5MGVkUapJsCujWNx2bubotwWF1p/8qlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjvCRA9TVsSAnZWagAAGcoQAJ493XHC0L+30BIUxF2q\nKc1WX19J04Q+cCyVGOWf+iUBluHzd/tUFQUnoIsqVFZt+Yj7PynWkRKpK7nv\ndH/C2R+nVDD6zlHAsRx7cMpEvEJOmtqLuU1+/FUspIrEYh95K8u4U3iAuZml\niCiI3FOd1XVWBWE/m0qgAqKKOlFRKj4eZ6x+hmCC+UB4y/61C0g5BcveosFm\nhxfJBtpa5K5tJ7CicuMG8rkUI578/l7F3FZ/poN58wjAK9Nx+7TMNti7A+VZ\nGwC6ao0XXCQgIKr6HkMeQMt6iS3PWRNkb0bGquAL54zH+U5PLcjKD8+8RSfw\nSjjE3JreqbTMZEd3h67+Ofhuuk2ap4WuKcI5r/jPX4BEY60rXt2H1V2MqevW\nFboDid5h9YpWNdsI7/Vg/zNg9BNOc7b8gZYJm18c5sdttsBmXDVcR75lK/G5\n7LlAaTvfsqKkVfvvFYPQnunoYOZ/XY521Es0W64qTgzwHJJfZJ7rf9LDkAJR\nQhxX0Zis9nRTqpDq6XobPX+MmBR5npayN1AyhWI9RYed+ztPF3VWOBsFdQvM\nfnr6ZLgyFNg5XbGDtN3o819QVSX6eoei6dQtFMdf8OEv2ME6jCpZPc/0i4Su\ndHKr9Sbxeehf66R0OmqwaMqILEtHgaUxbaoa+Ih/aF5U+gy4GTznBnuZ5IW0\nGwUW\r\n=yH0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/density":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/touch-target":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.cafe18860.0_1584716014917_0.96641840751608","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/radio","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d1d2d88979a018f1f2dd5a8b58a2cbd31e3232","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.35a32aaea.0.tgz","fileCount":36,"integrity":"sha512-vXrZm7bCPRFEkEcqcNSlk0x9VfCzrbCzXAj5MQltUxo+rUMmKs2jtcgKJDGxQgzuaTe6xa+QNLoLZXsTd17vGg==","signatures":[{"sig":"MEUCIArVvMgT6N9O6i608w3OhASSP3RTRUZ6AO2rfLBPdlxrAiEA6mB+ZD4GTCVyn7+7HjWE55g21h7lwoUF72WuzOqVxOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCVCRA9TVsSAnZWagAA81IP/jiWutFOvFsieTE9Qg7k\ntu6aSVe+tvC7kjg0j0i2yiCSRPTbj1OeqFsgDrxVA4iY4PGow0Xj4Wm9WS7k\nkYr54f76KgIrw1l34iTUWXQ4t1BkohDqEDG+C0i+E5N2RKjYl9R/2P4tUhel\nXFqBHAkqIywNwNLvq8zf+P0Ib3SEjRcMS6ijRNaz8iJDwtkCG0rEKNGbzhQV\n++jUTPRlLvkdn6dMtZjPNxfiIOCfIAiNlVVlRzJveHruN3itLQIEnp4shAR3\nonGCq8kHHRvPLt+rMRu1GXJNRWGXuGw4VGhwWIhzQG9B3adIToUL/Zag/AzW\nqAoN74rNs+pZc9/1tRVgHX5LPF872QjJkaYNQiXRoiFVeghWI89Aif9EVWk7\nhRnLRkNj0OGTh/E6PoSeneQMmKPvNnWlZfvy9NJTxBhs+LVUPyTnkOuIgGRa\n7a7DMVwKfO2B/tk+bSDdJyplphvD5NczOVb17mFYXOZGNpeZBtgCpU4X9Ts+\nrnhn6wBbQVJsLSFTEsWCTy2KX4uCQGQECO843QVEH8v3oFdfWa6tg6lc225+\nUWkV9dRgif8WEDYG50ft32WXNe8qU1PFfedASp0qLawhLjZ0+UkqoGBYKASy\nUKxN6Hl1FQ5kNClS8IGmhU+XnLaLd4AAh5OVdI+JdpP5Y3Bmk0iQkIsaxpNM\nD+xn\r\n=hn0u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/density":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/touch-target":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.35a32aaea.0_1584734356879_0.3768169026215844","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/radio","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d64ff15718344d3b02608f98aea3abc72675645","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.e75deb854.0.tgz","fileCount":36,"integrity":"sha512-3IAO7ocfyUtoow/93/ZoWpf6D7+DTJS0sQ1Ij1meqRvARti5m7n5p5+tyIvX2XIMkj0sVbbwL4Vm98QY7Ib1Hw==","signatures":[{"sig":"MEUCICUbER0zXVxQItiUG7RVgic0jt1DndIDpiUy+rkpVF/RAiEA3EEVbilqxGtVDZCZXAD63dNKlagLnwOnvdTuDq+q5uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUB3CRA9TVsSAnZWagAAOo4QAKIh8SDidWClnW9hzQ7c\nIbEf0qwmJfzEWhGuXMSkl6vtk6i+IcwowR0z1cy8I9+TcJFBO098qVRn6eID\nUCh26NZyrC2R7Aj/azJj4hmbAKClknsdMOgLAjYem0AqZ2zoW/WhbK69qvyY\nd0F/8H82UdAYRY5Re/+SypKLoPKfFOyCUleRAVATRYgkIk1yU9MLNMvkzyyn\nHI8pgD7oivbVTOxFFkXRBazfORAgE3f/RU/Su670SKhs2nHzayoyGLHR2lAm\nEjdpbXUP+xDzf4Bzs2PX5S2viv/VKwmXdD/5893F5ktmGxpdcD8wYrksP4pF\nXRCUqAA5Zl0GUtjcYcWmoO4CoshppSNlFOwVykEDtnO1oPLjeP9PoI8A7nRG\nh6hpI0Ef29pyKEPwQDaU9Vo6C/KG0OhKRVKxxtykm82se2Y1EbjfaSwyCYnj\nmRHrUGSpW6sAis6cVyj7pOEOQOMDMchgOKAMkjao4JFbniCyru177KCbm3K6\n5aStJglMIHxZGvfy5s9ZpS+y1cusnZ8RAlB1+cEsFiMM6q9UXYyswIM4wHw/\neYJzxJeH+j3AAuko0wT/Kx21UbT92dNOq+oCayuSswF6Yb/YZnCQl1v9FZsn\nrjl3PvhLonOrYF7eKTLOG9LCXqCmGhuL8Rs/8WHtaVGVoDTIcp8Dp3P6ZEGP\nnQ5S\r\n=9jDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/density":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/touch-target":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.e75deb854.0_1584742519523_0.15253746427916282","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/radio","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d3d2a49d07474373c6b5b3c87f913b34b930a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.2cc6966f6.0.tgz","fileCount":36,"integrity":"sha512-oQvanaxHqwDtmqa4NF3/068HfawQnC6LSSr+fSJsYndJaISMdhZLGf9xySOPQiEd60S2FWi+Vo9eeK2xE7MS1w==","signatures":[{"sig":"MEUCIQDAvvzu7uVD6an2Y1mrtngcWdsTg+laUKSjoH9CjtOzUAIgWf2HbkRuFJL4gsNYKb+XMTVez2orbqcb4g6vhx4gEYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTWCRA9TVsSAnZWagAAG+sP/14CZcwuSQm93+uzruYi\n1bCnyMKwd/2QzcAIsimUH4kEQ/ybSLKZGs2z84e4F9TI7vtJHnpC2CdOznCP\n9VxLANu/dVkDEuxH+JJoTKEty/CXTXDUS398KGmRdwRndxhzuT5XSNGtvQr8\nldNzIhaO/56GOhe7HUR/4xwxqlQZwLF4jyyQTvdPcrUgd45GJXPlz2UDyOKY\nSsCxFpJqPxC6V8BKVc82PaEigLWPeEoS1dgPOKnzq0Xs4RiqJeoFIJxFEpV3\nV2l6fO2l0rD6+1IyXxP01C8JTbxVnYlrXtwHoxB57C1ElveEA6fDZN+PZYNh\nWgoad0kVInxTub9BF+QDOivx30OjHNeOvhJBLLqFScXCgw9Zz6EPKQwqHDqA\nGmW/0PnJHaedBtxE1cz11JGP2N853SIHQbZWMsOnV6slLF/T90h3tr1wbpRQ\nLHApR95Xl5SkjbEQSVgm6SitFAxdjPxzrMgFI9IqkCUdWSzYBWuCkFP4oD/H\nZOhRgULurMk9PLpkR6z8U8QLEGPSmqbOPwqY8TPfoQxJ6WXF8S/u5ldJAylY\nWeo9HhwfXkDNfxdYXWv848zgq+FrG5rC0o5QJT2QVS1a9hlnKjeEERKI4Kmb\nDX+/b6WBRzDBBq2FM56PPWPEbs+m/djLtlR1oEi5z0RZYp4oaDucQ33jOGYY\nvD9t\r\n=aGq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/density":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/touch-target":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.2cc6966f6.0_1585075414280_0.9670040290557718","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/radio","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20243d14d795d1a65486d37be3877f5416c837a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.8707953b6.0.tgz","fileCount":36,"integrity":"sha512-9U36rDPhAsS9KVqA57HoRTWAvrPRpKKVO3gipsjPzY68IMcw7+B4+LsLEUYMfY0V2dm4spmsNS0sIMNeViJybQ==","signatures":[{"sig":"MEQCIAudZrYDXyGsmtJjD/HV8StGRuLobgjOmc0xFof+8BmOAiBTkT9903YKGVgkvRHI5bGvhO4xh3ub3XYe6tL1PUl/vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelW8CRA9TVsSAnZWagAA5VQP/0yw9TFL7A2w0k11MTA4\nAjtrjlOsCsncZ4IwBClrdPNBkrIAoJHaokef1/CcEoO33g8X93ANniFaQxQn\nlU6loyhj8FGBasq51ZY+d0pBW3yJmZF/0MCVdsjROqUbhW01t/TJbvI8PJiU\nYcso4dfyI6qEoh6qFF6izQMh4TI8HHvsr7x+1bKTjsqH+O2PhAJA1qLSjEc/\nPIw2l/+3YGrkOaIh6WMyQQ/vZE3Qn7YnDfbrSCuWptNYCvjbTvZzGXPWEEDR\nkwtzYMwUTI30MyUUAzRNfrps3jhpjjGKy5QfRNnbUj9YFiHsYjf4UP4nvvZX\nMAEk7Vipy2kwZ71DRaIZW+kP90HcM82VYYbQjlzbVYpVnhfzG1S5LyTN6FZ+\ntBmdu0/fTuvE9ynffBInWQMJ8b8TbaWcL8/PZ6R5i4U2/l4rjazQcyycFOoa\nIm6mRSQ3f2uz5B9Du6InE6N4Y8GtDwm60NRVWDNk6VeK1Kdg4eHkE2rmLp9h\nIgY+JmObpLAJkjYWqwFwcLS1hwfRgmysrFnS3vXhbbC0zRNlBjM8KOR/ZwCZ\ndwsiN5ATRIlQZcLwOtY7WB8j2ZxCXGJlA9+dDEOyRF0E3KyiCQnyCX32Bgt/\n5aDdxV5e08Gpe+xc6HJ+CEMybEvKDQeyJlIjxfXrYcHYqUKNyIuIvtxc4MXY\nLaxY\r\n=QW79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/density":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/touch-target":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.8707953b6.0_1585075643767_0.4604696568289379","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/radio","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31d9fdff57bb76fd932e8e5fe3ec9fcacef977a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.10af6cf39.0.tgz","fileCount":36,"integrity":"sha512-yHRdXpoyEeRGzlQWGOJJmrQGxQkZjmuFaOf7+YaucMnTksQQsh3wR33uLOlUFX2WNbrz3ih/j2oM/sTlkz2KLw==","signatures":[{"sig":"MEUCIQD14sQpudJ9iNSZKclmQJeIcFfXvqWdUFWkiOZ9bmNaqwIgbVipYokJZ7ExM8mbcpY02sarMxM/wNpkJT5bcSgrL1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6B1CRA9TVsSAnZWagAA2UAQAJpfLWuq6P8kvXpkn70Z\nP8F4Lus1FRueXx17reqU6wr78kJes1bIgMCICu4rF8bYpvm7HYRz6T+kRMg9\n5YzEg2h6LCySfr0sp4Te9PbJelVs2BrHX5LhDngJQVpatLpwT5Gl7YmAz6BL\nHPIFfS2qAuMRBln+8dakYhLFTlY7bGguIEjR8C4POxb08abiIQcuVzw3Z68W\nGYyMwcCI6BW0VILzxJfTYcYgkFpiydRDw0geMZ3vJMub6wDSIoyh9OCMtuz3\ncws5ngN4eCjeP8imszoruHD1Qa583XLkytSHOFcle/UIKkd8oJ00Q0YNUhhq\nhdmX65IsVGERaJGfgnwZ3qD1SvjDIZhRCIkkpFkKirZmiCa0HMX8zgZsShk9\ngU1k4VuIIACxrfMXutlsrmlZaPPMz4Vxup4qXu0IvrN7+xmMp3VMzSUMR8O9\nZOUrALXYw+LWigD+r0X3U4Gn08Fhhn71e0s5OT6iphqrKcBuMHGwX5yCJQBd\nIRDKk8RCkgGe6HxeUo8IMFv3UF6bWrbszHmT5T+606NcyK064WmEeBdzlVOz\nHwtmHsaSF4h1sIRCc/xrz02xOs7B5kYnH+s8t1lMaYtpDQ1tNW+T7lCpI2NW\n9bf82nCdWEWMQcRv+TlP/EuPr/c4/4py26vhsTWTTSUh91vQ9YaSd8lpAjcr\n94zA\r\n=kXVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/density":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/touch-target":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.10af6cf39.0_1585160309489_0.4601327198234515","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/radio","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"792fffa474be64e003015e1e50320167cfa1b3a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":36,"integrity":"sha512-Vv3h/Kq4eIO+IuIW3yOt5AGQpXntI3jKJ5EdcLj+Aws3Uzue9BRBr00BP1VBZccL4hCL49tJMieCV0Ffr23B1Q==","signatures":[{"sig":"MEQCICbirrR0PAAPILay1KZP+o8+CdK1oBjyKxj4j+TFlrL3AiBEiDvZraC36bWvJhdZ96xtIts4NDTitiFbkcEKf7w8FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBOCRA9TVsSAnZWagAAxXoP/RqSh0eC/ocz5TQNHlcI\nirUoWcWGoVtY3XdMrkSomkqpeVx9y5mASBi/YkH+cuW7H1HknSl1BDv4o33s\ncHO/KJ8ssJelwy/nYliH8wl6kM7H9w0pWd8iHEVQ5sbLGQP0BWbvHyFd1Ki8\ngVovuVuNUH9XHQuSJxoMHbfIXqndZI18yshPpBWReM8jh/4IpjZ0Y5JJ9sEP\nZ+Oz27/6k8+ptO6RFtvN12NsUtXTGZAHkZKt0jFLZ8hZ+7/oWJL6S6xKBip0\nW0Dazk4zFObfTAFGAmbZ9ltKcEly7i31isc1KcUFmoOGuiFMG91+P3mESoJa\nG9xns/c9YhGaD602wxxkJSnRe7iPNy1OgZqYmUhLOSl1Qm0aUxjAbPwAq8Sd\n7s7c35lbpoRCcVgxl6lFEV1ihQHuniS7sMUncMnVvzCmwmG59SjTjLgV0bZn\nO0P3KOSElFSxK6T8BCzI7/E0hezlUjq2jcnIZ0iPVSEK60lOK2eN8BUztkXV\nh7REKUSyJaMgGl0sG2Zab8PgxnZJJ0ElmrhFiuQYREdFiPQprM+updNAdsWn\n7TaSnF2Wb8Bc1DRsvQa0dahLq15oOhI0peujtkvEz2x8xkrr+01cIz0+7f5m\nzpTHL0Vy35TwA66M4BwGMQ8CtNJ7oKJRPbjzeK7S5wZHBqBrP+GL0FN+nGsy\nUBjz\r\n=awIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/density":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/touch-target":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.7d8f9c8d7.0_1585332301696_0.20326875071223416","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/radio","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa19a7bc2bbc28b148caa28977bfd6bd260ffb0d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.d6315efe2.0.tgz","fileCount":36,"integrity":"sha512-x8J54BJ4qLYc8VRMDh4sRA/Y8NYpwvj+wasWucAk0cKZRMQIrirvbTlkBtcAs7L1k2hW4T1mkjPJTe5bg4vnYg==","signatures":[{"sig":"MEUCIBWf9zWiTUyPJNenkPjKxraobwMke2Btmf0myy66F1RhAiEA2enWkuoM2QeuIM560LyMG73orh7HGYKkCzmpDiDxZiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpxCRA9TVsSAnZWagAAlYYP/imv+vSu2eu5YlbF3GAB\nh6PfBTlC2zSWjk5FpDmg1JTX82nvSo4v6A1h2n3k5a5TAQwOfvt/MHvwxokX\nu7qK5WR8tQH/qWB3103TKVm5AGuylU+mqoPDcCrkr//avnVsCn0x7H99KUZa\nrbJv5mgOo13B9EgBoMJz2AuVFs0ynN3/ToTINMNadWZDnxkMNZJ1T0a5wYye\npPRZkedRMzuDLhM2n9fLOfihDRwzLCyjLztWGVeBcT00bI3N5M6dnxDUCgft\nZqu93E/faaAztdz6yYvYJ0iM+VgjwM9JZ2Gy/tLlLO+kJOrQPOX6cf+T7AUy\n8ViC7uPHkrgSK9YiaBuwjuFZvsp4VkVCBgiVBGDvwG4FyxqWsVqKIDkfLBZO\n9I7Dm3rsFBCt79yinAf2Tm6v2eiFZ6DDvqEBdQnfapB2+uSXS0NrOr3t4I3Z\ntGKNio57eAh4mNginFxVtk2uN3Aosa5de6cQTs/JGf26dqN+l9xkb1ePX9AT\npqDMS5ZT2sQHmRdOitJt7ehmv53d7KVFi2s3eqNOB8cVHbsxysX5lEthbJX+\nXHMVRXD7rCVpPusI9IC2ckPxgs3aKuZuEcn+EMp+tGXiOBSzgRhkGQKPc6qe\noDbrx5MTLZULDk+JbtUXNNBK20TFfNfJoDdg6GdYN/5shE54zJuoD3y7z4K6\nXu5S\r\n=iKzq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/density":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/touch-target":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.d6315efe2.0_1585338993081_0.6712560280296538","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/radio","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30281ec244d90ba906c6f5326ded144e14fa7b9b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.a3016368d.0.tgz","fileCount":36,"integrity":"sha512-lAd52hBpWKuA0IC5LvwsnZaM1e6AaEk41IzQVUgX8/FKrbCzuINnwWRUHrL3yhM7zGVciA+RfEcjZ2vifGwt9g==","signatures":[{"sig":"MEYCIQD15qYYPrOkx5wNCdPjhlFZra46QJaUzltOFooyxwuLaAIhAKcGESnaTSqIPogMjnrQezeW1gnCKqc3d2BYKXwJeA73","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3tCRA9TVsSAnZWagAAKpEP/2eUDSf49Lv7GhnrP4jQ\nj6r4sgW7ZLt3kMfHDaVlWA0vSNgvI197sMZ8lFmOx51UBccN2BuMywyusK2s\nyvyUwBvPYnjwjdasztZTSrVPEppMr7JhSZFJH6lkgZGXAVFYjxc9rJT7l7LN\nkBV6PX2o6GQurM1bg3OxefG3rnzSolP9C2Nnn6sGKKOzBEEsBOEIFoXAvVuL\nrOrtYTTXLW213pnmR94LuDFpsc/XfPLdTqMmFEdnG41sNVL4C5fw+C+gLCrt\nNFGBLaCig0bqq1FJWeu7zB5X/f7L5dll1KmLw7fVi0AnwVwLg31XnXNVxVHX\nJGnbznUMI19FT1zfOcmJeF4LQ0szTkP97HKZhFqacZTrFuGzkVmo+INoFKAu\nRaR2r80dH4X+R228bQo1MDenZJSZtgKbN+DZ6lDtZOvnk9Gm8Hf7aa7SmKMr\nNUHlXe/Gp4INpbOfs7t29BDvj90e/tORQUGWhuPSdRMkuFv34LOD4JGX8qms\nYIONkWnxDsih+7kSa13o8PmdpyhC55uhB83tiWtmHXohhVWjBXaTy6XLYf82\n4rngr4atvAxfnGFVXOd1FahXDiWmITF6gGtz4+I+O7q2Yx/t93zwqI4s4sxU\nghX4zXEVLuim9Lp3TtnkidrEmiT4gt2gJocolD9ojhsb/y6G0rJBRNfQKzid\nSsVf\r\n=b0B+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/density":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/touch-target":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.a3016368d.0_1585343980610_0.35106734926118355","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/radio","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cef5299bec12c3dd145fcd9a0e8d5b16f86dc167","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.4b45b6620.0.tgz","fileCount":36,"integrity":"sha512-XmcClJav1I0W442m/hSRcFcJq7wGDyndfdUcBisclDiHYcnI8F+ULtz4nXdzBSkRjEt/fInM/8hry4e8n+1mrQ==","signatures":[{"sig":"MEYCIQCgey0g4m4zIP7L7kgH4zOkdNH3bH6XIfsPoso0f1FtGwIhAKQpvrDYn60cgFtdGRRdsqpRl8QB1W4fRHfuQPYGydyi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2grCRA9TVsSAnZWagAAuHAQAJTQWd3hd+5tpPwp91/5\n3I+ukk8hpo2kIOHpA+PAQFrshGZagO+4FU/pE/lIIXGO7v3rLsTsWbnum8s5\nzp8XKshmNmSczJR2YpSAapzpkoUbc51UmGjNVjG52BxheQ20/ClZhwBYmmdq\nshX+20svxYj+lagsSmWEundB86nzLm5c3j0JryxiuaI8wuW5pK8XiXCMlOzV\nxJIsrY0G1MPhxX0EPB0BYSdo+nq5KEXWNRivLxyXt0LBgX3CCsdCOS1QTCc9\nzJZDeP16rdp/TD0Y6pdCxCsyJT/mtoTnWujXA2sdMEUpKVSapwCWgy+Ak31p\nUq0Wi/20GxWV0vK7/dZjHUhXNlIOpnCLLYfUWBnvPVs3msSefFrcRngnUsHB\n8Cob9AzBGlw5li9rMpjhEdKc9fa29j2OiZIQSBH27dpoMcKlG15YGp6yng91\nUwHGOf66VuRdxCLPijv1N0Vhdosu4yT7hKpuZCAsdBjGagWEIUD0GxEsZYRa\nHtKkb965hW01e0cCMlFE08ny1Zxxn9y1fkS6/iTXngQuGZFT4UJWzy9gclSe\nZpEm/USyTEvCsfy1+bFmqumnj7NAftQfujLvYc/jBysd5eI3QSV34KoF6ddL\ncaHK0LMSXomTft+nJLl0DzCB4eD5vpPfZBXeE2qAsORTnvaK3BkHCvTqAO5u\n7hyY\r\n=xr5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/density":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/touch-target":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.4b45b6620.0_1585670187090_0.2194504836064377","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/radio","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85c2173794c7ed6bafb280b38e31f53cf9d56385","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.e84b9c8.0.tgz","fileCount":36,"integrity":"sha512-k/+3kmopX/cPg16ESgeFezUCU0P3VI4Yz+Wvc0k7roGtWwupZGTNHkwQayACdwGggtaAaNJH9+5+RQMDJXpPLQ==","signatures":[{"sig":"MEUCIFqzZsZr+UD6bAm7r3xxOHdIkVtr2khAmcg41WDQYNOGAiEAokgYZOmxDyYNeu6SWlSQfBJoElgrGaEnQBAbzWsW21o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeiCRA9TVsSAnZWagAA+c4QAINYpJAuT1G3doiKeikB\nG9hOt4BVBQLtgUJIyXSWKibVMVXFVGJ+rUcEAJYojQ+YTjOqpt75/8WaWcbH\n88s/JN+42dYfOD1n7KXM6duvpK7RoO4JmtGarayu2TyBVjWCevA6YgmgzkaB\nK/rNcgmKhJ/4itxCYkGu8wJxfFt18xczVH3muFvr5F142wSFEWRfcVrBCetW\ncLGevpfHDdKyCp1xf7HWJrVDWnBBEZDezM+KMdzWQwG0aDyj8qNbYgJZ7WSW\nR0n1XDekEk+9vSHCXfnA3m97nazsK1YOO4kpj4ihedn84xO58ujFGtWPKWh3\n49U5e/vNxBU58CiXqqlNSJYsZ61w1WNusiGDPA8TvYXC6CVZibyWO0tZkUA0\nlFx9ccYKSgMnqDAbSIRxx653aHplcjd+ylP8In3MLRTvfJtiWizoNubIKJr5\n7v92Bv5n3C5WMTLGaRjBsUx4x9K4A4RAYlkHiyhyVZIP62qVE5YvojXeS0ow\ndRjmLuvBdqlYEdJoKW1qj3FsJQH1cSSx1M1Qjz8v5q8S/IrzJ0O9lq02ClMN\nC35DWZst8fYQywLiIv31J3oJMOjHqEQTPZ3lZk6fYD24xDrTyKV73ZWIKat2\nQ3JFb1ar98PNlwmcwCYN/1BLTMXiNCeeV3xbn4Bl6O1gUZ8i2eGUJy/Il3Bn\nSuE3\r\n=xhxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/density":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/touch-target":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.e84b9c8.0_1585760161972_0.5691327138787683","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/radio","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05502728652043698b3fd3708ba1a6c2457489bd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.e33c49e.0.tgz","fileCount":36,"integrity":"sha512-gtjJTgSgqkavlMS5G9ASOLfKpNe5JOdfdGfei+uWMJvqhOyvBHO42Ij13NwkaKsMLqVla7V6pQFC3kzewrC8YQ==","signatures":[{"sig":"MEYCIQDT5tntM1X0voF9PN8TlhFve6oxPSOiWGEHf98aZzVERwIhAN0YeiP4i53nOBpcrRrOGKOhj9vpywi9KYJ8UieDcvXM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0+CRA9TVsSAnZWagAA3u0QAIaXdZ1xf71Nyc+/lpjo\np6/IZn3gBvu3+8XBydCmaP1YNBoedQkEskDnbhFtBKtnaxZfibDVhvTw2KWP\nQpDUPzAOyrxyrZUjTi7rOHLp98ts/sDwTnZ/Ieal7pqbuPb1vFFwA/aB+HvB\n5i9gXonz5oBgMGrzofMXIvJ+Mm1GNat6kf96d0CvXVT+jt4J2BCrJE2pb6vr\nONVibLXmxUj2IsHt8e/Unqd7kfGvf0N0blHCu5dpEVDZxdESjdLZHOmyPV35\nGtFiWMPoAFOovMok0fcGRcnlvaocR1UDknYRKFSG3BY/d8UPdTOGpUR5HN6h\nTwJ7J8RlKer5LGeaH6GVNR1Jyrg0OniXVJVVGwedfO1kjCY/GSlp6a2mKb7o\nqs+ChelLWJV8f+zWwE3+V2yAU+eF73MSJv6A7UOu5gUupTUjCBwQfr2SVdB5\nkhOPP1j272f33GO1O8Vz5M2i2BqJuuw6+NvOtsEuCYEF6iNo3yFW68IkEnTl\nDBpWjAemjPcuyiuPwn+yH4fS4nAuypZwur+5cYpO914vkXq3fyZ/bUt2aVU0\nOAs6+6//s7c4G6GCTO2BJrWDC8ZkdUcLmiPlfBObVfrbzmraTCQQXhKFiwg6\n3sP7DwcpdJJ7pI5XTk3k2Af/+bx57ucwfwl41o1w2+GnoWPfTpRocQFRYBBY\nddt+\r\n=Do3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/density":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/touch-target":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.e33c49e.0_1585786174282_0.8009470485851706","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/radio","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bdf91370e2a44c605753d20ccfe045bf0530a02","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.f1f8e60.0.tgz","fileCount":36,"integrity":"sha512-O7/OUTB44Q1VMPnW92Dv54joYSE/2fO9o1zAt1NoNsU/kp1fkG5OtXxqjYXal6wSQDzxN5F2cPiaFnOG3FMcPQ==","signatures":[{"sig":"MEQCIC2A7iZrD7ViAvLCVcMoIt2v9VgbByMwCRdDAAfDQ7W+AiBkjgwtrnwusWN3r/+3FAlFo84P6qwYT9rGOJYG6Nl2gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjl3CRA9TVsSAnZWagAAsv8QAJfxoof2tjfs+FGj1OE+\nrWBFj6gTPh41jGb15tTX+8aFKKxhWo+Wp7VrWL0snXK45IGDkKNmcETX3W0p\nUtW5OPi+VBoJ7ptuJiJaPRtcks2NYvdjh3b2/lC6bS/2HddBLt8PiKOTkQPG\n+WU34PjI7udD8OsAeo2dVjXlCZOhKFWzFAc/CcJ4zJZCOvcRJOyc6ppRmVWl\npwt2Q1pcmGKDEkgb5irr6T4E+YVKznxra3V8aWSOPGNfEGQZX61AOAQssTTO\nwSuUHl8m3ECeA4mADmGAJvS3eZWhCqWwFLYcvsv2ITnluoRNk5n+y76cRDSK\n1SYrvLI4EHftOIGk3ZXB+pKebcku9YBJvRchgS8QsoP3uSwg5IUvxDZnmoK0\nCv5UruoSbb+ywMwHxElHIxhg3cSRlZuSmmYlb1ETB+1uT8orZACcSQz3vT3y\n/WI13bqsSDbqj0D7Bqs7bre6vgbkYzXJepMB0tZ0fRVaufivK73W/h6ycfd2\n9u/sCbQigQnrv5xLa3NbQg6IXAeVvgp9oqJZF0anN46iecBvlfjLyArIiDvo\nvTcfJ2Ds7rLfFdVTfb8feX1M+TxKsr9eQqCAngUwBviAPxJgZwCV8HpRi/Wt\nnSJIDOmDMQYJKkRlC2lYK9RPdOspJdiTu5pch43ZyD46MHyYOWpcJtzx3blI\nDt8U\r\n=oaLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/density":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/touch-target":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.f1f8e60.0_1585854838553_0.03480924039144884","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/radio","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76cf1fa87adf654e0e4d2737596d81a9d0c537a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.1e17c49b3.0.tgz","fileCount":36,"integrity":"sha512-mwBrEnifMqGJIkaZYysXvfiaLuG+Dk2RhQzPQH0JlRtBBN00ZBmRENUPLy6RvbHCXu+pQOjUOJ/G30IcVkpR9A==","signatures":[{"sig":"MEUCIDfyxgIqdLNoGRPxtXTe2ayPVFaMhXqDqnBSEm6iX09jAiEAkjKWq3O0ZDCZLlNSiAFqWAeSrzQx+QMtxf1cXY130n0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qZCRA9TVsSAnZWagAAYU8QAIrZvtDK270edy+Oh3Wv\nWNZukEA01QLSR6EL5/9sKbrRR9iD/Ty22WQB7/bjJ81iwNtP1nIbLvtPjrvh\ny3Re7NN8bTR3Sd6u0XikT56b2XuU4kYdQ6zdEFjTLTu9vCrnwoFCnjdxDbJG\n068oAnsQknULZqKPta/HkvHJWzdmar3hqw2Ld4HsKBGpvd37Hvsk2n/3y0yX\nOUVhKXz1yxW4ujTlU7Ay92Y29oVxrSCPgp5lySe6RlG+mmNNPN1R+drP7FXy\na8qQsCWTdAZrj4W0T+kWGwSp5yXhZNotdVCnjh73TaR/z2K15uPZS1a9uqVH\nzw7qKIKGd2/kXTxJt4Uty1UMvAcTyeOGjSjt+2ugLW37oW+gZi+bxhKqbY9E\ngmQovFsVMFMpm4ltVgQM4PaQ1dyQkwb33/0Un2Ow/lgzFst7bvLeAQ92v4mR\nCHUuP9fR1nQdLzPiDe2JCp/teH3rfUiptII35CjRCzQDCQaJ1p98czPLvl6U\nYLvF8P5c4obCa/yv0zBJ7HEsp4fllEyq6zxsnG5upt+tCEVfsHjovky7yA9O\nmjUybkP0TgkBfPnlbgslceIYa1HME76aIO/9GCbpKjEFHtAo2vU1+GpARLd/\n76rQ7eJgt1Kwd20QbxpVJ6wPC2kBLZEX9IGsV0r/OZXwJ+ojDboRSiC+pM7w\nlGBi\r\n=x9lv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/density":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/touch-target":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.1e17c49b3.0_1585937049401_0.3305729108694049","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/radio","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a56c967173bb2137477d05dd961168e273f7dcb5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6a40ef217.0.tgz","fileCount":36,"integrity":"sha512-8qSbFuF6j3aj5kIssl19LSwoD2+Q9DzhNq7wAd6XIR65HAZZ6ROdgJrVcCBA3aN3AVIq0ynGDBgLvQiGXHlS7w==","signatures":[{"sig":"MEYCIQD1qMQFVe0HxK5bTUgPgDBwkRf6k4m6dDv0YUnVL36wRQIhAJaD9txWrV09ZDSFDadjng0zAXvOb7G+61RO//23FBnf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41/CRA9TVsSAnZWagAAHh0QAKJEpAyZP1A46lPF38a5\nH0Ay1wfn8pZTZlDOU9bbnr3vlQezrQBEODTwLrZmeswKQbPk0m+TMMvt/XG5\nrxeMj/mqvNWjx+tuW3hi7rtXJ9inDpOMeUuegRj7TiSPjuroDxIh+NFtZaBT\n8XKzGSWMggSvrIrswZ/POR2UF0UOKAJxSXyPGSbRcUbeBFGBEfooAoN+4nR8\nrpTa5trOBAI5x4/IvDvI9gaqpg+NYSsaxVVhU0fxd8A4AtFp7AGh3z7ChNv4\niGIz89CAzwd81Pyj4/nbn+Jhi4nQ1XZXrmcL3UwCDhFGn8R9/XuF+4ldaaPY\ni0RQ95NME8e+8Y8ATqluhODPc0DpHTc/5P+RNjudmN4oHR+PA8KeZ6g5NtZo\nqYNlduEMlYblTlfGhb3UTxHL8/1tXi2H01XISK7drt3LxlQuFOF8s8ge9frt\nOg/0QZtBVz0QT2BogKKugCrKU/HlFwJKLCX+kkQM6shky+Ij5NUNXv0CDm7a\nBHdt3a7B6ghUn8eksTbLCwSVenczcExlSBYB6LFahZGHVcWAvoGTSd4SZvVS\nJJQxi9yx8IVgUW8t0KmFY5BkYQRmr+BHpuyFlyJ1X3jEtZpAgOS/Plw66//W\nFJez3qr143VTCUvzK+1ZjBI19vKQNHQbwHAAIHsF1Eo1Car+7OxQA2vWk7pZ\nXXnt\r\n=+EN3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/density":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/touch-target":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6a40ef217.0_1585941886945_0.33732761662357724","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/radio","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d1190df7e708ce5a64cb357986cc55fb05a3f29","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.5f24faacb.0.tgz","fileCount":36,"integrity":"sha512-irn3XppiwgWVyjvnVflNnVP8fSjGacl38OzUAX36tDvBUzDXKAMUKDoVXiNSbNLFSb6lIW1PfeobMxkEh3NGhw==","signatures":[{"sig":"MEUCIBqN56VVoPur3CJwa9oQ4grhMcYcb1mZOGKPZph99uVjAiEA2grngcKX9qV6qlHOPLJdQ2ZoGRHXn1ODTsJYMaou6ag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9/CRA9TVsSAnZWagAAY7gP/0LJycp1BGlSKOGY1ps7\no7TULMlY0i7cxU3yxIYYi4CuEDg0wzTLPQCIvV5M62nGeODbv/H24pacYh8l\nhefinPwvFka2ybRHUYNeQO9sqkRN9pR1iaPfsJ7Gb32UqZ3s2QsRuhs0XAHc\nad9oRhVWtSpSabrV0Nij47XrlY0qAiV8oC5NGTtaG9MIfWC5/Vb1inKmdkch\nptmLNU21eaRv2ojP4yI2pow+g3LAFfvigYslLezbp1EPFcnUJDlGndKI08rD\npUtVdziP9xlxNRkjNxMkN+rcEShywr1noz3YjA8h/hanLUKYSsZojHtcLTh3\nUqTCJo3Cm+Dc+81hCdR6jsC+RTjJ/jnIFX8xiyVjUMrfHK7mVouphjN2XVjJ\nbFNXZYhkk6PasaRyXpiSJ1PuKlv6vb2ymMwmYuiPk21VlHP2L2sKgBwNr16n\ntTllvg90PqYVmEYJL72GvxCmi3iTkdTd8+wUMz8Isn1FXNiEImKvumPfzZ7+\n86oJ5iLdYI8psOrYmfZ2dysjDZQXXZrpFkbL7TgObcv+/IiHkq+Nq9Kxd5Ph\nB3eTyMlXpBfjXFwUstFEi7hDZAqg0YudWdb7NcUYvtGtok4D2AuON/OJaC6D\nfaNjB3ZKhXYwkqTfpd14pA8CX5+BnaJNp7mCeJLd6uWZp5bcYEglijMRJElB\nTgqT\r\n=uEye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/density":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/touch-target":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.5f24faacb.0_1586360190984_0.7462699732104714","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/radio","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbfaf538faeb1c6e4b24c83fba529bb8ce3e3eb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.82fa986b9.0.tgz","fileCount":36,"integrity":"sha512-lIJppn0bBa/Zr0LKt3QI9hVEdOldlMUsUoyCCnbzx8m7J0Xpu7Suk/wCJsw5F1QhOadzXqIyT5nR+GiSD9ZOPw==","signatures":[{"sig":"MEQCIDx/D3Ha3aySsSlMpz6059M0XLF+O6swGaJMqNQqsN6KAiAS5QWa3dyTouAOEk3l/aRmruwJZ497l17vn9/Ho91G4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfC8CRA9TVsSAnZWagAAjzwP/2pyZVwISPvp613nAZhM\n2SfQeuwtsfVZWWJ54Dgq2JJgY8f7bgimz+AdBgsPMHZ1CirlzyDWW4M+jeKI\n2zHNwNLpMePSfLdJlU2242ite8F5BINVxwwoRYRKp2vILNKIeW/VnmHXpWEf\njJ1YKDA40Eo8q6Qxidb88PWVnKEY4iPNGiu+viFvOZ0EYi3t7E8M/fxoBv9p\nZwlPIYXiXFa8s197yU/EuXtAB6Nubi+GG4rjG5zVpanOA7mMHIZWCOJkGzMx\nslN+G1ewMQAodWNjp9KvfcH0J7ix1J+J0SDUq4j9onMhitxlsfLE2J+gTins\nWmi+T3UFM3BCAekbjNxuUyMVk+UGCc1xMTpUrMyK+G6Uy6ElgqFyUHXLQ7es\nihG2GS5MUD8slEkYqf/pcfxnhbMr+c06NImyTlHM0b4+IShlGT868x+qIn0+\nHPuRVGf7uXUZwM0ngqk/xDo8QihqeYBe02yitv4Qfn4wWKiRDbYjyaDL3I90\nf49nxmy2RABPlD0PqzBRXEYxFC+t3vC3sJScRgRc6qMFOecNCW/0xmQSbKpb\nm9VslH8CWps9EXsDOxcN6txSG/i/oTIQu+sbWIy0SH6edVwb2Lul91H0hJzG\nVptCudIHmZ8LOzSBSBy4lqAaWsWKCWicJR0uw+0JBJFZ5Lup7V/K/T8wbGVa\nNpmt\r\n=xi4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/density":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/touch-target":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.82fa986b9.0_1586360507800_0.1796688108528215","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/radio","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3339ddc318509a8c5bc4d1afbadf6cc3ee28d5ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.9930d9cc5.0.tgz","fileCount":36,"integrity":"sha512-kzT6/40vy/EzcGU9pXG9tnzWkICj4uFoBeg8lhUxkdr/6FY/n2OnbjjosQrzF6mDIopYTnXbspq6Jl8DGAl5Lg==","signatures":[{"sig":"MEQCIChm81svw0I56elfP5N1jnmwqDTJoO8TPv//Yqr2nkl4AiBhWFR8grof2qkKAdxXeW1dNx2R2733YQcqK8LfRdjrmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibTCRA9TVsSAnZWagAA3wsP/A+zryGRC4bfTTP4DpgN\nVvXJc5ZHsc8HQHBKg2uWgQbDZpoWJEKXZlUBZz66S19WMNMIvHCoYd62JTOS\nFOGHeLX51IjVQWFOD/GCxJsZ6SDDIVcfgy4n8IfdrcPikjpZNf5/Ld5BBi3Z\nU6uYpEMAr48v6uq6agk+1OKiNrxRgoIlZHuj23NZX9jrIfNGXDdylTjtqbTG\nxju7p8LR9/3gX1clIi+PtcSjy+VDo4QUffSvfJ1JUCmvB7VS2PTZR9n0IUZM\nz1kUYjOYZ09VSKxlSmOuYzfGwfi03+gL5zdwfBhF/9B+VBudTtQBsg64u5yg\nBX//X4ZfqOUmt7DgXU/awqJh1+uQsdNzRp5tNyinogTz7GsnYClq+3BxRM6B\n5wRSAzFbi/LnmY23k2zsUhnJpq4UESy6IjjfGcNfqqJZLBLos/TZVBQGivD7\n32QGcBQv4TKCkcFy+inef1jOzt/SMw3FgRHnWLRk2KGbbmwZvnVkM1BlSKFG\ntFVwmoZLLOdFl+9ZerCgSW5wpj7WGO5db0PfPSq35xmI/BS3jZUMXiaaS6za\nMW5OmgqaApqErnHolH3x8eyAUp1aouiDBC9gH/LVLZ4oBfPXZu+5B04MPnXG\ncpTa/Fa8APAkCzxEcRpNaCH0BG2kJaM1lLJL7eYBtCxjMoJhUuV3vDdPbmWl\nB2hX\r\n=dN1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/density":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/touch-target":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.9930d9cc5.0_1586374355241_0.1913871098611637","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/radio","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7027e630ec44c8ab9b9685de6ab3687987043d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6601d24af.0.tgz","fileCount":36,"integrity":"sha512-pMwThwOmbfDeglCxCodNjH99t/KIgGbdc58aakbWFhlgTcfenT4V0f4P2bm84sGYSRl4G8trPTCRazfQs6+Pfg==","signatures":[{"sig":"MEUCIHN3OZm2xajqRq0WjmQatyC7YhX7XAxqB8jm0vwdB34WAiEA0D9KoFRRsJq+sZb05RAtJWdZJ3xKb2NvkFCggIpvVhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyKCRA9TVsSAnZWagAAdG8P/0BE/x3H7DQYh48rzrPG\n48Iah6icWF1VqZSEt2q/iztXYAMiPp6MPSNogY7hVubgne+hPNUxM+THpB+I\nw4YVODzkNnNSzHDMk8aATRsc8T0RvOI8P0iAKeYrRXfRFPEJ473CBPURa9uq\nxUnKD3aFWp3bnaZYCQMpBMcEOt23GGCJb6znNlJ9rmSoXzoHHbMeZ94ZcPAE\nWvJbFWh04ezUcb7szXqoh+M1gl4ICXurkKn/+FKiw0WZJw5nJYyHq+Exs8Hp\nIMvD4wVpIG2RfTL0D+bE5rnApvCicKiguzlKVKOG2ASHcF2IvIHGkTbrbP4u\n4hWQH30RUsEq6p7/VZcdG3Cqi0ztwpIuXFRg9yrHIWd8HBeh1cUyDRys2evS\nkFd9JVgomX8XnuCQ0iGjiQ88Agt2k/yB6MUoxyT82upaxODcDz0C3aNzdU2D\ndkNfqtJqeyqbYLzHTi9UJtt69ee7ZdOVxMQ/C1WOiHmxzBEpU1etFjrrDn2R\n+g5aa73fNQIPADETBTJnmJDZl/4nzjIOrgIkaCdHnfcu9BF3hHQvyKxYvypt\nD5AIuMlKP5ZSWNEAgeW1pj+jpxk6Znk+cpbZ++8txCNdehsNuzXbtEZw1xJT\nnNDSM1XKjqkpN8q77B1y3mZRnmQu7iotZm47pN2+GD0jOxscnk2Tzl4ctpiB\nQWOT\r\n=OQww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/density":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/touch-target":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6601d24af.0_1586392202469_0.7010826375549781","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/radio","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6115cbb6711808bee1c3c91a57cbeba6fbf7355f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.05f5e1583.0.tgz","fileCount":36,"integrity":"sha512-llXeFz+zE3+Vw/KepNAJKXFLzbDDQSs3Mul1oi7blPKPCLBoRwsVtvbV102a9b/S4Z+jyCigXLWQIIDmC39Spw==","signatures":[{"sig":"MEUCIQCklyqAuxKwF5tVV8Q5eCbxtl2fcX31obCdPGGZqAEDhQIgWrr8q4Uu37Cb7R9TCHY5ep4+oqu7JnQnGvcRl0UDoOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCfCRA9TVsSAnZWagAAbc8P/3ocPprFiLjXSRofyytg\n4gnDt3blv7lhI874ECXj965uK7qa7x7d1oMDuwbBJw6Ab0SdNvjx4shqOxLV\nAuYWrItmuVCxryfc/6ELnK09eEmKBCi3YDFmWI1Bt7vW5jw4guFNmhC4O5NR\nJSrZIOjI0v/YS9FGTIFqwMWut0K3wB6GFbR5k3CYbG8ZwrVX1t9y6wAkCsJG\nuODPztjZ7NR19WBBdnrZ3SW0wXhYOGIRkomhAbrCe2RGp9CO+4iITGcCB3QQ\n+ckm4Obmm0kYCNs7VaQv9n0NWpk0iC7K7ZBPJLXR9TwG8mJJ8wzJoqBKFive\n+XkirNmoj/SqLGf1JofIDv3oJsj0ESTGNDcrKfNQUtTamZeJN8z3SqjNvwj0\nDJkbHxf6HVgW5GG0Vimn/aGBjxUYb7L21yD8rbZw5qQmoRCEvEWB5OL2Jcnv\nlTnl8kSw4gbrLaqJ4ah1PT/yZyNkJKKO1pzjledk1vQRNX5DdbXfnbBMpDTo\nJGrQPGnZ4JqEx6O1ofaSxg0YY4/cxi2xh+B9mIBz+OeadYK9LAeo341jWjzF\nqDznYyU2/bq/0r5nNdRnzXZ1z3gDw+b+e3BA5v+QErh3xlLU/4PnLrty/oY+\nGVgCLCr7MsNTOzv2deRI3vG0jmstEz4QfGD10sSjbRlVSGlfMt3XZOSB9ewW\nBRfe\r\n=VJmc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/density":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/touch-target":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.05f5e1583.0_1586393246815_0.4240665731027595","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/radio","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8bf8de91a9b3a9dbb1dbb90a644ff5b9f6ad5fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.bce00e186.0.tgz","fileCount":36,"integrity":"sha512-KTbu+592f6C/894bnp9Is2XpMM4DWw0rXxI3y1EQ6/U8wJ0goVyYwDFRnBUKfkbV5Bt6XdjUd7jQMFrOLFfNmQ==","signatures":[{"sig":"MEYCIQDMSXF08J5yfgttQ89742bDy+A3jPA163gx2lWlqg1oXQIhAJnlU1mOQ4A/AsFx2310xV/FtHe1w26fZ7SjqlNNJoG9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3RCRA9TVsSAnZWagAA7acQAJp0mPR88jnA+O/jAQlj\nWJc9tP6jZxEiDEPqHLhTMWjp19zo4aE1+22gs0rfm3iLX096p93xs/IeB3hy\nM5SnCZoES9qMRuCob2RQcCZVYwUEa9IGNXefhst6EIOMOFxSrDHYYiEt74t6\n3UXB3X5jocUfI0VJcNYV/9JSw1dMsOZELabVFFZLMGuFQMmSdOSmIlhN5Ze5\nj7PSEl5yjg6JMR0Wm68KQtQ0P/e+zIC2zc+0ZGkwlbVozpDcx9AV5czB9+4O\ntYz4l8OoAyJ2rBw4uF9KYOS+KQ9vYNeq4w9vdHZpxqTArMCTIVdD0oSizw7n\ndxprA4CojVQv3rCEIiRRSpAdjCY+y5pR0IB1GfBmfJIc8yiAG7vfHfz3UlhU\nSSqORgJgUs2asQFQMtayWKvwT8TsFvdtDAGxOYB0vWZUIUx+ybTscRc7epTz\nqdx0om5FOf1nc+P5PDvBftzHLspbHFocqnr89cvcsN5+EIv57kmjq0gRmNsS\nStQnaql85tyh2uGzVsGk8XblnxeUxP1siLjM4+MRyfzINcygluPxXoT2TOIE\n1DI0VoblU62WKF4GDU9Lu6YTcykXN9/YpqRONsSfz71CP1vkGd/eRbsNP5uS\nmBfGMFvQmLyMu0zYlWg8qf6aSIl3JOcf+ojDcbTfSeZmDY2hRwzXPbmDijzQ\nnYTo\r\n=PiP0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/density":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/touch-target":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.bce00e186.0_1586445777027_0.587262653064033","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/radio","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41d12acc3d650b7ce0b70477ea9781b84c1206fa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.927fa902c.0.tgz","fileCount":36,"integrity":"sha512-NvYr/pW3k4YHAmXzTrYuBZypbAjKS7WGYPOK9yAOX03OVsi/r/yZWWX1WL5DGd+lPJdL97/ufk2oDZIAgPDcxQ==","signatures":[{"sig":"MEYCIQCVvSgU+KALLvLzJCr2V9VVt2aJtOtvhMDS9bFtdvW8CQIhALTbfoo3KSjBc+rsPEn6CzJEycwZ9rmVkpLL62HzaCHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22MCRA9TVsSAnZWagAA+5EP+QEDfS0qP5gu2HmuppjI\n+mZ24RuJbPPupu9mbfxdkHcJANkaBXyoLS1CSnAg/0VPhw7mTH4D1FrXUtxk\n4BRQx7dwNOAztz71cHn/LPBsY89Q5YBHznEcEEupo7+8lRGPvbb4Ji6rBJjX\nhyn968LjS3M89G6grllgikc6NAL1iIIXMmT+EICY/jGmkFDrsJzXfGt7oM33\nTMMBF5EeM72BT5tFSCv/B+k5L4MSRttBlo7K9YdAnaRRCL4sy9vMmGysUa04\n55Zr0P1C3ayQg3W/GmuYtQCXxAh0UhYx53nBLSW2hb8jadxGJ/hw7N9qhKly\nrbcJlSYi0nACGenjS8XMKhhZfZA4b+RoqN1eiSN68Nc//+qGzkKjE608NhtR\nfRoBSqjryodpSf7fGGsT0ZO9HzyUXRZFG6LWBtoNp/WAyM9ClJF4sON/ZMAS\nljqj7VaUwsLKuE5/eoEw/PxGdg/P0MN+g/e+HnZW2u0YQLpqPyBkmearMJ5S\nfxV2jdSkes1PZawAEhINEfN6MNZx3Umg12cuw1Utp1HvyR5dHD43Ii+0n5WO\nSmh8XuVlQJH5fpyQ8U/QWBunawV63QZIOBVIsbSPdjWiXYHv1/NxApwwPB2J\nPqzhaMaHP59vbirc+9lNI4WitX9TkAdqhDTROE2ubxFvbwb4/6FbU2/oA3US\n7n/B\r\n=wSnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/density":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/touch-target":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.927fa902c.0_1586457995925_0.0177017888757951","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/radio","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2be49b52ac212e5bdfa7805d67f1255a4855d41b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":36,"integrity":"sha512-NHmr4V+TykFmBNTrRX9HAPvHPI4CbhIn6lPEpph4sQhvegdviATv/Dq3nHc3dIV1EmefI1bcOHQXzQlb8xJUig==","signatures":[{"sig":"MEQCIB/agxW2uj7u7tvzBQk3DfavGfrE5h6+cn+JFEIVOXBBAiBHo7VAV3tCH2BWu7zz6wkV1p3hOCc9TZHgGzkQMTX4cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMl7CRA9TVsSAnZWagAAyE0P/A2jWUAeNCXRVXNS35W/\nrsrzs/G+ugoUP//A1ojsSzHhQ1z8tLK32T5FQ7r3G83sRovtyCRxwwTynY4z\nX27ybiAMygBpTCHSAJiQYhyLSL4mxibptePeT8xnf3SUzpGBhURDDvztJnXg\n66+JFp/YHWP7Hs3SSLS/o3x9qIqVNrQqQ4EMAiXlN86p4/PiAA2JaGv4/LoM\nGgYYk9ozOx1dEKwipuMuwO7lxvYfefVUfbqOqfP9LTEiqO5DMqJeMYAaTgCg\nQoHSWBpHPoYhDAYWLZ9xB+eXvCn8X7BBEMqtBeMV+n7Zrwl6+SFho2IwmXZm\ntaus3Ww7OwV9KDslozXq19nJR8Bvq/SBv5qYkAv1AVc7roH6jvMXZoIdvNdu\nWOdK9d+5pdl5E5c+Z4nMS1sIOKz0ApGY5ZxrO+z9f9j3JNeW+Q1KiQ2K2TJn\n1VXjc+njxy7mSaBd+nQL3Er6xvGVLGnG3y8NUYC/kDAni94qsZAiVXtCSIUN\nT+iffmFQdPcVKybw7XyPq2XoxHaxDHNfL8WzQbmd4Ft2zm8X4AcuXNSK9YcF\nPAbkWZheGtIJ/Td3MiftNgnm6f6sFMHRYFdhE7cjilybejQ3MW5f2X5To4zx\niVOY5WG0lzs81sD40L8S0rjkXdrxfKmabwxMv/nM3MtqV71G8axTOBF05Ahf\nnpj0\r\n=2VV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/density":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/touch-target":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.eb28b6ecc.0_1586547066535_0.09141872216359825","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/radio","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"601ad557d5fa0cd700ad89c97b9855414987b51e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.816a43b42.0.tgz","fileCount":36,"integrity":"sha512-6d1sI9r3IssdiccvtKfmuJA/YhHrHOLB/Idh+x6lCtFsmerD+nUAao4Locb/U5mUcbMCBZsWN0o/zaX2TyjeaA==","signatures":[{"sig":"MEUCIDJMx2di4rVSoo05yYdSEckIHcXnUefluh17eN3pG0LXAiEAijrITVc1UzwGAXUWdetyKjQjIjhTs7FyxlZDwvo9kVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyiCRA9TVsSAnZWagAA8hsQAJ9M4cwAra7dNKZOvzMt\nEjBMP3DojeH7qcY6+eM4xH6X1jk/aFJOC098vQDkIRRrA597gRdcW1xm91LX\nYYeq0WezO/PG/htH7hpinKia58CGwM3zYSHmAWcINJQe6b0cp9JFFvC3k6vj\nwAHXS0Jqjsp9nHd1OBSwPjKtmZqRiG+bkKPu8ErBc3rFG1QJt2kBdE5USPnp\nk4r4cqWQZQJTdlwgeybgcC8QrlfaXMhPaBJt9rT7gVUYYcV9I6Xl48mkcTwD\nVAaNZU0EEXd4ytqdEKpmSb263Nzd9NblRQEhzt8id8YCHinAJlRvPWGIoK3o\nGb19IO+VuEj6iQsRgJz8rOD+suUjIgdcGGAy3d2JK2Ue+i0h7d4xbmVf6gVY\nMJdgpwb2E+/x332UgxZaY+pgpECo6K6P34Hmh8P8HX4U0qPcOy78ly3xVZEU\n2F48jCLufq9Fz6GQf8CEcbY8spn3QCM24Yz4LPRTcQFU1gYYAY/JovKZkEKH\nNe+Nl/ZnMBUqZNBfcj2E2bf9pR6iuIlepndXk7f9NV0njkXB7aYwUR2Tg47G\nERoEQY9pwQgMUs8ef4XRp/PIZcaW+RKRiEWcxPHWUm8zy22eBRBRUJQYF2rX\nHXnB9pAquboyhbsqjlKMyGU/Y9QXzaJt8Sj1jVzOPAuEpdJWzOiPEBkqPWce\nUqdy\r\n=xnOH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/density":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/touch-target":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.816a43b42.0_1586551970181_0.5725163004901574","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/radio","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5205cf854db30870e937ec11647e45b150d26b6b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.008c4d319.0.tgz","fileCount":36,"integrity":"sha512-bTMQeRb/9zPYh5v9YZSgvBSDDmEqzzaHs8QAs4TOJ/091zzW+wSH9xUxSz1nuYKgAutwff8ZqdS2ufHEO+1Cbw==","signatures":[{"sig":"MEQCIH+wYPE8PXlR5AUStWAnNsIBSSFWBHcMcxEe9DyWlxMOAiANCCj0/2Pesz3iBmnSEF5etXamYPuy6w2WGQYBELbpLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJR9CRA9TVsSAnZWagAA3t8P/3Eysoom78A4yXFnhQGX\nlXUPQ31kLXonb3V9/4ZwYrH97WNSIiX5PIl5xeiPHstrP5qSQoY0fC2Hh50u\nSMY77azhW5FAi38PopKYFT4lAIEXTUpUQ/WNznsrUURyc5dvvfdHYInGxmgP\ntE297KIQh2+KqIroiolj0nPU3AUXh/VEFhQnhDEQ8VpokATqpdJxzKtLvtU3\ncpEg2sHjW2tGCj/pzKYFvGP69kspOmsiyzs9XYClAcu+37ErlVrzD+bXOn7q\nnXaDiESKlbqqNzadvS/1e1gKiaydkljrAYhskl3LHJEIzzLUdG/m6EoYYHm9\nqcKOi3a46+tOyRz7UUELJgqW7apjSgJ7fcH1D20kiznXhCj8wUYRAConv773\nGbfl7HxKcekFQTarQdf36OrKheMXw30gigSDd6jUDYTZB8VGYkaB08RFcXw3\nsWsDeX9+OpkkwhI6Ive+qh5gs/BBSkV6X8jO5sV8jf1Ta2CZiMbZp8Fuc0mc\neMIQWlIlSyCH5UfSso90qGApyOBCd6onl+yyYYOHwOrF2ntmlagu9qF0UQup\ncYAlCJ79xQRMF5qXD3lc3/Wupku5mBQEkUSaueLDnIe46Tj128lwUtMkvoDr\ncwap++//7vPB4cAdZHmvIUPgmUbvbu5bkOYIltlpdEC7cnJwAUtBfVtqWr9b\nBWyq\r\n=ygCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/density":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/touch-target":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.008c4d319.0_1586795644943_0.2744382412994526","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/radio","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c2f3c162670c857a0d7e9715c48524ec3f888f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":36,"integrity":"sha512-uePuG/qmYEgPouOT447Ykix4olwn1mdDOqafLWvLuyqvTl28cy4dA0Ep1aZPpsKW0EKZOrQ+olMY8rzHOLhwrQ==","signatures":[{"sig":"MEYCIQDfR1y3oYN3/LEDlM0dXIqBFs2Dy+NAHha25rpfBjozAwIhAKNqPXIfjtYQ5IkPXBwPHbctTkIZn7NZNV+ltEmclG98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUS/CRA9TVsSAnZWagAALyMP/2NR44IcHvY/4CYXEmOy\nibqYfI2aQw8y2vqTHpETejkRpzI+anbMfoG8A2tqOrkJn92tfNScMECqfVUZ\nBbzA18AwYLH7yOyLzHvBpeaopg+9hl2oshLQJz3AmlihBIhCY8yTPFXGXv8/\nEGutG/PzsqwClVJjFiT+vzV3nBeAlHcS7utuj76xoQoWGLS2Dm/AHM8enxf6\n/9qQ7HQ9XmZnZXm6sYkWbvFp0Yxl5LUB3BAfPPKI3htkgUNd9t1pqV0tZp+d\nKuh2jXM61Jzk86DyaXv/ExncJJEF6TOO5b4GbgoOgvHN87tJK1KpeZ4qliJY\nvnfvxO3Hj/khu9D9uPDtnRjo3o/U0MguAhpQQuahJyF5S3FFE2iiDttrp/Xh\nVxBKcPoH5cpMLnG4D5tQn4cU2rzpFRDMQ6p45tk5DRulnkHME3OJC7tSonl4\nAmcQ67pWPDlmQ2TutK/mGvkGLWPaQt/Kwju8CzZKOcD8CL/Pg9JcJH5vgy0B\nZV35QIZlqUdaboVK+Lmbx1fB7zR/abKWeCDhHTht4ea+dBKR3Cy6aejZD7Kt\n3XOIVwzT/HEOr4eeRwxcUNZzPyEakHd/zwHHUFLgEeFGndoPtoqVl2kzLyP3\nJV7SfAex6BXJYDEdrehhlVJHWeaR6xoXKgiWZuNswOpRD4iVj553a5iTYhUa\nytXd\r\n=1UXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/density":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/touch-target":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.cbb3f28ca.0_1586840766830_0.19175636851885192","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/radio","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eca78a1a06b3a9c867651b222b73d1a23cc61bb8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.f172b0f90.0.tgz","fileCount":36,"integrity":"sha512-SvxlC89UdaBqU++fY3g6GWz/7CqeyFW+VYN87Pp0fCOzy+DzCiweLWWj4Sy7/cEoHaTRjPXGUp5GjujobjCuQQ==","signatures":[{"sig":"MEQCIEMC3IGzeCkhXfCfKPX2dGuQMKWthNxiCXcgb6Essf+dAiBZu9JiI0xPhqyiaq1PHfiMlfFSw/ptMDHfQTmNfrhNew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLpCRA9TVsSAnZWagAAOKoP/iu3vdG2eTIiqT4k/20C\ngaGA3RCwxIwiLJpSvu5nR0mJYsa2JDMryvNa7zV/Pe+XULpqq5zzw01vYcZQ\ny7QTNhx/yzmx5/ryCry4/uRZ1gEM33M0SOoDdGEt9UM8r6pRpkMJh90t4pOS\nMJoDElvAPfaRElME8j4nZXnsezqyo/32qOKn86397xRmHZMSznJcRQerfXIh\nT+SL2NwS/liG3GW/EYIPU5a62r1Fuz83HSybDhjeJtLmqikZCyk96LLJwvfY\nAcpiAssEYvQecGMzDH4djmIJXHwmkvI7IDdl48w82Ui/HdZtuOOLmPRXtDG8\n3Zur7B9z4PfEplWoYYTz3fossMZhgyc68EDdzFXD5r5/Jt25I4679JdZITir\nsEt4GTaanPZX8TBCfeBJ4vYSfAEKQnYA35pDM/uWGPf+DxQDMcrb4es/hhXY\nHNtBNtylhxqr24VR4nAro2qPg3OISWr2045+OE3sB/qEP0Hed6wExY/56f20\nOqS4rt1/vmvzO8D6yzZe4WyVh0ou3z+qkAiN2WDwSwjh7oVvAnH8ZZ2lPUED\nbddbfN+ip+L968tD14u2AVbeK4KnFNRrRPOB2AStozOk0nd9PDKZZJ40Ze7o\nC1CwRszdmdaJsYGpiciTJPQRSUH6Il2OP3uFkWrguOn3oP9JheeHmhEp1l8I\nmAWs\r\n=XNJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/density":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/touch-target":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.f172b0f90.0_1586905832505_0.11113803369512643","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/radio","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6e4703f03f593fe87ef6494b0e7af06cefd555","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.c02642273.0.tgz","fileCount":36,"integrity":"sha512-v0yuBHxqClmkwQSL3gn4Dik2aXDyPMhGe97WEUSQ05TaH7Yoe1rFstNuo9x8W2Rj5rBZdXgqxU/v6eRlt0QV5g==","signatures":[{"sig":"MEQCIH/bDyVNsHcvWwq5OqeeubmT69/BxnPeWjCs2llDwdERAiAYbOzGyWFCvp8xG135czB9+I1WrgHNG6CgUTJR4HM2jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOcCRA9TVsSAnZWagAAGW8P/1QY3Kh4fqk1hotbFcfv\nnlZw+6sVtdu01Vyi1u+K/I8jKcyPJZSBWMnlYG+BS+OR57jkDpQDiCT+65W2\nhg95BlxUoIAtWv9TlP3cFKoIONbsjk1jysk2zf+q70aPfPzfqHVASQI0+mF8\nguGj/sGngwB8XpEZWk9Gquxew2AoEX5ZE43Q2D7kJBqOR47XRxAF7iHi1h4f\nMvHDi760BQLfxYaXl1UQDEgdhA6xVwBHcqiYLl4Q6EZiwU7IjZ1/Hur7tPTH\noXzY83fem/qSc8sHI+QCYxr8bi+/DqrKS15JLl5wHeT45qh7e/qLpS1T2e6b\nrJDE/ERnf2LyBIMxdNwYoLol+oaNQ5/vjVX/NO0W24qhLKsDRzig5Xc6mOHB\nzuvZhprSl+fpDk4cm+2dL6Hy/2xdso96T02ktkkEdIEv78w1WqptFU2oxv3s\naeqPhDZno5QPOK6pkjqsDHAioJvD+Npp3K99nBRQ8FBQWJiTbFN+BoA2mOln\n1MlvbaIMnsnLgmjnNNjTpPUBY2Ee3rxcqlNEWR8uSNGoL9pr6nC6Wh85sGRy\nAY1KGnhSfiltQdEAkRgASo0xExgUrednC5ca6Op8za2thtvxTI8WkS2j5OBw\n+Fpka7884ZlL8cv8x5lKTx9w9tZuuHAjALCtp5euFVoo0UHlfUH4ewDgnyRD\nUjY+\r\n=W8nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/density":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/touch-target":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.c02642273.0_1586967452410_0.7626981390070358","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/radio","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"258c6e00f05bfd46afa7a5fdc74683535432c15a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.8a299b568.0.tgz","fileCount":36,"integrity":"sha512-O6nPSwyZ0zh8MEfjICqdUiISrzxMT3OWRlqmSq1uhgekeesQpDnE9JTG7+zXJkklGqz5LhdSj8xS/6jyYh+O0A==","signatures":[{"sig":"MEYCIQDzQvOCgpgcKSJHHJ6MOwdTOXfEBJUDU0ea4ZL+aCfNLAIhALqF7h5sXOaCDnaKvljMcoE+jvQxcgKRv296Bi40fZN9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44PCRA9TVsSAnZWagAAPZQP/2jwkVicy6jc+MAy5Gz2\nb08RR6dzYsBK5/tJTftQdkV9mnPnFWVjEPRyfoVQu/87Wq1gFhET9xpuCVqB\ns6OgF69VmFDBjZWh+vSBTEmsblhPdFZhGQcrYGQafmpJZOZGazbw8iJvG+T3\nCe+B8kSUqIZd+Hlq6+AwN641Fsj+10YLmQ0c5ix2ZXSvOFMgChrjBO9w/Na7\nJMR6zSsNj6wdU4ykKUf83jWvA0PetZDVcJ2LYCHwSuQSx6jNAAZvWJY8bFTN\n+sMc9Bi6FFiB8XV5f16wdZK+h24GaSnWuC653CpreBfBWudnycfccMXajWIF\nGuy0npDZHmocXxWYvbGk1t0p6Rs3hBh02IqCHS2KRQd5wcmSv/99tbTFp2DN\nk3HO5oUtvgk5PHlkWLSr/RGmODo0ZcATvJiMMOh76iWRC8QlkaiYIqsYw8nT\nMaTRKsHgT9LY+jz5pHl/8G+IX/Lmp/fM+dOsQfUveZS5bQzveh8afJpJLjRq\ntWGik55bTn7YFpimXBXACuCUdASt6P8eJwroFmPinCHz3hzB5TOXAP/tngsK\n0l16vlP8almIfln9758OWAENnd1BdUCaNcpG94dOs0EdpIpLL7ObxSieL+S/\nRSvBnYa51GGg7Ar7VD4ffmRS6qLd7Aq3d6nuw2oBMz349K/D+MAy3YmgZXLW\nf+XZ\r\n=tHiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/density":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/touch-target":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.8a299b568.0_1586990607067_0.9110431321975574","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/radio","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a997b892a768b2de906c0f0a7c03ac1c6a4c05e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.490fbdc09.0.tgz","fileCount":36,"integrity":"sha512-KZnW3kGYpgrTh/IcChUgy5fS5WPVfaq4F+PmVAxdjr1MeIXcHFLj+l8sKrjv4jUWbIXtnx8C9hES2pSgWLZNQQ==","signatures":[{"sig":"MEQCIBvqjW0hUgpTboKQVEF7aKJDP3PUVyDTlR1xSFC743alAiBHf9Gp/j+c2AdPPgW85lofzCbTFe6xJ+dDJ/26NmC8Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RZCRA9TVsSAnZWagAA8tEQAJmYw1EnpktNUMxQEwEz\njbM9THGtVj8fDN+15Qe+axt/hbUMZFcQV6munrRMnjD3cw/HNBXvJU4KecHx\nE5lBf1uhZGnx25lq7+y4kBBD8Sm3vUbUTAQZVb3eP5IzbQRGSUUa78Ijzt2b\nhUN0iuiuHzumqnOyUMpcTMytEevVu7Pfo25bd3m5GUrXcJrDqJZwUFGtDMyF\nLxrhWZxvTa9Pm0zQA8sfSOMWfWSn+7ksCVagqMg0h4J7Rs3CogGt4QM7ibI3\nXYjyRE6E/CpIsUQb30pccF/UR6V/AnsF9wd26R8SrtcrXsURn5POSSYjtkyN\niLlc61SRWzCl1uqNbVoHCrrD7VpGjE6cYQwvLIuBQaCj3jMiQ+r43Hby4eQP\nu/ZLO+syoqGIOJbCE0oaYp24FTNHVhDfi3TErbg6nR7/WjIbOBMRjymS6Pxf\nkVu7jZZJBkm/wvKd6BCTPh4nmmFVKjIRj192dUUAUw77qWFmipIo5MUJD3wt\nl9F66vJtufBFKeGzUQh6Q8Hv9kOP5p1hx78vYPSYvS7LDkmohX5g8M9SLfWy\nMTYSVbtsm576bDl68kuq5TWO7JIQ9E4oR+Iduk4euo2RrRXsLkWsS1teBKBw\nBetvqtpioj4NdR/K0FtWF2b/xilthx1Vw28bedNElgksxjoDGouLdooWuEUE\nB6U7\r\n=jSw1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/density":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/touch-target":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.490fbdc09.0_1587016792610_0.2715803344773635","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/radio","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55a5f0faa707ec0a246daf4783b293efea8009be","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.f838c6e55.0.tgz","fileCount":36,"integrity":"sha512-3tlUTaMVTo5xqiH6A75UQFQydQDNzOcJA/F/bN9xJDmNwO1DThpp2tFtOUM4xfbmBm42ymxvrLex5F4F++7ikA==","signatures":[{"sig":"MEQCICxpM3Z+v2IOoovSLAUt2cAyVIwQXwCcC4yotMW/Eo3nAiAw5Dqhz9Y3z0LTp7z+MiiubdWfMrglPIi24svlFoB0sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsqCRA9TVsSAnZWagAA7QYP/0Sz2gDU86yZIAHt0skV\nrIg/xGt4b1c9Bnc4VUE/MVdMeKllWMsoP6B4BhyMgnyVmyQUnsH7FQ2EA0nJ\nLT8EZjVbP7nkCh4/kHSMBBREIvszBfz1wQ7XXf8RWjFWv2LeQQ9sNyHtvrP9\n6GS6/PqJ7A6ozlRhIuMTR3nB85/5e8gc1tZU/fS8/1LdPP+9I8X1PlbhpX1Q\nzwXFnq4w4cWvWixsmHJce1cv1RHzrjttADpRxZji0c/IYPhtRaLoeR/A0qG9\nsjPumwVom2XncscK7fGx0Oq47EvZPaQ40X396Jz3C4RRIV8q95YNfLjLyGlu\nlwnzvUmKbTmB3o6Fh5h7Vyfxf7pTqmqb7NfFlbZwlMFawbO0u87SVEUY2amW\nQ6nq2/qgwIWOT0GgnS1kCOka/raUqzO9p6MSz1CSld3sGrdtwNJRTG5B1cko\nuU8IEfYVRrtFkmekrvVeyZNFP7dz4AcX7HnOMPlKHRdP6d79mAdcEsp2twjb\nldihpkshFGRUfqqdHGVr8iG6rn4V2iPrNGo1IvoUgAQERlVpA3DLNxchDaSf\nxQY1u19KpbIHw8ccPi09x/RwBABTKZ8Dx5wRZA4c+OJ/kEZCxg7UQaK8vXr7\nOusQOn8MZDFY99U3MegmR2wsMkEmcGWJZ9qXhia90OR20wU4c2cclcUv0ONB\n42sc\r\n=zis7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/density":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/touch-target":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.f838c6e55.0_1587047210073_0.1972865546642537","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/radio","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7427d5990d387a6c5d15077518bdfae046109f09","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.ce6cb7024.0.tgz","fileCount":36,"integrity":"sha512-XdK5vY79sBj/VyqJTXiIACO4Qabfy7eCzGh1k5sDQUuWesNZTM/8ZeSdd5CmuvMEkHVVNdAakqXSoGguZG2Png==","signatures":[{"sig":"MEUCIHmCcdW7Jg+/6VwacRMoiAbx4hmFyAJ2GikENS5vqNZJAiEAtsIG0yMECM79u7s47HC5ljw+fmPlZjUqF9oa2/9WV3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOYCRA9TVsSAnZWagAAeIIP/i0j+5qchfK9OgTJ3ROk\nlsBjqijAeouzztQW5UPX0SvOYDOhwqo+v0kT7Hi3yC7aq0JIamE5k3TAlpfS\nEZ0T1oR5N7R3cApVKzFtBbGjykLD8D+q+OljzvzPGDo0sQA063iF7pmRqfJg\nZD2zdT1zPMuh1GZM7cs2EYng6Qi2uhDP7l+zauiENPOEZW6EIMsfQvdHeCnm\nMHCUesNlVdUr+osyMFbCIuPytQjiaJy8CBOKwBKDI3YebToSpKelff+BDCbn\nbRGTabbj7MZtHd565n9s5TlVAVbDTxQxLy8tNLxgpiNbOdepjqrkG/x6kCpb\n6SjaodzFZiaHHacHlAqW0t7rdlIKH5Zv2Dpgdc6WguZn/xc685pr9BLE9YZG\nXQPJFbVM35uQneeNTfi5tU4gsxfSb/p5nLGnbMyaV48Z4rgLE+nhs3zoTE6u\nGJO3W6Df8WVPNeqsS+njkTgPa48VDzuTwfH8IElg6Za3VrTavh6Uy1VxI7Qd\ny1AqLe90eGtnVQ68bkWL62nMVgnP1Lbr9RXKJJBvGqRY1O/hG9hTt/SDKBQe\nicFkyE7ojqTzmWJHAqq4Rb4TYbl2W2y5Kf4DjSXGitayMwoq+K/PH8CNION3\nhi9+gsICm350JW63Qp/vmi6y2xph8ZJpCW7JK2SXVXOsef8J+1oVmZDvvGKk\nld0s\r\n=Xyg9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/density":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/touch-target":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.ce6cb7024.0_1587057559961_0.9497157772447675","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/radio","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47aed7f79544d59251314c2a4aaed2b0f0bc2ea7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.0ab62a65b.0.tgz","fileCount":36,"integrity":"sha512-Q/g9MlkrcWKGMPqVeBeUUVGBN+uJNtOOHznsJcy+ORKCet6CobBBStp3wu83FMr+t46XTzEDTbhHMWe+g2Ic8A==","signatures":[{"sig":"MEYCIQCQYPpCxcniKb6fh43rKghi9coB45uACW/FhUDWujGHMAIhAMipRqitxOqi9d95MDyjpMxz3GX/Bue/ZfnISi1NvWCi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnsCRA9TVsSAnZWagAAygQP/0EoL4yesk1Ll6a49Elv\n5kt0GkEXZh1q+FOvtYEiiq5sjdm5C37SxI+F5rSLXWzXz7uveINpenv4c1S3\n68bIGHyGUi3mFb0VAVOpBVPp7Kx1EAykvnR5TZfi0UXA+akv0/zWGpDeYJnk\nvmNTGc7DvLWPKiKPyrzRgINluCHZYOW2NWBP6GdJEu/wP2kOoG1x6UrKNSH5\nw0b/uvavI1jGHkqPt39ehFO9bJPcpwZHBNSDYBlZ1rUrAd1n9mGP93Scp5PZ\n6cjsih5K6iM6P2B2tMlJxu1gevrRlro1dKvCUJyDl00to38LG/3NaBoCcWJP\n7bgbMUp1dxp+DlnRaHiJiTkLo54hIAvXyY590EFGTEE883tPmBpunPS+0OrU\npajaEbyQLpZ4QxmGeDjy6AUy1mjF45dVsnirvD4DHhkyXdGYMrF7Vq1fCDsB\nuHtQECkemmxjCjk7BO07zTu9mCcmZdUgZ0uUnJl5YmiYhER/t9sNBTk+5U5K\nGZuFKm18A4qrlt0ONLnuYxqkr1iINtjXFrjrmMosnPNxww1Z+hUsd+JNpQWw\n+0p/0YTk0pbUhicWNfU4yr80FWXE7SWcWAAx7G3QSXgcXznSyNOxSUkVhqm2\nk/N6jXjBdAoO34apC0pNmLbU0DwH2WBy+xUSu2xR8gwq+6YFNgNUCrEoFpPk\nipqH\r\n=4tKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/density":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/touch-target":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.0ab62a65b.0_1587063276416_0.09672217209735767","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/radio","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62118eafd0811d081150d661323bbd3471974e8a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.ca61b656f.0.tgz","fileCount":36,"integrity":"sha512-BFW4ExpbFASNBvS2Y7HtRrOFrh9n1hCkP/t7uKFh41vKcXfWIsGTMvcrvuB6FcBVkm5+uN1GLr4K3QflvDZ7mQ==","signatures":[{"sig":"MEUCIFKSdY/uEp0C1Bq1QBelzqUx7lkQTvE1iZ66aTNNTDSCAiEA0raoNhq8gEC6OfqRj2KDkzggAKRuZMBzwHWFnSIN7a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlKCRA9TVsSAnZWagAAfckP/ROYAoRMxrvIeybxgQJ/\n7eBODxcoadxKiPTqdS+RZw5rAmKV03ut9+gF4fAAJJThN1FQBc/A5k/vrw+4\npNEk0ijWlnAoBiLC7Sr44+bztm3QeWw412g7QVEEyMOOE/phLZFYc48bZSAt\nRhaGTqgfA8uFllIskJIO+KjWHl9YQoE1JWNmObxhFepG3ZKvfwgBYVXTy0Hj\nm5ytAquYoxK2RCZsarv2ylVkm1Gjy1FQ4IzkC8IGLqrROnUVaY6hp6cm2tiF\ns1xKLmLbywgln2sTuYRKEESvRpXmNcUmGtorT0yA0ZwIkG7xfkQ8xQgZYi51\njW5sHmEd4Zvbb8U+Ft9dhHGCaWHE86BeirJPr3eA6CrTpHR6FNnCNaL2b9+h\napIiEsdhMfw7cG7/fM8U9Z42Jwno2YrnIUI6brBDTwWtsPxuAqF34mL6NLKH\nmpKcVNdz2Yc53lgKKi/qN/XfHEQo6ol3pg9q8fmlqksguU9a4h9kjO/DK6Vj\nRGcJRlTu4bTkGvxRHiiyAsthxmdp17TdLJN1xTb2EPqNZNm8TC/gAuwwqP+4\n3ArQcfJbfDIm2UaJWk0l3AKW7lBo8gSUW4bg4h+lMUSnA9hosBDfs6XW524S\nGl2MItF4am1nGchVot4VajVx10BrHer1TjJSv6Pht7xYGVR51bZW0vPz4bHh\nkdpb\r\n=oe1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/density":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/touch-target":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.ca61b656f.0_1587067208252_0.08247610814167028","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/radio","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc55fc3de6feb67d74927fce3710aee2ed80e2b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.45a6615e3.0.tgz","fileCount":36,"integrity":"sha512-08eZuQL6iCPfDs3mKG66flaIs1TO2C/d9sFzxc2ATK9NXUfxY5EH6559ZwjTbwz1A7MkdHW/iSDbmbyj3rZNGA==","signatures":[{"sig":"MEUCIQCuXNtNV9OX7VhU/UFYbZIceY5Xr7PcBVT+IXNW9IdnagIgGPHEet/J32jwmURF7PbKaEtOgUFy3Dbm8NpO5+vqLvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEACRA9TVsSAnZWagAAT/gP/1whAl5K6sCLr3UwUzUV\nqzPfSnByVikazXvUQ/UUXWALQDlQSuLWUny5oBLzLRaYGFkwn33GhHhIOmyT\nMVClfH+1+9JqTTCi2uvmBnOioETRaGoOR6cO0hGp1GSkmRZj7FDy+faRQ1Ig\nwI20tMC6g4N+t3aKTWvo7H9e9cEud8LJxCyuVihuc8STbt7J5f+IsvKJJ5F6\n+Rg6iY1ReKgNxfiPMp/W9vTb/XT4v7ati4MpHN+MelySXEvFmPHtsOEAjg7E\nLQNR7Bo+iAqGNM53G1HMWcU5b3HV3Kio8wMOeBD7+Ygzc6gs+R6XVJJYGodC\nwFNJQ6nBUsse8J64qfkDhrTJLEAAIylhoKRSPBpDm0JdyZwyK0SGN5NSJ2xm\npNDeCWKwjPEWedBoSQOXSg0yvbQJau/EOWk4IqfnpOlpHlMQKtW9at0QgTAV\nVETKeeLpR/SyzquawudHFyUHgz2LEjWkTHd2UHxC66t0bqsluviddxPpc9pd\n4O9B+9WHj2kJiqusDP+34qZA67C+/3bKDdDaQupaBu0u/g+jrbbH6PjwrF8Q\nPZjH0EDy66C6XviFDB/gJiqpAeLKxWmaty9txP34ax+6wQKdF+D6oLPRCjVM\nn4wkFYAZbHykhN/19gIgvv9yCZ4dD9oOlxK5wZVY1dW6svKMZ7mhNgZLiCL5\naJEr\r\n=Bxic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/density":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/touch-target":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.45a6615e3.0_1587069183787_0.9141316602208547","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/radio","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b90648b4619ed1d38f944a13fb88d777dd3004","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":36,"integrity":"sha512-kIc0ZIQlq+GiDZY48XIMEftfkweMAaWW0kRTvZAAZuJNNyO9anc/BTwmcQwG/aouZmVQABYndNPBqKD1ZSBRLw==","signatures":[{"sig":"MEUCIQDetAfXsOd+PoZUb/AzlpxVduOtn/yq3SZEX0HjoJ/5QQIgZKxZezkxc5zg2tOdY9+/Rh3RhrgswyWxIJ1HSTkyLec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo7CRA9TVsSAnZWagAAsPEP/3C1An4iw6igRBbh9uye\np8AlR74jYcraW/deD2JKTtFN+9GXXFw3aP3APZ/kBz830AI7LYVXCknaGUrz\n4X81fAeEf/edPYCKHDzCocH+AO9liqEefp6bk/FysjUK0pel57Rbm+LBGeKN\nZGh0B0/DCIyMKteTpSAgW017PT0A4iVblo3Hyee/gKEBDwZA4glo0uDQ1UR/\nksbzVjhn9D1ClIf2iQYUItLrUtlvTysBYiI81w7U5QS0VhcPTY40gCtcO7dI\niIubJNeZdSKuQfAhTPATPKs+927g9JCP8voV+qNdar2KQXSJCfEyWsvnoPBh\nIXFhTipo6+YaYUqhu7p7548maAmMRZJOsMLtit2XckR7PtJQb0T4cIEIOQD4\ngJozbmpfbx5Zfw31ZxkCi/i3BCeRJ1vjy++JmKA3EOEeVQ2L9D+yyH6w3FA5\nlnKgibuWF8r2OpeW2nmkDLJ55QFapbMjB4n2YjVxI1Qu9OM/XaiuM626MtCx\nTe7GPaWMtyA6Ab1nc+CgpRaQ+mcBRE3DaXhkuJuZmnMvNRRFcAfnP2RMVYRh\n7hI8HFg/Wdyhnz8Bt8AtO823hM0AOvbXOppFuT0r5APlJyLT93iArIf9Aizo\n806gGGG/4Da7vnsGGL6RaJZwjTB78cwhSkQW9alJUWv/UWdZBIJHP03k0/LW\nN+9R\r\n=zhaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/density":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/touch-target":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.4b04cdb0f.0_1587145274544_0.22463223365484808","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/radio","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e994293b3a20a8c3deb543b31a1afdf14b14c9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.b273afa93.0.tgz","fileCount":36,"integrity":"sha512-mkZZ/6zqmTzJnLjRL6pB98gx1WOKG3ZowDIowUl7tpldl0hy9V6rZSA5pXe0a9O/p3cRE+DSIFCRFWCDuhRfSg==","signatures":[{"sig":"MEUCIQDBhi9wQu45EV4QMgpKDAgdrsn+2xmvplPk+CBxi8pIrQIgRbvbo1f/mwNkzFrtW7m673u4W7Lq11vJCzWFZ/L6Nkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWqCRA9TVsSAnZWagAA5y4P/0FOvR7/q20srf018V7S\nZSW7MZKGl/huL2Ht/xL7y0jN8n2UqdHPYR3/CPOb8YmlOCeyDDvRluibGM0s\n64a3j+cgL1pyJpCI50ldmbjAEcoSjSa0c90FtJn3bh5OMXbQOsALWZhOeNP/\nOT2VHm93y9CNtdtNu44RVAQWKcd+92XSlMqZmj9trYnkkdiqgo9cbppfItYt\ncMkGcWSp2+1F8yCLkZwkTlD0XfO2dewgQmsgncxqQheTLK14vs28h9mYgcWr\np4yKqOkWPQpYvH8CaaVt56qm/dcXIW2dUa897cfVeXUdXI99LOnKNiNoNM/H\n3SEZQhrYdlgbyBKF+7mBLTI6odrQXLqHFYLClMgiVr/wI79L9Ba/rhKygdIM\nwecwnBHrE/14h+tM49HddCp8lyVS4k6JspMTiwO7qGMux+7b+BJHZnlG4mui\nAc3t8lgZJM1KUITX4p/MS9uIhnIQ6rQdnHv+xmcm4jWa0ja/dwfRmZ/vfNqH\n2TBQDJODPh23MKpYpNWWZ4c9ADqFFbcz/Qz3h6EEMDGwrfjTnZ3E4Zot42Td\nWR1E7QYcSL5b4InNIj937LqxnsPRaIlFUgjciVCK23e+2LVpaAu9a5zZK7Yr\nuo5OEp0zuT8/Cr0mH2r5fEH7SGY9XtJownHur8mWzDvrEpZg6tYx0wB2eoWo\nOWPl\r\n=PmfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/density":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/touch-target":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.b273afa93.0_1587164585584_0.9849597820472424","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/radio","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3333d0e15f330b3e6c83d81a6e26c3034bcbe3cb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.b70bc601e.0.tgz","fileCount":36,"integrity":"sha512-52LyUIAUjY7/P27PG1Nw2ejChNWu2YHiiXCiJJgFYYYoSTYtbvYkKKiUHiqiZBe/Qrd02v2MmeW4usf5xz6xUg==","signatures":[{"sig":"MEUCIQCw5YAUQCVgK1Cgh429oS7KXC9hNzfSOpy2fgPRkXWaYwIgHBJyfgol4yqh4IhIGb1gLOai8sfHRvLC/efQe1bGPoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoECRA9TVsSAnZWagAATEAP/Rk3ySfuWOVC4Hfq7sGO\n/IWNbQGoPq265/VgSZDHyQImhVwn0Ame2I90oH7SKu6k9xeRMvrPjKaAKsHe\n32vreeKRh6IN3jxfY4V8IVNs3sjTVQC8nl7lMnO09y7Ps+/vKfiVgkXZRSJ7\nQBI8I0/1hJcVUQ6BdaW/sXKA0/xWf8qMpk/wBOKb4kWjEm7WIAV71hqWQcUN\n0Z9ysYgiVAu+Iz/U3hDWFnRGm3omRUn6zgZ4OnmIiKfWmLjE71JU7/VOEZKK\nmT5nbvGIH6IICBgS7aOqgXd3u8vHHIhUj5XDOw07TvCImg4gGbskrtknMM1Z\nG+tnp1ynqomXg5Bn1vvEloQYLR2ycCQqR8MOIACvzMZJXOGcFD9zmRcGHnMY\nUKnMYRVBGlLcrkEG5GHPzSK5f6cmf0J8/SdOv3Aj0gaOWEiIby8Xp46seQLO\nsV6zr9Hv9Xcbbrs65I5f7YCDsSplvgZXXbqZ3t47TlHgxuaV/WXF4DJVzwtb\nfTaztxI7uTR6hJ7VG/86NmiqyZyxKwbS8YytuivOON1j7YrPon6rW0Rn22gl\n5VriAC57cC+TYlqy/J7F8TzBVuPGYNJ+7GIgvnmHzyp60kVsXJS7Fe554DY6\nGFDC4ddSMddBG4bFEcDJ2C4y2S28tV5qAxKdBz86gr2G5Hv6NLFyRfHn9l5y\nLm1x\r\n=QA7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/density":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/touch-target":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.b70bc601e.0_1587165699558_0.6569937924381095","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/radio","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e25ed7f72d89f797103487a3443be457242a97","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.c4b4bba96.0.tgz","fileCount":36,"integrity":"sha512-IvsvHBr/AuU78eFwvOUsQqh+GUWJjYd2kmDXh0y2j036cIJ47dqP+H10bCrCKEdFKuLnLRi3HHbgzYSUQ5ie2w==","signatures":[{"sig":"MEUCIQD/y360/RXfF9fQvp0Agop28wSkavjetP+fAbkk9LmH9QIgTqnoKPl1iHE7NFaPGcfsP3KjZC3Qwy/npnJNNBSJ3/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc/CRA9TVsSAnZWagAAz6IP+gK9p3cA2enfQspmEWil\nPUrz2m2FxfsXmPHw7vE19Fy9xsJRt3o0lN04zCjmsXUkr6IoHNvq0ATCBHYd\nZZ8ot9juCCC8Dr8HDO4JXUNi+YXPSe6L1SmB5UDX9Rt2K8ul4pLf8MZLkC0/\nK4PHNha04aQhkcfhBmrlOtxmnBTn2wZPMC/N+rEbdmB2OnyLUQL9svO/2zEO\ntULVPsrrOloVkCpre+KhNp1Op4lQ6CyccVikuiXPT72r7Vw0gOSnF8LDlg9d\nwxOWJePVxsk1OHTbbH+Z1UQGQx6GblpErUP5GS+92UxGD8ieaCVq+qPq6kIG\nxer3FPs8ggLhuAGM9/m1OYeViXQv4z3biknXNHlNN7jQNmMu4DiFAkEtnQo/\nzJolcZxTASb7iFQKDsHWSF8m9ZmtXLaN7rOhuOnXt888h44jm6pgRv9Xg/d7\n0GURGebB2blhJrB8SNVNQdHU4j5oB4bM8TEUDUfWO4mtQ3U6ZYnC9x1EGgEx\nhb7OsoKeTs8dd+zWflr07EzgD3z7PKhY2aOEz23UxfviXINfP0RtUmg5Tqzx\noyG1iiVaqc7TvO4IjXJjv7T1rVOoVUWs8G2CgvjHR3TUgnAWXEOy3vTc0mmW\ne+TA5aW62QWwcLRJL3SuUPnmhPC6XuAUjMHnXHHtvu9GqaKixkPgt6f4wWCi\nrf+T\r\n=Yce5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/density":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/touch-target":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.c4b4bba96.0_1587169087004_0.12839594597253545","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/radio","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba20e74b35dd599d74557e8d5bf63df9e5ea1d8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.6c1ebc721.0.tgz","fileCount":36,"integrity":"sha512-az7yx5D2NvnPsfrPTGjgmzGSsOpY3hnLTMvqzFeGxRrVivJvTUISs3t+FCQuShYLvwarz53uYxMIPq754ctitQ==","signatures":[{"sig":"MEUCIQCgxpjWAloYSzDTA5zk4rGSUQFSoch6uweUWmqS/Gf7dQIgQoGqWz3jCBZB69QO1oQRTCpT04pZb4xDhksyllNMTI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7oCRA9TVsSAnZWagAA11sP/2gn+3mIi+iobt68+2Km\nLGRJ8uMPFZQe1lfJJykpPagQWObv95uX3NKFRAB7k97dyPAkJqjEsaWSFThu\n6zqQKp33D1A+KnOQRDtmjv0yXVmBBXYXgETB4QV7uD7+DCqsXP7aNx22tWNj\n12LCntFqxvaP20K0l4jl7bEkke0M2g528vSNOUoULs9fAG1k4ivPx98Nfpqu\n/8s+ZP14APzsiBsIKQmPjI6XX1e6yXfh4Gi9EX6mxmihUtzHHM7p2G7aKmMK\nHfDKiqRXEo3Ej9EFfyC80uRNa4ROBYTRsuekiwYceqmPDywHHXveuxIZTr84\nk9NqcFAcWerEcvtI55IX6X7fkgjsMmumjwOHW3Swjr70sMr9+TPV47WLBiPu\nC59LZ+yBc89fjAKe5BlSRbzaQq9i1ibxsS4yXDTM9sHwWMCLQbD4tK3kXw86\nxpFoe0GCa37bwVGAnur2htjUc1H5NJkeF06jTCT603Aqp3bM2vSk+O+huxSj\n5o+DG3nEGAYBT2mBrK5OErV/XN4IEa6TdUlvUAfuswhesAfhu0clfo1fFYzn\nB4UnGjpjm0tGR7zH8re504Iqljg6TigLXV6ANgciKmtI7yn1+KHkcc3BxUYz\nvgu3VnA1/AN2+eFsk2G0omGCvnhH+fDkA3mR8o4VElQsuEJ6RuzI46GwXr8u\nfPTN\r\n=KKK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/density":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/touch-target":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.6c1ebc721.0_1587412711983_0.978451301246914","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/radio","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eea5ebf5b0e3a61b1a5969f8b3424480ec21386","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.9cff4318f.0.tgz","fileCount":36,"integrity":"sha512-PZhsxNW2N2fcTR5/+99hHV8N4Ndc3mlHn6Syee92BjgThKrQ134+d1Scu6ZY8WKfsOrhjzSkTkzxVCGbghB50w==","signatures":[{"sig":"MEUCIBEy6PHw11QQiFZzpmArb9RdCJ7SNeKMjo6NwJNXVpsiAiEA5c0yYuNAggBwQfLGmjC9qAEXrRp/Q9hVa0E/xoq9xEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxmCRA9TVsSAnZWagAAo/gP/3z9Be2MCaZCOqkQ0qGC\nxkaZszOeqRBz2aKh99643pdGLeU0u7ou7mpKRvUNodD/FeMYobSRbACjIKJY\ncv3DaWSDKJsbmJ7wfBEmWDLfv0lOB9OBHaJUn9QWtC7a1ZfjNjHtfgoJLID2\neXWS9Pr+gGIs4aWJ2w1HzPjlfy5zVqnbE4FKcMrwzKL1Hp3lb0T/E2lKmeh4\n6PdULzxR77atg56yqhPtsc28opDK/g1M+2sk+K+FL4ypjXehUAMw8jWvoTeL\nNXuQHd4eb2jQSjwpMUvTOUr75YBff3otmcb5/BeZ4mkbBE4dVh3qQbaIE8/U\nO4UjU00V988uegotgbM7fbZIMJS3T0B+JpYWTMZzUEdL0Ek8yA7rjihgX+qp\nZx11NSZMJPxJT+U/gK4Mm8Jfodur956AIpBJfN3zpSzlAaheQkkR2+T3htSg\nXjb/V2oFK4wM9WjLX7P4MUCK16SjWijFuAuD304GvCDqHpHmIMSFLMh6VrYY\nGxki9oGf1aiEa2nWNR5dk5EW0Tac2xtddvsM3iBmLDgeaKYb1dRhpJyoTskq\nJmYNX+gINpC19seYkXTo9zmA6WptFUfc6SFlQXkemf0tQj1FIlGSyW9XC/Kf\nZlbB6XPJNY0KEIhk1QAaxSmLBywtgyXXkeaMZsZUPMzUTVobhwQo+4yBS8/+\nqL41\r\n=I075\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/density":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/touch-target":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.9cff4318f.0_1587416165369_0.340066906327104","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/radio","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45785c273e1ec4dd6fc097af9e372c62e6a78d13","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.7b4482402.0.tgz","fileCount":36,"integrity":"sha512-5p9z2ogASFZu6Hqx54oYcU9E7FUNrzgp71y6PCXkxeNRYpCat66cgP4PCgH+fs+uMqnCc3rMotJAB/1ZbH8lmQ==","signatures":[{"sig":"MEUCIGwetpv6ACOK+rvPzyF5Klab5CLfb+O30L6Kmf07bWnGAiEAuuTCR+ZsJjLh85tHUoTz+2DTuKtEyFYWjK8q9yPT2DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAqCRA9TVsSAnZWagAAarMP/1urZGRibWrZNBarconP\n2Z9r4BM89023khOLkyU1eEdF41gMfDskU68ciO0S8iOD35AsCRlPK2Wm3Wog\nl2sX1CKPKCehjbaDV5sMZLj/mEOLpSSjFpDnc2k+Fo8VGJaD0RJan3dGg/+0\nzMJoWfvTjVvIG8dky9tapt1I+b502ym7o/28/uc6Hf9CwN9xUX8S/GdkJ2zu\nJXZ8k9DB4O/TQbcSD1BObXNeAUYtILoKNCmSy0yYiik5D855qkTjn2CNCpVf\n78XTkjM6042+9Bz4jCeyz8ZCB7ueNcUpUqOSy+XGuSdY3tEyRknAc5DudwG6\n5JfpF9BGoG3Kwv3dcFWJRP9sU3IF8A6ylH5tkAa5oazqOsHTTkY79L7a1rr/\nWl+TCnsfFBkPvnkCVRIIEPLismahp6VJ4jyvlnM/JD5H3sfl+UAutN619Lqn\nSWyraU86+rGKM+/09L1WCkQfZAwjI89o3sv0JSddxUCgVL6ld4KJpsO5ORPx\nUE6fcO/hO6XYezvumuBiemZmtIIAnHvlDM0aVYRo0D7/MBud7M4oZs58IbKT\nX+xp2POqB6YcQUjU7h7iseXq+q0HcAlQpfDZ+GCWzptfUGnvdKkp1HpZT5c5\nl53PSJl5NaijlH37jMXvlH3JkL1OO7NTFhRDq6l7Wo4hC8+XvxgWNvQKEdyS\nl4iZ\r\n=kSIn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/density":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/touch-target":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.7b4482402.0_1587421225660_0.16450475347452653","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/radio","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cbf841ee7d96f7fad34bf3cd4b785ed6791eeb0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.deda86d8c.0.tgz","fileCount":36,"integrity":"sha512-PL3TUncgjHagwvJT31mFjFrz8MNLcaf6bGhV/gu9Ht8iV8Zh1YCgfYWd71uR7CdvXA2btWxr0BcPN6sd/Lm8oA==","signatures":[{"sig":"MEYCIQDVz4iggSrHq+BYcCrRp+7XfOmK3JM8z2d6/fljXEI3+QIhANc3WZ68LHTMdhnvjWdf9IltEM2A/KPjVwR2MCy6+fZq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkYCRA9TVsSAnZWagAAq9oQAIp9TNZSFdniYxLYaFsr\nxh8NLrSvHEaZOu9ii3RijwdlWmhWIJRGtKaDsZpeF5bK+AkSd0kFYK7c2uhh\ngkI0pcUfQZm4w7Orpak2UOgIPV0yofOTSygVXoNQCGw6z0WwYQ1gs/35J7hB\nPPHrhfBlGw3sKBYI1sAUFtrPYIHdmHngE0+JLIUMTs4FYKY1FnGSrpxnrBuC\nI78hgsIKAiUSVBMnJsNy6k6INNG6RCJM2wCaQJ4qgO+WnKFdMg7uyT83vMkh\n9mgezxq1YuW3DKLz+88PKw3z5feRlH2+u2jFexqTzc+WDbzA7F9wIg0WjHgk\nqr/qr03LftvDXJep2sloLX/swzsH5XJEoJYAHpKp5NcWqr2XbtU0mjbdA3aC\nfqlnM03tKSd8DPkQiSILUQwduoMLRk/tsauZew2+VGdELNkLB+eKsI15ENMg\nh8Z8Q3Xy6fAT8SPNNeNiu372aFdoV2WLH6zlwU/UbpydTNnz+qKNOo8bkTnM\npfk92rI+ouQseqQbEtX04meHDAZNIbHw4r+gQpYv6dgld/IZzAN4ugGt8z8G\nbE/gEbA1I9FTcig+/16XByVOd+yYjaBIWQBlC/GMDExPvV4OHZKvAlPZNK6z\nWVt16ZoCTwE4QFbCYlf3WuwRT91ZN4xMDA7QM0ysCh0sUVey57lxzHEK9Jme\nfzOD\r\n=V534\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/density":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/touch-target":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.deda86d8c.0_1587431704126_0.5436405690561161","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/radio","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4741b453862c08f72e2f1ab99a58fe4795f655","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.d10412cb2.0.tgz","fileCount":36,"integrity":"sha512-E/++TBJPuC6kCv2MybY61qsZ66bJJjY9cJkb7TnhBIe8fZ5rzOmZhd/aYM8hhT9UMxzFzaMa+LFX1srw3SLA/g==","signatures":[{"sig":"MEUCICsI9mX3lGI+IRJD5mxloTu6qE//hFo3zD+SQIPOxIV/AiEAzm6PR8qI1XBX+YXXqOp/+lMlAplwypeD2JpuU85p6aA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzj/CRA9TVsSAnZWagAApWUP/AmJCed6xFyrkVcND3k4\nAKyIcUUt4t15T6G/APnFyfersCqXZ9+wjzQu/ieph6T8guIksqruqPpBeXtD\nzovf2eVldaN4XFJqalyaMyi0JLnm67fENY3xA/VhD9KSzoZOJIc/0Sn8L2KK\nMDO2n8y3TG8S20yXSRzhMTg4ALfx8j3FS3MmQxL9nQwbIg38MJcXU+N8xtqh\nPUKmfyW1os2CXmcua83BgV5LMFj7T4TZdGnJgRZBmcqRpi6g9rW7wf4/AmBJ\nrndTOxbuzJjoeTdTvELDP5uSO1edKoYSfDx2okR5OV50TzXxuhcyCmJYfVDp\no+5529c4WtM8B7HL6PXxecR/zLiAEGNTRmjo54wWjHXvtHujYqNbTrk0uhGn\nhAeieKjFOHlPiMFr1kNH2QWAE+zLcI5KV401O/HJ2BcZcd6Qr5xnRla5mT4s\nB8y6IZobsjIjxtrt6MYU/YCEwrL4ey+qAZnzSYTbhl/jJOh7OTyX3hI2fOEL\nDXMg1cTXRMbt+ePqIP5YM9UG6xg/aJdZd4boU+YotMJyigm6ZsEbkEBdBoJb\n17kynFsnFPxCnUiZq7JZxZPET9+OKf4eMHl3nXXwKzLBAOcnsYOic2IbaNYH\nS4h/AD4TqBi8e3lBkyElAvMN3R1fLrMle8fp7gtpEnnN5wvVjo6rnQ8iaQ8w\nbq/u\r\n=tbs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/density":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/touch-target":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.d10412cb2.0_1587493118646_0.16983300179324767","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/radio","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69a06cdb53bf7158510cc06150c9938a0f1b6d48","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.c141801d5.0.tgz","fileCount":36,"integrity":"sha512-wXv4XKUaXd8uyc0n5ZHN+YYAi9JtjvZdor/bhPdOgp42vCMA6BfamdviJJZDjdtvV0Zrxm5UGS+1Op/yWC7I/Q==","signatures":[{"sig":"MEUCIGCfc+34b77WUhzBMY5hSehqB+DiG4FxqrNCf6YE17kmAiEAv4vLJS3JpvMi/Ss8jQq/cJ1vhiNC4rAis/yCJoMgLW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yRCRA9TVsSAnZWagAAVekP/A3dOW9b/WUc/Y9lNtrt\nYhiRkXDWRlqYHpQkTH6wyjAesI6dyktBtBAh3A4qAQJtcFOBHf+VgKxQcx4a\njJdJH6uao7A9fdWQ7zfMAa4oAAezfbp3AohQvD2NVEW8EfA+YOYo0R3WYvoP\nekNu4Jx0c1cm+G4Ev11U1bYLcm7r0jiD/VP/uPXhNV3rjvsNZRZoqL/4hYmv\nl9mIw3AnQHWGlmozcg4MJ9ZrfGPyxMFaHF4uato0zcjvolSSwRje/Iu56A60\nPnvDD39O4BkHWMSlOOaDVI3UB31a7AvST9nvV9Slfm1uv00yLrLOZBs5U6+3\nSloWQn1MOs3CDPteGKy+oAwwRwrwDPrYAv16L3djPxM9eTUtwhvxHts/P3Tv\nwWOLme4hZXYAhMxT4vtfNdcc8MzHKO4jtV5dggWqqM6nO5OrETkbgIhEWmXE\n5M1lwMpStf2qtpdkxO0LIj8omcZPoNHWfBASi5Q86jTEAD5oQnXtb1aWdLsK\nDS9biQZU4syX+TV88+J95R7yQzz0d0yNIhXQFR9MOUe+rcIaIw4Arat2bTwS\nmiy2dELkuRZ3ZkXIX/nyp1CQnVXO0qi1TkiqnzBpyrLMUkYmgXNq2cs6/GNq\nc3x/OKxOvL4RgMo464DInIK6sG1VosrkXUWmc4/V9NRlebZ9zVNqanbgP8rh\nlmGi\r\n=lCOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/density":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/touch-target":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.c141801d5.0_1587498129142_0.25601980616121334","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/radio","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d76cfb27c6a1d599ffd53bc5a223d5afcf5afba8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0-canary.28d10a96e.0.tgz","fileCount":36,"integrity":"sha512-ukkCGNOAj8QZbyGyUaIYoUVDL6LwgbPRj+lLkzln375jinkred+GIJzSx7/Oh3IZukeGa6uc5dEsu3onxdgEVw==","signatures":[{"sig":"MEUCIQCj5bfQIBEzIY1YNf7llMQb7cdIV8LqkCvtlzW7xv9buwIgCaKCvyElowWhkczIg6KTunwWmJf1AZ+Bz8TVwXXsQJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAbCRA9TVsSAnZWagAAufwQAI0nIEEXn4hden0ZvJxi\nXCHxY4ib5HvFGATPMSq43YVTwj9cKiMIt6jHUQQ2wcX7HSntAGjPkANjGnQV\nYtMGPd14ko2CKWeFny5iUCY8Mxf6j0lqBwy9SZ0yqJHMa4XerzPY2tGabynk\nsD10jSIdj/cAERcC56cKHCLZbs17lmjrO026qxe/g1jaRQ6i1ilqm61z4kM4\n+aMyxlT6uE4bcnsrDADpV1/Dw9KI+VSlmG/+jSbYaTeKb6cvm9DXDR69lo0F\niMyqJ7pSrb0qPYtb2EjIcrdwnzj6tvjK/DnVW6Ui8OPmGvT4O6EEwf0c4Nwb\nabg9ilEe0iYaw4Tl6ZcV8vZJiMBpF9CWFlsZwx/Pr26DNrr4x+MlLSj8rtzI\njDlthJhTelJPZfl+eZl4K+Uc+Su5z110HXai6W0QsdTi7+286LUKTUYvXNxN\nHR/76Q1tBAsnKxsOMp0Zs26mDM0p6/ja40ilHZ3InxX1IetaIhRRph3xv11H\nVk1vKMMyVQJwgXe6dtldCJC78eMeXe63RRWS89pgN6oCo3l2/wnF20NDRfSm\nyiQyW4Q8zzVAOqP1ePXc4KgWOFCy6OULSCc/FJlyLid6PmDM4cyXUFIb2KSl\n/1ETTOBHrpOLsWhOr6RgtIk0Jh0KxVgbHBCSGt3aCZIiiXBu6mKYYop6MVp4\ncnIK\r\n=pSKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/density":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/touch-target":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0-canary.28d10a96e.0_1587593242735_0.27669251499516356","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/radio","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd2339343128f264884a21e9762dc4be4d5e32d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8540808be.0.tgz","fileCount":36,"integrity":"sha512-QHQkdCYK07aJRSJD7TEqAlP4T2azUY4Le11APgtz1VbO+Sq7rUq93AypUwauEOSHO0vzQULuKH7WtWXUubUJXA==","signatures":[{"sig":"MEUCIA6CbmyoeqmL5HU4VKr7GZzG32uMFvPYYQa6E9EUdo9rAiEAxRUQNqoon9W1to7JQiDEGxGYd5877m6ZOpT5pPntSic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+1CRA9TVsSAnZWagAAGy0QAIyVCzgxZVUFXqY/aF0x\njKDirgORajS+DZkH+1pqXp+v4kvoNMFDk2uPwDaxuvdi1XKY7Cwcbja+KDSl\nZTYuRqIs6SN5JgWCPkM6KQMFcwn2iLvAPOVI6kCYSp646zHphvPZ1/xSUGBS\nPSsQihYa1+UFox6JJ9r8CT/GYkVYaOvwGmc7mF0PlKf05iNz4pbHKi2E0EYI\nKX1798j3cDj5yuy014AupVh+MNbrXjSrtzOTZcqlcTj/faXrVjT0NKDLKnaD\nX2gwLS0BV0lZw4ZJu7yhglNZTdb+Zm1WuGNrLcqkmVYu4PSSiCLDLip52TLx\n0e9uefVnC1zZ+J1kfjSxwY+f27EF4KmbM3ohKHXl7KV5Q/hszAYwFsDzeLdJ\nYZHYPktkPT4B7q/5X7oZmgDwTPGq95jf9JXK4NhWKyWcru0Sd8YuaQ1/9f7a\n57NUZ9odamyE8uUTYadA1mupS6U2iEgAaBBKeGYkrKj7NHLPpqGnMFi1d2dV\nWpQ9UablHPCOGN430tbBj9iNpb5BE9fQ8IOwjr7W8uQhRptpVDfqF8Ql06dR\nJihJCAbHfMV8j9uQI3Y1GDIHPz64iABqFBBZTmBsKjhTwjoSAtxMQ9ft7iGJ\ngs5lR7xOCf3urabUj8ATPAjoxUthIAiesfRgsGp2PG+hHS8ytkJ8f1SNCm/n\nxodb\r\n=VRXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/density":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/touch-target":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8540808be.0_1587662772734_0.43405994195798714","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/radio","version":"6.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e266dec02c907577eabc8130cb995aa45a8fb00","tarball":"https://registry.npmjs.org/@material/radio/-/radio-6.0.0.tgz","fileCount":35,"integrity":"sha512-Snz5uLUvXKbXX5b6Im8GB9BXKvbz6mClmp1+FwNi4Wlk15Gjq/u50odCISWYeAXAwoJl/lrteIdQIgzW/MZcPQ==","signatures":[{"sig":"MEYCIQDBCwmmPndhd/tqlcf1fZqgdsFIf+CfF/injOyzutLd9AIhAPdciYR6rOGF+pTUDXUX8Ag4RYgsVzA3pwnSy+LYH2yi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/SCRA9TVsSAnZWagAAn+wP/1AKaaR36wx3PAc7pnsA\nlv9KcBL32QrZnAVLfj4GQAsGTM+YV8lgUMNpNVMYNzsle5SkS+AK1naL9NdD\n40M+NOLzvN6CjxTXEqSaUhqiC7uik00R4aFaE024VXjCIBD6A0apD4e080gY\n49F+0N2QclUyGqgjxSPCn0dCgsbNdHZp5n+ZL+6Zp3k91vm+oAxHOX5urzyh\nYOuAK6osE36PQPojWQQXk6wDJh9cG6E+zraNI17RAaSaZQ5TvGJ4zvRQ3tHP\nJFu64F8lEOKTvpgHvXXRv/PfrJ6tDHwMvphsxJ7Qi/DN/eQaGp5wn5/dwy1L\nchu4Qk5KGPLu6KWo5E1XWhKe2wafQX74HrJEWznzHJkv/1jO7PO6CuG68iSL\nMNbArImbnTapWzxgwu00aRXvkRYmoXi7IXYmSVAldhn5d7m78TV1zM3QtyoU\nPXMPcqLjoGS2H+ur2EC222+AOUC+yrW08QUS9lXSFRvPDvERTDZDvJoY1QS2\nhrybF7oUD4YA9csjEq6N4hyp+XdFySV54xEK1P91TFWEUzoy2pr+xguNdggr\naF0FaNDpzsMHCa0wnZH/9Q3Dzn7qeJi2UplgY2mDl6nJKWhtRnSzPZ3ZOW0e\nayvP2wvfskc9u54941ZRaxyRT0hdwhONvHrv0V88JpofBwFBsOibZ3YQdcRk\nRitz\r\n=dxeM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^6.0.0","@material/animation":"^6.0.0","@material/touch-target":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_6.0.0_1587662802175_0.8954463966810076","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/radio","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bebfb828b4bc2aca2b425a3df5ae74f4fe4da7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2673adb74.0.tgz","fileCount":36,"integrity":"sha512-ZjZgm2ShZ073QRZc14+nwK988wzRMJmn15PwIDYyf4MYHZudA/MLbrGV93X9mFHdx7BN+tEj5cR0T380I6hXAw==","signatures":[{"sig":"MEYCIQDT1wKk2yDUbM9wpnS2iD/kViv/0w/Ww0DOCdd/KP6ffQIhAOU9l8CTiBMxNw2GBpAx6XPxmDwXARZbIMMzEaA/LjYP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqfCRA9TVsSAnZWagAAqswQAKSpa+mq4IS4eOFDcnue\nNBezu2CcOPjNUwTRe8AQE4AbhJS/NXhTQRBYOuf7sFPgf5hbkWZC7wwyrejb\nXfuPPd+olhcOLVQJdJNVVGDrreWYv4uThsbHRKzjp5LT+L6FZ7FNvPy0oklU\n4A+bjFosEx0kgo8h+XPEN8b322IgWA2rOVlqtRsavTqwdDayYHeF+g2xIQFI\nlAvwh6T1Vp23Ap8hr7vRoXi0ah8GGPu3GMn2aj0AY6O9VsDvw5JTMDoedpms\nokpx1jh16pbsqCrDo0bOHGIhvn2JPdb5ERDpEMUtAkQLeG/rATpUkurkxE5N\nFlAo2TvL8gd0YlThk5iRS6L4Y+wv6144J0pmd7agW2VGEABxxI4ZWmA/PDMk\n3H7gF+JkZxyncfPvRFz51r3dXEagRJ1kaNMi4IuHdC0lqrU3yM+d/btT7ygl\nPoFcuGOH7hlGeI4L8ycInZPg+bn8wcwsUIL6+fmgJekA7GA2WPzmzc0sHu80\nATqB+L3/ypIyMIwMC7rga+PwYkLJnURihxSPkq21WvYzDOHEz1FR44NMXAoz\n3ITL60YRJjHibm61NGhHfE4niYLDa48+LJhgTUsHd8rr/0MBSctYCMz1EjoI\n7Rv3pWCYYP2oYXrLN9tewz2YuevIMMqjVQgZa4n15TBQNW7g25IJYcGN04ZE\nDU/k\r\n=rCjp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/density":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/touch-target":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2673adb74.0_1587681950740_0.6325719662981244","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/radio","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a5d1ae23f18d62f4a5445fcb6579a7697e6dc07","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":36,"integrity":"sha512-3t4Oc4BsC46NRApjmk5TYlQ5vKBL8/v1J+DKSoxvR9xq7/nbaRdxCTC3SAwfi7ynZa2lSItpyYrlhiCYhZM9UQ==","signatures":[{"sig":"MEUCIDdbtqiv2Acdi6e4H2s2Zwp8rtNDTXKBW9SjCvnOOrVnAiEAp1O0tcYr//DPGoPphq8iVssCjPHNv9+tIaa7UFNnDTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojD/CRA9TVsSAnZWagAAl48P/RxyrZ+hE1M8O/bVlV2x\no/CI34AmP0iH4RorO/MTmoaQPrGpyaT4D1+NRiJb3R4SUOyt8tnTw4raCMUO\nfA/U4DPDfZ9R05ncoR8dmjSwT8zj0UYpz1H2Qq6/2nnntX7c7CX6cyNg1zWC\n4JaJ1KfxTEPWjGb2cD/1h4ximLITP4fwzTvhHlqL3Fb4pEpE1HC2nyFdwLVZ\naQ7lz5+3w9qgW5huKHg4rvbIUq0ghl3e2x8IUPv53ngqfdT3ylxO67mYVW+Z\nyzr02ncAwxV0IJtH7v0vOknLceQpEnId8blnfngTQ3oslVzwb0q2aLEHGk86\nO0SiPeEFp66OB+i478yuJ8Dgb2z015TmZdi4bhvkWZ0urI9HWuC/orql7fgi\ntWClZ6vxKuGFnOVsmFZ7y+BKgYKtSXgL+KQQKXCa9iyu7qp0I8DCcj8Awwi/\n5D95DLavlOLDkeDV3OQdu/EMofPup5wUL1JsLZZFa3BAp2gUxFMrz/GbA6+o\nfqZH1jUsusuM3OWU3cTNQDNyxMcKD1XbmOtvqiZjpju45OHtJpBjA6pPx2rr\n1hIOp3KFaCj2FYSRsPzxXHgTGVH2x/0lHVNd/P/Y9PwR41EllAhh8W0x52mq\nZLLJhxeq0qyYmVj6/bH0f/8QGkeAhCCXIY+MJUTLgB9opDcZVq9iOkBW5N0a\nC/1P\r\n=FUVi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/density":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/touch-target":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b10d0d7f1.0_1587687678898_0.49772927413107615","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/radio","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"499beaf3f6f890cf45898d33790253170cd52fcd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":36,"integrity":"sha512-h8qhrRdG3ICXEom16YyuUrcS22AdfR1CSvSBhGl70mKKgSG1iStnxQ6XCSsBhvtcj23My4UZHFtRpVaLkNEVew==","signatures":[{"sig":"MEUCIHvSMDbZzrHwwHx+u2PhhAHgJRTdJTX1bsQs7YelbgIoAiEAmU7bvLQ4CadNB2ZCov7BTV3T2oA3uvv13eUcvopgtfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TGCRA9TVsSAnZWagAAxUkP/RPS4/d577j+GNz8NXax\ns9/u1zaUtUANthC1yZqL3gKNWxe1vVj4arMwRB0cXfsAOSpa+6kGkV41P7FJ\nA9nBHz1UsX93EosPsfmHlTea1Ss+FWPVqpzWbkfi0aWHGj5JIO4cN+i8dTht\nVKGAg4xQOoan6Rn7MaDuVSx0W0bgNQMMD0BO+IZ7ACoUBKp+8iuNyNIao4lP\ngwiIa/dD/yfmyPIsAGlFwpkPwnM/MJKtNzRmW80IEYoWh4xsARKTDrKT+CaI\n6YK1J4y62F0fdQAUyaOLgsyb3xxOg8Ed3xZg+I9Q18YJBf0WwQouy8SdlwIn\ncscGdS8rOiFyaz3dr0MlCjocUo2x+ITl9KqKGDFZPxdv0LXoCxNsIktmLV10\nmWnyTwFWJgaJECKU10XF4Y49TxHoVQ6AL1pOK9JngBRF3KERBWJSMYQp/Psx\nbvou7wL5D2cuo7CMp0GTOfbZHup3dt4J4Ou2D25V3gNq5CFkBZDZwdXDzUv1\ngA6Qi7ZWUIYLR/sThojbJ6dIe+AgXtoVvqxAl7lfOV//AJOYzxrZASOoce8Z\nODwI/j+42ySJntGouKhTdnEdJcc2L4TP5gW3HkRurG5M2ZVbsoZV95UmQfxx\nKg9YiHh9VIAczu67OKW98TiPOntgiiRsHKfKUyqX8pEBKM2rcYD93Sq8ShJG\nNBFV\r\n=yoof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/density":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/touch-target":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.3bd8c1bac.0_1587762373662_0.4863377308480701","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/radio","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cbb36471dbe951c20ebb5bc788ef6ca8d50b6a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b83c8dc22.0.tgz","fileCount":36,"integrity":"sha512-ptX54XJ+kXZEw9uXOUBDfI8elvwfsTj2CdFCIKvpnoJuzIZwwknW9jL4bC4uzm3iqCLV9R3/oBfw0GAFyz/liA==","signatures":[{"sig":"MEQCIEoS3UtBVdlMKInxF899SRji1hIDBc4ixCVnjM6kk3YQAiAfJ3Wp9I+5/8cAmW+oJVns3IJiOR03fAQ0SYDbfJ8K5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fFCRA9TVsSAnZWagAA4IsP/jqFErW9Gc+Lt7deH657\n63SluEJnQL2gC86gmlI+QwtLChZ0v0197ebCEg1UY1Ro0GcJG9VxuyP4WDeA\nM5nhI+0SGlI4YACZHOR+398qOpOFZky9MxhqPlxgRBmiUd1FNwwuS8itAWFY\nqOf5kW10nKrI0owGj5o9pudZYmIeaAlDkq+kTt2TX7lTCQ518jxrqV/ZQvij\noXAgfFgjfPsCa9ErNCjLWI2kG7TRX/qDI7F4B0qLSYXG167/UvyGt4bTgkhK\nfpz5UTQtQNW8agZBVELUikVGBDyt3MtTW99tCD0h0jIhwzTiVJPJaUj3jgDO\n2In9sfp+CRBtSTQBCmuIrpBdouKspljIcEOQP+SjX8K6u5seQDn3tuFYzUEq\nSl5LG86JfEMcmUK/Y292X/QYHrfmeHq2D6Ws531uSWiD1xupuET8f8y558qr\nf09Y8S7Xoirpvt+Muo6+ZQHX+yQebrqKXGffoL6AmW0kaEct24t0CuRu2xaG\nHSr/BYId3WEBCUG5AfyfjRPebK4XV6E+o0JWAGZ7mDkNVN3Y0FtrJ3VpPFqq\nIM/TpR/tWe85p+1Dn6Lfh1ooLL2inOBM6T3duFi/6lo0jiX2omBGOlJEDGbW\nkObjVgFfY1fwHhI3H5rvUAA1f37u0bBrAlrtqQtUsrYmHq62FuI3OqtbW8bU\nycWl\r\n=FP8X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/density":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/touch-target":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b83c8dc22.0_1587763140639_0.20803140662189135","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/radio","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18682ad2a5f0fc8983c76f9134e8254c4c96446e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.1b3dd846d.0.tgz","fileCount":36,"integrity":"sha512-JH6Wj2yGdHRHwqsPVo+bsZyojfO5ch6UffRRyj6pkuWgvyNDdqOZJKSvW0pXAzgZJavmNG2gAGrb5ZZ8P5xAFQ==","signatures":[{"sig":"MEUCICcUfyi2KEWou+i0hsDyGOGdUcwHDH1dxPddxE3MHn5dAiEArVkO8bb5uOHssz1liEuaAMPwDjAYWa7Z2IVB1YCQBTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fVCRA9TVsSAnZWagAAOY0QAJWNYBke5VwV3HKA/B18\nvdKnDffPhlWzYHL0Oldxgqdg590koG6Cc5bJ0vTSxskcBkDqKQwZTV7NGmE2\n5kGgNImZZKcqsUhOyGMWxtK8266c4Mj7/nxTfIOBaxP+jhL4TPCiu2C7Avhp\nD5HCYwYP2iBH1G9uaVdkjYo6ehWRWIZa0vFY3nj2csiw0HikCW1ZYcGaFbMc\nBe0d7mewFXobNH2QLttj68m3AQG0531VJaT0VVmjafwSO6qmNba0iWgduToj\nWMcF57K9Figz1j2eHiSDOouoYgSu5JZ85nC+atJJcxhH8rtbryK64BX1yZBm\n6XF8FOQi4f0CdCNnMHmbp/+9IEC9YgqKl+o32z3d8Co/SMW38khZfxQbF1rW\nPife9jRBTDN9LRAXcLJjZsRv6Z9FDwmkmyhPsB0Bn5F0XVVL5rgh9SGj+H8d\nePdwDNe2NugonZxDR0Imi+8Ttl42RsKFR6VweT74TKuGF0BYBK6/2LDEJaBn\nhNxbfKgLzxQt/tWUtej7DqOptZAFjCjB+zaKuFGmZOkvAOKswI6g/wcH82p8\nHlfxbTR+BeUszPRIdWTcAlTTfjJhruMHcvmVwHclsF5eUgV7Ix6JUR8e7lZA\nwbgJYxC/orLEMUVuFZnCy44fm4s3OMNYRQyLLldI95CtzSAF+ZNWQ4MHPlT0\n5L06\r\n=iiHT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/density":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/touch-target":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.1b3dd846d.0_1587775444949_0.8978522425815858","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/radio","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ada577d27c8fc23803e0a9558a6329005644bad","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.29debfea7.0.tgz","fileCount":36,"integrity":"sha512-4PwT11hS4LW4A5v6vCelbyjxHN5P6AEVUAXYPZUG2JsQkAvdutQyWE4ubdNj977BIoNA9Kdw/L/aO6r15bX99g==","signatures":[{"sig":"MEUCIQDnIRpAqhxbMZNUhIX7qjz/veCEuPKcDs1Mx1HFIhelOAIgeVg0EZmrZrnxW3gSSUE6KOaQUFzhWxuQtlAVebyQ/VU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDYCRA9TVsSAnZWagAAT24P/1KZHR1pjUe3U/oyNsla\nTmw39XKo+sG/AlA/E+UJZ4WGibYbabydQ/TpE/J3vGmGicX5fyx8u339qK3m\nsEZXODaPVQSrSOf2vj5TpqHaRK7dZ81eqSSDK0Cf6bMg/kMSIeF27zQsjR6P\nHGoKgP4MrM3+6+t5bltGox0rBb1uBuAWj/iGHYP9TBaijl/ly5tg+6cQw3fC\nJZMrQmNwScxfGczt+tTgnJji57GiuVqOgme7Zcu2Qn3nbXyxFv62ftvO1AjB\nq7YBFneXZ9UWZpYI31FCnnY4Bxp8mwKiMC/GjYxXG3QUZ4TKC5G18p4+6Sne\nr+7VICZgXU0W43UZmFgYRZh4/PyfBh6IwBDZvbR7RIOuZJCaEKZamdy0munR\nqOE1FQteB7iUv+TEACVyJYwDav6EPRPavHFNnCkvb/qRNg2Ywwpox99TffmJ\nkVmgosxC8flkbabWNT12VcGMuaC5EwVKXDqwpT2aL8bM8nQWhwfJjvEhlF1j\n6iZrvUuFINcaSTau0MwVsLg3ZXc9qn/QDTxYP7yl+NO1bPfqPep5H7gfQLyk\nPkWac8p0xcafztsgMTlKL1xRQGwzxvRI+PocDmsQ0JvVsG1k7ZelHc/1y35G\nXH3MfbY7AHMPrXuW5cDJKJDFyJ886N3EoSGgDQsbKymHIXcXJhQTbQUpkjcL\nCB7M\r\n=w0Ov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/density":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/touch-target":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.29debfea7.0_1587990744046_0.8201730068662247","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/radio","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3766d5f18c5f0386b489cd2b8700984c581f00f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.28d32f8e0.0.tgz","fileCount":36,"integrity":"sha512-00MXgG4/dhnrT4uQOq7YZ/RngKEvMosMM+/aqCJvxF8k7UA3noit4FaaEwU7Ybxlk7QJfiOnuq9wtBjqXmCvzQ==","signatures":[{"sig":"MEUCIQCGNEYfEwavIa2GLhtgbDii/b01hK7Cqvzi+2T/tVQgJAIgKQc6YuhApPP74xwtmLC8skQlLBEVzUuAslS8KunX6ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucNCRA9TVsSAnZWagAA8G0P/0ti0reUi8KUOP6nF09x\n9kZhZdw45sCE5V++1xz4b8c/LyYtV+/neJliJg2G9qWx9Tne7Bu1JJq1HArf\n1LwCUgQ2prWw/lkFdGJByGbiJlPUIlkw1/oXAVgVlf9BRK39vFJHGLZXvMKl\nSatgGYTbsiG+KiJQvKloxvIN3ySaLVi6+EbBGRv4aTxhKPa3p9qVwIxfpBiU\nSGtBIrmYeG+f+DKpVnPzRj5ElModddvNgndS8ybM6hNQvSR5JEkhrUKcX1Lk\nk9ZfhSFtHDLkPePHKNSkoRM/cVkJDdEwLvYIpTWah4GIqzYw02/EGWfnbCiQ\n4VKklYEtYViOQLEFN2vAJnWRLtY+2DqM9Qdf+svb6LNODmZ3rbJ/ME9O0wMJ\nzsXz41fX+yqN5hKlKAjFBM2KIXCopjQkdBHpTry1fTIRiPTZx7T+/NYivl7u\noEEQnVErqGQSjmQyRAXmyQT039UiMxal/sWvV3IT+psu/11x+Ja6fSQhtqvM\n3xy6cbcye3GJxmn9AIl8pTWLopnczw+l2N17dMUKOwDJDvCr45gHxpRTAX6H\nbIXKoRU4FkuiCnUylie+KFdPjuQsZ5q2QRsj2vufOZj4NSl7qd6VK8WdFsCM\nJS9ChFf62ZAkU4DEIpAsjnpWlaxrdyGzckYyq0Ir7bo2XzAJ0ZbO8k5MAHsL\nvqBD\r\n=uioZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/density":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/touch-target":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.28d32f8e0.0_1587996428380_0.20103485888906336","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/radio","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef69bf1573d96e061d4fbd0b49dace5ac743453b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.af71cfdd6.0.tgz","fileCount":36,"integrity":"sha512-nFeD1V9J7Da/kw7i4H8VlwE4IKawOET4X8UF6vxvPzPNtbr5qATuPdfjeQduqtLcz91xsRUGkTChwbIW4xY48g==","signatures":[{"sig":"MEQCIFmqKFUtJ89nTURf/uTZT2mPuZ16UMlgCArIo7G6iwmuAiAaRIB2dCfZfLPMusdDNDGMlScdExA/ZYyzKUvDCsD/AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmRCRA9TVsSAnZWagAAowwP/2q2b1gKVCbO2TalVZkO\nmOuOI0bxRKxXUcvkacShyDCCmKt3G7hugteAaDDKwH6Gf11NpbqQaMp3Xs+4\nBputNR1euGOlNoWzGL6X9L+j45MV4OFV/1PX+fqTPF6K6pjZa/SJKICwA20C\nxVgPYeaaVJWeAI0JRcAP7l6MCagrIg7rUsTZ+2/XQ8KTVJ+ZW7QMZ3ZVaDnS\n8TzhuemxPlsGjBb39JoFwC1WH9oaH4lLr51WIpuVFE1XShDt4cS4IjlQQUJ+\nRMfvzAwtp7xnxlkXKiAYcc7M72A5DeXiGYTKdkIe631VTRRUIHVNpY229TDJ\nfCyuLBhTIuxQ04DtSVl2B3EMVgHsn0HKn+Lv19JA4/9WimthzDyWa0IoUHWF\n0DqMv1J7bRtc9LTKqHIOUQTJeDBWrU/ZQ5hc0T7dG+9NgDSjE2JkmcGROwzR\nzHIQkiYbAdLI+ZYxG/kUoO60XcAQl9pwqdBXJF59u+ggb6bj4dT/gIM5d3vF\nFNj7+Z/54IK6D/HQgJawF2o9o6oYsvrLOmPwH6VkYHQdyY2QwGyQ5vRH+7La\nHpqScGqg0KzU0HidP9Fy+ZEwhaW74SuN2O3A19iTK8W3Bd6FS9X7MveG8x0a\ndXcbVnGw/PhWgNCzZUCZTQGudksIprTfhuh0++Q2fddrw7kwVjWzjRv6/YCX\nAC7X\r\n=sQcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/density":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/touch-target":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.af71cfdd6.0_1588115856850_0.7195697112328672","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/radio","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab694d09d0c080b8c3969d667821669a194bbe4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.99d2fc961.0.tgz","fileCount":36,"integrity":"sha512-oYX6TYpodF8CNiuvcPAuUBvvtqeiwl2B3hCGnz6cI0RswpSWWx5BI84NbBIeiSWW5Y98oJmMwLjBO2swQ3v0Ew==","signatures":[{"sig":"MEQCIAtpd79Icum3ljKPHDM2H/eV2DTfSs7eNP81uWgKZzYrAiARhv9BL2Q8+iJ7LzYl2aqlAwKB2/aro4VJE7liSK2bFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVp8CRA9TVsSAnZWagAA8PgP/j/7d00L8C5IIzpom1uW\nQDYd+yMa2ekG1/6+cDjk5sfFl1XOvTeoi03bsXxQSz1vkzUvkNfBCu3sfPSh\npFXhUPPPjLx3kACnWybtZMLkLqkinG8TEIKqwZS7Yufc6cexOyecrLPWN5Nl\nISlW1behjPwiQio18JC4z8Miac7wRtBPluDbbzkItaIFIkS4Xp6BCsjGaz7o\nLrbGUOiXAOW09Bcf9q9AnhYQw3vObGEpWHAEDlkBiPqomJHuoxmUUIBbu8MO\ngF2amphx6TDn+WXJ0BeB07Op2xc5I4pdRJOAsMlJ+S28OZsE1Ev6fKZuaay3\nJs35kexu9yp7Vf7J5qKlFJoapnSONwL7QOa4dng8kqwHIDtyVxeZT6rKK5At\nEeuXTwB3umsuhTPpSmLnzmhRAT7KAdiwylgLdzOXfV8SDYIcskzMlXFxMS60\nXOUpTST+ugTOdSRAE0+v8nNHBWPnikZQ16luKGlURiG22qgt4wqiSm0VFn4C\nlw9z1hIJ375nD+h6BzmXvJaD62IrqFVI9/NEot0rF1EMhtMaEoq3V0POKyzl\naW5U+R1BaVIC5AxEFQkBx6rRrdgHNxIXRtcxZI0reQEhQCTg5oT7FHtl+1S7\n5SDQmChvRbavcQpReWzWjuDrfN/TAWlkpUdXNHghQuyHohr6W4lQUUpOaVoD\np9kU\r\n=iZOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/density":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/touch-target":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.99d2fc961.0_1588157052315_0.737947438201471","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/radio","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2241a5ba29d52c3bb73be9d19e6428307839f763","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.0e052b24f.0.tgz","fileCount":36,"integrity":"sha512-sd1CtCjo84fdPPc0mUkV2DWw7Q9PzTaMLFrlfc+I4Q5pzkq2yFuMx4aU3NdHRlivQ5blzI3fs7QUzDh+eQ9PwQ==","signatures":[{"sig":"MEUCIFUHf2WK6pwHD6RXiJozsqUWujPYV6omHI6fQXXK7eJtAiEA/+etl6jpFtQ+5A1LtfUqF1cL8qQkblKDLe/Uq6wZXNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioJCRA9TVsSAnZWagAAKT0P/Rlk03yVgOOf3N0UaQvo\nWg1Uz21DSSnXJuLRabk2d4gwx6j2h+9e9z53kBTb6PBpHNH/ySbx+dxZ3r/h\nA5WtixE11awAKmZ5RWnvWxqRGrGCqmF9airoRKwgEmDH5n8BTWIHtnsTk4ab\n0doV+E7716BXCr/hg5GmWHjsnDkm1l0IdCEHVmvr5Gy2/KjUyejyyMT/4tad\nMQ+qjwQxzVx6YrFxos+nVuXURDpG1itqvYV/jh4OCcI5c2HOT/AlQNcD5bSL\n3ewKJdvSGDu3S4JTFj/FnNVxUR0y4ScnOG/o91/evK4JTIXmrxpRqbi4XIMR\nVn5jx7FF/nBBW3lhXEz+e3vyLY8W1nhvl7SMqMRSKxz8XwAqaFiph8c0R3mb\nd/ik1Tk+U17ks4C9WwhiCS1QfYZoo1RZbzjeKqwp0bmp9VQspN6dEn45/Ev8\nJPRr8O3drmb7WLxf98jCSklbKW6Dfdr3P9TivQKZnH+qL7WEfxCZ5hxTgAkD\ne8xISZSPIIwi11kODCbwQu7+iNKlqmGQY7uC31V1iUlKQlLwhKaOd1BSNt0X\n6PoukY3Am5VHrF8+3tWu0nzonTsiJ8QR8CLd02dsNVvbmqNsDXiJmGQ3jot9\nfcviVs/IugLvJAVBY1eUz4EIGv7Thw/Yhz9pDV2JwQNdkziDMWClHmFl9Hhs\nz00H\r\n=j8GY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/density":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/touch-target":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.0e052b24f.0_1588210184629_0.6582434428276835","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/radio","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbd2b6f31593ac98cec5e71ac4744319b64a9262","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ff4bc632a.0.tgz","fileCount":36,"integrity":"sha512-Kat0q5ngFo11pUJcaj5qzkPoq7a3W7KejJzh5Z5PE1MgagQ7y+MK+IEDS2SfTK3/NTWkgy+VtfqYOldWe5dPKg==","signatures":[{"sig":"MEQCIDhaRo1x8y+T0GIqvFg6U3GNDQtsmVHWeRmYEecN3iDKAiBWTQw/i0kiAe/lSz0zk0p7+bfW96G5GfBzjAJit2QVdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowQCRA9TVsSAnZWagAAhygP/iaVOoOEoo9JkAfELSCl\nb77RbZJ9rpJONokSQRygM2W8IYVhu/IRhZw85nMgt+zpPtESAVQPctrhpxGS\natl+NTFcEUKH/J208sXIaFI7Yz02+c0Q53XzzedGZTjRxUA1rqC+UEMu201q\nWnDKkGOmGPbui7au8sDop7yr17o0wL1IiYmnQ6IhmzjFKcZ8pM49+3NJF0fW\nT+ri00qB7+1CReK34NHZmdp+visCTQ/yEcWxs1hd2iT0Zwg3ygdB10dfKdRC\nVdlXwWlOjl0Mm2yV6W3spO9SrDBCx6YIAx8nqGRE6LZtX0WrT4+duCPgaTtL\n7fXZrNyeV20nlR4tXiVGVmpUisUOM9XTNWjThPwNiQC/hrkr2hUDpi9alBvO\nsih/U9QQEs2EdDapvNSBEkQgaG9mqF5Cmbb2Y9w10UR+14w79pogWvDwDhJL\nL0mF2S1nfRzJJCRA2v+1dxpKMGEQ5YJwH5ou90jqzst4QubxNlSR1UqyCwUP\nW0T34hPTcZVXs+Vel6WxzPYnRH0t3+z455tcgek0jpGP/zSXJh48O2ElmUdC\nXSZjzWG3SOBeELj4OESm9aY7ew41DlzBQ6aIM4u++ljrb+0Zy+I4hAFJ5UYS\ne3IlMaKnBYxrJE9KNCCBsooMXP3Qb+ENiaq4zbV0wK0U7cv+dKINXT0lYlAq\n5OdX\r\n=BOpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/density":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/touch-target":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ff4bc632a.0_1588235279924_0.28710203032172865","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/radio","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67dc2a068f0b3e082b664dab6d0b572c252d7291","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":36,"integrity":"sha512-xglq2+1COtxJDPdS73A6mW9rmUXsRZvhAlOWWhPfavpnatjdpZ9cL85fpPGjvTppyR4xlFBxyTISNsBUvo4lZA==","signatures":[{"sig":"MEYCIQCHaVIJHLUHVXbJUJXEFJZKEE4vdLPlo56OesYJ+6bnYQIhANv66unE8lKyLguBBGMz6rc34meWUvyKiBFrPogmTxXT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGUCRA9TVsSAnZWagAAFPMP/jU88QuU9dPmUiFqf2MQ\nOlpioCggqvkJSz+kEURLxKoFw+60Gcy4MneWfeR+OCyR0IXlGqkJcZoCA5g2\nQTkdL+xLwUM3K0xHHSXzwDmm64fDyGR7k1VcS/fIbJs4BAvPdFXaGG07AoR6\nZXtXbpBtL6HmPIvAH/GQ4wDDA46mOnMrLJBz866yePJejyuDCPLETiNsEca6\nsu7GPk8+kqrvOAoRZRwn9B5crdwJGFW8rdmq8iB+VEYVnEnuIPXMMu0ZNfvJ\ngb7ct1LJ0RIwe9v8GADkUYVa42u3Hp2q/YPKDytKJwGE42r0F9kvtcAItAnO\nfcNZ8WbdZg6mjxFo4sF1uFO6csvjM2OrB5ecBDXtFgFLlsWrrI+Y9wcNSQ60\nvA5Lg4vH1F/8O3ZFv7ilQFJvNER/J1GbOjX9rvLfhzen7xUqj8daZmsLs80u\nSLnjMMVDqDvkpmIgrxrxj22w10pdCito3SLdFk9z3oXN5Ae/X8E3GJEI0oMP\nPegGkoFQi+5XT425IEjLZ85kbnGUXfLD6AA19031ptJaXkc2VNMfpW+royXw\n8dGzA9oVeKQClAHy/1rn2c84eSc6iN4xxaXJC36Us3fxjEOK4vMyo3R/VLMQ\nV0+D09rUtkm6ZI+HJZznsGVL3r6z9uLRlOw6/WbojonZnKdnR4Hf5HIlW9E5\nxjv+\r\n=CUt0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/density":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/touch-target":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b0f83d2fd.0_1588257171651_0.8541562736522905","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/radio","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a70a33d058a45db2e2179a199dc6c53c511becf8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.e59906a57.0.tgz","fileCount":36,"integrity":"sha512-RF1LV7UplsHFHOzQafDsqys5QEgQBKf6SYbdJAkG3rPOpkLDDeCLLc80sTsI+tLnF4na6WgzqgaJDkENFpm5pA==","signatures":[{"sig":"MEQCIA062jJ4rHu5OgkK4IUBLCtwQb4pf1D5esIbFdNJ/AAKAiB14PCsCkBw1WKHLL7zGVGpl3XekwuFv8jXZkGyN3ljjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEN8CRA9TVsSAnZWagAAEk8P/0Oy6VwOmhmifZKvgrZP\nZe5PJvFKuaxRQdxgHDYr5NlgT6/0+KQ5WmpGmCrtu4ZsDZ3es+Z11ZaOWOEM\nOogYKFpL3dJTuECnTw2sa9G17m0hE7CF3BG4c2w9vaoJseb75zINJgCgBslm\negOtmIF7up8Nrg5XfVD+karECsOHWks4sMaih3ipxehGzyeTxMHKTKgoWKLS\n0m1lSr6h/F0vLRYXvKezFQ6LK0wBE9eL2+qpT07zOaGcpYjMC8YBteGuRDyg\nYWwGsLuLo3BLAOZQVJw3PechHYR0mKsl+8kU6M9HP+up3en/OqTMcd7xDvRW\nCOCQm5pVJJc99fhsJgIt60p//vOsI6Ychm3crzJcwn/vDYRWow05AwU8uMg0\nRwwym5igNzgJGyDaHZkWh1XoZ7SbLfA48totkeVhfUezULC/2VAcDu8mgIlo\nsLN6QSeV9BmmQViRI1AG3L6POQF/VW7RwoNWYyJGs0bzKrzQH6f+qYamuZlF\na8+Bd/vpju+dxmZ/P70XL66gCsWs9VySaXlKF8vGQ9Iqg7mugZ0lnmnT4yWM\nT+rtz8zUbX8CSo9VkmCiB3iEvbjKV471T34zYZ6/0hQtdmTqubrPzEcVqdLS\nSGHyhI5SzpsoqOV25NyLL4RqACsp99fMCs5pJvfmE28dLWVZCf4EZIyrSqzF\n+axB\r\n=gnlQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/density":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/touch-target":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.e59906a57.0_1588347771943_0.05672291118585493","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/radio","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ce8cead88ba0b311f22a2b06afe079839fc5520","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.c02712b59.0.tgz","fileCount":36,"integrity":"sha512-M0ofhgqASkTmnvpMiBru3/S2j8R3Ck57O29B+HigyBIji1hfN6Y6q6vPuYh2CkLWU+KNCeRdbCNZs7EOor0RPw==","signatures":[{"sig":"MEUCIQCtretX4wXGF2DfbHu/uduzCkGF0y+PAJd5EucjqebVlQIgN4W/oCmP/53bRGWEu+Bj6eqmZ4rZEq2oRC/HOErbtSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGm2CRA9TVsSAnZWagAA9BsP/2PG/JIZT0Pcznla2ipR\n2J6V2Ws9PPUmRCROaUATISrfwHSR400vrdgBq0CrCPP0WI969glD3TQpDKb5\nR/n/P0dTqlcFryDvsIIAWK5/iPUyKuaV4BP8wGLnFYJSQi3hQxcHczQgcjgh\n97n+aIT30+jf8MVmQAOf4dY5Gzz/Q1i/OvFhAmpA4W4F2yVdGFnh/c3DWWbq\nItmQWAxYw4DPGHm2FfDC5HACU5+qYMeKvvgSFcxsgqypzBagDDnsHTp1sR8c\nX89hW2At2Zi3cg8fJXjV3z+p6m00575VWKttOX0ceHUVcxsEotKrv1MzD/im\nF0Ap7DsO6KBO+S5O5yY68+0a+ABhulg5cS7C9zVJVPGKQhevKH9dNfh6LBFz\n1QlBpm9lGyVcS4BzNCC7Qiuo7uIRsai6Jfx5L4Z/Ci+wdKWuglaRfC490N2g\n5YTkAlXLCJxIh+yUoZgs8phcKSLOtT+I2WpfMVnhk2eT19OzYyr9GiuOVsna\njk88EQBYs1ILW1kJqZzPJ23PvP0ceAGJarfomSSmGJquUfPHI2hCcvYXNk2L\noIa2Yi4K5Eedc2qzwP6/fUOEFRHw4JfOLXFfXurvH1mH+2l7tpwWpUUjk3/t\nWz2kxMCl3cqtf8eyNMjBKKAqbkpialh/2PezMoabf/m2rgRAfzE9RP1yPz/v\nOGkK\r\n=iroW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/density":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/touch-target":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.c02712b59.0_1588357557665_0.2579294990669585","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/radio","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69b1bfad0737cc545aaa07b64f100234f7218c72","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.15d65448e.0.tgz","fileCount":36,"integrity":"sha512-zErxElH4dvUjrALyNfD9ZxASYRpn5RUHJpJ+Zp+fU8ahFdPxo1xQeI4FmhMKVP97OKstKW0KzV5liU7zsrK8tQ==","signatures":[{"sig":"MEQCIAJjlbinRUx1erQOhmNiyGUc8JIbxEGyu1Vw7YtIkNHwAiAlQGL3o8gBAYDcIBO9FZmJ+pOfPoZ//4o2laehTIuECQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcFCRA9TVsSAnZWagAAh0gP/jBVTaFlIIQUWfQEu2kn\nao0GPYysPHhvJ4k1L0TGhW9ZW8FCLYZPfDS1pl9kEuKA+gt88CH2eyT0/JO5\nEH4dup+5q/vdjDow3CizNUjxdjQnIUDwbXqe3u4o7WRJQPnvop1V7NTL8pb7\nxjnIPLDE6yZJRXfilFcBQB2ShJNCCcwd/4HhhRF8HCdC/emRxiz/IcuMV4/e\nHOHIKp1xETjE1Ii/23vaqv9jvWW7WW7/nl6ZiDV+7J/OjBf/XwiOj8Ri8goo\nsnAX7MCfpkuJkfPyENI0X2JIUwVdRs/V/pw0vZ0JA8HfY7IzxekIV1qSG7GM\nwg0o0MCb1Aq1aF+MrnqqQ2Yy4yyuo6i/GfBiEzT9b4w8ZfgJ4k+JWtzM6+w7\nAFoysnh5oruUmRDFxYelPv1qGd2TJPWswoon7BbmL8n8+qIxigDF+FOZ94s9\nEnzRjWKu18z33rfMNyLttMrSIiKv9wXsBurEqzAllENPqNqCbKfwu0Fnt78q\nE4X4YQBQPZvqq/93nL8XvLMCKE4a/wblUx4qev/eSKJNCFa5DWYiFOQHgJQh\nSbm9xogCTIO5SBVuWUXyR+vX4CZ//ttZGwkRlWY9K26BwCcUiZidrRt7S9q3\nG18LYEP6EJjty4EdbqkE+RoQrJH7rrjoowlrg/Cy087c6y7Eqns7FoE0mQzd\nBFDf\r\n=+IbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/density":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/touch-target":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.15d65448e.0_1588360964676_0.9175848758663028","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/radio","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd6ee474d132217bd0f407984d95fac2ab085be2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.142b1549e.0.tgz","fileCount":36,"integrity":"sha512-R4FA3V8m5Qe893/1WXMRCPQYLiM74JB06uJTdqofJDkjUf95BkHdAwUhtrD1gfmpVxAV88S7eQwmBvjk3kKuKA==","signatures":[{"sig":"MEQCIBqz5WutNb60gDcVnuWZaaFcXgmo7vQXTCVbw3ad6tUwAiBodvp5yD4dbe0bxeSPFPXHrakvp8qX9eOo2DFYPkawPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKROCRA9TVsSAnZWagAAENsP/RhfFhSOvMIauZhwa+YA\no+t4T9MD72A76l1BNvthpEUV2+IzX9v4l11/QxDXasOMQTuq8t0d5OnCF8pm\nXrRfxt9hTp/tHprHc346r/eK5c4wvTb7Wb+sbZ7wEoaKesNiMN8Vk7QHh23g\nsg3qj9r4Wc0wFubkRzzpY4X/p6ytueVhr5Xu+gmrmCjD0FJC+8Xoixk8ke3e\nmiEzdpmNKRXl9wsDS03jLQ+6nPvdB8XIc8aQwipgjniuYKcHTvJvZbDd0TG0\n3Kdtb5Oz81GktkqtT9mJjctZz5r+4VP9qJ/6yKQ3iPwgjiuf40NUKOVbdhcy\noYmmngEN68/FEVx3I8QQihv7e3QufUWltB7tVC61C9Hpzp2ilwFE4UiBf0bB\npu300OTRB0RFrF9O+/fhXPpy7iFrEk55TCDSNW3SJLY8ceEEUzEtaLvSBz+d\nrxLsNREW23E25O0ttR1JCgYIbPmhc3IX2O8ezZ7X0Kd4HMKSjWQB8F3ddVWn\ntgpslNNBHWzglzpdOBQI2GJWBkHFf4r4gKRdTt6GLBX3xl79IEV5radQZ0VN\nR23BWK3qI9rPDDnpo1Kx8PMG0Raf+WxSQvTywIh/d1ukFyYAjMvI0yXyZibT\nq3oEIl5y30rDtL+sXpo1pypwnQBumW+mLOFF+cgtfjuWGsf+Mdy34JHpAxwd\n7Hhb\r\n=OCXF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/density":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/touch-target":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.142b1549e.0_1588372558274_0.09778686875828257","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/radio","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89ec09aa7acaf4176c08bd6976f79fa8c75cc6b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.524b7b812.0.tgz","fileCount":36,"integrity":"sha512-VyOJNujWKYHShcB1UJWZ1LoBHpoUfRd1ZTzYk7Tic9yS1X7Zkd2G5JUO9OUoHe8jWkyPo1Gf3dY/j64AdWDpiA==","signatures":[{"sig":"MEYCIQCNNtjfVfEbPFVc60J/JXRPwZpjs0yJvZG39Rx2XscCjQIhAL17GAIs4H6h0hbXOt3eiSn0yU3G335AuIGfRPC5jp9G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3wCRA9TVsSAnZWagAAJpUP/0PeECxey/lomdOVAV0M\nO2cjdm7KedKfiWjKDsNkUqEefzfH2/qLAFnsSKK79ipx3jHsSpwVKXxH8Y6y\ntAF4KkniSlK93bAQY13gdcJi0ySioCXlHOR8n6pKdBrnYwnX9cEorvFsNR5r\n/fEhr457aHv1X7ZwuehR/X5lSylBwQ3Zb7t7A4An5HvWosqi3vofJeH/8YWh\n5q6SLsE3SFDIDD6J/us94hoXmEfNDZ56yxRGnSysnMZTzzSI4svuLZ/VpEsN\npuxzApKssKlgo+35Kx44I6gmrfFHzxlgx2YfSWLXbYV7GHxx1Nf5d/5z594V\nmZDwphj9p68r1pBErsoFHVKijpJ0KSBsTCVLKKFjEce3hr+MYfd5jP7dyRSU\nXlTx5Psb8LrI+b6spKpuPknr8DFW6HobhxZyS1bpyMl9b64I1rzSmleXfvpf\nvZw+8dk8Jinvaef8wMy+DvuHrVP3Xm5FDMHmnzrlTrmsmtUk7tKewaF49IFX\n4wDNicRKEiXLWOfbLynWHHT9ANW22P6CRyKwZtkcAGovaGKLvpmc8ucQOesG\nbVtWHoBzpoCWpFST71oT9nMCkNatfkIUPiaA40YI5XKm83GKakHWr6Sen/Mz\nzevEStn3mQUqBGDktoz8b89HcRWPBF4OrwqvnGUCnTpc9GN1pX5CzUAHHTIJ\nclXX\r\n=n4hb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/density":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/touch-target":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.524b7b812.0_1588538863865_0.4785132685546718","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/radio","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa3b68e807b51a83a19e72615bbd1f1ea37cc5e5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.bd8ca9678.0.tgz","fileCount":36,"integrity":"sha512-ecBxPVQHCW9tGKasZo8KVztTpAMbgsZffo6vtXOuocz4Fd7CtHGtFa7C586WjhO//v92/XQpUiT86SEzmjylQg==","signatures":[{"sig":"MEQCIEd4YcaVZnI+4PGH8hyZzq4DiyYtvSFnqs2V2y9XhKnGAiBXHTyyxcoRrnDvjFljj63EIhOJA27ixL17FnXiS1T+Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6QCRA9TVsSAnZWagAArCkP/0QMbUN8GDhS698kB31X\nR0SgNZgVblYaQ5cRRCxJIDDDlKSEWektIFF4SHp24EkjnhRx5C7Wgc11E4VW\nAZylkMK/MYkQOyeXjiCsekary8IRDYcgO3XkOQ2QX+wDhe0fkmrVEosa+NoF\n6a5g3wyfLW+k2P+PLCbApjPwlcFJeKucQ0Mqv/I+w75cDQ9A7974foQM6m1c\nwCmmA3VTLELPe1/SEI6LJOhKwWt9bryr/A1el3UayKO54VaWhqI6UW6Xjzgu\nWz0ojgFY9KSmhQXG3sof+txN0xLT6RskdCGbkLxhWJ0/Ma7cb9boKXLwWZwO\nSeJC7M1XQcdv5/BAS6rMRbdVwewwHPSsyJGgAWEw4MvABwJJuSjg0A5bxRVu\nN5OSRkie6xX1ReqLnYVXfqzM/52p3ffm8m2ETuceNzDH87sjpFMbMqlgX+Ca\n/xyhjOAKZZjyNDhoY5BHC1vVkIagKg2IHhPkF9w1HCh/rc1iR1K7l89furKN\nPmLltk/FZx+umYgjPadu7einGu7bM2Z2GoFMurevUPnTaxsUQ/sz/LQVuVWZ\n1yhlHQlghZow3OmgiLLvo/P/eTofuB7Yi/3yP1OQocBj9tYzgUCJO+/n9bpJ\n6pavn576z1FaoA3myulfy4GhntjyG1lni8FYlz6KPSzIETxPaNNTivWvR2Mm\nyQn6\r\n=nn6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/density":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/touch-target":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.bd8ca9678.0_1588612751853_0.22116383254493654","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/radio","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b417736b0739f1e7457fb4e0727b006a93b4fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2553e86fe.0.tgz","fileCount":36,"integrity":"sha512-0CSzvPBu2WmG0f4uPKqnJTkFJ3Tip/NJs3hWkvNz3vguTgid025fftPPKKF1B3qRG/yTRzlZTPo9+vYaS1uQoA==","signatures":[{"sig":"MEQCIGNtg0sIJLCzfxAXyOuCVoNCUxESP9rik09XHSoRhKErAiAwGEv17uWJCTKtlqBRbQy2ArKTXKglERSBNI/groFEdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFF9CRA9TVsSAnZWagAAxsMP/RHHdPuyH+VpUjG7duwx\nCiCC2R2BVMkyAC08I5Gxvy06jw/tWW7hpprlT/Dszzg0zy14UVVca4XB8Iwh\nZDOzhGnL7mfJJWGwAz+YExgOkcyylUnYP1fgWNG0Lq+fYuqpHw922kD48w5f\n55iKu5Fk0UsZYnAa+ltejIyKccefscu36Wgc/UJxbTDJo4Z6BK8Efe4Hwp/S\nXZTzXSy9GK0J+gh4mZd1m3UN1Im5X+dKd/1GQ7Jyv+QQAhWKvhAgstU0n6XH\n6+MOI7nJRTlSt/yYDYNxvkpF+o1902SOGN6Y2eBkX6p14UvK/xW97oQLmjyT\newHxYJNNPYSlV/aTVR1x6HFVvSFZ6tjpuJydNW1bd2+8k23uLrE76J9k1Low\n68BR/gsTdDLBm+rs8F9HrPGlqyTMB06bR+1NT4aAX1Qty+t+FC7xdP/K4gJD\nsFamhaL54wTLOK8q5uGcIy56hvq6aKQRyws1U3teCQBW8DmyL4y26UPla0s4\nHgVyHg/axtxcpJ/JZEc5m18OoYZGbUrmMWn8//MTRBua851PBVPSSbgtiKRh\nvwM9JF370pxQgRQMhqsHXkz64wYgt6Ktk11beWI+xIFNw1Y7X+gCBW/cKOhh\ngBAooVmXx7VJu+aPMiqTGiDIlymKZjUi7pA/vHgr+Oo1MoiOAxnCFAfzk0GE\nsrO/\r\n=8k3T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/density":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/touch-target":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2553e86fe.0_1588613500639_0.0010339450964305108","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/radio","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a97079dde083427273849549b6038d107cba35c6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.03dec929e.0.tgz","fileCount":36,"integrity":"sha512-GchA01dLkB5EH3itlCJgC+NL0hJmtaeKwsClSQTkLneVsJT1wQYMEywrEjN7WYMyOb3xdw4Irh24r0jLKzHX7A==","signatures":[{"sig":"MEUCICLrXAFt8xZDSccTfLVNB0Mpv/TnAJX5SiRfUjz3Uf0+AiEAw+7y9C8k5WNzIY1v88d5ZzMIhCFuv8SmPLgHrpTITQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZxCRA9TVsSAnZWagAA9goP/2aa6uGisqVvZqsK4dI0\nAZLGc+BWo5UOC6PkF0DwLHNbNjP3KRXFlZMll+mp5OrOi+Chk/q2cjkich/X\nNa/P+gin8unI4pHEzTYkZDL36oqn1Lf0y+dLIuGJu7sxvM5HbjeFUncZ1q2V\nU6KhKq6X1GQpkXt/tOdEMV9iwwy7GsDfwtQXOmMQnE8CKF8sp6S9moLYNmt5\nrvDuS/9ZzJ1Ndr7+UIhKvJhKeXhzEZD7ixkPfEY1zf3OGU675nuYuXXLSJeX\nuM5CLmuR2XpMCIwy3SfIWIm0ANji6gAyuM2u/fmv2YBNc36KkuTFZYPVpHjO\nlguVuZ3Oup2Ik/HEChEF9zaDMmpfmq2alyWSttCf++1EBeVApwGRIAXW1KXd\nNiCrDzhY76PaPvjzWERfZyqrmLrvRMgwYSwAdTl/c36fMKKvrO3Dw8WTHg1p\nSzpXkor0U3p7g4+EBf7wymqJMU65E0if73hczfp4IPmZt3KnFH3N51nX0VkZ\nEc/HjeRGbrEaio+4b6lqWKIoEtPMrgEtUi+H1bAJac2cJA04xd5EJSmCZkYw\n/BqK3vWiMzpoV2a9pbTYZxClPzFNFTZxBakmjLHAwfWXAC7bie1C+tqioTsE\ngyV3/4TCC5ItWkQ2uDBU0IMRStYx1MLjYi3XB1d7Lo9KI/FkVnj9lNrUq9cU\nS9o+\r\n=+Mop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/density":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/touch-target":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.03dec929e.0_1588635248814_0.6881217012759","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/radio","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf112f224cc3f3d64021e2ba45def87203dfc3fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d92d8c93e.0.tgz","fileCount":36,"integrity":"sha512-ldDuoAMGy0bDNmIiYIro/N4XdoFERgM+7sJ+eHSlXUvR9Tl/YDkkGHvjRmEcl9E2CwjI9Oa3tPlj5dkggIBMGA==","signatures":[{"sig":"MEUCIEqR22rY/392gaACYkm0uSBxfk56uYic8LlYmQlCOGVJAiEAhv2RJbtLQtmOS/CCuzxLBGCxKiPVb8cyLeVnjA/ahZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtkCRA9TVsSAnZWagAAz04QAIvswLCJy3X4kpDeMLIF\n3DS94UUKsbj22g+o+2Q1YnLNi8cuZEW47kkHu5f+xS4nM9WdBkzzKp3aJ/3N\nvdkUIszPf4Auw/s6OyzC5KCSXQlAz6Y+Z7bdHnG0KCTFbJC3W15BNdEkonTO\nvdvUQZNUH6xOGdIgSjsOlufWr8hNWRdz9LI5td5IuFLnGTe+n/pDK80ySOMG\n9yXkZz89tOCcjcvkI3vAK+OdGgB/LMCX+VU6Kr+FvZfNtVnvPlt3L1hHcYZ2\ncrY1jcgKst5cyZ+hfLT8s8Sr9oPco7KmwJOHMJXJyGjLC8DoDc1vVmcrCfmS\nxT0B1VIVOuibAUVwpQh2BebJ3npUnEnkZw/GFeqCu3TpGpPZFtzeip1jbE7r\nvJO4AUakzxQwajxFDB+3eGYRFgq+/og18swIJGXdlQSdrYx6K+svtWVvR0tw\nHSupm2g3NOTWWnL4PEtN7MdXygSHQSx/yeTLyjcHZwe0VF3fIbboqk8A+o1T\nKcMz9/75ANjW4OOdYmPmbEF9R187ujM05ii0vq1ycCRS7G/DC7EY22cjG0RE\ne+Eo6CRIoEwS8m9sF8FltYnncUHdG5LV3PM1p8M1qMlMk8wM+5v2qgCoOvub\nXTagVhJ9lOQWDLo2QQbK4D1yoU5pUjUldeIvKfy3hDs55QZFEy2XOY5j5W6q\n7v5x\r\n=BF7R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/density":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/touch-target":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d92d8c93e.0_1588697955642_0.04702929682904067","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/radio","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36fd9ba4cc18ae6a87ef66d0be23b8129103264c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.09f591967.0.tgz","fileCount":36,"integrity":"sha512-4LFnH0AwOrvnpnu52tTjciA3OmJpBGas0yGbOroFjT48FEMJ5hUBRB3aMyaEFCSB+NcZnvWSzrPxsbX0WKyKmQ==","signatures":[{"sig":"MEUCIQDH5Zda8bj7WVa2pXAdSE81vmdQIOv32cf54VsDE2W5owIgAgBEGac2C+Nhm2TsTGK2CH+4DpaTFcNCaPTXH3QpVOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdThCRA9TVsSAnZWagAACksQAJBdYu9OOF2BMRiBLyAg\nI1NGVZf9rHi0nQJ1kYTTmWgszeLoPSGHvTBGe5OuR5UOmAtC/zJEw/A5IuuN\nqbnJ/1XCMl3Xt+Yv3KqYLkZNxmtqnh6OUnZifiFFhAknvIWg8d3xhHPUSQjb\ngg4QKPPdvkvTRJ3rrn8B79aRhO11r9c0T5a0oFcKdRlI6IhGWJ28Uzw9rMam\n23q3+pivNwnzKRSzvjK/eFO+Z8dyofgOfLr0GVnKg+0c9QZ9pJllg3A4eMV1\nFcP8KigrVpOMmZLXxCTh54JqzQ1ZtVhYN3RAj0Aqm6fheMbDxckR7aagT+ag\nn2643xeevP1fqnAlSkVVgrvpFFhM25437FODVu7hcWKC9qycyB3aBL0LHuOj\nSja33IqJXMPNegyI5e/QUzOKUyj1hmjY60q4ILvmE0aXo3WGED88CWUQmFiM\nwUKTa30mQtubA0/qNppxdlavieD0oMurtQGBsL/LaffQp48HUq+xmrg+vbTm\nOTHu4BK/5lVoK4uPab3v0wO+KPwE/Ir4I9qc06U3trG8+XF0v66S5Nin/tat\nY9XXvzDj6f/u1XjmdbM8bsFpsJULMxV7Rey7zVih00bebF7+2LU82vBpQCgx\nIUaQJKA2BNpdwCrOuIr0qED/L0MmIEiFu4Vs2RHTgc04H65QMzZqaF/mvdds\n12YD\r\n=oTgR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/density":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/touch-target":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.09f591967.0_1588712672638_0.165543530589366","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/radio","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9e381b794d73e3c2aca68a8ad9125a5e2826c9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.3846ce311.0.tgz","fileCount":36,"integrity":"sha512-qna2ayOqdg8A6igQYNbVEfqnkCBSjUV9IwM/7Ldh8tXj65jHQbLPje05V1hkajvZF4jDFi8GnKzWXRRN+vQxFQ==","signatures":[{"sig":"MEUCIQCeU99O+kfDXJZOL9M0K1Lm80Hy0MbOk3T5Mx70Rxc+gAIgYaMoy/TQqIzxvyy2YQMOThCrcnRD5586YLnSXZw1onA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUkCRA9TVsSAnZWagAA64kP/2CELqjwBPmHA5O3sc37\n9UN6R1lasYADAeitaJRAy8zJVUjcKgo8/9hjC5GKBUQQ6rf2A2ZgPlw17cl0\nKXtgM+pxAVAB9TmqwjibXVcveMMpGb/ht6bkPmfDlRJdd54H5UM9jj0ChmEc\n7fBhtxqe2bdwp9a/k3biCnoUU349drKLYz2QfUVZs5Je0pNsigttvZFMzErV\n/cQCd+2iF/431j3SBvuEpBu9BZpoVtaIbxn6ci5FuiltKRvqYbHHF3Af/Dvq\nTPQJnzRKFhMPhMEEjtQv2FA79C3iShgBip6Pglly+7IXrccz+R2uOIS8wFhL\nwt6Ks8IXiJX0ld2SqU8Yq3KPxPuvwuxaGxvFQmBAr0h/jgLmgfrdQaCyZJ2S\ns6Z+kKQXba2woBT1W72AzsTzHoYA3R+EgQE9rgwPIOjXxATmJCuiUOyP4zT5\nX0/UWM6O6SjD9fjbaE+7KHsNu59xbb52Er30UZUeypOaDdbHdoCCLtqegS4n\n4nq0Zh9o51W+DM+X20oeQSWPM4sS+OmQ17YlzaY7kQc9JmoO6Ik3hgFT4L+o\nVqo94oeoEYiaqYF9WdN3yj/TT2xleOQLHZeKQKbH6w2lNdLuVk38So8SjJ1s\nzgOwY0vvZCv9KnEtNSrqCBIZGqwGSmKWPyHQB/mBbuEnf3i/xS05IEM0RdM4\nYR+5\r\n=y1fa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/density":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/touch-target":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.3846ce311.0_1588774179908_0.01070929756926331","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/radio","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4de57a483997d5859826409306f01c132e89793a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ed7f32463.0.tgz","fileCount":36,"integrity":"sha512-U7UZ+WZt7GlKMI3eO1YhPsnOfO+ZSIsaVfPJ4Y9x2NCwZD1i9EgKVvEkDCx9MazhxGPxeYc6ObQqEvIlJBs2eA==","signatures":[{"sig":"MEUCIQD/jjgeWUhQKBTv1V8MNOYhBReinu0hYWJ3hPhHV4kxlgIgb/TEkMWgrjeUKJQ31S68oWzVSEt08uahnLqm+M+JgUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDiCRA9TVsSAnZWagAAR1cP/228GZXPyqN215wFkUHV\n5cZ8faMOg4bX9uZScfDILFnNS2glMjsQ9ZOxxsXzeH11Sq3AYsXTVWrQK3Nj\n96ERGtUulcoRdIHfSCbXIIvEbNEgGseu5Z2qyQD00EG/ZuCWmskgH4XEve8m\n6JtJQ7GfBhWsu35UDFHNy+/kIc44nD6AtfKFT9mtztAqzD+uVvVRtjIuxNjy\nILVX86NHN+nNLTycN1imFqAqQDcc1u0c2uK+PXhI7dLTew/hq6vWdVm70X98\nfQrl0h17rDV09rmRJirr+cHiiTZcW0npEJVx15v5jzFHvum3oOFlmDU6YpDl\nojrFSuczcu/WwW9E1LzEAq2apbLXhYIT3nKR1WVp4s4WHQHVX2rTVJiLYYoZ\nxCz2TFeF8MEF9fEBIbt4WtVz+VJFhL5aRObjHxj1AjezdMr7p4iz6UMXJGjW\n9jfZOefIT7BiCO0YDwEGcnv/WPEN4X9seesCYgkgpiTKelAXKOiybfXWkrur\nkpt8E8pAZ6k/G8/mbO2pgm79Q49nDzJ1sDmNACjxt27ESflzNQbh6x8Idnrb\nqQHjyBL0E4Zmj2nIsTaweG5t+cSQ0frc4gr7VrXBP2z/GoYoKC8pAer3Gez6\nW11d5V8erdTpG4sqrix2wtE3IrjIDher6kzDXeIdXHXyI48wGT+RQrlvM2Cv\n+8L7\r\n=Goot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/density":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/touch-target":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ed7f32463.0_1588781281549_0.09465716077000197","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/radio","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e2cda7e70b13c4c50d6dc7d6d049bd98f6458cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8135cc085.0.tgz","fileCount":36,"integrity":"sha512-wJQYbOho39nMDNTfIhPQ9ramBQsZweYi1bh8OsQu9+PKTWJjvCl5AJUWNibgm2Z+IjHcTJPnQu2KCMCtsgL4dQ==","signatures":[{"sig":"MEYCIQC+/kWL1eirggEYFUn94bOkYfWhHqWE8OHUGOLkljkclgIhAN0bM6nuaZdeWHNm7CUtTo5YEstKfy0dUrIc8SZNr8ur","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYkCRA9TVsSAnZWagAASQ0P/2e5nVxfIaGxQOkSYnO8\nwF8zWMRZc9IFvRW/aa60zhncs9ImTnj6U16fCTjymZMeaszKsTqKH6OUvO11\nQX7Lu9SFlrxeeOO8bKf+dc72hb4XdVYr8NN7tM1dMzeUQg4WFcaHk6ECX4FO\nYjwqAImmKLkuaFqmP+RIGwbj52migFkZEDmsSAx3mFfnNcd31VuqJL8Tr2E0\nJRM//3Yie0zvjHJ7iYHwX9K5f74wRh8QVeCtrv9C3OMDFjjkcXaGDSbrWuIe\nukM/pXmJnBavZ7ud3XJePItCZXyrtQ/g1ene3Vv2u7zAz28VXiNznkMvyuCB\nWrHKgIMYGUE8xYb9hB0UxTctm3Dewt9QGPcP3hibFApLvbw7O7TztVVLpmkP\nd0v1TSzXDbRkBYlzUnJ4uyJBWtEVo4L/bNpFOK/Rvt0MVUz0vz7YIQ+vdjHg\nr307HYxcUdleBFmDByeAA+eAtwC82/3ks8KpMPzozsL7m+vp74sZ+DFarrDc\nE+3wBZ5R2xdJDAp4fFQOSWK57qISVHaelfNztIaxlaTyS6zRm12Q+bUKy8/j\n66shzKlYTvT/0IO7TLEHW3/f5Zby5fpA33/5eS/qjrkdieYNANhwskZt4chd\nW8g9KwhxR+lgWZ/DMh/5I9drRqnnChE1/MCpKf1OqEtfw7/8DqiMGspIWTjH\nBpzS\r\n=wl32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/density":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/touch-target":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8135cc085.0_1588794916006_0.7137210308108528","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/radio","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f6c739a826c360e3c7e6b490f3c755eb556f5e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.deb212de4.0.tgz","fileCount":36,"integrity":"sha512-H3HEspOsCXeZw1TZ3fxQ25eH3sQtHiFGtdKhAm3Jam1SUIS1aGfQnb0wAU6HJqjvbMdRhsTmCmuXsFjxyJ5NCg==","signatures":[{"sig":"MEUCIC1VBRZci9xlaEuM/q4CAsZ4on0ryBEQgyH6S0fzV5xaAiEAv+QDfs67Rw2vdTeHyN/uh8kB4UMnfA8C5VsjKHH31Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfMCRA9TVsSAnZWagAAIxYP/0IplRXoTJVRF5yP+7fX\nax13kpu7ASQbnWj+cZ5OVK/4ye05Rmb9IlYyPmFbRAn1PY485eyW4NLJw16q\nNqbIgXZQV5pEFSz+Jvmq8XGe4ftUpW4dLWTYZ/3iv3GyVxopDUO+fJQZKKVr\nOCJUWd5yhnoFfRLTjlFe23SMCezAOWLZv/iq3NEXVFRuLZzw4WI8ogpjINtg\ntGjROdtO62lAbj11skv0TNq7P2IDiE8PfhhVU5g7cxOl/T7kCVPStxHKSwdE\nf6a/1snPBQfdsT7EbU7g1l7wLSC4IAWhSmaVthUHRizbezCyixu95/nXIYO+\nfImQkwJec1TyME6XCmo0KJ7+SXNwMkJfXX3Ubo+7TeAvCM7BVMwbMxH5kfap\ncFxPy4rbvvtSwnxIK+4LzzWDVsskChUVc1/ICOl5BogW4x78toij5paC/txD\nunJkkAniLUEgWC+kcqz+HOOzxoR1YQKG2ztWeeSEAnhHupBaz2iF/sxCmHjH\nEl3kNmYAKBVD2vh+6utC7s8pRZUpO35MJzHeNihjmSQ+wvG2NmsuRbdbdrX5\nev78wrzWtYLsFNRhnusaLkmPRXjyLdZr3JE2tXWpXrWTak2oLJ0U2OvdO6/E\nFz7iE5DZSv1pS+rqEogjnV8ZA5X4x/XrGo9Ur1Es5lNMbGCvg7XAyCLL9vZ6\nMQCH\r\n=aHRV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/density":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/touch-target":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.deb212de4.0_1588803530097_0.519983791031686","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/radio","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adb958230f07a2f7fd73ce60ed2e3d2e0f5f65a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.f83e00898.0.tgz","fileCount":36,"integrity":"sha512-yBVgqFEcoljHaM9/4+q6qDniA1qptKVIvUi2m4pbFZtR8fpCgH2aoEVNjJi2mZnBnAFQuZwonz4xVMpDGBJInA==","signatures":[{"sig":"MEUCIGKfuB4kY53yWmweuaZsticmahjfvDd1OWwjkR7/dNuIAiEA3Gs3BhEKpFKSbJj8U3/3eA7HpcSoQX26/OQCMjXdNQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwhCRA9TVsSAnZWagAA5doP/1xa+tx5HAtqSaFv6iwo\nXylaJiHFrm88TyiFrryqEQ0M3akrX1CcyK8ydDEC7YiufjxRByK83t4Ff1iB\nBOHDgY/fzsNp3p+Bb96QO7vrtFKlEZY7x02dyCZiXz6Kr2JF1gNjRWJ7R9qh\nwecXgG3T9hYcVdXXPtMQH192MXmX9K4FtX40kYTYn0jGMoZ4uHgf81E8Q7A8\nx0YF+7y7HgFCiAkdT4+f5Turxa9yUP49Fve9rpATaotWstsssD6F6zkVEOe+\np62AHWV0tAt2U1vVVyF/XblwVxmu8MHIMRTnAQlxcwtvRrFKmdwc5iTtUlON\nhFKPUiVqjvbL27L1kDezpf+bOkPv8OjLlOR8cY/hk+EswukLaLCiuf8gicLs\nBiG/YC1gWYbllmf4kmsWx87IfzdWCvvrn1Uz9B4hHI7D+s6SyWcGZZ8FrURx\nEAYGIyZOk0on/54lTQOge3r3rh6ntcN+oqpGOQfZaSoVImEbVrXYTS4B4vfB\naL70jaTVHs2bq+Cs+RaHf1G1ag5z9k6trS1eBmZYn8gHKFRAvrhXoJjAYm2w\n3cyZH4U2FISZdlx5kVmhIHxdj/9POXZe5c5DKJNzhhXUVY1oUZ2DqeHcQL07\n56oIicEbz0iB+YrA0VvTLc6Uf61AXSWHyt4xv56ENwHpoZ98YV4gN1mKgFjl\nFErk\r\n=7qUx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/density":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/touch-target":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.f83e00898.0_1588870176859_0.5026526064641847","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/radio","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9b5cfa9a3dda87de3b2db95fd37ef3af62b9c9c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.047e6b337.0.tgz","fileCount":36,"integrity":"sha512-CsASmp5+MoG1HGv/Grm9H7G9DM4xhYIgo67NV4Q1Rrj9tlja2x+Ijmxyfkx/w+e/f+uczSfTZOha5KC3nexoQg==","signatures":[{"sig":"MEQCIGBf/UE/SFMMUsxoZcrhHaOz7m717sioU26XqttFnYfGAiBCQ4zzV1gAR1PimEsTdxNHVUkPCg+RxBq/r7Nhgtq9Wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetactCRA9TVsSAnZWagAAOLAQAIK5FNzidXPPn16lH7wA\ndkxqe8Csv/IZHcgY0M6DUJ96nProTLsbRc/gbWN/pzxUeL+SoygnO9JumkLp\nvg1+xdNKa+MlrMOEzZpUdlw2vO8t/C30GpqccfD8dUJwIDmb/Uu4lcz6kynl\nXf36c5Elvp14U8n4SMZXQBUvVqP8vYdcLOTp4MTrNr4ge6CuSIf+3BStQbrk\nu0OaiLjGy/zYRre8PvCUpeVm0Ya92SvsQlvPGWRMgoQ3Eop936qQ7mksdKwe\n4MNCDkf/TyiyjY50wFfvkoq42BTd+NTKlN2q8zKSeYXLCx8sz6ZO5EnP8bBs\nGanX2l0hKlXNpZHW2gu5hxl7SsrBXMwcXKwSR7g9pH+InV8zSbC+f4SwUOKz\nFFCMOL6ohbt1u3ju7XlC0YtChbl7v1Uiv8RXq3YHid0263r1+HZEduoIL575\nEX+Dlf1dmBHKEeBYjAVsQbPCDmXKnJ6SWi7rYXqFXXUNhEKZkdlEAZSq8cXW\ncnkSqP+0H/XRJeLgkHlCHkZjHRlAgOVsPpSBFUa0imgdRTVT5ej681gMQJd5\nPyY5+Fa2Cwjb9zAqYXfpCGq1ggSzvYfovVlFZOPGZgMsmIJag0vzSCF1vSKC\nlxHoRlz7lX53KZfURJSpLej3HOg4WD2ORF9WvrFqOEfnBV/Bcy2I7hxHbbe/\n3kJ6\r\n=+PcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/density":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/touch-target":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.047e6b337.0_1588963115324_0.4879619654565903","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/radio","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40360483a8ae7bff46a2ead99d8bfc5327006066","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.119e21426.0.tgz","fileCount":36,"integrity":"sha512-pXNsbCIqFJy8EkUL3+DNxJGh2LGHzLHe3RViRAEHMAKzDdjtG4jvzxa3GyT8Vpbztv3WffGJszcRASLQkNjxTA==","signatures":[{"sig":"MEUCIQDbFuM3fblmxJXz6FjKoAMtaX37YKawpcMiL+segLN+AwIgQpm1hTKxOd0szCVsA3gX8GVRlg0kUhXj8TZcIsFRBo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+jCRA9TVsSAnZWagAAICsP/2zCHkBe2WFw81B9FfGa\nxTDvLtFC/f9hwboboJjp1iE+lNXbX0oZfYp5aYJ2NmIAEcZwDg74VXqWBmy7\nTZVFMdTYNBi3mgoATXpYOv2FNZhVzU/J4UtS/vilJXASdeTSKotymJYTUq74\nCGX16SQkkJIrd4HmGZBqLB0JP5sFFEsnx/JAkLY+KoFkM06NbgB4xFpEXM1s\nT2v6gXI5cQ2DEoO8oWy0MHrusqJKATRZiFxcLg4o+/FKHre9ng8W3E9+SG2w\nykYxqHYE1s8ZM/cBDDsyLWB6I/irvlz0VBDIM3rbNe+r/9xHqrarPeM4rSg+\naziM51GEDjU5r5NnqFYsf0tfFP6wo5+FNxQI1WVHwGJ1H2izH8dlrBX1WGg7\nvlkLxaRkbjEUS749n8OJ5ZXEQ7+c12Fqghor/e1957fJ1NR98WA0sbXLdGRK\n847qTR5Zg6qMeDsppz36BvCJWLK55v3sNTyWy6iE+XLMWqVKD7CCpTtROkEd\nZqm5ZJ9GQnc1lcPeiOi0RF5sx9tqKnkg1Hn11SPAvwSECWNbEQjCDKPkfa1I\nFgXY3Ljx/mwqWGKMMRh6uCe1NrXI5NUNz6hV2SuS2SOJAdXCYOwqibOOyS6H\nw4hWPbNt34Fnn17ZnTG3WkZ6Vpff0sAe1VjASFOxiIfbEvTdHf+RHSwAgzRu\n5V0N\r\n=Oqfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/density":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/touch-target":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.119e21426.0_1588969378941_0.7415279134770234","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/radio","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f42925d4aba12e3f1d4c777525362b8bb9c13e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2f052d824.0.tgz","fileCount":36,"integrity":"sha512-rqQS/OEkolP5RGPoFCzdE8Uxvv/PWTznLbjjeCqTzFQUDKyW/hnXK//KZjsnjp52nr42wr5Y/biIGG0rINs4lg==","signatures":[{"sig":"MEUCIQD4AvQTQxVRvCqpe5WEZ3+tJBXhOXuWalRGPQf8xFsCnAIgaeoMphqq4MQztYKZcAwY6CF7HVLn1B5mrLKJbQC1+ZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoSCRA9TVsSAnZWagAA5RQP/1AygwAoyM5uAGjtexDt\nmwaJSocniY1ZwVjYJwCdY5UV2/24LqNqAsPIkuYen6pEmQ5g8Hak0aMZ+Ahq\nN6EBGQKzAdvV6k29pU7iK85FwhjztxvJ1iaouTMLrR1bo8F2wmXa4FVsJ/K7\nEbFEbkdeqUPIIKE98Da2R6KA0EavPoEXCpDMMN+n40oJp6JGXl7YrCoL/Ntx\nAOmwp9VJDTo6cou8mdJDpFDX1fKTVu064TJuGEh/I7L0mh87K8x+M+7Oi2ia\nRZpZ5y1lEAzTW6FvmNbjshmFjtgLJB/TZJdccM0X9abIO43qyH8zv/cGSy06\njwISBvHc6WCIioWiGPFPn9N7jgN4w5VlLcBzve7q0p8s4MAoBRGNdlN+ncFK\niJktJPh7y8KRrBQV6YKcp3z1K2B9ddJMu8GQZXjQwozXbz0pVMh/nN2RxQG7\nAoWl1aVwCLXxw3noA/P0jB9y2XyzVjCN2235ZzOyU+UbvLS/ZUxWjyO0gnr8\n1/xqzCFS803L+DD7WLqCqe7g4zGYQQqrc/DmqUi/oNyFP2iWUB879TzTmpLG\nJgHlbs8lParN+KplNaOnJswKKR46Fns5l+J9STPLlqRo+u95u+t5JIFaA7U8\ntxb8o7iTd/8U+jS6u3yaGRQGiYpPCM3sxqPUjuKp0d6zhjjh7HBk55saho+7\neDG5\r\n=V0u4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/touch-target":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2f052d824.0_1588972050390_0.6299653041078965","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/radio","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4748046bf0c4fc2afca9939833856de3d0381ed4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.e84444387.0.tgz","fileCount":36,"integrity":"sha512-hUFEH9B4mQhlmumgfUW2cnJr457wBmKizfqaYdEFL/UzzrVLez64GnNi54nlIinshbj4MK6qIVKkipPYtX6u0A==","signatures":[{"sig":"MEUCIHlmNMtm6+lJ3diygCgrAKxuISWOr3xxfDbEZAxbm2KZAiEApffPOfVJ0VRDs4Ej4yj8WSA1ha1O+H51wSVlQCca6R4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/ACRA9TVsSAnZWagAA4x4QAIXEDZdXScYIeQuKsarK\naY5zWQteFZzEq7fWv3nfUWxDT+IZ/47HVifBuZsOk9vJv+O/RDug0fjrb0Ye\nw3de+3xWwJ3Dwuhra8CF6PMCwb52N37Fgj2Afe59kyIOZeB94mQQ0DDeTNXq\nCPaeHAYyTfp4mDGlX6yCoJ29xmwVcaKbLLhlWYnyrGV/cuwjAPlA4TlMwq0l\nGM6uaxWXIL5KeHo5wt9SEWNHV7hfcq0O+KzAUHGbRDBKXDzl2hwdf73ErTWJ\nHEIuIR1Vj0MAHVtHtkfTAchBFIFABa+HBX6VuBNQfbj1ixk8iYRq2Oe//008\n603GmXFEXNPLcgTtwYUFWLkFLqC0QjvRrjo3RsRHpjck30jAQwK+q74mp6fq\n0A7jDyBY+T+XBc/Zww7LRZhwdQ6g8BmtESFs32uAqIF5gWfkJI7Xu5g3XTfj\nwfP+1SNp8Y45mjvgBWEvqPVetUsZ+Rma1glKc5yLUuCdJWixb0NNrcgVtK74\n6aGb8LUTi3I2LS1kkYnxLvqTX+dGBg7wojPKB/9wohCq9wqhMUVXn0KfZl3y\nd2PbiNGggUMA+ElLmoABlwH0NvurPMkTRS8h8D2AOtWkfkf18MQ1QOOfyjWo\nxFwiwpUC+wLUPKKB/j3gDQVBDiskp/thKKbz50vb9wVwLkxJFvcvVhj2jDOO\nvYvR\r\n=goBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/density":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/touch-target":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.e84444387.0_1588973503718_0.8502132686275412","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/radio","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51dd008e1ac777341628cdc47e4b93f091883040","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.893eb1876.0.tgz","fileCount":36,"integrity":"sha512-HJoQINYAAENzhmPVrF/Eh9Fv+xyGOhZvLmX+As1QCvc/svsZPsuY3gFDu/lBggsT4JfPU75Gg/xdWGI/bTtBNQ==","signatures":[{"sig":"MEUCIAhEO7VUq/wig0c9j75DXF7fJB3xAQ7ZDscPYTX7CKeXAiEAztNyp1idgAoo8ipYFCvaU4MJtCQwv1nrLARJf4JfZL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV19CRA9TVsSAnZWagAAgcgP/jPHlqnx/HxkzUbVcEyH\nuXwKs4FNJE7Fqrt7ECm77TuRSZF1FuB2W/OfQ7sFBc2sL7tdocW9UsfUWtjl\nZI0S+cbOf6bylTapqYgA7KyvDhWfsCEQGxLVAx+Gkt3RtXj9nkGwING+Kkxu\nl5R28gme8uCTBr9quPPLWBzbgEhw7K/pcUijW8UM94lAX2hE5ryZD2Lr6pi1\nUDz3liSBFshFVPTihDUh3sEQ4l/u+HzN967aLzoJUXTzGts01XYJxly7BE89\nqO4lqOVUaZvJbrXFcHf750EyHZi+nxQLSCz766tSI8eZHafYKu6vJmus7w7D\nEhMgBbG8RmVtcjSDhHDU31GBApAibi94tsNp8Us+iQkxJv6a1IJvUg2ds13q\n/0J01nmWSPGXkJEcXzO0fGCBUlgChca/bAHsaSVV7nTmr+v4usgxKfsd8G9G\nUjJKpm+suRXxgDIlhMe4fyHp1jIx4+7ZdfqY94rGEtSA786bEE4Sf1uRQlo1\nV39EKHK0EiY6v7GrotjamsxwdWOTJc1/wXoYGI/wBk0EvVvinAirjQrNXdHK\nQYMkzerq/6dAqcsxFZAaZAyAyDzq0y2oG7mFIgFogYnynwIli0JEnwswM1bo\nOPCijkwHdpR1G+7aKtK/prw5ETq+jL0so8BKOTlMQqR7uBJuuI2x/YjWQ2/x\nwAfn\r\n=+12q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/density":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/touch-target":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.893eb1876.0_1589206396508_0.4683625937182079","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/radio","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b410de43b8edd3679f13efdb68371e88ca599851","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a5aeb3001.0.tgz","fileCount":36,"integrity":"sha512-egJu0qNDWifMzkKP5n0VFrMAAuYFyvI3v3pBF6agy/iM4kbyRuWmn/z/1m0zEN8uElFQZ8PV0SN01+zAEho+Rg==","signatures":[{"sig":"MEQCIBFEsbBV6k/4DuQemEThlHgK0JqlvWNbBxnIlBwa8qFwAiAs+E2daGGtOoKG99a3hWrwMa96ELUNzjfEnWeGYCfgpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWE7CRA9TVsSAnZWagAAycoQAJpD31qZp0J9RirX0aW4\nSfgTIXXRsZxVDFsw9BFRzL++WjFbmDZZm4S2tmbcMvWIfDw1mMPdnOJd/W5U\n+w/SnQwk3cpiqKqNto6mtvZ/D+fEVS//n9VHHKzggXpZm/fhUbuFbbq260c9\ntwtx0yhIS9it6etcGFThoyqjLBd9F19nzILcsnc3WhDcQGWF37IrTzU4TfKi\nDfC+XNvMeW0JM3ncorQ6kTxlAovbtI19hrL+q/C222l1Yby0g0BGWc38/ty/\nwmlQOyjbSXtccW8KNpXYy6AMxGXs87jCg8Jod7VZ3VFzLuBUH1Yw1uCmDSfD\nnXJ3s5e5kEj69jHLqQM7dUt6I7vQHHfQZFN4p/B+6CJve31+CPHPzJnIwcQW\nfSPZPqZrNYPlObi1/GpslFCMsqQvS8TdSQ+fAHYKrNn0Ztz2/h49Rt1nlv8T\nKT3CPH2UqE5G62UMObx7WgvhcodU8QE3XMtDa+xrXHwLpz/ZenkzLzG8Thia\nEU7TAdFLR7WaDWJq9cb9HGNSJRhxSjEDWwFqKL3VCYIbWURU8kzXdW9jQP12\n2gN839AaAqv/923L2EmCLTXyagrXgdGyXYAwVEjlR7D2zb4QmU649vZdItOn\nwd29sAMATRI5sXF4++RESeSnwTOeQjNGMscXPBqpkwwRLhz1bIpEI19PcB3W\nOLyN\r\n=nBUn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/density":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/touch-target":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a5aeb3001.0_1589207355125_0.8282475068726403","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/radio","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07497f1442b2f4230c48add5d8d9a444b7478678","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.610c68d97.0.tgz","fileCount":36,"integrity":"sha512-EFGNPiKuaFHUQFvNAbmzzsh7TCsyLzYEBPkHcaSlY5rg0iOxwvOJXud2Jep7oEQs3hYwCBnooci1V9WVbXxaPg==","signatures":[{"sig":"MEQCIAnNIdhq/In3j3iz/IkKv9DPsvdwVoZjpo/fhSiiXj7CAiAuNvBlf4hVnUVfFRk76DXl95itAdd0H8yooUhu/roRhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahYCRA9TVsSAnZWagAAdhIP/iF2/OF6T2krHJOJdsKj\nBJ6kWuJHeeQXZV7T+ABbAfbLbzNBdw3Ak8OpprVgd5SIEYmGl4TWEnc5rKVs\nqCg5EGDYfAJ2qC8cvniKie7BLAShYzvLs41UEmID120lAq2zYqh/fugMnyO5\na88wgOyZ7kZ0t4qgJdfs7gDqNJtwLsnBSwyRKBSq/1z+Wv7IutrRSE6AIgvc\nd8V8GvpxQZpsS/KQ4OwqxpkWcWyo5UeAF893OSnpgyHlY4ZCWg64jxl21kSU\nh7Reiy22LQD4WaUU/LW4VdWEFw50dzLOv5Q+jmbdgkwNmI6WTqFb9rdGiiw8\npnwnJaa1BgaiS/W9OP/+/OMWb5IIO9TwM9kg0GE/5pH+s2Ng0XcSGnRnBtDe\nhPKFYhIjqooHEsufHKSN6gXZMBkfeHbKOz/KcgJl7w9cnlBc3T29OjZy/uPA\nnZsTSXkd6xQPu6wZtSz+ym+YBpYWnggOcWo+NNkaL3G2tDWd3JiSgUxmv1GU\n1j3Ih+QnuorgwXG2kwBwCI8LjT9xdh+h3tAD6AenQBynGTh52Pr/JVotuyiM\nAnWvSx0X0upQsXESUoRe5Vq9vUpvQ5ggMRtZ6JCGuwYmr8WvTtBaAOE0e3Lb\nPdT5yo/oxL0JQPy+EffNfEMDJEzF+HRm52vfXZPEFDlXXtM4Rp/mFEjXTDWI\nEG66\r\n=Qpw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/density":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/touch-target":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.610c68d97.0_1589225559977_0.401196548654811","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/radio","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92420ae5df01ec0c72a630eda3be35f66004d853","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ed52af767.0.tgz","fileCount":36,"integrity":"sha512-5xXtTkIn6GNOIUHAhGV6nQyDeqYRQSy00sIFAfUHgCsbMaBgt1tcxpapcqNr5B6HNQiJseeCzbOaX4BeY38SRw==","signatures":[{"sig":"MEYCIQCp0UtBxQKY5ii78Qzyc00+t0jGB7SUwGRTlc3e4YPsLAIhAI9UV9ZwfKyVmHIQPCKOoyKgrm7cHaaZA/Z/th8yIVNu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUrCRA9TVsSAnZWagAAhMgQAJVl4qkr6bqcMjl2Grmg\n2b2/DignWyxns5DoT3PGwAGZ47+ugwxUBWd8D3RYSVc+fgP2TmVF/WcJu/py\nx4tOpXnrx8JNDA2gSEu8vtPQE2VLfTL4oV1/4BbIWefNlbTU2XPEvn44iI3q\npLqc4jttFELjXMAp/50CNaKp8r3waiuusBrZfUUQw6ppj9IVtJkW5/WgwbAK\nqXGdfN8AodFvv6Ri/9MSNadQVgSRru7gSeyC/6ppS5jrFngAOGZzv0VtLK57\n27NW7obyWch0QZkVnYJjxdrZNUU1JdNTY4Ey+llLTB2q4CKMahKSq2eDlwSW\nWMATkTBYuWPFX4zpQqvL5Y/rr+PRTBBmm3vkrDJRfgsEQLTIOkW0SLqd2C/l\nrFbwvme3pVTaA2BN3qAwii4QrO6C2ANiXpQfyl/Vt8xBaEp0tKlskRRphC0d\n3QPT7e1S7NZHSoO8gW3/AcbLG3uDUmphgDKM2p5kkwAjGAmCd/a7GdC6adyE\nZ/XZSDbuVWqyidu6KQiDTh9mYfT7NHLmnvScRJaZWi0aQ66kXRSOjmD5+xnR\nUVPKff+lb/v3HFVRjgRov6w5FUqa3mnrw226WKRKotL/zR638YFmLqeeekVv\n09eH+h5RY8lq0DnojSGeSnUXEYgIESxMciyDpAu6K3wpLjEqpes6+9YMTFF/\nFlbf\r\n=8FAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/density":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/touch-target":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ed52af767.0_1589228842843_0.8469403129803497","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/radio","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d30b03272a7bc7c3219372e3c4da88374ca6aef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.058cfd23c.0.tgz","fileCount":36,"integrity":"sha512-7b3/az9+LpV7mDaEaNWyoM29M+8P45ohg9qUo3cM6mCS+NPmTsqDxendDwBoGITtwkoojp5RubMsC99BtWqa/g==","signatures":[{"sig":"MEUCIQCXbsrkXkE4xZEi2Shevbu3X+B1POR8VDwZPYB7igSCxgIgeOI5C+94ouB46a/dtd43Wz3BNounX3rPo8L0TxYJmWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK4CRA9TVsSAnZWagAAFp8P/3w2odAabIWYD5Vtx0//\nam8hY9Ed3ukZszJnrr/rikJxynL5XkxVJayrNTs1aBR5KWh0fzrvnGb9089w\nU6ArDj0SQstZfxoTNnZs73uGyTqgdYPNo2FTiQVUiAe4JIPuft4G4fj6MBZQ\nxmvpO1bthZqqYpkVW5aQsNHVLjpVYdgOJJWX/pU+gHfaEBv5Hm/L9aMO5hEE\nE6rltEpLNrgU47ChKy+70CPY4aCjyE8QaKIJkgtTlQdiT5LYgpM6K4suvVna\nyc75Erah5jnhfyFcag5gsB/4WSUqB8JuqhCrlFVlv11ytmnI4fJLXfsG7i4W\n26FG1FMhAdcm/XJU/FOxKx10mMs5jguP6cqZW0sWmN4dyJRvcmGbj2B1SCGE\nUrD1QVUR10vvvDe0dVl+O6nLXdU6BC8mr32yszQ7px5I9sjJoGQU2sJBW8/s\nygmCZ/UB+TpWHJ4U2lgYNjj1OgPH52dL36egodOybTPnsLAx+dsvAA6OINki\naG2k+FOBxZwPYAlmLDIyLg0PBq92qe2xxAMzmmJaGfBRjjfLsbu0bvohfrsO\nby8hRGRtYEKOgQONGL2YeDq3HECrpR1rKtcZFQTYWa+UH9rHaP40pYTSQ2rc\nVolvjq6NXNDLPEavpgaVujKyxZ8FvAI1Bl8tLiQnKIKRn817jCpNGACBI3Ag\nzwOS\r\n=MjG/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/density":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/touch-target":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.058cfd23c.0_1589232312245_0.48503507040512717","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/radio","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"152fea57ce91372bd0acdf7f6f31d95ecf295064","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.0a371b4fe.0.tgz","fileCount":36,"integrity":"sha512-KAFEDHDqXrzxM1KqCcZF7xs2+UXaLmLBoB/o1S/e06ddbD5/TGgSTrsxFhN77eVDPBozBxg4PuiOKd9ru2R/YA==","signatures":[{"sig":"MEQCIGnyV8GAIuKzflExDWan/70mb8eGa0BfOzlqfWP1HtZtAiA71C8o/HESIR+djkOU07Cv8zUcAQDUdcja56RGm+j24Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy66CRA9TVsSAnZWagAACK8P/iJ9CEbgMXOsBFB84iAH\nQvlnvdmt4rVaYZHYScIkAqtrRN1Ag0nwlUp+H17hrlw+cnQol3zoDDQD1wtd\nsHAtBCkKrfQNfGLoO31ZD1Ev0/Z8HqB39R+D2Uj7D3oH00nMN6QcLGzFInzu\nLe0rg7HYeKcPzGU5dnj18wAHJ0lpUlbe+7yGaHJtryG1QrolBPVhOCaJNjBV\ncNyPj6uixGKVQKGyKDEwd8Pvnhj7d+fyy2V0zpTU871pYpRLHW79CKdYcvM7\nXT0kFIgAAT9vKKeTvbgx5sRbB/OKFwwEs4jAGvB1hCu3SmS4J1wXmLYPhJtD\ncFPArBNGSzgdd711e4jmMNGAAArJ0SXbPlNtd27929Ny9tNTx7V9yumw2kh+\n5dgAxrU/8R6lqoY2Wrh6BNvjHzDhrlkTPqNx06Q7KtgCjdNq6ddfEdnP77CL\nFQWH8zqZNmgrUbpd0yQ7TyveAQCs0K/VuSXx/v2f5bbPNRRhGfrv+z+tIodQ\nRjyFDGLuXCG3GMM7hFBg8tJHKQ6PRMQo1r7SSlb6uoCs2YqWwjj7W1A0iwmG\ne/UQ6waTWZSvzETZ3xHAjiOlVCtNQQRwko/4vXpgHREnj61IblyyVTBcrgn0\nLoo4R0/sIB46reD+/BnTQ3GZoKDczcuOuD8rDxOESgMWVQ/J672EgY5GBqPo\nkxHt\r\n=rMDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/density":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/touch-target":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.0a371b4fe.0_1589325497858_0.8251401134315881","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/radio","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7947410e2eeda15c8e780e5f022391b590a03d75","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2139200b3.0.tgz","fileCount":36,"integrity":"sha512-S3BLYaSpNjhf/j10SSBFlL+aTLHEKcDykx7DB568kslR1m1aQc9dNP0FosYxwcdubcJjYUTrY8cs4kFAx2hG7w==","signatures":[{"sig":"MEUCIBHFE5CkLFasgnhTbklSZXPqPiuJFLAjhmUKIqeBv/ULAiEAqmLhoSOpuLm0tu3h6nrgV+REk5Ja15S015hECuc2qDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAiACRA9TVsSAnZWagAA3+0P/Ax179qsoTsAFO3xcfoT\nhFKYQL4jqDUgI28GxPEzLKEKazNhEtdznzIndzzXgpRXZ9xLBqtG9AQYuGJr\nVst6veMaCFHvx9V38TY8GqwMaZDJhgXUjY9yqxI6Ze+GxEapaT+UxxS+Zpf/\nHlfEyUtbIY2YPn04K7iIe5XDN5x0mb8xHWz1mh5NC/HkLf8q84SERN0NBy5g\nEgtB0qjTUDLW3Fz63c13pyWSGFdZi48ceKKpP5t44U0gVCOQAb6QHet0eIew\nN4W4VozTmwhurN1JcB4POerUF6bZDFpXZ4gbBKp998mkZcR0P5y7dfyuAlNy\n9tLQTi3i0WZsESnLzvwHDqk9+Q3v+631Veq4WKVJigGEo1tXT4nghtiBuLOH\naQZdPBW6WJl2d6/iM7Q5ekbXym/c7ksW3RzzjCS2I2FBc2VorFNDB2Nj8OT3\n/yQp6pNVPTr9MhQEnq++lJ8VO3CARQDw40sg3DjPtKgdiy6r0SOqrHJGA4t9\nCPrQrrpTtbHPToGeSdIxuUYqT70rwxoWzcyXYrz0J3Sq/uulvUch6EhsAcwE\n+W1rA8OngLv4XRvDcbeB2H7QWVhXXgT/kgAhMEQtTGQb5CspWbvQgBhdQW4r\nki14G/xGVHDftFrD1fBbr/iktH2F46MjLsiSqnrQTgowysIp+bUoZOm4tzhp\nd7TX\r\n=mSss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/density":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/touch-target":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2139200b3.0_1589381247705_0.51203680960849","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/radio","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b689e3a8f1f8ec8dc9d046f4a5b935c80409aa1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.744d751a0.0.tgz","fileCount":36,"integrity":"sha512-8KQFXGnkg5jYGTkpATi9SKUUE/vogap5KmqQqXqHi44CrjE7q7XDjNNnra3LIobZe/K1bRP9QX5SYjE3MOfxww==","signatures":[{"sig":"MEUCIQCCpJ7fVYgYlCyXNhm8YjDe/jTQqHYDXVLgrrkmHbitywIgYgrYoQT9uOnEZte4byeq0JLhdswXebaP73EGahmqo/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxQCRA9TVsSAnZWagAAtD4P/jekLp+uB/AFyeCCKGDc\nuYTK+6cIozJhMudt5eC/JwscqfQhmF0ScR/HIYyQ36AfwVsKBX0w/P8QAS5q\nB18o1XSWA6wT9/2f/p4nj2IzEP8qEYQyArVs2f8lwZOOmT3CsQME8OhzJ8cj\nJPgWdRysn0iMg5fcZGx03PfnW6BzHfYW2ngxFEG7xAwFENzHSFSEmVdydMup\nDcl0waSIqEf69UsuLXRnbFQF7O2qHjeaijfyBOKsOLXOxi+6LzWfAgXRc6aH\nnHesxFBU/YetKqOEP7g+zcOxCZD6Nu7/01x2Cg4BPmInEOCDlrhvr0jumgsc\ndR0JhT89WH1jzKQecgt2iSmY9N5+uVLTur8MHz46kOo/Jd30qll3q0r7ctY1\nbO2qosGHzoVoXAq5AN58W4ETJWP+ek0/joxYVFyIoYcg6umyx8Tq38AN/7BE\nvMc3Rf3EGzTB3kpdmS8wj7a0iBopTGRFMNMGL+Geq/XylbNAKL2O2tYPVu1d\nnsJmWxtb5P6Jdd+JBi5W4lZNh4lmEvsTHW6wmlCEGMwbGtTTWLRvTTz7HIKN\n96jOmB/0whYCFG4QRtP+JicNIo7cOPX725a6ir0g2MwYgPSFXiDcpctDc86z\nClM1yU/QtJojjcDH+EVn336pJKWW/AJ8Ru5jv0cwf2P88TXVQNO3lZ1z9Ib9\nX4Ac\r\n=WvcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/density":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/touch-target":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.744d751a0.0_1589431375921_0.8638465736315026","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/radio","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"280a7817f2d61949b5b03050edac0d2c0279c98d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ad0c0c103.0.tgz","fileCount":36,"integrity":"sha512-aMBphHH3kd057ET9NFTyxD4HDiIaegj93Brz2bekxy1sm+kh7TB/+AuC9Ge4vV7JizmPK/1GDbmyzPbgunguSg==","signatures":[{"sig":"MEQCIHQRYe1SJWiGitaHPVaCYOrToeS5mWJE5uC95EfXAmg2AiA2MagI5KKSwA3C3JGC9gQRSt+KjRMEQMkmKBZXZnj9dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVr3CRA9TVsSAnZWagAAN1EP/i6hi1HfJkhYlDuXA+BH\nEHkptcc1x/KBoa8l1ceDkby5EuRaaOLuWzTngfQiGbj2lDydhPVb8EuJRZZm\n8nnhF3ksy/IfmxXErZ8GUMEL7hoRFKqAyM23DFPKnQYOfQInwRVLctK3GTyd\nd2IMY9x5J5YPGNa7IvuxBvs0RK0I3aCDvfXdsO1nREB9eU8HSpxpwGqLx/1L\nO+kE5QH+7JtbaF9SRrBqNi5Ma+oEP8mTp8lafAcrd6u8UmOzRnhL+h7LZA/A\n3UEprDjzMBQftHjjXgKLXT2hZJHUSyhPicUbd7EWgPVQV2MTBGXa1CdBEsGc\n/L9waqjM8A//n0btqnyUfWC7or19aP0xrFG3RsY+TldTBTPVdi2AZPIr08Rs\n6BKWqKBX8MrI7KaCs8Ggwzny03ilGAf3HE+NDZfiKGL+4sdtwtXoJbVMXIMv\nwVisz4RzKZn87NrRTR+USDYvHI1BK2FnuWHioZIKgrLts1+wgICWzExFIQap\nOm+qurgVlyA+Ra9yBsPkt2ZZbwX/dbC92IUXro1zjXf5nTtzc3Mgox6tTF9g\ny/8lprwjOkuqd3EwFlxbBoWge7I5Tlm37GIxD+W57zE6H9CB6FhEEYEBXPm3\nov5a97dzQh02Yxwsmb+R2lRM1Cz6UOw/ldbdu9pF0VyE60NHLOFKy4r9X/nH\nq5p5\r\n=PNKQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/density":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/touch-target":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ad0c0c103.0_1589467894839_0.6834536003958691","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/radio","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fc272fbaf0b2ac0e8c1187147f219c7d9b70784","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":36,"integrity":"sha512-PCmH3oXNSgjMwvk7Bag9CfwoXnjCGz57/09sxFiQFGPzemNF4WZrfgfa/bU/58Is+/9MVW0LWAh3K0e9CxNrhw==","signatures":[{"sig":"MEUCIQD5TOCaxfXxQ6ac3KNQdvaUMMKFr6h5Y+2+IrPm28XcXgIgfmZ58VS9b32TvQ1XxkEQfsu+d3n97yItR9t9+ocU1o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsupCRA9TVsSAnZWagAAqoEQAJEQHftOKQN/LiWXjgBS\nlSDiiHPVTYzww/uLhbz6t9i9RE1rAHyJIy2C2Em4aOsgsR/fk4pBqrhZ6+VS\nw2lEmozWrnnvQvx0iCRmDsqsYZuepTS77AGRdqjka4XX5o+gKItJKz6JemPP\nVTVA3NGGVGCi+5QvDUx1n5KnX2NiXUMEWsFjqagvOn83RlREhW2uaZAkaUyI\n7Tw5YUxV0BvFR+xICNfjt6c10zNQ6Xe5jx9T4Ad/Nxy2qwhh4bWkUYNcGhPz\n0CKoUPd/Prmg3ssLGdMYFmCXyh9JjazqlEd7k/YyDwbhlptln/RqkncYyaQr\n5rZ9W1yvx9v+ZLdEn+sxy3tEgmXddAaDfXjcrmw53vifE57LShy8M3x7m479\nrJ4Enhg+FxHOsDKdGW8F/Lr65rhy7vARBuQEeJhiR0T1sdzeMF/WG4by/zXO\nob1a54ttJtpmGNsPFy0cY5SUTNXhncvnL8KwejgjW+XCnA+FyHfKcb4xT3C+\nnGK+93abnfR0EZCnzCDuJXW4vxOrBaqRj95UuzWrTF/tcVvkcdN+cmFfix7O\nOx9PkCIubC4HN88o9hdprmWnWGS40qsIpnIR1b6N+upFjk7gktUKQnChPbSP\niZRj8gffYvETtN1ME7NxdiktPS1UT9HrV4K+5y24d6nY+cXnjpWw3+ulGlG6\nBzg0\r\n=9X9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/density":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/touch-target":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.fd8f8f2b7.0_1589824425229_0.31018435097295227","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/radio","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ad9e2f3e9c174aab6fdfd6b8feb741956b52a3b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.730920fbb.0.tgz","fileCount":36,"integrity":"sha512-UatcIor1sfz9j6lase4n8oOCuhJCxv2DHAhCbTqJ9WQ583xE5V1kRsoVBd9OoqlWeX+ZQFy0jmix14vB86jk2g==","signatures":[{"sig":"MEQCIERtxIb9u8wyB78ea8LbA5PQDxb/LEkft2TFZWMeRz23AiB84RiSKBB/w6L2nR3tUumx5xSbamEBgp+ufWQKwMWt+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWPCRA9TVsSAnZWagAAw7oQAJqeSX2WCGTwUiLF5UW5\nSFjcBMwuxhtIj904TlEwslJYZtjENPzFlt0VpB9TlRGhlM62+/8Cp4u5pf7z\nNve+3liVPEBllBClMXEwqdojlQWqSxuMPcRbceZgl/ONCbO4nWngtfRqnkkV\nNCGqrZA5yTjHMvej5WwlbL3HoNth1e9R6dyOS7wVMCA2YgXrUxJKf5l8QAfz\ngdSldCf+Y3Ur2Xb42uchAZ/D7sfdEwiDISDn85uvgypDRkq4JlsYdXr3AUag\ngrA1a2aIj3C00tLiVs/Uda+Sxby7hM8xRqBRxC51gsuP9UBpsG9+bfew7CsA\nvf4Y51IbICFQANuOnd7aSS9ATjJRAoRMn1/LuwjbBjdNRLVb+Xl8DIkl+TkS\n++YQQ/fqphbJxiRjOpBIHzYhZedjT7nJ6av20nfkoNR4lbzZGP5C3LR7e5EB\nt2oYhErFuC+9qdEUuv9NH/0N1RE3fAZTnZimztl73f+RyhBw69Vmd3MG755s\nDL9lG29IkJHNxToyyrh0PVTTrBD5IkAu/rHW8inMN/A+smJLGpodNXYpkLG8\nIVzuZWq0X1psDAs9piVAXrzODEovpSxGc+7ag1d4lQeD+mxNO9TgkNyK9+Lr\njxjYDlC0LzhL4x790xd1Ax9CiNnEiF5R6N0Pv7mlgTNpIOEInpDEjGx9Sp6S\nEL2B\r\n=cSsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/density":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/touch-target":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.730920fbb.0_1589831054514_0.3462146108551196","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/radio","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d189c5f56ad9e0a39658287ce15cc221e5578ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.bcdad99bb.0.tgz","fileCount":36,"integrity":"sha512-B/5/yeK3EvLJp7uMSoZVOTW8QL7ZRIhidyjngo7boe/joVeAEn2hBiHxFVtiGdr8qYHqklJy2XIWY3WlV/y7zA==","signatures":[{"sig":"MEUCIG0SJUimde4Yl13nB31Ln04sHGM7za7y5zpdD0n9ZFY9AiEA8aQ8oA+unM9vtAt+ocuB5ja3Z1JSmarVlMbn5smSboc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/xCRA9TVsSAnZWagAAga8P/i1KZKwL+8GH7m3ukXjM\nL1B3E7lqbhE8tzT6jU1MeY0p0zPhiF3ucETf0VaUKtG2pagyA0Epk3m7oktL\n0D4r18b9XETJ+K0HRGt7kRA4uAbR5rWzL5ZYGwZEWdxfIe32xFY2BpGRnYIp\n/28zAFVadUj0VjgnFT4Z/EOUrftYEeEO3im0HdrbfRJ32BtgKeVODn0rsSM6\n8L3Q+3Qj/Qch2ORc8ZomTyHavr+kuP+vgIWf+AEHhNsdmvgAW+7QY75BAIyK\nGMB0yzfGNpFCBDd6tjPOHptBZx1+IK3HqsRld/4E4zz4gXsiuDk4OB+Hh+nt\ne+znSmhMWJhawVC9P0riHvn4JKN6vma0K4mNSqSIKC8TTLLayTjLowa5en0f\n6ZkjQRQ85gJ5CyqRq2PpCkgPC/GN/QsCBBxT7KN2Twc/xYYF0o7VqMAU2oNt\n0GqBokQI0Fbo4khuEzBaOSA7MLLLGMETAhUGQE7GhsbaKnN3LzS7eHdItYOR\nvBnsXpT13zTqSZzF1434vwtgmssP/z43mp3wvjqHrwwvNFc/WkrKxtRyD8dC\n06u3El1S8NG4T0i8Avvrxiie0dWApW/FniTYEUrjHoctdkahoYm/8rpiEge4\nuzD3NqeF+uyUoLsh4wkqweYgThyksR4lzqsQirUEs7+22qRkdE0PnZ2E5CyL\nAmhK\r\n=hvsP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/density":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/touch-target":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.bcdad99bb.0_1589858288637_0.7669216927012044","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/radio","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"299920a150bada3d1f82e76d6151dfeda5787611","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4497b86ed.0.tgz","fileCount":36,"integrity":"sha512-XLBoeSBW4XZDJhkNiX6hSMsq6JYVP6hu06NE9FbRPfZ61aL21sLNzy8+6iQRPATNS3KH4ZVf/JEwvD/rYgAzrg==","signatures":[{"sig":"MEUCIAnmI4HDRfd4v9bNVEwv8oMV30PYNfG3zOoRlzNkj7u1AiEAjghvKCOZytUch5el60eeDIS/ffY/WbWSYnGAeIxpVtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eeCRA9TVsSAnZWagAA1CsP/izF7KQKgJ7nQzjGNv5V\nZUbWXV5zUYsI5stDH25IoNTk2pK7nPdF0ir8oTo5gjQA9fDQXRtxl8yu3k8S\na0F93WDYhtIMuBUGfpQdKmhLZillYVEtEorxRbij5XDTMyhV4Ks1Ieb0WXT7\n13BQHAvruo7z9yOpQqMrD/NiU47iLhKw7PsDocSlhAiirjjhqp3WQGSoG453\n1b4s0EJIybwKx9/k4/caWQxaT5D1/Axz6sPH0dDbfo6Hjy/lkAvak20/8h5F\nhSEnTUXqNujoAD7T29w60xSij2exTpVPoETq/TxmsVFT6oZ+c5e1nyYZw219\nDVLi4PNM8XTifodtJI+BTBaVFnEnNKm4Y+C5viaSFLPpBlgG+XgL4TL/c+WA\nlKdfLoEScS2M5YJrJaf7CBrpIwQ/uOTDaxAbc5gl8W/kVpEV4kZpmTxlUctm\nWKFrO5nx0Tt6D+hLVVw9SlWwew2LdtyiCRsiN7KV/JXim0MQwxJHNBduUQKv\n++Pnyfg5AntdJM8jrnhtR9jDF+ga5+3wWuo9QKs52yA68JeljtVdmTu4BPhS\nC3vGm3EaduJj/RWidbiZmyypn9Tbt5KL3MA2DQwbNzKR5opCwPWacH1ZFZbA\n7DOC4+xOTj/7qlpsvtFdhUXCiFH7nl6WXPVA2LA0nv4ssPKNUlymVf5jpNCE\nBbLt\r\n=g/7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/density":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/touch-target":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4497b86ed.0_1589860254106_0.33545469891941493","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/radio","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e931fc1ba94dc700c8c821fb5f322721f9e7343a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2e60575da.0.tgz","fileCount":36,"integrity":"sha512-aB1Y3dkj+ElCj7+fKJlMhybdOlhghaYtWwLjdow4Kpj8k93RTRD4R+6pwzP4Xqq2fjrpu9f5bSnIyoKU206SGg==","signatures":[{"sig":"MEQCIBPB4G0+i7PFy3s/yHoKdHG+eLf0KSo8fAPZAT4mHIYJAiBdetp8m1p6M1aE5hhj62OGPdPKH2M4S22S9MpxX/NOfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAS6CRA9TVsSAnZWagAAI20P/AyD2TvhJMb3lt2KLIgz\nbq1wshIrAaRwMFsBEPgpsJFD35AnQdKIxj9vl4hTZJyqI5B+Ez/MVfHms9cg\n1M4Lnn+IJMFf3BZlntubt1OrgBAwXoBb/eJNJAgDKXBCQsPmNwaTHf2JVzmS\nipCYR1PUGyd8pDIwq7qapoTWckJ5mn56JeZ0hlr7J1KqiDLBRNYdWaP2iiDt\nwjLAhdhM0PJCUo2RNBDjtz3bAMYhDWS9uRDzybXU/lJxPnVe7K3mWI2TV4AR\nmInBoLM98LEDhiEA+nFYTPb62AY2/zTGdCOFmWqBQZR+Ovys3bxLXDjnFl6l\ngdWoAp5R3C+sesK6OPk9gqDqcsd6q2wDieuCHmG4Y+fwFgsD6pCcimUEZONm\nyNRqM5zMSn1qT2P1WLF/UZPDdNmTd1HMBkK6LNQePdZOTyM+S7jlofYJQzdR\n5x6zxZG712VAm4dbujfNcTbzjtbWydL7NgK2zHi8nweBtdEuoQPyXUpjg+U5\n93Pkc2Rrh1WdX4dtLEdVNEAtkSxjK+b3qChUZLhKprR+wRo6vMgmiEMbIjj3\ndB/MyHyIEb4ZVaJaj1qbinusXy29AaCGx5S+WMFXxN9a5J+10fSKwCjZAj4n\ncLXOG6sMhMKGKklJ4G85vzaJ7eemGsayrjFgfty48kOJsu2YkdWa/SFWaCI4\n4Hbo\r\n=4tQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/density":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/touch-target":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2e60575da.0_1589904569767_0.18829675434702575","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/radio","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7242335d6b29b923af2b86b11f75182a7cc22ffb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.e3eacefcc.0.tgz","fileCount":36,"integrity":"sha512-Karys5yEjiVlEH9CqeGpsQ9edaCKE7lGm6Tv809wsPP1p35FMSiIcL+MDq+XMOTqF58KoM5XbuI3KUrrhXG8+w==","signatures":[{"sig":"MEYCIQCFvYswiWB3JGkNTjyD5GAWrDfyOqt9+sjVeTV3w/9qcwIhAOR/s7UTcton3p9jbb37kmUSUq92GpVwVIC9wfMmVQkE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmICRA9TVsSAnZWagAAVocP/0tDfdRSxY98kMoLXx8O\nY49b3A974aWQJJ6XF3pXlL7aK9a1QD5Qya+YWWCUxC0IHFu+7fVp5KOJ9vw6\n9nE0LCpQpJnxwe5c4nYrvo5LpYpqDbLkgemgbjZY9GxLwhF9ICL75QueA/cK\n2N0vv8NiqYA87JpPIFSb6dP7WXMlhdgV/qogIMj+soiwQpVPSDgT4UDBWWkH\ntyu1N4WWB1WewMc4HnYaVMcQhmZHnoLKykcpy8jUoWywRUn7XCN2kfmozOKE\ndwROWgiC202vlNLhRcrhFi7OctW5ph5/gAoQdt0aa41L0AU7IGqWVV0mC1JV\n2oJ/RgCcYjaPoV4DaY4JIOh8UF0CfjkxRq7riu4A80A9+H28jpNNvukIlfYr\nQvY/ba01lvVyXu2f+Sb6SwtCdBojnzIqNH4/qeQ0snkD9xYpTl48fZChMVB1\nQvPnVrJ50RiCLOGT1kki7xwq6fn7QzxYAlfzRSETIp2AWYignLjm75XUsKqF\ntgSd1dW3OTK9iJ0iF4d3e7f6tBbFOa1twG5ENaJQa4FN08ZVJolYl8w15Z/n\njGuveHh3HakCVjCykeTctkIUqDCpn3UPLDA8pZWvKH5IMgc4YvZJS+CUf/Sc\ns5r3igi3tCdo/dP6OuBBApalaKXfzP8bpF12zIYSx+v56cjctr4Km9hfAl/j\nTOzn\r\n=lR5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/density":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/touch-target":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.e3eacefcc.0_1589909896285_0.5922524784230934","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/radio","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebc019ea0567d9d6155cc18a485ca91c0fc0f45f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b065a4d2b.0.tgz","fileCount":36,"integrity":"sha512-KkLlFK2b9Mv+W146BhJb4BzT8Maec50qNtesm6am1jvgEmUbUe5Ls3z4GErrDYqfiKNSxuP5QZ3p/NAbjVQXjQ==","signatures":[{"sig":"MEUCIQDm0xxg/hu64sfDH95mSkhmXdL7+GtkAUPMBarh3a0wXAIgG8Wj5qigsP6OKBhrJUrfVHICyt2PN/s6A81gB4Su3yU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUB8CRA9TVsSAnZWagAA5n4P/3X9uBTvPce5LYrntjtX\neolZkDsrFRUW3Cr2hSpn8iADZ53uKRm7Kv1/MFzMFJurYAXeWA80bqAXZKq8\nUE0zUeEsh7a8c9WHWNjCKuxLSTZXSGTm3F8FqpswA9xo4cDCuxiazamAAYGP\nS4FM1xDiQLCTqcizb2sXyGCrtOdK19lrXJPb7nYb1SnNiSPS8FIbzfFhNzcB\n7J7K2d8VmqX4wPd9x7ZbPUAv12WNjL29/A3UTmP3uJHp29BZVvkPiOr+j6HP\nzeaac6jpz5blVI46SfT9HeNUdRmNimg2l2JJ/+Vdybr02FXuCkAF4D/9vqhu\nkjNVHCwYQLwqPP7X76nmAw74knIMmVHpDUnLBjW0R1A1rTMfOE3vbceFA1GV\nm6SEIIlx784uxonIt/Tnbj5mUTZ+U8YJZhADvyY876+my1sFfmqqHaS7wwii\n3mztF4r18wQUSO1lEFaUvnMfb/ocs7De0/JU/vUGHw1mZ3WXqXERnU2LJq+p\nhoDEC+DzofgCceX3POerXLoWtKx0JpIeItN4nxz3xSrTnlz8xYq7Fritc7O8\nWq3+swH6HSXcvZXSRcOQKHPzLZj/ntacDW5vqvIhP/F8CvvkcgCpgAligEhF\nvxyTZ5cwsQddxEF02mWru9c6O9LaPS4n+hPFiOj1rBDLxzJN+mL0KaM2xXbS\nh9W0\r\n=E396\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/density":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/touch-target":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b065a4d2b.0_1589985403969_0.631294373388873","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/radio","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74ffebfa8c2b4aa710f9a06aeb7535ade2670d63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4ebce8d78.0.tgz","fileCount":36,"integrity":"sha512-JuC72ZGY27VGYp1uF4oCoxCotZFHKKMdJx115mfho2E2e+DllDSZi6+mzcZeYjQB1F8sHSJcMlzuiaKPfRNTSw==","signatures":[{"sig":"MEYCIQDipYyiZcBSnnmXcM03lcdRS522XqVUMhsmvloqnVdSAAIhAKyK6aNrghZ01hj7kCR2WHV3aSnw7JembkMQVdCjeRIo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZggCRA9TVsSAnZWagAAouEP/j5N5h0CGBL6EhIMKbTu\nf3YzIR1jFzjNBhxEoYxeNrWedmjZOsnUIZu/+CL1KQ+lHcetatdSnnF6Nj+r\n2sbIfUpEQ2v5davGV7RAzRd+qRiLigsGuThzU/A3H6h+7X3ySU8BZIzuc36T\nk9+iz0D89KgSIdTye4T23HlqqZ15wmcrpoWbs/93NB3PSMuIGt1tSyI2ycuQ\nVMXa1D7afP7Qsqa0vyVGN0VSeBJ+N6Vqwwq0BCm0ghdIrix91TtK9l8rBtJ+\nTFnWwAoVJQgIN2sQT/iaPqlUdIxMpAHFdG1I7nfpZ2hIAsZQKWflwykSFllW\nHg/ciaCnS8GRBaszLFZXaXgwYwYFZzJ14tYYoYdxE5d+JAYdywA1o1lss7fP\nrps9ClzZT9b+/HMd6ceOW6weRjFTt1R8Vb7t6QLpHa0v57Mdyb7mmOqKgboA\n5k6X+6ZZoePn9dzesQpRT0eQNiYR9EjOh+AAhOo3t0QVKU9ZKXZbj17gp2T6\nQPmcRjbKb01l0aOlm2p+U0P2ecrkCUotG3HOdFGBzN1cBtvPbgH6OjHaQNpE\niN/FjQmvrIALLPs+BL5WBDOfnYsR6BmaMVv2sB1M/91SFmNBgJq4lRjsDSwV\nJMM150uZeO0G3ttLlkiytVNl60z0zeYP7rg0SXSkbgLvmCgZVjBF1kXunGNE\nMI8z\r\n=AjCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/density":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/touch-target":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4ebce8d78.0_1590007840071_0.030329965921257918","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/radio","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6631c5c4eb419c9ba56a9442d7d601bd533b5a61","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b0fdca492.0.tgz","fileCount":36,"integrity":"sha512-piaHdVZbnfLEM09UhFzrl4gouhmg+1Mz/AKqsavy+b10XQgYwiGhsvUo4u3JDITS7XyAVujnFlB228sWzn51JQ==","signatures":[{"sig":"MEQCIAgFxW2mrj4Yj2YzgZO/HMrSq4khDSqEVklE6H0hmVsJAiAktBNc+b0H8lWp6m88EFLmDAGpdFqtTN2Xuqqu/PnJ1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcjCRA9TVsSAnZWagAA+X0P/RrBZuna6n4ZtoMoDxkb\nRnjqYM3cHFCvhtBsjR6Rk+y5FPO9tqoO/hP5qO+oPAzznQnMMZlZQJUD3uzv\nqjmUb32kBRHfqGnWKx+XyhI1XZEqQUXrR6NROkCOX1biZme/Pq0hLmPitrGI\nUf9U8yuBMq9/thH4fjvKH07sML4xUu/2a3Z7Tu72FmKhRQRdeJxBArsN+WnC\nGbl4sQlyUWYE5WFtoQaSjZH1h3v0dJTxupueoLvZLW1CKpjV65+Z0zmxP30J\nLLfXb0COsLxn7t9TBmBwGQCO2q/5tS5ZmCOk8RHGDdF7KHDvrJwOVoWiPldu\nLQ0W3Z+hWpxVXHfMj6etdexqIPHm5X46qeY0RQ2B9IikuungECSnLdKMv0lY\ngvGNRfruanqhDDbAdsD2rWLjuz2yVl15lGzT24HHGUKlf01h9tPsKWs+A0Q5\nZnXi7Jz5PjHwIpiaS1AlRfKP6BItBMibABzOYjddAvoZyon3TpPYcIsE7kyK\niacpz/ezcN2ISH4273vQ3+1Zj2rUsXt1efqSRkZ9kIQY7bF6kFn0oyFDWyzb\nVVWWf4UZXLBHs3yf/4GwQWF5RV6At1rxS+OZUt0P79uIFhNUwBcgpkYliSg7\nIhXPymXDpprgetbDzahSwn8IDh7xysWQpUQhqzUwfMYtlUUktQNh7OXc/AXz\nIrgm\r\n=PpnC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/density":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/touch-target":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b0fdca492.0_1590015778542_0.0767461121100752","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/radio","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ebed7395e55f2249047209b4cff73cd22761752","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.c67667e8e.0.tgz","fileCount":36,"integrity":"sha512-1uqLV7Sc8CAaa5TQpN2O+1EcqVuCAOWbobtKSdymZWc9tR5ubya/NtMKstPgFHfwznCnjGE0LSnlY54Nlu9SzA==","signatures":[{"sig":"MEYCIQDypjPzIi5vze0uUVEAkHuKQNb/2aFIGhnRS+eV3MnsBAIhAI3bbRATVQuuMVkc5/DqmcjnE79WVtjmpK4fumXll4lb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxqCRA9TVsSAnZWagAALfwP/0D3Tbl0cvlwJ/Kj5cy+\nmmktfWcjiH5McWgmE6o0TCJ6bkic9mEnSO6xc+Y0N7Xv1a6bWrzQGZ0F07NI\nE9wZWVke8HXdKm+CZVk4smpPULu64xG6YoWvz6eu7PWJWfKT3/srygdvrtMn\n1h7GYGktEOz6XqDntYbRtJB0C7ZI+ToaFmnPTZo+fp64ABBpsAGr7lLutPLx\n8UKMgz6wIpXm5mZKKRolEjwtDUV9IUYsR8568YrVvHatlgBaeCRSn+nBfzM6\nQN8QOtyzpkrKQ7TyoGfWDxrFkSN8rIXMJGUZZrr3cs7x3YSbtXC97nfxMAzz\nzErtU9fv/LM2oFXvgX/OudRsyD5sEAMkBJbyT/ccK/s2/fByuaZrIWagb9/i\nZSVH3zmwrzX+bXRVhzmbT5rOw0suLXGXZ5hs+g6uQt40OSOpLLYJjIEHZhX+\nt2pEVZtdXxd6KGkCqAkitOE5D4tjlZKtwuVB9WHSsWLBEyEIoTzmuBP5GtRT\nOQOmUSyoygpRvZM8qWE0AZ0IQ1wvSCW/fQMb+rVgR1sjyzWGojU9/eRePNY2\nbxZ63JUZmYc6JLVeJISGYePRFcogY81kcOIlTPSGE95arhq9Nri4R8eH3FQ3\nJoCmjIp7CaaqHN1749rF5/0UbPTp/VTLCbl/dpj1WauOh2v3ea3BgnXcirCc\ntau2\r\n=SIRp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/density":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/touch-target":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.c67667e8e.0_1590070377996_0.010208969560785652","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/radio","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c86880326ad4b9f31e126d07d8dcea3389c49f8e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.62b5f37db.0.tgz","fileCount":36,"integrity":"sha512-zT9n3hRP1w0DH/QLuZPwlxI2kx+0xyj+eQG+pVl634dO5aNgs73Y9XYQqavMWdQkDe1xxIgO9H5fzv/f43KSpQ==","signatures":[{"sig":"MEUCIQCP4KEFJAej1n8DATjVM78DATe9SKVFawV/uufDfhmPSAIgSLCbz29eKeWNJxlbvlwJWWgS32dkuiXdhAldirdwzS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8wCRA9TVsSAnZWagAAXpAP/1JlruY/twCh3+swTbqA\nuYx2q3Zd6HudUEqdTWTbKbPNlEim/M2J1KmJHh1d1AhAshvv4NRYhYQN+AVM\niq3XzIctQSwetv6gpivAkqZ6ezirmoOPtqq3rxGoBZAoMKD6gcW5e+KLqo1m\nx4I7efAirFdtWTmHSaeAsblD3s8QwJaueRFWLWOweseaVl4aCTkiP9dg5snP\n9b0/Vb6KpmRWz0aRip83UY4BabdlShP7ySB1oR54E+MkL3990jdkiANJ8xyc\njIl7dZBsPE6MuHkK7Ql236aitIfZeKmQCHJzLZMsgAoGEQwXqsr9g3stsVvu\nnfiYtGr66Sce+cNjuvZJtWq46gEQaon/KZlHJZu0ZQxjbuCRwsPKArG5WKne\nQ12sh7exZisq646fj6lX16jqnkYxD6DFqS9TlXQlKwpi3y0JGeYsKbbH+WSf\n0sPTi7+bNs3rf5SG8EHEm7A8ZMuP6ihVCclUBXQXWj1pq4W3khMCxex8E+VV\nH0y5uzCQ/gPgEDmBAsV17VK3Mvh1/hfbDKqiREzKSr1bNR1pidT7gOwO4u7s\nqtZDWET34dt2OKnpjSInwboIs28/EK/uGzYFTApbmNX9rOO+XNOsqeyu3OaN\nFxzX2NIQedlUOthbIroWXOOpigj2xO/ciFYlQqHAbDos6JgLdkWWGilbrAXH\nMNCF\r\n=9nVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/density":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/touch-target":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.62b5f37db.0_1590079279641_0.8521822437496236","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/radio","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb80718d999beb96c46cc017af35a6765e8700de","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2e218dbf8.0.tgz","fileCount":36,"integrity":"sha512-eDzYtz1VU7NyJ56X80c+xc1dYL0rGX3JkPSdx5RpUpY4+OMZ0/v2Mkg7wvCZJuboqXZkPHaVO6FjPhoriklDfw==","signatures":[{"sig":"MEYCIQCeT30nEnjclVx5jStyOoUruog0Rd+xjJZgQ9+9LPTHqAIhAMPnIN37DuBlRjmZLv3R/EUK8uI2hIz7yPfZefhpEqN0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQTCRA9TVsSAnZWagAA9vQP/2lS0JSOuKKslOHfkdnE\nVw3xdxlvrd3u9y/bQrSuOi+kLAba9K6Y0OaLW8DMN0Q4kVbHsD4FnRdIQTe4\nyP1C3z7efxu2jfekz8m7uA7QDGSHtyPwPUlqny1reuhtJ64rfNus4QOfPMLN\ng1SrlDns1Sg001wZ6jKsvIOKvnlEIyu5acBi82eOjXY3RVCgMWZ0JY98/Gif\n2qCt2DJSRcyNvIO0hrKA2GeoYqtyezmxiSRGIAdo4egGMVNn3tW/ZNRgK8wZ\nNyrrQSBqj+ZJFLeck6q/Y3bHNlndjxb+RGTOM1SkAcuaV1QXIsEx9ai9KvmB\nWTkMuL2WcdpY6XZdKx45DASDh7y7JarszN1DJSw4YYVBxOmLpZBWkX7eahAE\nUlJPabAV1dseRsxlxa+WqYtn30lY6hBWd8oAaBBt92pYT0wIxcCIw3XsRynf\n4hjWtxXsBoHhZVrG6Hx5kEauZqNWZ0zPQuQtFZrz86P9N/TBInXKjY1Nm7/A\neDt5ZAb62emA+9/XadAhbbRGYxoav0iuE1APtsq6tjQHL+265OPHWyneKCHh\n1jp6jxiOi+aE+Na3Y6ddwLCv4I+xlYa8Y5MSmov4gx1RIKRa3eVGWmmg6n2a\ngQBV8Fw0cJFfiJAcKN2xtvveMnvRog5YsFlSddgjfFVGhjno0BqxbEDfiTnu\nhKKo\r\n=q1s1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/density":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/touch-target":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2e218dbf8.0_1590080531110_0.9753273083446607","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/radio","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf2e2c705fdff5eee1b763f86e6119d2232d9729","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.7fd792bb9.0.tgz","fileCount":36,"integrity":"sha512-qTqirMui2XKZqpHjFlOsqw4vERHiyRZ51VYQ+krc0NxmOtF8ewyrz8Xg1btpgjgoejplXSreWQfdm6RH3WrhRQ==","signatures":[{"sig":"MEQCICv2WMZQnYEMSSdSVl/AkQsLdo3gfvNbAOEbj5EEq3SYAiA1jJXOa+aag6sxuKPpniDJ85Uhf75cwh5u56VVMRxxIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcbCRA9TVsSAnZWagAAJmEP/21rv2mcrXwaMQn3O/xl\nIM1A7uUmWVYYPdlFn5owMxQG5Nc8xaE7PhjvyTgoLUhhMaiyNGqcOHoAYhc9\n7OmXNimGIqKR+59AzVgOZU5eoLnv2rrWZ6XXZwV09p6+A7vlaUo7fqg1FIv7\nkMvS3wBca+S5UzIq38gfpJ3Y3iIS28dPQ4FPWYz7NSwZHcTFZgvvjwXWgRdl\nAQ94Yj2EBGAE+X85g15MKq7Xu9L4mbvbCilvRfV7Zsp4tAvf4X9ECjgj8H0K\nV602FTTdnHF5JIGvxd93qhIpw7dhz3xioZKVi113CZ1PJZpv2rERETJWQqXf\n2PDxounBaMkXV0BoDP9600qvDvDlr0cEidYjv6S7LrkdibcmTnAtnpn90bnJ\nH4QLtNG0e82TnrebyHL90GfflkZdAgHvlQRw319uWIMMJ05tc7gsn2HWiSsA\njW6KY7zxgbrVjAP+kX8YgiuSenPlQNq4l20khYHn+rrCgLQu2SIVtAiRGdai\nAYO4On21hwDJJ3Q01XDUNettXT+Q2X4mr0cH1GETXYvB2te9kPJ9T2CBTN5/\ngWMcbDsvHe/OEMc5H3IY4wyT8A9zLREwdFe2/GqbL0o/QhrU2LDPBWGCwjV0\n6Ss/gbzCK+sx3m13550ngWjHxTuo6ywYdL9ztokGanDY0/e5hokjUjHSwcUD\nCmwS\r\n=xQy0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/density":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/touch-target":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.7fd792bb9.0_1590081307508_0.823632921478108","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/radio","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7e74a41eccc4cd128f4792b0ab9cc8a4d8e073","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a66493cd8.0.tgz","fileCount":36,"integrity":"sha512-6yWtIp0AZd2QJuVv8BUnFKxfkUc6VWvIVVYtuMTHfu+dvIeFlvSmGBFiejW+JFDMiOx2HUd1oMGN1262qZnOdg==","signatures":[{"sig":"MEQCICPSIL1ZAPQn8/D441fVToE0hc7BosUwwV1lYbCSXyjjAiBXrME4MnJc/xJXa3ZaSDvmVbGhqIV+8cZdRwkqlps+tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfcCRA9TVsSAnZWagAA6lgP/3s0O5iC2iZ4RSojHpvL\nQWGul5an9w+nslb4zIeLVMqnIAgPujbLN6JmmwAXngDXMbsmH3xgg5o3hWY3\nVmjiYkfUBTEd/XT7+2xUv2UEI46ez3Ya1oFBNdrDcK5xIOcLel7JUvJu0Px6\n/RNb03n/JRK5D3WvVZ/2HvVlurIlxaub7jHgjuMnvUb9VLhDIpx94+zJ0vcn\nC4emN3BI/p51q+NkFMvd4GmRbYnsacRzvXgMVhat4prJpojkutrwRGeP1bdT\nvuzfJ9rita+HadiznuTpARahExeEoxwyHjnTjCkfVy3LnlG8DDHNXRPyDV/Y\nEiqyFqw/DTkSoW0Ue8/BaLWazNJ07YLIPiYozzWc1s1zKsF5CJ0BVM3ewtVk\n4hU0VwTXC9uuilXHHR3iPH4+qJk3b76vELBSHTRBkg7MmDDYxK4P2yt4mUab\nuln3pGYll7vlZblRYwlzoL4HH6r324wN6Y9YEx7IlzHkTsJBYulZ4SZ9Bb0d\nVaIgS0Ev0CosNhyUfi47dGLie4d6NP91vSQ5mwkP8dbmsDwvzwvdEPsTV7xQ\ns4WU/StZrG6drdQRJIQ0Kxe99j4eMPiTGpgCW9VqmToCJj8lHJeusW2YV+WR\nzqv0IswFIUrIJYM3kAP+6gv3L+mUJ3L301Dmsx9K5rv8ITk5jNnCKU2Q1ish\nuECO\r\n=EGho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/density":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/touch-target":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a66493cd8.0_1590081499537_0.5977158683978705","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/radio","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb2aa375da01e4967bfc8980214cb24c724b344","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.da05f66e1.0.tgz","fileCount":36,"integrity":"sha512-5UuuK+FyE/qY1POeCm0eRju8Cr0CjPmWh1Z2Qvaoo5XP6EN3Mnby3lLlL4wgFTYiM6+1GajsqEDNXpBQh+HrHA==","signatures":[{"sig":"MEQCIGGYxnVL5YEBT/nTRpDdQ67X7QH5CAqp50BPBCXT3UA2AiAHU5UeY9+dHFAJz2KkPh7ErDPN0lgieq3mBQG174K/sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhgCRA9TVsSAnZWagAAjZgP/15MFld+PpulEJU2pMIC\nwHNxa8QzqWCcg3hMUhQ91YZeugoAr1GUOxgASbe4vQ2sXs+r+uWx2W8+YdRX\nxMYj6Y22UXQ3FIWno4TWo61Y65WdUo9sREuJ5Ksd7Ta1PbcBeH5hETAj2AhO\nHoqZ30XbItVLx4fj3bhx7S3XR4x+2vec64lHrVgZ5NJKtFh/Z4k4C/RZgrTS\nZBuFSbfXsH/lJud3JqSSSxZ7rTV5l+Vikdh6HR+P+MnHEYGz82mgbFWjGzpG\nIP5Vb3C1j3Nusbcky1z4NI6ivy8wmoZ9roMCQjL8zxut2Dg9wI3YlapCPQBn\nQPoOJXDU52xwE0okVz5WlRS/bVZUPPgUXnRI4HtcN+f0nGJN/cZMxT+Sd907\nhx4IP/6yBVJzjwZUXL3GmppOtxd4XbX3AkNoVVclcjqooaqisXulKwnnIhvs\nLUcp78tCh66UQbqylDMkewTsXuMmnLHG6bDNEFQaMjjANMOdQzkEc5pA605L\nNtCjIn+C7zzUxecHMpH/RJOFXNyoh5NGolHCT/F65LcR/kj0cJKdwZHyhOaV\nS5YeT8NUOLnlaWD+VMNbx+/u0tO98sfox70PtNLu9los+wTI0RbTW5LsYckX\npvovlGmr6V9Z68FVWy9RF7XZ5IJFEu1/EJNp0IuSSrUsoCylK31kWHC5bGeP\nRHbU\r\n=WWPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/density":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/touch-target":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.da05f66e1.0_1590081632205_0.20497512928429096","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/radio","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2614fe6fed94278a99c4adc1f9e9bd2bd527dd57","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.740860e78.0.tgz","fileCount":36,"integrity":"sha512-9t8qoZHgRdqIEosQyII1t7uFYvx/CsA09jLQ1EtnLViK/WIhfemjRrg5f0+OiyIgBVlUVtJyHj0sSbS+TJSbAQ==","signatures":[{"sig":"MEQCIFvHlnvc0gSwwb1VXHP4w+ttcy6/Poh4f5SxK8RDxM2vAiBXCcO/iLj8IQ3gUtWabyELusNJdfUHz6W8KqeozHKm1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnYCRA9TVsSAnZWagAAQTIP/0fErAN4SEpAG+FrA0vp\ngg366iQld6ngxxvYRu+cDUC4SIZF6i2b6XPnn1yrq/22MWSDnD9xnWWF4a1O\n8UX5881ZG0SRgBf90YSd7puSf0L7V+3s7LvmeRkkdR/cl2BORUqm4zzcIbXJ\nxqeoV0JKQoQbt2HaY7Wo6pJb0hrBFP8xSj4jqrUBSpY0KkYoMKuSr0UnIx8r\nVcWiIVaDqHdCxWD+F/poxjHqzzEWCflzEg7U7g2BbS5QdPgR3szPxPnGq/Pb\nm1v7UlT8cnHu4EDsy2T4tRilMuSCjVQ8ubVTq9GM+JAfwvNOver5V4I2Ig4o\nhbPvf7GQn5o/aYiyRz/HO9cQLmdQMegqfGvGfw4DiqE8m9J0vI7oGA13go0O\n8TVB29o9aUnqXKXncQuseY/LAyEsYod/8qw7DKe2kermAlXDL3cXMVykgppe\nVktpl5gIazJPyr9jSVc2uGbQL4U7UWmPrZh0OukYdiOUS2IIQ6y8nxo9VDUz\nmGWRcTLlHv66A8tt+dZnQoIuZRb+Lt4U025GR+b/buHTD66f7m1Q8HnhvOG1\nD88++w/mDOjHIctjOZEaxSeDRKHyuTslQ5Icjha6zUESdEpLbSRj9BYE4ZFy\ntjrVZhxmeUlYi2dUUvNud8S/97kqg7bb1x/bGCBdimZ1RjKU1oY3w+TfoFmu\ntDOf\r\n=kmAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/density":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/touch-target":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.740860e78.0_1590082007958_0.383514897581281","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/radio","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a93ecda168abe9ce0e3bccbd12c1a995ad9a79","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.5cea2610f.0.tgz","fileCount":36,"integrity":"sha512-MP56g0ucarBO68Z6WHJpZ6cDh4oDemyASUNnOb4+J4GYKK4GyRQ8uBdmEE/GM/c/1rs0GW3BHgx/70C+BRvT/g==","signatures":[{"sig":"MEYCIQCeRNuKny0XkBKIPL4nlaEwk1/0yn9JeKSCop8HftCNnAIhAOpc10gGsQ7kcWl3djZv0SkMacdz5YPHIVo/Ny0VSNzy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpRCRA9TVsSAnZWagAAZmUQAJLrO5wrJXfjt8AlrPvZ\nTraeC+SCRprwwsXlIFzw9zd8JUG3gIll67a0X1IgwTAVry5XRW4W3PhkENqP\nhK2GSnhGGPELpbNeheA0AAQIidiFex++upZIWMO9GTZQLnc1Hkxu6gHXizVA\nBELxcVVk27UBYZzTSqDHbAporR1A1IEZDcJH+QxxWkr7VFOx1gAQAJBmXn8q\nlgSMAjboLaniHY1DSpEfb0mzio5kIHSJhzHsPDdnxi8ASlWATXgmltoxgsSJ\n5yQZKb4O1fBhujbIOppe2GpsquA8qwsVs29H1nICYa5jU089iuWAnDROGH0R\ntM2dPxVpnhDzAnzVS3JhzXM/9v4eAlvSaeRJgpE3+WJFzsEEt8fR9Ewv1leT\nnEcJ8HG+N2XANPJgfnC9DGTWpQGUxxU9HQN5VjbRYZWMbZj9qaxmfYphRv56\naIpLyefx731iKkoIfCXa081gLHoJ02kpK29rRAS84/iKDa4rKqj7kh6nrIE4\nA9XYXhQO0MSGPF7IfjfbBSvT0+UHRsQIbC+SjVLkTnYSc9jaUsVpRFMFqH3Z\nZlurhcWeJvVCfYuLhWSF8ZThcWb5xgbwV3w/TbJxaG60Jg39GjaKxRRe7Lvf\ngqCZjeMFIuJLe92XBx+IHVH3EF+V3aCru6+HMFUPsZfBgE801ICY1ViotTH4\nllLd\r\n=JR+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/density":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/touch-target":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.5cea2610f.0_1590082128931_0.4922327535853164","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/radio","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7453e662391491a3ccd17ad2a9064f6ce816f6a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.cf7747ef7.0.tgz","fileCount":36,"integrity":"sha512-qoo1QEk6hbVdS5pqn/sz/Fv2wVU/0BPk/1Pv5artwTEiyjF8Ow1XLeal4oaHFuluk93Q5p+OtlBAiwUMHMmK7A==","signatures":[{"sig":"MEUCIQCLENu8VJWcsuT6noAi5RmKCfbfJxrdwYvgsAQOtphJrQIgHtGQDcOxKLivMiVL72SSVxEA4jnUXSWLjTz7rJMZkFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpoCRA9TVsSAnZWagAAD5YP+QAyEFWA3wtTBQMO5att\nhAMvu82jBz87KzzAg1jPdPXOj9XZBFadjdPnTOstbnrFJ1p/C+yzz+WiFIIT\nCDWum0lGZwGc1J6h0naXBtEa8SxGFArDiKL3aKi6gmVyNgWdUn8FOIeK//O0\nxA5tVQ4AmpZ7Yd6Ju7oSJSnDyacbDKvbUa5JgJUNpDcA835juavuuIBq77jR\nSMM68sKAGAJ7PcVLP3Qr11JmCMqVQsDQ7ICkG1kCQ2i0tldJUkPRU7Jea2m5\nJAhUI60y193++sWT9ZBHVYMFdEcTs5QIpHE7QxoAXGzmoZs2cEK2128IxMMH\ntNfsIA3TbGhqTyDoWjdhiteak7DMNWf4Z8asWf4g1l5w3ew0UQh2zxB5feOj\n1o1Yc2YXmTWmF74Lg+KhkKFV0/Vc9q5wlSd/fX5zR8A14yCKbKjkPDEGMKNt\n99JSxo3MAJST827rPkxvL+lDngV/x0TVZH/gcSBQTUbicAb6tSlB6hVOnQUS\no9HmDRYjATPauuTA+i2EtGoonen2LbPk2V0rRlqcku+JJVmYzeGXnWfAXcoX\ntUypcYlsf/jq/9zkLgPWVK2Gj/7fvJujqiha2GJMbWWhm3PLkesrRNtJ5+sS\nAXDTJ5YoOJZYXd3xRLysRxdm6jtgTDxa3uMKFkESXJYhhoTQCALRJNvK275h\nvleT\r\n=29m1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/density":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/touch-target":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.cf7747ef7.0_1590082152389_0.9378476794832098","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/radio","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6feb178340ae177dcbc46ac9d08a3e132ff306d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.862d0d7bc.0.tgz","fileCount":36,"integrity":"sha512-6WSZofcqfFotsJK4W8u/1HN92CKW+LsyLt1yD1LVXbasYwgyn6+W+Je7p9RwCcYZ6pGUljzWuoSfvxm77AhrFQ==","signatures":[{"sig":"MEYCIQDk4Sk4ViuOAkKtqn/Xtl4fOli2wpPh+tw/wXuLk6LsagIhAI2jakUC1ePXTgQibOr5kVNo51v/Pd2p6A5Ju1ONKqNF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsNCRA9TVsSAnZWagAAALQP/2BbY3B6mdX7TyF+z7/l\nOBwckBsVT/GqI8WXK8AUHTD+rJLprsSUkGrl1NhDZvFOaQADPIHRdHr3n1dd\n6dzsUJIYvHrimqsLlz/tN1/dtkWS1ofEsvAQKDQmR1758r2MWisavtXZtI3X\noTGx20QvhiLaWDdHpr4fCW2hvuUUH3I8JfpBvflBrQ8ljLFVFtE65g9XCjm3\nEcz6as1hRkvOflrA8H4eMmvC+wOQH8a3ki+CHbn4n4yLgmsBE4kmnyimFONO\nkA/XxOULxeBEqetnbDe3sJ4gtp3Dct6pNlj4Hg23CuzfViP9KM0wQSPa+MPW\n7kCEBlct5dDShy5bNAXxKsmgb/CJZeqrYAZP48X/dUT+GAns5/AjFUOFNPfl\nZ79bD4wjQDApFIFLj+hJ8xslXNGxSh00bnPIo6DpLvoY+ZJlkIlXcP58aTfW\n3VATkoKxN7LR49dC9GNfET043qVNwnJorRYv6ZWa4ZqswC7i2WP17oF7Lbgx\nB9fNbIsb9TsTMwMAhJgu5Fx2k+erdQLbJLqAHFxQAD6POxhib9odzaulYny8\noPTYqxWK3R6pkxAEwafffEHyvUqlOMxtYJp21Gkg+jtfp0hJco7Ur7UR8IzS\nPgqx+Pq81UCplqvK+sNgCFbqDfd3OKsv/qLXp6NozCxGr4V+3sNjtU8m4yXn\nCPUi\r\n=kyN3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/density":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/touch-target":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.862d0d7bc.0_1590082316480_0.8713501613675609","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/radio","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5622f17a97b441fff9e911652be524902dc930b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.0008c8a91.0.tgz","fileCount":36,"integrity":"sha512-aH2/udsPXQBHe+WEB8FdCnU4YLIZzPAQHcWAMQA+PGz17RzBcvGAWlh6hDlXEbU7fbxoz+UiXwB3CdbIi0ZTMA==","signatures":[{"sig":"MEQCIE1v+b5e0DxdFLWn9oKnM7nxjilJvwImKx+VLxyVE2DrAiA5p9q7FZl3rMfwEwAA+rdjWdK+wT4fLUC8ynsm/3gOzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextd7CRA9TVsSAnZWagAAu0gP/3/w35yCE6mMOsxPbzC9\n2oHQSz88v12pB2B6R/Xs/ZSshjcuuqCg4gJ88MRiqOH7vNhTVPT+WMjdFyKR\na0ShzJc6Mray1/W+dGxC/oq9oq+2ii4l8jSsBA+qSOAOEhY9f7cNaCbCqQgg\nxoLfYLH6oOttLHXtagpi6f30b6bBeUhEkwSM7BdE1Q+xOQoBOB6glVB0LX4L\nsKlwXEX1M5a+ENV/UUfAzFir/jwqqfW5X2tXr2FJamRyl6+SzqSTDQ/RrNI4\nwTx870bLFMOX73oXsKZ6lEj7HCp7LXSS1IHoFzKA/x1R404XikBGA4hzWyDy\nvbCaxc2lj1ixzyCPLW7PK0k6tMlUqcz67/0y01MQT59Lvc9rzKuUnEzvvang\njbh4CKccPZr9hPce0g7NiNEVAstvVDHGTZEFCtU7DkEY9glx8dyah1emZqW+\nEwj1+xwsJFLJYWbhaE69XoeLa7Fua5jMLixJuPCNGBHT/9xDDS1I3GJlpHM4\nvZpms2iqPywc8TJoz13Zkujem1MAz82TCfmIFe3HbD907giTgyVgl3zewqU7\nmPf77O82xRahmydOqDy4DUqefKTQ942Z01d3/7kMTiyK22NgSleBf0EM5dB2\nQCdZk2zq7N5THuAmAW4r9m0Te/KqYff2Jujv4A/KuELCNNbkpk9r1C94sbo+\nZj+2\r\n=Q6QR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/density":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/touch-target":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.0008c8a91.0_1590089594653_0.8241950512217722","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/radio","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6c2c8370bd6d98d09243791c7fb26d340e2471b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.541638fa2.0.tgz","fileCount":36,"integrity":"sha512-KVVWiF0tvF+1F/dMoYEkYp5i1Q7LeJCMY2bMslMSawIpJ0rfSc5/BuEnaaVEBASIdMMJzTUGabu1MVKQUSH3NA==","signatures":[{"sig":"MEUCIQDtUeqIsfJKf1/y+VGHDuIDIctIwlDqYERvBLDH37wcbwIgFI9ZEKwphyydACh0kVRkD6fTaa3TsbevQs0FjotJdHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextr7CRA9TVsSAnZWagAAY94P/3lJRbi92YDMeiIbuGGc\noaPrzNc8fB7KRB7k2mW9ZkD7/YCKUyXi+TFmIzpzWuTGJMtaHZ+6r5xoO4N9\nRQt5+pf1KgctK6GNq8ENY/JK1hAjaZnaruyop7/1/h3mAm94YlXsshFynliu\nXHarAv5vvEy6wxNi09+vm7XTer1ak05eiztQmOcDXAWh3ocOLA02I/Vg1fJY\ntVVffBn1TLqkU0MGhG3DsWb/bnJl5ennUtrQPnV7G2iBQWMBv9uD61U01YPJ\nzE1m50g9W7jGB5r0seGR5DIk8/VBgr91oUriawH8uaOCJz37nAFWcjSfOqRQ\n9bhZQZKK3eqSuIyaili/kNlvacCDAL9kV46Jsx93ba8vr/NcYK0KZyGoDnE2\nhTgzZzuORD7r4ChhwX8dD24hWJX6qoZfdHokD7pQFNzBLM9RMdFLEO18aMti\nCfvEtD1UeQNqZjLeqYONIqNveebbERdB9ttk0EeTKDEYL2+il+uSzFE8dJHY\nQZVFbvggllr+0VL1H3lGjioxrqlxADTAWWWwhnNpZVYdS5XaNNJhLd+62H93\nAvzZz0SUZck8PUGE8UVkRt7X+8isd+vSpJNsIufUqExQbi+3LqOg7w+XgyuA\nOQhvFCkMB/wa3013ixa/qlPaUS40nE3jrWsKi7NcLLDWw3xIv0ixye0iQeMf\nHZnW\r\n=2GIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/density":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/touch-target":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.541638fa2.0_1590090491392_0.6894155490206042","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/radio","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"118925b454ff7411b0eeb54a0dd98340a60d1c1e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.6167cd075.0.tgz","fileCount":36,"integrity":"sha512-7kfrcWj/GK4ofh/Am6gusucJ/zGnQlzKO3S2XOVXwAg1ViQ2ZSWnTReqdHRwMKRrRfELQVck27CkPk5gT+YE8A==","signatures":[{"sig":"MEQCIFgHzhGHpYXpF6WH3BRkrZZjOM9k+ljVv74LVJ+ho44eAiAPzhnj9Dy8YrBjlO9AAzvtHNPd5BDodI8mSdgUTvKANw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuK1CRA9TVsSAnZWagAATaAQAJnNE7W7KUcsn75He4yG\n2OYBZBnScSOI3HC10labhhaBLS7AjUjfLferDFWV819neGMaIhYMDiYFoxGj\nzySU9DfmWilgD9hyyuw14JaQ68jgrPRXE9xnQ7e0it81uOS4kQiC3+0GVAkT\nFJpEYJ076pYexk6tDY/Apw7+4ohb0/iW9yy1lqryE6XoiMdXl2BqgUfrdCmM\n6FkGNZ5ibEcBOzLNJyZGcX0kEjfyyBffbhI+SFplDLB1ue/sjyWy0MnTQUk4\nvkt3fbfuL6qUU+JvQkK0amNxxY5jXHtGbnZw79E9aYCuAJkILoTkMYdyxrGb\ncqxAr63aqPnTl1wU/oRCfNmPKZCumeicSmhJQJlz0aby1MzEomtg9UegUQWa\nMvL58e085K3qXXoXU09eeE/gnUzVl2WjwuK1l1A4/nnYSxF1zJL1QDAp9zWW\nsFgaStKkEiF4YAbY0UKYKi54HYZ4Gwt2ENDcDIenBf0aU99elkU9yQgceE4j\nlPGfbMFteEJKw5ZbgaWd5hqipQ2wM7ZUquJjZONUQ8byYG+bnYiCpUNzBM3J\n+xvua8QDdb66bvphKZQGcbgf2yxXhfhcy0ycQ7eC19snBII9Pkgqm36mGAye\nOcH2+Ys2sW2OToX5RkwSh0i2+/t6CNYihwM8m/9MjtCITtd6ASYiK8wJqXn7\nnApE\r\n=Z/q6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/density":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/touch-target":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.6167cd075.0_1590092469435_0.8408387263703285","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/radio","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8698aa269c6e1f8de92f89977f6fd89012027c90","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.863ac1b0f.0.tgz","fileCount":36,"integrity":"sha512-BgpkAO8qDuDpI+z4Vz3zs3U2nnRLctTeJRzUXqCPpdSS9QjPQdjwl+DkxGNiibfhKALFw2U5C14lEzwEmiThgg==","signatures":[{"sig":"MEUCIBL7iVxpx/qaq0Qbk6LtDSnOCoFdVuOM3jpNBm6Qp22jAiEAlnftWJGBYMcHWg+Iee+a7PRwftSJg97e/LR4rL8HqgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvjCRA9TVsSAnZWagAAHvMP/R7mjAqcXTfNXLh/TwMb\nzhQkjiqYO3PODa6JmAc7B7/f4kHocPzw6Pi8QQLRBGee3F//+//mcjWfCyyx\n62d74xze2U/lp6wK923t1xKAQivCPIGgHb2LqS/sKpGfVVpYvAGbEpkR5r1I\nQ8oMTsFnGBU+kCih6PsZqWcTy4D3M58NKyGqBFl9xcMR6uAznPV17Pw84RMD\nTmdBjImVAoxjxZCUVxiVCD260Pf6uCM6pcN0M3mLjmi+fxB041omwWUjjHLK\npTRbFgopVUxOBpggbnrLNr0SyokXZHXL6XZNDn+isFRKhr3yaw7bLuOUtzmY\n+1R7hdoRICA+RwcKeAboC94E8pDI4mFVa1mScU06M8/70uVLpfWxfkAwRHOh\nP7Z5ygKh3XHoqOegzxYzmM/cds4eCjeCqguV6CsGzeJGdra9Q//TSgmHy9XG\nw+9Z+qLHncnbxQOuqnokKlvICDFgONqpMbVAaKTidGPHRAbn442cV3r45VZP\nYGMHYD74ccQKh1/4nxXZ7HzbTq8auYXZa8dX7egoVYEOSmtLsgOWmQUFy2cE\nqT1b2+QRleaZjV9aKt0oPmjTVAqjvl1kwcxBbEjf4yGjEGzcUBmalJQREEl5\nEUB5Giss5G6kzSBWD9Mol3PxbkXl90Y06rQnKyFkCO1oiCOhfdGPmYwZgIEU\njz0X\r\n=fb9M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/density":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/touch-target":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.863ac1b0f.0_1590094818782_0.7787625444258857","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/radio","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e9b6eb2a776f5165cafdfc0031fbc08f8c59ddd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d30a214ac.0.tgz","fileCount":36,"integrity":"sha512-Lv0rVpW86+zR7r/D3tPWLODr+i6cTtVnfoxr1g+ND2477Yvx1rdEHlsV+C1fH9NJxYaHIxlYne84BYcxLa5Z8g==","signatures":[{"sig":"MEYCIQD80MhZFqx+dWg7N0UXKJWXGfvYcGPITRKKtdaIfoOy2gIhAIcaZ7tZX225lOgRZaXE9ow4nj9R9SfdOoSmHpb1mvPZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzHCRA9TVsSAnZWagAAhbsP/31w9Wd1rVk48HCnspUz\nMFaYoSpZPTedL4in2XvODu3rRxkEqPFYgG8Pn2xSxqjwAaku/AM3jXNbvkSu\nQy8Xfur9UDNjKAYseQhmO0VPW4hZryte6//znUMtMpAASiTO+PVA5TUKKvAX\nM36ZAx4dY2HO68PLa66zgE1+wT2pJw4rBnjhdUchWH5OQNmJfXqWV6vfjT2I\nqhASkXnMaeXVaeZH54PcilpxkQ4GNWrTCJdlBkSMQBtDdvwwt0+VI7IXszLl\ntDs3NZiT39276nPbF3IS/rs3LfMSIY6765HvWPJls5EiaQZbTvfqA0+9NJZt\nSvs5CDororbiPiKTgkRUc+eNAtIx3Y9RS7kBkVWgHMEYnsGe6kyDHywbeGmr\nHfAWfvXfFVuC2004ldv83U82oO7EmvqxHh+qFz/W4Kok+ya5DEm+WDlxMhGy\nQ+ZEj0tLxKqf2VHGZdxgNyVA4OJ4BDm6tPmF4P/flAz66KWT/iXVyIWLv7KE\nwK914BBeBIi2jr7eHs2PjWeIka1/QlAOtvuKnpdBwI0mFCT/gQffLOQG732Q\n4tK+aaRsyanSweqcWmeG4P0h9CxVevVUI1RGsJIncsp1sDXjaQyjNtPe2kKA\n2xtgahXOTZHDpvQDYNYO3cNUHtHUhfMKcSZ9EOqfoAjpejJ2O18HNjeq0mHD\nB+zx\r\n=JzF4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/density":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/touch-target":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d30a214ac.0_1590095047232_0.6019143114239001","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/radio","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"426388eab2b76e9485df695fd903a1cc1c218474","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.62abbc8d7.0.tgz","fileCount":36,"integrity":"sha512-H5l+zwjBNVkGrjhdy/1heGTssFoZ2hFSyRcJG5LghNBqGVQQqBb2a9xYqpBgG+8YzFjQnoqS6bKJbaC/XAeWFQ==","signatures":[{"sig":"MEQCIA2zvcrY+YSb+va8qIUJ8HzlDcNEOKvfcnIqpZ8fksqOAiAmYIZzmDjZH4BqlevPy3RHP/AXx8NUevKN3WHmU4/ytg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKMCRA9TVsSAnZWagAAo3oP+QAjbUO1hQ55Ekripo50\ncOab/7rHTIiIesEC+TYcFe4KrxaE7B+0cKuQlGluw+KrOUwoeorjorKhpz7X\nIAU39szlNA41wykuExkkNYScTL6E8ApGlTgte/0rSFluGUDzUi61TayoL5oG\nU6ddQNeX4cK1ijbi/LLkBM+imYiIBXVPQwlVS8mnakqmmapu8U0fnHJCeIr9\n6RAzURyev9T94du0rbCDRZma0NQsk+3DB17g8lN1wPUVqLqfZnK/lLw1APqj\nB2U+s6I/SQVAfcvjs+OY1QyEocAEp35cEyQjXY7pfAyMiqD3JLI3AHB0GdK9\n5ljSL8044lA+I4K/04+fvgBuuXCKdGu04zapEP2JVEJafVfHSi25XWOW5f03\nt8MvtMx3Y2Yr4fFpzX0LFKcHRisHDgCLcHZWXNURjh+2ai++Tyyq012N1Gxb\n6xJmWTJgTWcmRYlbsqw/wdfhHvSdVEmayBtTdLbNxpk49pTefOue3M40kAq6\nkqLossXNHQwXxpy9N9/zIzbFUkT3GX3FIjEDeVJopCMDeOzfVOt6/hAhul0V\nlYjcQfw1tZqm0ahFIPTo9rmThmHiSF3NIPdviA2F3q5G5bs3kbEhFp6n7UAV\n3bDBjY0A+qqV5hBMCsJFEN6NEjktVNypwo2ybpl79J0YVofA6UHBOG94Aylm\nga3k\r\n=dcwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/density":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/touch-target":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.62abbc8d7.0_1590096524112_0.02607005037643928","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/radio","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76b0376764507541308067771831f8681c8f02a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.49bf31d5c.0.tgz","fileCount":36,"integrity":"sha512-RE3t63VOFdQlr8Vqla4j2Z34F8+5XQVt53SQhq1OB5XzcyVNm8Kia0uYa3zoyNLaEsLRUnTogWqBCrcZSMrlLQ==","signatures":[{"sig":"MEUCIBevsuHjY2xdaHnPjfXPk2VRpl8u0+oVYs0vKkn533d2AiEAh2LYHMUUTqXsXFZT78YtsRwvA0EKjdcvPsXcpLG+QUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNZCRA9TVsSAnZWagAAcKgP/iCBb/KggTE4lji7rvPm\n66gq8g7GhO+oJo7CGTBsGCzzoPG09w4IWjlTWVRGV07TwEAnPPKxNqyP3o/y\nHJVSi1dhFoGt0KGbdc9Dg5gX/gkeryX0qJWqKgCOIaHE+bnjB/Hqm5lZpW7h\nOa9JraBQSTtwauuNXxdEPDpqdfymfHJGrFbuZMKruM2oODF84M9T3mVF8hnQ\nunAE4i8Cy5GfMBaUcYJ5/j1BS+Uba87s3Kg8zUT+tTXrwGre5O7RW7Zprxy9\nLem/xs+DGOjuBVnVboas7ZFKQMpMnX3DPj3JbNH4qBycUKPg+XYGXXVxvVsh\ngZ9/FKtSFK/xPd7GVeSFDOYq0P+XAz0/trh3NOWVqdxsGJpsBCSu0NEI+U7l\ntatN3DI4Gho+N96QCyKKFKswd5JRrV9fVPsFQJbwc58KyyR4yAQ8FurVMYKd\n2lR3JZiL9kHpTDanYGx6NpRMSDZS0qzP5DO2eSXPJ5RzPkdBB8SZmnfTDfoJ\nSZIHr/O+3NW4c4ycVD1hhvj/u32jHdZTksMwuk6piT1WBQ5zSMTFluYrquPK\nQHVYssZhKeGkPapM9bXafSqhi9DfHqAj+xlN3VHVBt8OXtMUxCW+GMdMNjjq\ntK1SeloKLPDaGwxtsIMYan2HcbnB5O1iFeCvskufLGBPdv/1Hd7MkCsIzZpf\nC+PC\r\n=MsFI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/density":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/touch-target":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.49bf31d5c.0_1590096728139_0.818326951772059","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/radio","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fdf9a0b82793e458e534f96764a278cb1c37162","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8e17857d0.0.tgz","fileCount":36,"integrity":"sha512-hYg5Rbj3LE3u67QMppU70tsObjeFwkEEYZ18VfudUpdRhZd4v3363RE3s3AsZ+VUeXkwkVXGYwUVkQo/t0QJ6g==","signatures":[{"sig":"MEYCIQDc9Svtu/CvnJdLe9b2krEDwUJTd3ursyWbWX1H8JydEgIhAJDh3qR1duvU5V0zwrS0SLUIa+zb+3Nctp0+cIN/WFaW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOQCRA9TVsSAnZWagAAmq8P/RSXaNEbfChY/6nzro0e\nFrYoQIyL/bPsg5Y8EvRG9SwAP/2Sp2QJgPkZfNTRKWKvM5LNbj+Nx2IOdsI5\nXw1XKdV1Mzntx1L2FHo5spazTQs2uEmV1Fdu3dB7r7hl8OJT9eWppGG3WSqg\n3C5iYhqnOsh/L0pDQr18Z101O8tQLwBwc3pvUvb37pevWnEHGWLV3wVOL+pU\ns+WeSjcg6Ehhcf9w2ofuNBMx30o9NPMXR1glYY1BsChjajsTGFgz0YQFt6Cn\niL4e82hIspwrVqqgOoBsKNsuPgM0UMvcpBUaONIlkeQT44whPdxznzHpOi6e\nHDMzrWelbNLzyqDJx+4m6G57IG/vYMfuLOmcPk5mYJczFUfPlKNHolRF2zsX\ntDcrhZiKIxYWRwtXItjnCwKs00jzEHHR/aYjy65smpAfjWBD3HwEUkQpd9/N\nnCpp/Y1LlhlQKgeH4HSOdOo6pvyO53oQ1IGAI7CupbasRuIv1aE00d0QMx9S\n783NKh1KYJnP47IPKgqvYRL4LrWo7nHDb9dGnJHrPq80Vm0s9+rNNLKgldoR\n+uCYlpZff0ccFOp9qprpQ39CJ9gT79/15QwunWKjs+9XV1e69kTnr+pshUVV\n0ikmyqbvG94q026X+1X8Iu4/G66cpo5OBqB2exMku2eho5klEl60uSSCCCjq\n6W9G\r\n=6/um\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/density":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/touch-target":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8e17857d0.0_1590096783656_0.2986781905962539","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/radio","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c58a16b8a1016451e5c88d9332c05dcb714330e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.c113fc942.0.tgz","fileCount":36,"integrity":"sha512-biELspugWawoa5UlfwARFi94bWI6pRVetHbdBq20CB6MS5Q0RFx2yf2YnC7R79d3eeVHgp85jcGxN8qaVovz9w==","signatures":[{"sig":"MEYCIQD7veIAzzf+jcnVSx6p4RWocbWNHWSPOiMMiYiAY/CVRQIhAOnIeCU3sl7nJw18z6lXRKTtfN+ZlWzGv01JHgmfezK6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTGCRA9TVsSAnZWagAAMmMP/jrHe0g0PbVdnFffXAfx\nnhS3PZfZTYjyBlwXgfRuVsDAMZrfpc1QSQU1LqLX+CNvellFrk2sLa76P8e3\n4L+Ek0DZ5G6vsqxeOGlmZlwM7XkTHFpJrcYN+VdZtaTHH2xrOwi0akC1u90T\nueIQjUE8OG8LWa78su123wp3M9UcWwYdSLStWUQf1cA0ydxCNMSEAWbhynoW\n6RDRVrmmhfH2R2SDo267cFUXbrUPIsRBsZYlIAbTm76EA+amP2ZBmvqGgbWd\n8JEvqqUlVoRxXeo+fNr/bc8BnmgVBqzWD4POL2YGCr2Tk4NFlvP823JX5OZE\nZx8XTHeZ6dGxMCPIqxYGzDS++6AGepWU/28gt7vdIm8DNIvDeukA517EFF1n\nxr2J0WnGepQ+1DMJwxdSdT124SbXMdD+npxuVbUhNyAuK6IIkaxAbl+dlhJF\neOb/TrqjzxPb+ECHpr0MEcHDNS5UQ7D9IXNz4jcBarAK7uobvvULMJd7Xa/X\nQMLadeCrdwmVhVkYmCfSV9jJeOMjLCKmqJDpt7EWzpdXrJAmK1PqVEeH45/L\n2QwHs5nZySWRUcpGwaxxz5fg4iXYlOf7eFA+TbUOcsRPjOwAo2Xaux9bkpSP\nQvuQUUMrfymzf9BUk5c97BRbpBI1u1pttbciF+PkaZnnZSTll86H8h0m5M9W\n6coF\r\n=MJnV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/density":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/touch-target":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.c113fc942.0_1590101189742_0.7916453974569526","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/radio","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"488a2c3276e1acefddff48efb5cee48508c60b30","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.912d9021d.0.tgz","fileCount":36,"integrity":"sha512-IJ0vUDPBtquMkw4qqKe3+kb1FMeK/lxkoXTTrTkjMc8694ArSPKkfHB/H/wcRWMSQ3VYezH/KLhgnBGe+yy8Sw==","signatures":[{"sig":"MEUCIQDC0j0JIr3vtlxnErUz9wN4HrMnQu3DKRzkM+GlcM5P+QIgWnDKtuWRw4eFb91lj/K0DVZT7fOkUGNeutbLcWVIEUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPJCRA9TVsSAnZWagAA+KkP/1xEsVv9s+VLQyxNQW4f\njlgUXbkToIeOIkauCJIVqpGMOw4k3PT5TLqALwzeOdlyTTq34tTijjyqM/hI\nIerMx3gF0NbDS40p1Occl8OqQkSJRtTPKNx6SpCvY0LXm0SM3m8i7v8yjgJU\nCXaLWKkjzg6lYs2B5d0cTihGekTsav+g2MDdTsBV6Gbu8qTQJyychANqVwNU\ncgtEZTGQQB9iPOQQpwxXDdYuAwy+1+T7zaGab6Tn5Wpyh8a66P1BpRCi9VeO\nQ5+TR4jwpj6ibV+Te7iLUiYZwdVwXk95V9S+ix+QObyDR4qH9rIpZTTWvln0\nH1X+7Kog3Lp7oe05k1a02a61mRtbSquDhLaeRdHlfWkkeBR+mHvNn0zDueh8\nKC23ccBbQW9Rc1ZC3lQSVid57nK+TAmJizIl8ps/Hwpb4LnrD1jaUUN6Z1qF\n8TkF4KNXw1Y7d8uDQ0Es7u9+bPPjRrDtKW6c9u1UPHEIIUuBVzSTJHst/K01\n2amtPJ7PDsLEJcJw0IW40ymF4VhD4nl9IJay9gtEecklsa0r+mIk7Tb69PIh\nCgwOjfSoSGYxxgVbuYQ6gVFanyQa5MRDY3jFx5l4kRrk8K+yk9mE/3VTm8KW\nEhZkbKFLGGePOuwKvJ//FzdQksq/HeMhQHi7vBWvWEizzuZVSTqY4pyBxHHN\nhp9M\r\n=CyR2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/density":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/touch-target":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.912d9021d.0_1590518729392_0.09532699628478314","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/radio","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5605a9c8515c7dd53dd675fa629bf3d7f3e5a646","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.68a2af131.0.tgz","fileCount":36,"integrity":"sha512-egLhL61MDM7ynz+3H8Szxx/C1R6h9clIC3g3BDbIEhalylIdSlJHvJDNCHurmr82dmByxH0WX3IwJ5vpLxC99g==","signatures":[{"sig":"MEYCIQCCuMmpNfLklVSzxd5SuxIge/8ZnRnYIlzaG8nRynYzsgIhAO1M01Xv6ahjFiwFCmreeg4H5bXEDll214VM2aAVwpjt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWj9CRA9TVsSAnZWagAAjooP/3VLpX37xOWlwkcyTzqw\nHQrdRhvXToU32Wymich7kaN+xcZ+xsU5M1Mevjn8VUHCOqa33N3t33/2UptG\npUqdupKUgoH9UQJ6Mdv2wfte0CJjCjQTW9wynq8cFPG0ZyLoV2jj7fkP4BAQ\n56BUjfSsD5XtlAszrkGc2lSR3fTEgLk4htWC7H9XBKsR067RuMXlrXa46kwG\noogFF6sX8kkM3FN1yXimOX7g+DagtadvRnFJ5AFlekLkfTyFrNjXzeKM3iCS\niWj2fPqx/vkN6YCPR3PTzhi3NIuTmpXMGpk26IaMaz/HhvAZX4YwbIjbiFTs\nOIagCZ/XG4iQfPcoP7x9GEceoIed55xlDGBmOMhLLAzw3R1eSBiAFFAX4xco\nQH9A7BgYud87uwZf8ClFK+9Ee/VOWSuCziHPwpih0MMlMCyMPDFTpvuTt0Vl\nFhRLrSmeqQaXe1D8vYclKWX2ZrB5GG4llQBxqXjswmZgfLCZsO+lHeIV9U2a\nLh3alDAgTfhoP2Fc3eEh/mvXdelIMAXeRplacFxXXVB2SRTkZcVvO4j/ivIY\nVT8Sb80ur4dDxnz45iotBfISKBURDQsR5fVE7C9xrxcESKmW3MwDVr4eMTxs\nkJO7wZ34P38xrGlZjI6M+MKLCHEUfXa2Cs5W8ozjOBCN+u2izqAxUEQERQ1K\nOoyt\r\n=vKJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/density":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/touch-target":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.68a2af131.0_1590520060733_0.38564186387255206","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/radio","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29149779a24bbce9d16daa911a79c6e9e289e64","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.01de07011.0.tgz","fileCount":36,"integrity":"sha512-aZlrx7JwyhSh9Ezp+voIkhoUn9qpLu9/EBgzHD2+QM6qeNiPW+TVeTJbRvgKNcHC9xlkbvZFsdKOwmt9lTyCsg==","signatures":[{"sig":"MEUCIQDbUAimY+OmEcAz5UV+gNow1uavkqyOUEKs5ciPJZ7ZZAIgYvyKej/0SSGEqk/wkAxLOMVY4t82kpzE8ucuvU3085c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOLCRA9TVsSAnZWagAA394P/AhZdus2JsFbGkC0V2Jt\nZwJ1UbloonD2Q9AOirhsPv92ZdFZXaWeL04etkz8jexs/4mXKl2c4opvl62L\n9ftA8khMGUlw0wveQ5GAy4+h4jBMjUm/Z5vJmVmyClcYGA25tbF5V4QcJD3D\nVCQ5Hlk+plwOdNekywBDYT8dWzQCvU5HtAOmuudAu7YWaHv3t4Vsa1GPAqBE\noQCNyvf9T3BVg3U+2oLgPavdjxfipFm7D6R+pJPpICeM8Rs5GNApEnGsFM9m\n4eMKwR75gWsqCFbR+4Bxr6O7NI8cjhqf7fyTrUMWYyvUDg+8tFs38Ixr/5rT\nSixLcuigBz9RC063vz07dFyrguRSKivBBlgai69pCHzh7xwDk0lW3TXfynVt\nXqpvt8nWSeKUW8yGM88mxj0UjOtgNaelBbQJxdmpys48MeRsHWAlVppBPYT6\n0zfV6d9ciEUpYKw6BTEsk1qEndxz8jdbr98lzCQKvfacbLePUEYz/cIYqk9f\nQSVi8wWqXIW97/Pt4QX9DGqqFuY2FNSrefDW+HmdvRUhfuqfhhGEVAynHvZC\n/He94371Kt6Hx2hll4e5mWRHuOt5CxgDDDH/P4np3irKU/JkoilKNCCKsY2e\nt5v7IFL7i1hXJ5ohSdNcDl6MB7VVQ2gVDvENXROHfNEKbfANtx49z/o6kkPs\nyMod\r\n=5eA7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/density":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/touch-target":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.01de07011.0_1590522762535_0.602822679935425","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/radio","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"844f92f51be3645904770c9e24a7dc5317871e36","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.51d4535fe.0.tgz","fileCount":36,"integrity":"sha512-HmLel9iBWSe2LKwpe4LHpXRL3XnI3cTelCPcNOkXzYnsWINd6LzaOw/3I7OQxz4FE9B8fp5jDaXctroDxQbUAA==","signatures":[{"sig":"MEQCIDu21CkLTd0Jh20j0O+Qm7ZDbIRlBxgMhA62IER+YpyVAiANlXZGyizYyLbQPl/a4DaFDzjPKb+utgXyTZSQ/T2ktg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuRCRA9TVsSAnZWagAAQzwQAIsjoTMLat7NsyNbIXs6\n9RafAP/XOLl8+PmSigcbg2Ggzmrankq7HmGKrbqNIbUMNAPPpi1wUcCcsMV0\nGM0mWotab8G2ZXDa43vPWNI08nbBGu2+eAr3lDkF8vGIc44LlIRtnj9EJJcZ\nPnOnFD03mwN2S5AwU6v7/VHdJLALRkKk0ZaLrTSpJ0Catz58+n/l/Rc7NMTb\nCTOSJqPRzKZtBImVY1j6R3QYq+idg4ktE0LYBfvnlxDrnMfVSw5v/GJSmBqa\nZzv7Ch962zKxYzRK6fTucPTr+HX0HLcpumHEYJ5AXFy9KVqzYu40vs5d7XLz\nQQP4zbAKRDki2qgabA+vdFCMrfj+oDWDy0zzzjbxgh65RzBLftFcIfIxcJRc\nBoQFBGV5vo1xTT8IUTWp7IwRLHZ3rxU8qan+tTmrYZeM5eUbwM/VOE39S5wZ\npIWoMlQsT2+iwfn2tfXfVReiXJsBFoyMJXe1pkT0BoVf/S8jqMpvcOA+dSnr\naOIhB30YGXtGZBZz+c/1zDgU1yb5iDPxYer/9k1aStPjry+9/MYLMKPrA6CL\np2gIaNLsnidoWNRxHkrb5+ZDgKC2ZDXUJ6Pi4tlwzOz9HTH19/R4ZM5PGBiy\n/UdbivX4UagpJbNyHU+rz13iDYDt6Xk4RkkzRpStlRgfILBtK6xdguJXUoXF\n6psr\r\n=C4WG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/density":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/touch-target":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.51d4535fe.0_1590528912766_0.7150144184151994","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/radio","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d037e31a866fedd9b1dbdd9974c78e03812fedb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b86d826b7.0.tgz","fileCount":36,"integrity":"sha512-6k+p0mXLrVzzK4AlJgAABA9WgQQrESjOq1qfcrACwVDmj4NJs/zPpGmBrHft5tLUX8Evt5IGn7WZ2hhimU2jpQ==","signatures":[{"sig":"MEUCIF+SPD3Zpt032iwItEH9eGvZNaWbFarOgFE7T+xkPePtAiEAzJr3WBygCbTJBHtJtumjEASv07lU3WXJV2PbWLMbPdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZScCRA9TVsSAnZWagAAFuIP/0XirAuYf5pXiomgP1c/\nJAaMtyv59qd0OfC/I16HilAFEvOTnOOSI03VSKe2vQmZln+lOgDtw0TndhQo\nQ0j4J5mI0DMOCcivxzJQpqXowrbfb2gzvWcLxaNKIT6BdboiF+IbwqIXzYHa\n+vQ6XbmdQs9M/S4ZgBgxGW0OKC+xIvRCgCr9qCD4zUs+k1cgqLV70BYPY5Da\n8jSPdPwhs+D20bH2zZwLBa6C75Nqzp4yeGTyjDx8/Pa685bIh2zpNpK8mixd\nuQM70vFmTu1n+LmTjH2LzKrxqmbPSQHzOYbydJI/NsXvaUNCdBRsU+IdszEo\nRFChGzvHpM+tkQnVNiuoJ7nOPxjtzgv6flK49JnzyR2M/s+tWt9P7xxjUlY/\nCSyogqkUgx0iHd/5VNrjXAb+Y70kIWPmaMiucxru2AawVhW83RUhv/m2KV3Q\nUfPTgYFs3wwergOQjk6m13vfQdO/BtTpUxp8kZBpxJHxxz0Ww5kcY1rWvFI3\ncVNApvjaqtPm7N6HoBRjnmMZi9aC3Rwd5WLuGefqJVIaz4L4DYcm9NvpJQQt\nKs9yN9/oXILVHLAbgI+LQvnezS/w7uBEH5HoS7tNFzIAWMQC8bUKNZfT37S7\nYOu16UVnU3c/h8T9Th+Y+wPPcc0+SzI2uZkZRJwgWpCmg3VttcsavI/46rpT\nQewm\r\n=4zND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/density":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/touch-target":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b86d826b7.0_1590531228478_0.6033086490759383","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/radio","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d4e014c404388d4eefd110fde4cb59fb324d02","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d91794c7e.0.tgz","fileCount":36,"integrity":"sha512-1+4jF3npfoWMiHyKmNxgT0B8XDlnj220EYsahTS3jC50WtmGOXQ7jOMtQG1UAk62OuUhOqxBT53TkWrW8Gaw6g==","signatures":[{"sig":"MEUCIGN/bmP5N8mkjKl6wCWtQYb3uctCenrZIuWl8DjDtsFhAiEA+HrD+SZPcRikMQBrAaFR4nA48wivG5KR5IrBFObQiMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxVCRA9TVsSAnZWagAAPGgP/ivdRcv0k7ESqOVEqCew\nsUNIHOQ4mwMddRVUDAqxkICYLkpjKj08vCqTUS7amH8qZEMrHTcwW64Gq5gA\nwbP3kiA5Rsp1azS8PQhIyi+s7BrxlbmsOiH4I0sDL2tZY/D8Fuis7E4OKMQS\nWpJrw0aY3I7G82L6K4B+VngmZY/UiHHJvgVLHMC5e4o46xlIr8KRfT02WGCK\ngZxtwT6FncWjB2jiotAQ118YImwIx7BujOyCDCyLVsqcsMxz1libthBadSkp\npUBDGXDboguso52xfkEOLfsN6cGpO3XQVMZFDzfZ1wdNZRXX7+CaAgIK6p4M\n0tOAF8j5V7mkQXB+mSWT/7PfyVX8d8a7dPEqdeUIJsOgnIZQycyWEPomHJWi\nmcLjObxLaiJXD5BBJqCqadMHJD44I1JlVOEyqi5Bo1YlxlQ8GvR93eRoq4pc\nRt3XIWWI5qmjqcgbU1Tr3iJtu1cV4jFE4W4PuvdGst0CyT9q0f/DzT/5rOD1\nF46IfKjqcQ+VNDjUiIe3POulWtEX5NSXVmlteQZf/b76xitZXRVF0Qjhpzra\nepxTBTaq0skbmMJomSbwNmhf15NW0dNYMIU8RRINB/KZkrGcHwBquk8pTYzp\n+XtljDRvamHOEW4Aqu7Cn4ye+5jQChewUJzWPBABIeuJOdToO5N4EYPPJv97\nSz3+\r\n=sY6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/density":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/touch-target":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d91794c7e.0_1590537301442_0.09635414669873033","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/radio","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"660dde3ceccba49ddb09fc8910eed2b760ebdb61","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8c6d7e076.0.tgz","fileCount":36,"integrity":"sha512-V6LJ2qKGJVDWd5SOhtStUuY9bX0r7Cw1Y8XNoh1emZcKdOopbLKceLSOvq/ORlKdIJKQis6RuJVVqwC+KIaNfQ==","signatures":[{"sig":"MEYCIQCrcu8EO9JrUpe0lp9CK/4Ja0Yu1pzl2JQq2SeJCnpeBwIhANt9ZipxTmOiTSaXzmQWl7FW/2dMKPQlGc4+1Xgm9fzk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriOCRA9TVsSAnZWagAAPDYP/3BViK6U8aai+kDvgBfh\nSRBMO6Zmhya052HeWfOf0lesPB1kWT6Kl1/NcU7Y4QB4Z1Qv8Hf4q9EtqHPQ\nAPc1y9TYAq2a8wZX5Xd6gmZfNTB2GlhJls8IIigo/bw1bJGfLCOeJGdTgSV5\nWO94l6PK4W7Fyq/DXYDsLGfsqAGxcnquo/5vJn24D3QSanDFMk3cSGVbQ3kb\nbQ3JUwHymL2G5g/HjHDB+fM3DvRZT/YMUqYZJVyi/xvZIgA9weEKkwkN+aN8\nhE7tFc5wE3NSO913VtL1KiafVOqXVdYdrs7yXM3UZDYJuxUvvu4/zxm/chny\nVU75/k9sBt5/Y/PgfBVlo1SBlS8+dfQfSV9YWePkCHtMG2z3xQtf/bpb1+pp\n1g6q1pl8v5PkkFAHyyZVEAC9IUS6ZTL1jcJAydeq1rKadBnvnSxR0LT5zYJ/\n9/qTdeycx2TtmY9OxXDRhNcMdfxsVHSQf365p3SUdflzx8m/xxJZcliGdpua\njczNFe3x6NKX0x8GP6VRne+JAdF6AGB6TVO/dYg97mroOEraRUoGpW0r2ffc\njZi4mSARax/c3eRtPnGYizlzH7S3caSACI5NRvTRX5phVtVdK2seCmM1h2Hz\nHC3YSetE67GY+7pICE0ysF678u8N7f4ERPBQrCxS85lvBxpoAhQ1kVcyW1vW\nkABt\r\n=cy42\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/density":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/touch-target":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8c6d7e076.0_1590605965802_0.23397862159403338","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/radio","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86a71d6156a4831163d2dc8c6fbec0023db375c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.5b5f62f93.0.tgz","fileCount":36,"integrity":"sha512-xQIRp3iLmoztyV1ZzTeyF4ZSFwOQoO9c3Jc+gZ2U3I1dO/5Rz8IBaFsqaowKPpFPup8gceOWXE6Ha9XSd4S4MQ==","signatures":[{"sig":"MEYCIQCoBZqRCosHBR6C4kpfqTLLHRnNqij1mqSaL/6zPxtrXwIhALXSHXfswjAnefJp/XyS0M0yasf8CI64wxJ6sml/o7UG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezryuCRA9TVsSAnZWagAARmgP/iAvXCFjsqOw325LJ2rC\nTV6oFIWXCOeUEfSICfKz+Xfq9z/USJhzA0eJZQyR014IkQeni3pjFgac11sl\nYvpAE7/esMbl4pV3rfPUmxpLSOF/r8wtys9nbXXP9wFyuV6BSvMeMdffgSND\nQ/Mno1Wh+SiJiwEFeTjZ3/Kqn2Yx5iGKyq3iB3Yy9vRCdoXZu4ln74oJj6b9\n4oj09wSnE1F3FWUXt4F5ghVzveq6pPawuQrggMvREHasaGjNwVmhCdUTaEhV\nnnOFnZQSwNVoID43B//P6opStCXlJ9YmtM3iwhwF/Ty9wqG5+glIMkNaHJpu\nFD0A3c1sJ/ql8GNLG8p3LN3BITTiDZMKhuSkkyUAiMxnwCaYsJeDzPP1AOwN\nZTJhx7qOMlyLVuyZ4GfSac8ljycaahj0zOPfk0rnNiSa/Bx//oy4QObXcH+q\n0apNPmBypVnjqSN+EE1tDvk4gt/WHVYOQomUgbEAyBRE+ZhhpV/PcR3yKhFl\nePYOpIKRnZ1tD+HH1mmX/suC5yfGL5i0QZ1Rx/lbwlM4t1mGvAniVATsZJBP\ncat6EPhBTkMkifG6jpmBJ1dsQEIPXlPBNbhOEpIH4MkKWWzrttipW8tfsHfY\nPjHFQlKI+94zu54rYx727RISgmU0UqoLTANQ9MYArT7hoM7lpfFXVgwh/Mwv\ngs3/\r\n=WIm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/density":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/touch-target":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.5b5f62f93.0_1590607021374_0.43978940372832565","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/radio","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b418a5211dc7955b3bb67387cac4abefe0921bcb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d9972abb1.0.tgz","fileCount":36,"integrity":"sha512-VprfsKkYXyg8Hg4+wnGisN9jaUmLcqgGDmpRpgyUwDjiHl3zK95CLRfBTBbfCt+9pRDgmE+wsetJbeX8laRKXw==","signatures":[{"sig":"MEYCIQCi8JxfqlmqSHWs60FE6GALbnqIy1YJdTJRz3ZP5p1RKgIhAIus3n6VMC/XJ7gSPq4XqFFr1SgXHUMWRzlhiFUcu2Nm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsunCRA9TVsSAnZWagAAauQP/1J+MKtU/TKHXa1Tb21+\nk0ndypUkno//WKRUN9LkayNX8rPYL26pFSmsYDhm+O1ZxTxX8v7LZr+zcVQb\nmPOxFDKhCjXVdnEV+X4ur+fjavumMlcuou4RinDDxg69Qq4eXKrVdTCbdtyi\nKDSUGn5clKs/ITEok9XNdx9Gii+zcsN1hitQIpl45zAElFMaH9JhZretnSkr\ndOculgwRK5Cn1uf5t27EMwFNAcoN/WkilMtujOGmjQ69Kxr3Zo5uRb7K8pPt\nTI0IK3qeoCj+BwLkFnmsss3U/Pcw7ckTQLAUOyhNVbg7k1lq9ohVrY4DO2LB\nQD7+Bl5+eFskqZhst6soy+I5nRBUy1WFgLrql7+50CCcAyIuDLG0gby8Z7At\nVrpn8s4IaLyjn1m5bQH4O5CbIDTOYjTqzrOMF2eT/LsU9so/c2AzRrBoDicU\nMpO7m6hoHJQszyGX09UTxdGEz0xaqC6Jl0C9IQZbEOVErk+g4FETzYFQ/rxi\nltxc2WRoF8lwHOqu6Tz2OA0BsVnIRL4nyqa/9gt3omWMhqI3qYWu/UgNY/cj\nCJfPvNlge0yCZXB/KNd7JZYHWawl/uQoWOzV9NKkDrUjKKQzwaVusyp+5cLz\nOaWjv6803In4S81OzU/lyayb7TB9X6RaMPgdvL3zTRdRNPJokwISj17+1zzB\nZNE7\r\n=nHAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/density":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/touch-target":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d9972abb1.0_1590610855435_0.9366063149165611","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/radio","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5333fb70a2b3de1463eb26a570c9c3643bd4cde","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.6556eda2b.0.tgz","fileCount":36,"integrity":"sha512-zSyTmbycodkN2GLoJ/XXOxZlb0WMXvCeZWycPi4pQn75vyAOqEpeRWvk5E1d63nFbbNKEXpU0lAazjb41JUjtA==","signatures":[{"sig":"MEUCIDYFx1HBQhKuW8+lMS7ciPOQHQsskEYDCgyQS5cRLtW6AiEAp1NQ8+Fd3bySPZRuULP+4T6a/wCDq27avtuOdp8smwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3OCRA9TVsSAnZWagAAQCYP/ixo4ngHfAriIdZJ5rjL\n28QLtLMXQlqN2tfwg0D5JLbn+OwCSXZ3RHo5RvNWqWRuS8ePoTowmC6XX4aF\nvBVt32IlY8H9iujiOab4BYfe5GT8xc11QY/n6pvojOfmV0MxIAZXpBaQwFct\nk15g9VMTtiuFaLSFfeZXfLyPsaCQwWhG6gBwMQqJnH9fdM6VgsMdcFOPTmNv\nANiiX6IbnQxUDxgyBg8w0URGgsheOWY7Tgx//xhVJT8k8ojpq8M0q9wWxmMQ\n7VIMqW5eOtfCgFu5yUn7tTV6uUcMcRV0eskQ7AVxy+6Fpn8t0t+6EviM7Kk/\n4Penj74fkhaInlJ3f221BHN7byHvHnRWJc5ZE/yvZ32FKIiFb/RJpTjTEnVN\nD70vyQz8irwcKJy84OWfqf6JpNgtsGRHur1Jz0x/DztgE0WVPnuTKn6Y+IM1\n1cim8tjxtcjxGZJBMHDlu1iB2tdpqrZNkSz7V40QOYktbJQ2a/sVnrOhlKzG\ndTdqIlFGflvzGje46AepVhngtQSFQ24Eajajh1oJHWN9camoKnB12kuMZZHp\nS7XMjv3AmhHYyaZbhRW1d2Xl6xVvyygXi0q2PMo89wzoFIj9e3srAsIkbIN2\ntgFjewVfh+07hHXSyBVMEjOQgkZ0xsNjUGjfKnaJM9sQAtWrVoE4aIgN0nW4\non/d\r\n=DCkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/density":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/touch-target":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.6556eda2b.0_1590611406126_0.9371987081954909","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/radio","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b17b15e877e067601d021474f730232d4ea6cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.32aa23641.0.tgz","fileCount":36,"integrity":"sha512-WniSq2GHZTNXuV15V+erQ9REe0tp0ESgoKzsmu7xRumLv0/FBEWidoMo7Uw6Mg68SZTavUHo8RNsnhnT4hK/2w==","signatures":[{"sig":"MEUCIQCYDoLzqXj6OmHNqur4PeYkTwvuJfcEtsMuZEanp6qjSgIgE73rJFdF66GLhY5yt+8NO1Fap4sXia6fx5Yv0fQcezU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3NCRA9TVsSAnZWagAAqcwP/23TPZ1/hFuLU12lu6pJ\nUM3Jsc3SD+JyrNkBIcc3vWGDlVbCANxj4CHlcwtNNYir5NjcNFQAZdNZ4NGv\nXa2sIG6jLVqJNBqo9o/fQohOEde+nGIJkPi1+/sscUcXsjt+vM1C4iHS2z40\nCIv3Spy+KVO16ZDwZRooGraWx+aVecPYO5MKQRrbrAqB0iLIjrqW3BBcqgYP\n902t9PjPPv4hIuYQ5eli9rzttylJ7KNY9Mr0jT6XJmojsEkYn7z24z7//Lcd\nV5P5AXDI7cfVxZWk0jLumiHPOhjK9kxKlE6yvfy3r9mzwiYMYSXkBF+4/guO\nbwRzXcG3uLW5nSe0koMSaZOSgq7uJmweFXF7mxiD5fHRUbGUjDapEfe16WYf\n3o4iDuBpO1C/6R6dkdawODyGhBLkoQqLuqmy7z62T62eJDySPkwJ+rhhO7zF\n3KWTSlXLO7SeICDoZkmSBW9SWuGz2D4jTig5cb8hhCPWGYsjvHi89JdNx0Z/\nzm4a4E7zVulJnraaR/2WT4MAGAPxvcfIiXCQT0+aounP0RSjqvtGJOOErXLH\n6h/1qAD2GirBgtnBIODhRHhyo3m+jMoNwMdYDvtVv8AyF2JYWP6WwmJUVRFV\neqtiYtgmBOMmB/UsOv01saP2SocvGrZLdktrDGPS0wKOuJQA+a3PYZRdk8k6\ngapp\r\n=zNth\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/density":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/touch-target":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.32aa23641.0_1590615501386_0.5447356999585167","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/radio","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970ef9011f85f5aeafaa915392757ccb2e914eeb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.654934dfa.0.tgz","fileCount":36,"integrity":"sha512-H1inyeYkRFFMc4MK4jWQUUkSaODGVEAtvuvhLW+U5bM6xMoZD6BHN25599Oy9KjVOAuTTNLXHahWP4ukDMux/w==","signatures":[{"sig":"MEUCIQCoCi727KXr5ZLWdceCZ/Z818sEBOxJhzEiueyPHZvaFwIgXCWXQCMoptcJD8Oj7BAa+0RXlOBIVqtWYc7q0Tp9eAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwerCRA9TVsSAnZWagAAMcUP/iMylcZcQi+uUtggAZdo\nXQ8J/LA7H9fdL3R/G8QdJEFmxeaWWtK5vkfi8HZ3fEK2SN8H2jUhHFs+rcW+\nPeN7AI/TTJiInDoF5WbsIglsvNLBEmh/J05bGzOlPVCsKkdpVK+xNn8reY7U\n+Z9XMBMrl2pl5djAFQjBjQ06d+AF53749JjBO9PCC4+Lzygyjp2jPopgYMQ9\ni1V66XKkqN4TOtb4OfBukHDuTw3Dapw3A9AyMfgR8Jt45cXtDUzqqSPtZten\nGjhj75mrTaaYRA+e5aEns3Q5sgXcQVqgJ+uADgigt0WcsEZeYyEmC0J4DV3Q\nPj/4lJ5QWWgmm1Se+wvNvwL/m5JTNH+LWezN1shMShOkP40ffPluoOwvGxm4\noh1UGjdf5eYGdwYv1eSO+fbe+6MqpG8tfd4jD+YejSdB4PZL5Zcpc0bVTvIM\nNeEuXV8HjYQ8EgdGaO9zHm9q+43Iay/2oIZYwrC8+zh0cCJzERpZ6ohqND1Q\nkGU6uzHMcKze5XutSsx81OIN2IGnU4+A94TqC5nXbPhiBys/uDcachIADFc+\nK8/d76y+33dlT49p+W47Q9ivSXhO/a5YIyjGoi5EIrxzJBk7XhyQSkg89kK1\nvL9b3uhdidelnxRQwNbNU24hW68W+Djh5lshUoYNYXM77Pc07XnKJkx5UC1+\nht9N\r\n=EI8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/density":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/touch-target":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.654934dfa.0_1590626219390_0.7784292362663816","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/radio","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eede9f97d00857739b333be36906d522e6000376","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.41910b8b8.0.tgz","fileCount":36,"integrity":"sha512-/5+EBj1uJ9vhgJl4pitDd7w6kP5/O559E39ukr6UgahUSxFzKBGla4s5tQ5ctLUQLeKNGxG1DIy5MDWQ9wUvHA==","signatures":[{"sig":"MEQCIE+hyVh6/EGEch+SSxc28GfZcv5Vr47LS4JTBTsUj+++AiBPJ8ZXMwqR/nd2Gm0IMBvBsZ4IghAM8PVa4QpDBezENg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsNCRA9TVsSAnZWagAAUPsP/iQBEEqiehNsRcTPj8Gx\nj8ApQLX6g6MmVJRzbX1GFilJ2ayBIfoUVGUQa7ZeauTNvX5MPaUbzyOxdXK8\niywtspbuud1HGzoY5Q8/VFmCcTG6p6asq9mF1q7wonYWoYKLN3apWXJYptmS\nL1T5wptcu5u4H2M2nXyrM3wDgxE8wQpumUuQNpyJqBrieMqc57JkZKC1fW4A\nb82XmGaz6gPuZfmuv3QCXg3gYKVt+foXglWhmOIHaZdRgPz2uHNZ5+mApFcT\nLOhpQliUXG9ozYs9uFQcmGhUuQ84OmWm2XsmrPzCe/6ytTDlv7NIab5pDsk/\noeAM21JW0v4Ly3JJM19BqeRKaarIV4hvCzlYN7c6edEi+IHpqrnyRgnTlg/v\nKD6LRThcTVlU+DQlRXU79aMykTrpXzM2sS35BaCxbC7bN6UlNzFBxBXWVZOr\nY/nV937xekH+bgyrFeWFI/9Ek3SuyKHjKCSpk07/EcFYLDQN7NywMEmJFHy1\nI61/E/bFFVuxH0HrIDY2Ku3/AJ3/daPYyI6XiBinKOsyrEiUHNwL//QWEoVk\n+bvYIgmMEfBlawZHF8xmAqxnsvYkjUFHH2CPuQUiuqTRVj0fvPztR60BAEkZ\neGWVwixv8iIgSn511MArGl1Llzpc9CZdgau6f/Jv1tqd+Lh+a/9T+FVFuCMx\nSMyI\r\n=AInV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/density":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/touch-target":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.41910b8b8.0_1590627085172_0.6417268605760207","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/radio","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b618f610588c1540ecfc7c23e1db6c0f6a406384","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d66d22bf9.0.tgz","fileCount":36,"integrity":"sha512-znRCS8AN8Aw81gl6BPqWA9Bd5qD5UbAuQWqYkhzOh7iITn4MjnsRcYUplnDk173Taxkm+XpV+woxmgTW3XoW6A==","signatures":[{"sig":"MEYCIQD1j1d8se5e/C9iRd+eROugPbnBp09DjWtR08o15sNK6wIhANN2MwLMPaiguejJ7ntA7zbYKRGLgvJdTfMm75HsI8Al","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcxCRA9TVsSAnZWagAAgTAQAJkhGReZMAzGi2+1XajU\nb8gvygukujTLb0pJbij0jfj4VpU7KluXCRARNmAljWRTBT0f7Qo6iPgaAyx/\nwWoxObhRocH5owWMr4ZxnDArKaZtEGpx2ZMW/BcVXO8Vm6GRiSbNjl7CheR9\nSg9W/R3RqD3TtFe3fnzDg6kRNKhFrwOlTVFLhBzioE2lboWLCQpHPSqYFJfk\ng0HqzWrw4Qs6LYkL9h3rj21AeQd8kdDAqInxlbAjOoCKIIpyUaKpVwnKkiqn\nFCYO/2FrSnZhsk35+a/l9TJ1oQwPmF1FHECoFHAFqNiq0BkLr81JTbZCFoXK\nTozI0B3Q92cjzLFQGPqgFNXkol03SqboegRUlLc1uN/LsNpCi6J+M6jmce5V\nNCqus/6HgXlu3PSVAcbS8lpadDXW6q0pLQQhLurWKB9sDS3hRTM/Mw9b2mfa\nIlJV4y8OrDXlKZi6iLuChtJsYXIcJdHG4QrYQKwy36ar2YKTcNBARwA2nJi/\nh670X9hBuXl/vV14aPKV5aMVxyeiqFnsOzcenU0OLJwXUrV07nZkGAANuTCF\n44uyNli1anWpUTJnhLMNL9Of2T0qmC9UNxkW2vtZDN5icrVQFadbFgfawwCf\nZDnqVnwe5w3bHhLQ94i1OhrHBXqChGdyhGmdSqzgX6av3Eoi5HYT5RA87Mkc\ns9Oy\r\n=XNWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/density":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/touch-target":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d66d22bf9.0_1590695728936_0.4096275096064357","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/radio","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd55b008fcc5d84125384ffbbcaf8b1a96a7d7ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8904f3cbe.0.tgz","fileCount":36,"integrity":"sha512-iapjEVK6S/sFIQiC8XXSgVc5WhqcNwPfdTAn1Fmmiq0qxKrMPtZxSGfArgQgft9SCS6wWZ7dDFtl8mSjm3TwfA==","signatures":[{"sig":"MEYCIQC2eySF+WOwCwH7rI4UCZ6UCrHaLDiNwyPXZ5TDa0HxIAIhAIrjkoS8tzWYJtFJPVB+RORo7NJDGsSz8hV5CD1c9Ccq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1TCRA9TVsSAnZWagAAaysP/RN0pfP3twNAgmeQ2hSD\njZvlwiy1Dn7Y3MVHw/WaKlpMjaVdj7bu2KOr4fzr9Yk+N3U2av0JLJhHv8cH\nmz3aj9V/O6GWVBYj/jJN2O0hYI/uA+roVjWPG/eL+7Z1gyCxozt2/8jvrW/3\nAr6ATLEajYl96dYrpxL9jI+Dq8NqBLaCUY2lOdZ2AIbO+dkKiCJbjIW/6S1A\nuldoz1BuQM8hAYqhfweiyuM7t9lppv+q6RJW+GO/d5xXSJi9/VeupQQhi2Go\ngVrBzHRH9plLFly214yu8c+zTrVNk3hZ5BXDkA6PiuVLlIMGXYJTB7cUycGh\n5F9ullx02yCHBbuvm2G+T1r8JGFuPVrggBimNR2Wvt0SpjVBzowExfALvog+\nBHFVh3sZd6Ebhqrbv+RFEtK6vlxB64Nyxs5k8K69crCJvWYvxNpkfWER5X4N\na0hztyQYrjLvPdHxPX+TrlVg0YZG8fjh19iusKyzTWcDwhehYBeBbfx1uEZz\nLaZt4oeJZyO7LzKJhRoKMKPs8xBSAiLl2mzk3/KMqOp9wfDIVqlQmzUMsodC\noAiPssUi0BpMt8hE5DeEAFeFq/1JVxd/AK1A3bUeA2UjKLF9CL57/Sk9MrqA\nIiCzmcbY2t3x2uu5b7iJ7dHd6CibdwSF3FA0Fk4+BjxVdkrpYaNyYN0EvSFF\nUHu0\r\n=zGw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/density":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/touch-target":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8904f3cbe.0_1590771026945_0.1834061883799183","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/radio","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa2cf2ce7cbe960994459ca0a85669595e4d7e5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.51512a4ac.0.tgz","fileCount":36,"integrity":"sha512-+Fz22nDK0LD5U+MAZDopxglHjoWgb1UOirTwoFXZaSRc/9tKmy9rBvCM//iLZ70SI90agUchxxn5oHFktdEMxA==","signatures":[{"sig":"MEUCIQCIDsWvgEwKt8+GBYEuprQ9gn4lHSqdZWpGTBSLzr4DrgIgbhv2JcayQRVeowfLdjnr4DHZxrHuXhdmbshk4xyZl28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9FCRA9TVsSAnZWagAAFwYP/0ScLqpW+g9h3+vz+MD6\n22SiOD2b2Y2mCwkfIPNMy1jYw41E3vtmOntltBaX8FceIlWxJOY5Jk2K8QS1\n1itGsayb/C2bX97+abMPFz4H0CCO6MVEijuAX/zTt/ZoJFz7JH/xsGdTB40z\nwSky74hoh7AsCFbK2GLHmVdQ/Nbf6igQFGle0uu2P9H3usyMluK6ATV/iOym\ngnoELruj4c0ZtMuBPTVL19XpJmRyfAPMS3cMwYEoPLRrb+USYw7BAct8ZYKy\nMqysRYhG3WKDDI9eISm6oiVhBwxxDJVtkHKap8U4Z2bf4zIykvzfZzem5jc6\nVKC3Zp+UjnvdS3RU7Stt1StdiUABPMaopUoxKR9Ti8CDwW5j52K+1u5vCGl/\nWFPDzr+WRGotVYZhinn5/zQ79OK6sDR6yzGbcZLtIiAc6Nk1hrO7C8JCljJC\nUYWtKYbE4mL/KNdaz1VxAB6PLJ7MaWhWDBJRERdBIRACoKnerDJyr0EKSR3a\nlN7BX/qsbDFY6TkIfB65oKOC6fayMJD8K0mAJ5xsAiSauS9G6y/xgALLGsAT\nfeDDX+mcMp97mC3LNQyX21P5wpruryGJ0dwzrcdFCVlCY3zZ8oEiB4YghiuT\neHpYsf/dgdxdfiXO4FN4fscz/hERN2QyReMcSddi/ok+rmxoA7tSfJ+49f59\nqpkX\r\n=TydT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/density":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/touch-target":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.51512a4ac.0_1590779716433_0.5134279160706485","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/radio","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca572b51784df35d95304410258cdca73e347ddb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.0743288fb.0.tgz","fileCount":36,"integrity":"sha512-pdyqaZAnLmEP8TqciqrX430VTgr9SvB+pxgES27GQj6wBwFWWb7l291DwfzsL7BovekvNYY3cfZ5GtCEZjUFOA==","signatures":[{"sig":"MEYCIQCeVaLVArRqaDJMNR6/MJG0cT2kYvVQNk49wT852QLC0gIhAO9a7Ipw7lt11wrsg1vmHxI5Iwj4qO1mBTnmov/NNLri","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrxCRA9TVsSAnZWagAAecQP/09rgLN+zF7426NJnAyC\nw3u3lwfPbSSS26LNJ6q3nqHS4Olcok7jtxIgjLX0IdyM479w/VLyRi3g60iB\nqgcmIA2LRKkW3d3Vvf+3AYa3/o2uklY6oNiQeWA0k7AdhcmwWtQLwCWcXqGk\n8uMyCZeWAnoJdaNdy+gExjFHG/nc4vDRiJ0XuYsXC1XcHi03xnf1lqyrMXTX\nvSvx0VwiLc+081z7ERI9H6qUQFErGA0tNtCqTh8pbzzFbJ3CPClR6SRlBFpd\nwFa+2HkoYlCQpe0B/LJaUank77duishLyHN+IJ9rXOGoc/IJW9/4A0k9MgeN\nDyXLexru4dc2PTAWzSMpBUhmEG5KNc9eVMH0axzccExhfOjfLWVb1Wf5ut8/\nKA2GG/GqRS2611tK+xWkxh66o3dxHY3HWZ1IRStARZccOZefDCM/eOe0XLJN\n12b0PdBW3IP0cwoJHCy2qt++H0Hh0dmmTOX72eGSeBkDnA/eWGLuCMCkb2vd\nu1K4qRLsHDVXyrOQOJlWzlNLBuuIy2nIwrJhO84J2zROYlZsfMGR94I+xKH5\ntDR1vz5bfFdj6uot5FqlCU5ei60CqbK2gBWTMGfgh+JnhBOmq0qvKTEJMq5c\nuQbqOPsw4fXZE9gOCSLp18TMtWUcHkrD9r2imShml18JOux1RD3sKrqCGWvb\nHR1d\r\n=oiVH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/density":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/touch-target":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.0743288fb.0_1590782704851_0.3963214421567831","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/radio","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bf8c3a2bd2c022d0e3076152e44e4eeae470472","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.06ef147b5.0.tgz","fileCount":36,"integrity":"sha512-wkQqqgOzyY14psZxCxEzlRioAhZDZXFGS0yHy1eeM4pGotPnuB/E+XC+zJt6X020l+kQCZDhIYQzjUWI0teWRw==","signatures":[{"sig":"MEQCIDBwPwYbXUpdv482gqdJSPPOUPd4Zjp8Szga4n3SUylkAiA5+fRsxYYBX3vS5CJq6XIzHawGY5gGK7LIbkDJ8GK2eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNLCRA9TVsSAnZWagAAs7wP+wUGy+jSa5LsHGaQ49lh\nZvEHb+0PttB8VzQgpg2HR+0igvXBiR6hvODJDvzB8rPavIZDMDx23jyJwxAi\nApL1YuwBXHCy6yZnbw1/+OCt16v6q7RaACh6CUgKbfbkS6qYLvsctfN3uPSQ\n7pYupML+oeeB9MCR3++BRs46UBNxXeaTIX1QAgLcA9OmnZORh+jFLMfLhAyT\n6Pvw9HITv68OHhURIFEBN4ZNCdW4/mNA96CcOHbx3T3+WMn2tv49mPhLNOl+\nuK4HZ1JlCo0jGWQfRDOwvVg8pLWsQvVjbmsrZPV10lgoP25aJgM/d+CPAvwv\n0hAEZMjjrlAAPUO6asQPTwLKSRq+zA2iJznZULE8JTEsYeX8XJ7cu7gp/e/i\n1gaGfMCoq2PlrpbhFOG4GnsQRNKb7cgx+ww2CFKySMeslTNLnM9oJUH9joyM\n8NVp0sqeXNx1vYkWkNwu12kx1UjSciUh8GRribWs6+ufwxW63OObattF7uVH\nqyZTEiVYtz0eSjPaz9vs7JG5/4Tf1tK8qqF/jnP8110CANmyQXui0cMjgStW\n1Nh/4jKj8NRjoNjlza+4tmXgvfLGSMB4ppsGRF6veYIbno68rl+yxmkh0iL6\nqXBbkywDYIUAOYcMZ04dGC9LW+4+6/4NhMnwhXfd4JKRF6iYeKv4TpLidBuf\n8Qe5\r\n=cMdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/density":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/touch-target":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.06ef147b5.0_1590784842657_0.9423975224581247","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/radio","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b031ff176937c0b3270a276141b5471c6a9de3bb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8073a20a9.0.tgz","fileCount":36,"integrity":"sha512-++5xwggQ+IpgyscxmAAPPw8dTn6/j1KSNnHwvoVjFMcRa6FMSa4ors8nF1XfcIoohBiAHvNFOOUy1X8UtaLx1A==","signatures":[{"sig":"MEUCIGviK8uvDzx6PQ4OGOlrOMTHNp6SSL5mfWGrzQcFEqMWAiEAz/j13t7/Lbi1rFpJXA3GEKK7w4+iKUaly0qqhxj7ONc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnvCRA9TVsSAnZWagAA9l0P/3PhWeWzBWYbwjnRJ9D9\nQ4jlFAeN2nitBCcOrqVyaQlprawyK+OeWZG5eLPVDqILppxHHvy+7V3CR44F\n2uA3Wtw17Nu1pS5YXRGApvHbEzWIwSVa7ZjkkO67S5mF2WAF/3cy5sBjR80Z\nDhhF9had6TW9odBMnfGR5EzCnk0I1tUPwUrCNqae6QBWy+Y67JjM2yVD3b+k\nRPykUJJJI/LCaJeS349hOWWErVpb9nkZ8EN/EqwRBqovNigZ7OFZRcWi5YNg\nx60gYmO37B1ligS2eiUy9JlKRv9XAay5XO50xOH14cvimNvVtfhH+oEoE7Ur\ndV20TJmyE3EEl7m3Pz8DcLMvzvwMDdOuLa1LG1PPnzp+J9SiKzO9ZrK9Xm/s\npZbBBWpyH/NpDhtVu6PqLdgK58cExFhNUakAS43nja6Rw87sxpz/lnXTk/Uf\nsNjFrw+S6Axe4/+Thucf5yJMAKpxs5riCRTcFBRUHKg/IAS6GdJghqo26zha\nvF7y2XERqK8OEEYayyogmzxutvhV25hUs00qob8xmOZ3Y+aFdcBCvEGzkRt8\nyR/a/5Yv3wq7d7shh4qQENyiqD0pNfAN1Luw7E/FGrJIxNpTAQcnGcU/RKuQ\nCWOYtXCJsCys8gA5pio4EU+Ggvum/ZYUE/fDN5a+73t2+a+ecSzR1rsTaRtj\nRz+D\r\n=yLY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/density":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/touch-target":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8073a20a9.0_1590794733185_0.03885087808237464","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/radio","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"704f4eba6a380ecb2daeb64a4f79a7d801b57cd1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.72ff42330.0.tgz","fileCount":36,"integrity":"sha512-cngFLLb1Ktl/AOYwX7U05e4MhV1r3mYF+Rj/Fg1P4Q6rO7yk8Itis91mlWXDrgqUJfh9WiYUrXj8W1gJ7eMIow==","signatures":[{"sig":"MEQCIFcewHbJip6Hat5oztYBZBaFFt5PjN1ttPp49phIY/mBAiAJEBgJKTBoI5wM7nWWqZPRRJpmnLyWpNQNz83lIjyuAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBkCRA9TVsSAnZWagAARTgP/0iW/QAH0V3FFhsIPf4J\n0yooVHAvG5sDUk1YsxbwW12RfvgMN4TikmCsh7xxJS33Rs+popaR62r9DmB0\n2+EyaTasLDgbCNNcg0V1PEpjzl+o/nf+RPRdrhk2uot23sv/WXc7PMTqP7iX\nfHkffoe4IhyJl9b+o2BY5ETGUgoG5JD98oJXZoBGF3gMbJov1FaqVfSz17fx\nPAjFK8WbTIf314O14Kq0Wuxx8DjZiP9NglU3rVw4YNoqDBXQ5c/vjmVODQNI\nwThQbq31ckeWjoqFSVqnplJga97E0qv0pTwk7/x78Hqll4EBCqruqfHjDY1p\nh46b/ilcminlZ2ebJEz3cKHTM4X2aXAOjdTGlCV8zi4p25ZRzhXifhZVYfTZ\nqRIiU7HeV7zEX+ALfKT5XsxBqeGKpZ+54+MS7gXoFmGx77hvamLRV6hR0zYE\n81YmjBlTEVS0PF95zh5xmEgEz/9D54J7PHg/QOhxl+Q2j0wq8T3BCAmI4zFd\nlpwpotn7P+1gfzP8nP1sEEzjt5Tg2w+kBnaiD5hs2u73581VQVxeCuOXkKta\nl4qCxwQqkLTrIIB9ne3SJkrxKOeRUjKZlOe0GH//Z2fU/IzYS4ndy2Yus/bH\n5hoIkhSVH3hVNZ1p70oS9v2EPOfyTunsX8i0ZDdIzTn0rqt9Yt3cbNelyUPV\nwXMU\r\n=kNdV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/density":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/touch-target":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.72ff42330.0_1591029859508_0.08165572929646303","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/radio","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4de1c39e820a23425a0fb3dd0d18c306758635c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.9ea52070f.0.tgz","fileCount":36,"integrity":"sha512-QcX+v0dcTJ2C/bEFhklE9PEnOcT4ocOhIe9GsQYIS3Ws2mErZHYsPMGiyFs9zo2hToHCvUIvU/SkrzNijIX9+w==","signatures":[{"sig":"MEUCIG5TCeWrpIVvqfkJ9wG9/ZOvR4mXkvAmBoUS14hQObZWAiEAwZnv0Eo5etdkGKd7OCIxU/mwXsbCNnetHbNtFIbPrLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGBCRA9TVsSAnZWagAAmkYP+wf8N/+o4U5Bmq8tcbS9\nPwffo0J8wR8uPvoyKaTHmXsEy8uuMow2j1IVKaSPIyGLmVHb2RMQk+MQ8TON\n8fcoxmdTFlNYsUUpdI6NgMHriyqwsbQpv0u0qTc7+IXzZnK5H1GYhLs/Koo8\nRnQ+phQJTD8tLmmb2WB9uHT0X64UuphvF//B6clzIYAS6TMwrpCzoCxP915B\n3pbSLVIorTgwlZ++PmIevqGOhvttnI+RhiD8XkAcsJZ2PnY2CsNu6oYtW8+m\njgNCFVEr99H3bvvyS914LbecwNHdzCwt7bJp+QhoqRb9s6fG/5hvAjzscV/v\nqJCcKpiO7EGQfKAgDVN4KwznEP0e7MzZTnemuhFWCVkA37H6diw351aXtA6N\nowmJQcwyY8oeVnilvzl06sFZpLcjP0idyu0MZjU1p7LbNkLMr5IH/s4SImnP\nKICPeAF2KAkKhArNeRLh1Fyd4OKVAjuKMNAhlgnHgBgnrON++C8of+BzhK/7\nh/OB8r6d0g8bh+w/IJ+JBI1ji7Iag5FjyTg7QyGq6nNPsaf1bqL3mwrThFyB\nfGFxNhhFPmnnhE8hhbpGNh6buHL5M3Y/pdY1SD4V5SDsTq0h7Ed+kQW3wxIY\nbcmkI6Gz7hNrO3pdU0R5u2EBn15f3smwPl8gthSXBIWu/QO1aX0a2aXTkUzN\n4qj3\r\n=qX+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/density":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/touch-target":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.9ea52070f.0_1591030144612_0.23992859145779288","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/radio","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57fd4c337c2790ef6d10a9bf0bf209b4d1e3470b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d86ad3b60.0.tgz","fileCount":36,"integrity":"sha512-F6GT9IvkVY2lXeoJMteVi/KLbFLvIE4YCy15sn/eh3NUIPSx+iMcoxqbBoEO2W8TLGtRLmvgZomgXifZ8ZQJNw==","signatures":[{"sig":"MEQCIG9oFie4kO47xhS8kUTAPQ4b5pOORfkaH9j4w6ug9QB+AiAmHNs6PWSzLWH9QCbyzJ5LFawYK5q4rjgGnUkZt1V8eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+FCRA9TVsSAnZWagAAqoYP/3tl7K5gLvT7+IrGA/gv\n6WqV3fY74WMdfJZplwjBPkvuHHAyCKLqk20GoU1qaw2ELsphOGzuosP8BRaF\n3WkNr+uWVl2FM2cL+vnMQJ1DuOhG134ADMZ7Ow7xCoqB9Ek0lxfD1Q94cg3K\nOyKyjclHOdQBKR9Czz2uocvf/fk1XcywSxqEif+GeHFYBl7aO5F5Tn7Pq9X1\nK+R0Pjx3QiswqKddoJNeWoViV/x2gdkO9E2ceOwkCem/h4vrvJhmjR1J4Sdg\nW21X/8qXa3UHzE2jzkIgMW6TlJatBDL+kM0/Jb18qZxdggr1yfW+kZRTHnA2\nZE6KRO//xMW7qKWX1BfN9+14EYIJTMKFTd2LJJWK1WY6V/WjHzMxpwnkoPtn\nSUEyOG7Gk99CVBPD+1P+kJNrJBxm3xPnnofM1RL1JuFFN+3eKg5FAKbzT9ef\nVWE2UGQcApovisH51te8kZcbJn23XRcJLudDX7sqb99C/9Yu8zjT+gMgCqM1\nekRNhq/Z6M0DmVrrJi8ukPunKDSVWwxL3O6NGyzxlomeboOvBSJBqMyVwCV5\nL6Iuvg4vXnVYsVWvIk74dzSZjzvNY1VmgbO3nGMdTyUCsUQlNmTVbE6/JGOg\nHKwr04RG53tdTj0Gft0NdOj0ENooxBiyOrhUsdAD92UpnWYm2BRXu7u8lSUe\nV9yD\r\n=ASNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/density":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/touch-target":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d86ad3b60.0_1591033732601_0.6742469280337087","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/radio","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"640ff9b7d91d80a19d10346db70fc955c3ee4a57","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b9776b1d0.0.tgz","fileCount":36,"integrity":"sha512-2fs2OTxh2ADfd8szHTQQoxARHScI7DDrKdx3mYTg67iYInlxCti6oeg3HQz7f6oRIcCa0PwzDkz0fT7cdDu3Ww==","signatures":[{"sig":"MEUCIQCL7AvwQAQWJfbzSzO9hW6cHVm6rj2te5N1uRMHUhFnsAIgLZaXtBweQ/O6pJc8g3KBHRiLFSOkq3pT6h+S7yVDE1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhFCRA9TVsSAnZWagAAYUQP/joNE4xqqlQwmKmBsfBs\nxRidiqDHMO+5smZw1NVY7A+gK0cTnkNqUVfPOafs+B1UwUu+W31Ip6J/dwlY\nQK5y6NT6txVaKRg7mPuLihHGF5hRCbDg2hmVsa2zDCSdpa610ffy9c1E6mwq\nx4n/wsEqSWfFFid0HysHHS2c23rQY1kV581Ry5LgMgPveEjgWqa6U6V2IimO\nFY09uVMWKePNQEqAS9NKQC5meEMhY8a5vw7YfcsTQJs0XFX/bxlAHpVZrAOC\ni8sYZLlW1RurFhVatO0lZMjWW1BvneOizXP7hlfX5IbNtH2EmoMTXq7PcvFd\n/ca6NtoWyBmm7zmCMJ22G/1QyMBBSdt/OhxKez4MxItUAMjDedKZyIUT12YM\nyVquA+VBrXdj+OXqc+lBRyHTs78cAM6r1jbHspnN/e7AI+nguNHNcrhLn8Q2\n+2ytdTXa9TWX0SFZtFE3aOrPNn9gXf204zJKDLVs4NpwK5AdVO0MhbHUo3Ma\nuyUiavn7vTTNjwbcjBsLTZU4SI1NRCATuHok7Oz6c44AO0kJx/x/72jXGuFr\n8L5f7/F/+nFOq8i8MYMhPBV9X8TmVFIMqPPbHl94+QDsptBSnETquxDOMGwY\nMruonqc34O+lJfRGsjtE339JtORcClim8X7y3nzpSuqQzh7MplBuLZ9fxc/B\nIJI/\r\n=cyVu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/density":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/touch-target":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b9776b1d0.0_1591035972528_0.8062461217523051","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/radio","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"059ec9b9ae8556150c28f1aa70b4065a43a291ac","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ba6f7c294.0.tgz","fileCount":36,"integrity":"sha512-zAtOc9fjZT46pdXkI4+fwatPSxqe/W+NTwdA85Ttsxl+fsaKhqHwcJ8+aZE8p6DM6TfnukUv05P9deEY85jsGg==","signatures":[{"sig":"MEUCIGxCvuSD/dMjaD46Vm4k9PGfp1KZQtWrpBitkXW4QnMnAiEAhoLphSITvaceAUiEI8LP9zySXGlWKX/2eczNBazKv7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oY1CRA9TVsSAnZWagAAASgP/jw+7VzLxzkC44BVh1uy\n48LHTCEW5UMfWIkDeSuYnr2Us/bLcZyYOcWLuHZA2bHxpoKLUWIDVn5p8xZJ\n40h4d5k0aBbxwCOVrnuBK6lnE4z3JKXJhrQ4CJcG5GS6XNimJ1QGIE5a7eWV\nKL1X85jlzQtTKoD2mmPki0SqrET7bouHAN4W+w2QGBsqD61VRJkmALpuNohp\nkER2yVeUxYpeOe3aIgGq+8Jat7+p8+20iZvhLp7OwXwPzzsMyQRexRbS3g9S\nLIMJcAMoWeFoWCmV8lDAjusuQqpTkJfZWxsHLWyhAv2B+uhB/qBTcyge4t/J\n37GlYWEL+wJ6oQLr+jzmotFI3MmCLa99no70ngYKwo4cD7UFMZS0VoEk010F\nvlP0NYkJONQ05s2p7ZxXcAkk1ewtGWTGsLKBz3Xdj5PNttaKG2ThO2JXUOVZ\nhSkO03W17+UVOXwCus4QO0QLBRP5WZyi8nfIvhGh2ENH5iZt3WcSnZFuPdUY\nYpTTv1q7VVGaiwpPrFN+VJaYrT4pn5zw92StGkNdGyi/MjaoDCqWXHR3XAPn\nSfYB4ddabekg0wNSip6LyLQIBm/LJ+I2HkeFDgN0N53/bzsvvrRsJOT3BJdK\nezBzwv0DlOfY52a3Y9OZJId9xGbrrOMk+zNdgiDyTL8pKnUWgF8GR0qA4lUA\nzE7D\r\n=QeBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/density":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/touch-target":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ba6f7c294.0_1591117364536_0.09418851873763945","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/radio","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"008d0144e3dbf2f82699a7ba44eb34254bed0dd2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.cf3b664ab.0.tgz","fileCount":36,"integrity":"sha512-RlYSrJrpCPsDgh15ZN5w4PNY6uXMiEUS9l0rJJ+MkaO5TY0VJ7PJJEcTeiAjHkK2/ZYS/SESAefiekcgpCuWiQ==","signatures":[{"sig":"MEYCIQCg1bywiI9Cy6/2edvyH4J6A8LWmD5zxqFh9FYdMxYtxwIhALJPzClXh7YXjWWORilz9CTPBDVxp2wpoUI0GEL1tfaG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkpCRA9TVsSAnZWagAAN8wP/jqGkwJ5knQrqPhBAxRT\nHW5+QSAdhAk3ap9K0pmETEAAn1/2sWWhZc7rpBfmFxkijVpLSg8OAgWduKmY\nBFHaQbh9DxmmOY8RfjRtoJ61M8buXCJuWe1CeKydKKl0Ak588rLpr1KLHZL/\n2ZpM30cXzY/li6RI7pxT5KetYrHxrugsJoRFFvuRln6apUzIcAEbCd1ljsMr\noI1zHwNyYnjehBD/sTilbUKoVq/6NH8R4w/D+ZVpTmnvdcfhUgCDFGHEZ80g\nFOxR5oefcVDQxhnmnjSqPXoGuoSD+PcMQVSJOrsmOy4D6w3b53u+fYT24uJw\nQkRPnIyn4rXb0MZGImPkkmP8eutk7VYk497eNU/eCimFFagT2RvzvTPz6Mv9\n6brJYq9OdLQIc70ECXNntj7BZZGZE9HGn+7BKI2xD8cwOoaO2+Z9UdgjNevp\n3tVB+IsI5sR00yASqJ8hMAge6FbB0uiOjtCDAprpl8QJlk8gJSdhCRN2F/yn\nws02f/U+JatK9QH6UUtTW9j3fjchhgRLKk5KAtuYWBF7ssLVnHNlmQeE0eVZ\n2b77IWW0yfKoxAsfEXWJadPnKp11zO7UaGbHGOOn0h4IR51Wk+lTUrZZCS8/\nFd/dx6Mt/aDwEqn/ZwutdvhLCKBQihDSNPZNVh+JoKum3gIJQ4MkmgsWoyHE\nJdCB\r\n=NEKY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/density":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/touch-target":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.cf3b664ab.0_1591122216484_0.2861716172226596","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/radio","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e22e21cffe09641b76bb884f854c989d5458751","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":36,"integrity":"sha512-7NE74rkArpA22miYFtkyaHUoMKJ5BVC+kz9mI0PMfpPxi6Wp15c1z1ZBMic2nhEPDuWmqrEp4YsV1v3gkIGzAA==","signatures":[{"sig":"MEYCIQDocrnbW3IitAPlS5oCslMBGDjronxXQbAdtOAqUL/BmgIhAIAfvO7SxxfiNn2gat+AQZY9dNi6WK9JBkJB4vJEy1dg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY4CRA9TVsSAnZWagAAMt8P/jVevlcJ2bY+YmsJJwLm\n4AjjhCM9R2JBcJkXxCnRD9ox5gpZ0u8ZR17duTpLnlYTWKz+LtOfCjI0Lmzs\nDYLU5sOel4d4aQvZnkkQbSP5GSzy9EjCkUOJrLT360VN+LxWeb/cKFGGu3b0\n24X0R6vRl0KMwsz1ozkdtoxRMNPp2OqUWcciJfd+l6yd02CFyh0pMWcCc3U2\nC5ZAL3jcqmLjWDHSbvDVZ9Cm822CP0KxQsrRM2FWV5yxfTOwIhyb/jB/yq4m\nGmrAMdqe8VLdFmq4ulRxy6OHxT6grKxieuobByJbDKMwaQo6pKmfEiPUJ9HU\nfoiUa99gLyCEMJyil0z96d/Qn6MvDjcE7mjrF0bm+3jUVk6mYwafQ+C6zwOp\nq65gGg58gXy54iT/cgkqEz+GQEcbL+LNX4W7N/DPM3l6fhIFjVoobT/eE2j6\nFyk/DgeynNbULYK7YpuDQ4oico6951BfICZGOT6y8i4MCh0y9WgSzh0A1W/f\nBcSXMw6+SExD5t0OGdAv2i9Z2lCsMQfZ2uJxFQ41/SjFes1yp1KDxZH7SPLT\n6/KLsGh5cgB3d3zAthRIkxn1PugiHyOammCbW5WUzKsh1f5t/M93XFQjY7YZ\nHI5mCQljpV6Wi4mcbQlUph4JwQz/9hgyc7rAvKq/aEKHX6JvfAmTfZ5CVpA/\nH/q4\r\n=9xZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/density":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/touch-target":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4ba3c9a31.0_1591141944458_0.5548890259729862","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/radio","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b26f12b84fdb6f9de8a3883a426a3c44a4548f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.388b042c7.0.tgz","fileCount":36,"integrity":"sha512-OE4S6lUTd/QJP49y+GkeaoZcMdZsrYqc6yk84CaPktO9oeQ6LM2bPWUO7ZxBwmjSlwPCrvMv+x16YdsXTNjopQ==","signatures":[{"sig":"MEUCIH8GurlDaO/7rLDHl8Nkm2cSNZQNblxaoCVTcPWq45x8AiEA10Cn4Fm+WkxC0MGq9XJSC/P4y0DM8l7KKDYCqWBvbTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nHCRA9TVsSAnZWagAA67sP/2j9KXbLbAl0xpKWZjKe\nxQsyQ4pSdyLvdyZMVDdhFN4mJHeqJBxYSADZAOGAGIb6iEIJlo/WNU3G5K6c\nHVuYDJKxY+FhrNbXJGLjDrJHWE2sOs42bjvh8CWUSobg5lhzc2z+RWp3PrzT\nzzGTp/w/OyJvnExx+fgkGeRoymsa+6CCDBdPeVpyc5MPig32VB9BP/07DDko\ntMhAWk04gTfHkdlfM96nXBJTMpGI/pJgwsyNj1zgl2WY2XkI/KTghXZoRmKs\nfHIZPYP2sitGLzTD84ysxDuKWdXh2XrU+cs86eGncm16tKtvkSw0LGmb5Lya\nZxAnUXWng4/Q/o7D4AiZKh894E4UXXREluvIS8q5XjnasmBpSqtSNeddoEHs\n2clhMmzwULsji+YaKWa8yb+otHA62NkpXC9m9QZf+drBeFDLHSaRh0XCJO7F\nfB5tgP+UJeXYv4/kPazmWCuH6ndT0I4sRnxhujwefyieDvDTIfM9ZySRPOSe\nI7zSX4l2oq1wMQjUnbWGixFoXCpiFaJND0FAzxOPRFVhV8OhcRaqFplZbLid\nzIO0aNfiUea3UJc8pjogI4NaRZf+OiuWR2nOjc408882ZRFcdPTEjIsGPjGs\nlqRZagw0bKUsmhyNjRuBeOX7CKKNGnTwsijmKAQgjp7nQozR8AVv2ygPwp7e\n293S\r\n=SB+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/density":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/touch-target":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.388b042c7.0_1591192007037_0.4712785628885592","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/radio","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66038a52069251e25faf4992ac7df9c9c6622051","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.cca1ca84d.0.tgz","fileCount":36,"integrity":"sha512-iEFSOL7RllM3eBZY21HxSAXHB9SSi4oOAwOEU7hCi3RTwcfeutUTkZdfmJgOFxg5ivIjKb2j9iwQ4VV/FyBZiQ==","signatures":[{"sig":"MEUCIQCARDnAg0LkipVtpGYIWVcEhGzGcBFdbQYJsUfJTXv0oAIgCTHRuCzOB/mNWxgF9r3LI4af4vimgrsBanmTRbd7ac0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nECRA9TVsSAnZWagAARI0P/RKeGuEBuyjRzEZ7WvP5\nWeBFxqY7X4Qb5mGCw+T780mfw146qwx4LOqq2+fIY1O5ua/cBAYdOn80bA5o\nsGE5DndMGNMBRo4RRbmsDjzC4Vu6raudbiZrsy5juhy0DYPahbewgURhYAsP\nQXEE8IlK/4N+b+M42ygH9D/wcs6hWR6GL40MZ8Lhz5bxlxBiL7xIDgnicYb4\nIDO+1Y0ddwmDPiNoAqXhnFbtswr1+HWX+56CYb/5/Wybd+uHpB0iV+lmkRbN\n6+fRMLpJt6BZYV0F7slNrdXhcGcKgoNbBuHmzHTu1dkkVc3IaY4pLO8YvH0d\nqLK8mvx4cH2K0j7QcPuSMuu95cJkw+TQqoU09p0FnVudJ2Yw/AW9Z8Yk2fiO\n2+JwkG54fDPpOOvA0LftB4Kj6WFu0CWxx6l+UuqfHydtESmlUC9JMOnHOwar\nCTuXId9MiaBaKFzZghcddzIPeJPsaCJbl8qkoFkWBvDLnSMqcg+vb98P+FkZ\nwJtlCuScJJ5ytP68qIHneaSamLlE43/N+lIu7LemgDBv3NS2zS6koraLcKQ7\nR8TFg4MSoHNbp/f2kkx9WaU8lgmwOglq6Yi7f0slTuuUzJBtcLB77GrfrHPR\nXkLhvnf+9GLzSP96H0YkioBvj5KYgdYWwL20AOGeQDwxE9O4AJoisAGxMzyJ\n0ygg\r\n=cj4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/density":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/touch-target":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.cca1ca84d.0_1591200195467_0.52040910643784","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/radio","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa1dca1ffafb8a403f23a842e8bf94f8262c4950","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":36,"integrity":"sha512-gb0VKZrVGI5N+kelrC78iih8oj04RTo7Mlw+EFFabZrWnW5YrTnrLmjXhZ/jI8Ay3sbXL3Yqfg2PLP0FOtce+Q==","signatures":[{"sig":"MEQCIFDL4QhtDTcDDayUehd5YGSKBLPvHUI4BdqYThs4EmYXAiBtVExv3FAry8x3++w4GefUq4/a/NHmZsZcELziCklwrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KsCRA9TVsSAnZWagAAsrEP/0MpkUaI3Ail/plknpze\ndgdwgPBHZWFV5zzHSSdKeNntlSYq91dCBClZIsQJ8JkERqNcd5ZnpD5g0DgW\nC1FQKZwbodhLHKtdpO6/3osL3aVatyJFeL0dsHfiuv7YNmUTcVOrobPgjF76\nhCz0qDow/a6eB79wzBl+mnbiIh1mXjjfwu9qLXxxR2eOmKti71nCUTQYphAA\n1MGyvPaBdK5kmCFP69HhZPSZmonv541TNMwBnfhphNrvv1DHoJDbODp3Rvor\n8sCMnzeWa/7d1j+dW2BmrpZ7CXE7TyhvJYNCitjM8EVmNk/TryRnVSx1bUzM\n1CSiDVkSFhTwz7r23+bWrwouty2ifcVjgTrYCvDHiYw73+wnq0Z408uPmjmx\nzMlMMtf6xcG22YeN/23eov+qrK6Rm34gynxShs6xkodNO6v1WjBIB/kIUOo1\nNln40wTKHNTUme1WjS6WmwSoRM0GPwRFxeDJea18GFpAwzlipvBgp5h6z+hi\ntU4ApYhoeBJyjZPNpDY5EuDsKILXqvoewKtFItXJ8h4oFeZGJW6kmzQaZkZx\nKKGPDtMJWkpKf1+wPaXewBs8PqQnxM3zirz2yIRn/jBIR5iUYT9QwHHOwGMK\nYCipJ/fabONO9UYO+qVzUkPjr7cMfOmhhn6q/JVzS+9aOWMwoPwEr4Xb/Y53\nu56v\r\n=+MJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/density":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/touch-target":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.9b0b5f2e0.0_1591210668332_0.8627931194108918","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/radio","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b084f9c25d806feaddb5c1e4b09d8ababdf7d9e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.0a7895f4d.0.tgz","fileCount":36,"integrity":"sha512-cOWmeSx7C8MQ29fLCe7p9a40vcCGsghSOuLI1NIDDZOHP50RFbiftvHZbQSgUuvFIM0BlK4ACzLyTBaWIF/c+A==","signatures":[{"sig":"MEYCIQCy49sgR08TCRBSfIO3YrNsclCao/1nXC08NbZqmbjlzQIhAI0t4bI07p2YnrcekDyhUGTE085DNgiCjOzIE1cmvWPH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BF0CRA9TVsSAnZWagAARPwP/RdNkDma/Rwd6+wMe/Tj\nOZYnO8QNxZCMBRjSiNK3yQhmTYDhoUQfTI6KPW8C87iw7wjHjWemk4ar+vSY\n48j0H5J4wfVYO5sHzlyLUwP4dhdfu2Yi/lB1x6Lq5TIzMxYTJ6uWpar1iUof\n6dlRc2x/ONe0xnOv8qT9eNFBUuuo3tFb0zlDRewPPWA0nUlNLMVXBn0Mh5Zf\nHbYtoS/H5qNOs9IedwpA5v130QQPCCW7YxvteD5zOmF0z9FW27kOE9FDdGTZ\nsd/ZEgvCTcxkgYKrdycl2ZUIc7BoU+gf0ykG8b/ZYX0w7ikkVPkcIUokGnj2\n9uBPCvEuqg8WcBQJNz6PYB+JbryUdIOLunPUZ6Qng8AW729uSuqZLzd44rtU\nLkpUqwXgnDIue6aCxJY+UWt8KufxV4jC0WIUbQQ4nYLVelJcb13+5GCnktdS\nQlrs8D9AaoW3eEomei+JkSHNKb0LRZP4BTZAOE6kEjx6RpQw5gWlLNSBZ3Ws\nLU/vSY3UAGPJsBuVN2Nk957ZgPfGjQEnoTGNi/qfUuIVxRyV8hpdfNP9pV1P\nNMHCa7rKz51E9gPXvlBSoI1GmYzFx69BLHRawvsdXd7tX3l9uTH/EX7hzd0n\nz7KMpJvBIqPyLxcKRTbJtK8OBmGCmRkHIFOxzJHYUWIJQEtp8RFvUVrY8Mom\nL2CH\r\n=Dayh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/density":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/touch-target":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.0a7895f4d.0_1591218547981_0.22249445735323126","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/radio","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05bf4dea5de484e6c3a4f189df12c70dda14a56e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.7461aad68.0.tgz","fileCount":36,"integrity":"sha512-obANpNSNTolSXm0+gZmimcyOqQBW0alRArD48X4m0hfjqXIq8fq8f11NkMnakPpEZERPbvatuaM/Dw8wOa1eGw==","signatures":[{"sig":"MEQCIGNZ3dU5A5v9kna3AUYS5+GH9MsVSjHv6DOij9W0Iiq2AiB9DJo4gpdFzQGE5uGnRSZ9rwCnjXRXN+sP8D+BlRYQIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBKCRA9TVsSAnZWagAAo1oQAJ09HPU9dnOPh/QcqZFF\nr2zyNkJ90T4dqdYy04ibJkhNjDpPvar5ACeo1/zpG3WvwvLtHKdFV8c0Iepp\nIKumw+nnYVPSxdZGHkCZZ9RpIfZSen/K3NHpcFpJmSdF2LWkxUhbZcy13osg\n/DoZjVFY2FfZdMlxerCrlw3kSsAd58OBlHFUjUq1dU367Lf42+Ry1Mjsk4sx\nFROLUSjLkBznGzsQGnxvxgmde1NqKpc3vkewa0w9vgy0xs9bpEFpb6L0pD+w\nJi+HB6KwA3ZgmQIWmLbnONEpOOFrvSe53B7BozbYHYcbEQ+IUDsnVtoZ60sr\noCrxKe9PTVgUGpsGXheFd3M1tidRE8YLbDGVzDpeGqw12qZs27tfIcaTHCHm\nNsGRgLMZHUGovJARXd3VS3Yjq6BzZrqH5A2GBdUWiYMxkRsbiUPfeIcc2t8m\n9hD8Ll3gy+yvczYue2fR4TSeoSOIJ3u1AMEvNPJ647LJ86K7XwEw6mPqFd3B\nsHVA0lIR8ZnTGwMEzyhtep58zz38O3fiQmFwEkg15L97lEZ0Y6wQasumD6cf\nV/GUpYl9Mu4/aEkktCk0cAFWIKHnwcpCrpYQEdcVz8Y3AmUwbTW3K8lo17PT\nnI1U/u0HTtbFgAZgUUfiAKj2zJ2WWCj9kKiP0b7aKKJ2m3edsDDmaoG8CMU4\nxuD5\r\n=KNiQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/density":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/touch-target":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.7461aad68.0_1591222345719_0.1335399605145524","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/radio","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c101bff0cee8d8b0a7bfef141a6885607b1febc1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":36,"integrity":"sha512-oFdDcaLsMXRopnD9XNJgx4jOm0cQlKXRNE2MQnswca0pO2ZOyYszbYBmqz11UWGOGw9uXK4i54n4KjCooTlTNg==","signatures":[{"sig":"MEUCIANSUNySEPF8rCZgBGm76WsS/e706q/BsjFj4/uOneSPAiEA2wpPSVarXg5ueaCja08JzMf35pl3INhAxfPDfUkTEKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQnCRA9TVsSAnZWagAAWzEP/0f+OJwijPtIiJREPTrw\nN+feanS5DpTAug/K8wkhVWLlqjYjlnSA7i0iMI7JY9uCYzhjVHSa3ibZOI2i\n4RT9ci2YdYFtorBEiVtY68eWQbt/scHJ4PXBPkGHnBJGSW/K78dQ7/p9f/3H\noZessPLSF1Ehtyz4n4+1rZXHmyMGItFm1jjKsF4WTjAu0svROpk4GhK1PlI/\nhYdH9wwH8ndrDMq2qLn8z6IIWJc12oP2qy7EYX0Xu4ff7JHYirAqYpwpnlLp\n413UNICxhYczpJSrhOCUcfHlT9GWg/ReD89SiHoT8Sg0O4BkcdISOk/6p5sE\nhN9sGPLJwPiJkWAcTsx8r7nY5DdikKC2hr+0LctJ6NmFOHIwfkIkvI4OmbrM\n6H48J6dPEWO+ux6ozrjHKjUO3y4WVvtJ1Ey+osVPwqNomQRi+WA5gHvWRaNR\n2OGbw5/CRGDbLVOuYtyybhtcDi5EfMOEKB9wtrRpXqJ/psZwxHpMcR3p39u2\nygyMtdj5Fd8YgoKi2ocW4RsbgTrjEA9/Up/RdMUUPLLdf7RTJQEsIf5gLl0h\nbFY0JXwyNlwE+HMRWR6w+OQlnC2BcQPW0FyktyXLPbAKA5zRXlOezGFNtLUW\nsP5T95mIbtHnQ1F0uC6hzgm7uGKTnGVMx6ha0pFaFtM1XEr0zfmCm+kiv81r\nSCx9\r\n=GU2C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/density":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/touch-target":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a0dc2b5c4.0_1591305252457_0.3511765008120902","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/radio","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea8194a0f51219a6c0ccc8749beefef119c33520","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.2b420c5b3.0.tgz","fileCount":36,"integrity":"sha512-lxxrr98PHyC8BxOJ51ECx3GcK64L8D3qHKpUD+v48JumooHZlIMnWxoVbHlvmdvD+emeZxSa+hwTJDgjBqyGXQ==","signatures":[{"sig":"MEQCICXUaGCy8KuCwhBSowSRLLZ9oHE79ZZlTUH3CoBHHIoNAiBPvDb6SIr/jHtw1IgM0EbK/eQvmbRLFmaTN1oCPIXpHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPtCRA9TVsSAnZWagAA3xwP/iAdaHu0rHD4VKf6kd+m\nmKIeKtbXZMXiXLA85kbP+2FRcj1Vm96KwaKas3T73qEOC8So5+IFZVzMWz7w\nnqmTO6YK4VdI9IHzQPsih3nmQ1NP8y10EAKvbwqWIprY5ek38eSAlbzzcA80\n4xjOoyHQHSwTz2PnuqtVjJdUfGcDyGF/vXlFqRBBrI3lXB5Cv25wXikuKBK8\nyQ4D2M3jnDU3Tp2EAi3bJyRNifOu4/1OKMLJOrpDxnpglLIMKw3zpcNHtqTu\nYeysVUJQwL0bfGrfiVyxhzklrbqCchjeVaJy5Lu7acFSGWkkuKJdFOY8s3Yr\njFv63BPjW4QKyteV5Sjh8vMkrFbfVWmLTW3FUkWLTSIEMJFHf1iwpwghGFnh\nn7OSacsUBI/zxVfZSqOq3UF37y5Xu2f5udpSQbMDTynkc1CGLuf6hOh7tpVo\nx0G9iCPzOIwzbc4soD1Bkrt/LfFrZdW6cwCU8FGjulK+dFJtKKFEbk0msa8U\nKK7kH5svpVOHN0q0ePxbamDljSQ6LF5+0HRGfqro6edDBXi+KwsInS7a0cH0\nk50Xfk4CpGzJwoRy7JlJXC29a6LbpC7PhefBjLxlPGduZpCy+DqabOhzT125\ns0Lwmut87Z18bkTv55sf9eyTceroWjVcANblddyN4wheWGHaaDQF0j77xjK7\nD6s1\r\n=2xy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/density":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/touch-target":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.2b420c5b3.0_1591632876914_0.4158174690281853","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/radio","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d3f8a225150c6043802040efb1239f4fde5ea12","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8fa22aacc.0.tgz","fileCount":36,"integrity":"sha512-AbVqCe9AHy1Nnyd4IlggLVIGBDN0Fsf2E9h8tfaKwaGRHU6nPHBNqKPV0auDc9bHj7PWIj2KcWhJ/PWkpfKRsQ==","signatures":[{"sig":"MEQCIEsYJXAS+nlnyzKYDdH8khIJlreKJxSSZMovnUlrOeWgAiBIaEYcLttJayO0302SIc16P3XBKWVD8DVPGGmTADeyWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2zCRA9TVsSAnZWagAAE/EP/0KsVbzHMqvxlu/+Yyg6\nOSoP+BMLL/qomwgJP8x5AtghR3tU+MxPPIZLoi83XOkN0jy3BVVr5IpydqhD\nc0tGMUTcleYIZLqYfZA0QXf8eVzl+U1mE90nj8UfLIYZ2QW2zW+DDFJZnCeb\nnrsWRqckTFS5Clo2cTutj42RM+PjhFx3roEE7jYHkkuP+NoH4zJES1xB4BVx\nwQ2fuIY4hVjBUPT1fExy5U+TlCs3Iy0cJc+zTrAWfBIX9CGJI/QZsFP3D7ot\n1bgLJfRrfj+3QtjB5snT6yUOpe9oIAHmddK1vVtPW+9m+ADQSP6Q0qbHoxRn\nOxACsZu158NpK9hX/Ikeog6BmxUXElPhaInOe4daqT3fZTEOG3eTaIxLQkI8\nT5cNTRN2PfuFSQa8vVqnJ4qcSXHXy7rMd4dfq1zjyxBjmmFZtzKIR1t4YlSs\nYG4U7iohirUBBtplpLFjYijVrb6gWfxj8/f6M2OpholiYheXIV5pmQzRIIxF\n1aK9yp7h2pbA99hV3vVvHDBUNmV3pKAtmiEmgpNYy0WZ3Q9UXZgCKhe4/0kz\nJHyw1RmFjW+0322KwSlrWa1DGQjEzlfH6f2eWLdm1PqR2gFQ3n4XlxlFIrQM\naJiUZgyZy9bPFb8xuHLhRIS1GH+zm5DNO1Gk5NG/EgsPv2lFSftXzB6MLfMg\nPG9b\r\n=if7q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/density":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/touch-target":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8fa22aacc.0_1591639474943_0.3544948081106376","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/radio","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ae12891ecd86d1a7cafe762e515f7d5a089539","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":36,"integrity":"sha512-zdYTfnMgNZfxEYbbctb7cmDzeckuSs+mUk2DBPerKn45i3Pf1hMR8GNGawFRzt/03CZS65st4qZJAqpRHzB3yA==","signatures":[{"sig":"MEQCIE1/A7ffoeMUptDQkR5jfie4WDUMvS4FiTWIvvjFwVlZAiAaY8KIh9A7gk0CzYem0nzR0dxuSN3A5l/iMZHoK4/BfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocLCRA9TVsSAnZWagAA+7AP/jLulT8WOTS93ol/7xg9\naQMOAm2Uj2C+KVqa8MN6TYlylvVpQqWr/37M6mrSBwRDauJy4jjyvrHJLhsV\n8BJx3a3OcBsQ4qqlx3XOzohdC3FZKSr66q8Z0itmzEeBgFTk+OmeIq+igV8i\nVLaxENr63NqcOwWIngrvhyzeyzhyw4wjZsqEP1niBfL2THleIKPyuxguUtqQ\nnaruhdArNmMQJZBOgu0KjWeLEroauA04wz4ema/ThodMwaD1VUti/B9IGn9p\naA3jE6gnMBerQRaewdWCoiCa10RWm9pmvnO3QQIG49oTGHuIOgNwG8e3Kda2\nW2scErCUdnZtlDM3YEhIxkip62zvLeE0YrjjxHrxzPCzBWgkukYotTvi6gVf\nNrBN6iJqBTrG7gcP8//EXLXP6v9e1XB/49YP6pwHbUncKoVoiT8PAdI0Qad7\nm/IMOHXRKlvLLzIJp6+hMXg3dS/BjQHcc+2vqBwjTyQLAtEybJGLE7UbwEEl\nnqKLRYexgaYpDz1lvXmSERBDulcCNVCX4yC/jzfPaO2ulMcy5oijru69rlvf\nSDOjp6R74EVwdOzpkpTkohPp6w2XCSqV+sq4VBvCp9adoRlcypKP8z7gyTvJ\nlg6OXRJOAavLBGvMvmC/xYY//wRaFUXrcWbNdQtqW38IB8efxBrrpruSl7Jc\nb4jo\r\n=CuKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/density":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/touch-target":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.21c4e4ed8.0_1591641867118_0.10071240251999858","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/radio","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e07927834d5f78b62be4b516642bb00186d2f60","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.dfde46516.0.tgz","fileCount":36,"integrity":"sha512-WVk0Zseu1KiHj3jg0F4NZ8IAQi52atRxDGpi/YSYUkAp2OA/0qHlZjXDjNo1PB1ap3nSc3hnYiKosAFIsoISIA==","signatures":[{"sig":"MEUCIBXEDD2hVnlmhLTUYXICBkZPSyYwVHvlOCSvwcD/ruduAiEAtlGk+p3+oTAX5vzQCrGeRnGBXD5Z24YGDpOyRgZw2MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSNCRA9TVsSAnZWagAAq34QAJIWUBXvTyLOgqy9SQtc\nmf2fSxIR/TR9PXQaeO2YqOxypPMW8RB/wzgjGJmdnqE+PPk1Z9hTdQ+S67Ox\nDwinqDglKrcNtGWAjywjPyV+AjhmKiAgot7Bqr9jspHltRh3PKJbkZsDwIIh\n4gkzC9oMy5n6weSH4C17q9ROLsl9DR9nX0Iaa1fcArcBpJaQZNWpgo88azgb\n5kDfCLz/dkd0W1WTAxr/xf6qxjC6r0oEjNSiQ+xNKTkR2gV83JaSduv+9kTV\nVozx/bKYZvsCt1SPb2EbJnCVPbbSifi9Jc2nlXLxYP9u1XyfGq/7lzW+AYeI\nyHvaZ4aG9Y2k8GfOVuaIbX+73WFUESs0+9S7gVtt4sAMzFnwSTSN5Yo9qOy5\nl/sAWgSXFd5ATnlUawBXjy7Ud/+WOl6VkpHaI25pp8fqSKlrzQag2WKWzBu0\njFCGBUQWqbAFcMGR4I1hc+2X9z6s2CIldl4nuB/wHhiwQ7sfeo+Ye1iGTClJ\n5EcmXGWp/3uaxtcpFg5l89qTetSn02n0pqwwH4i56QzvvdbYD0CYqYg153/w\n7fbxrhAedxFgJlfdPN4+RlgeCjFh9kxihJLTbS9H5d6Lnq5z4vrgnHvWyYe5\nnykdUHTpKMbF4NyA80TF28JGd+hgh/QQLyzBg3LvP9ANTvGb+xqSzzNf/jUw\n5KSq\r\n=l3sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/density":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/touch-target":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.dfde46516.0_1591645325065_0.1419044310427915","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/radio","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ccecd47060d9956309ca18580858e955dc03b8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.05cc5c206.0.tgz","fileCount":36,"integrity":"sha512-d9+FK6/crxi7UmVSBcHkGboR8/lYwVm7YwxvqRpdfTYVW2S83qdbfnDOjermfzdc0E5g3r8hSU9OPQvdgS6Ocg==","signatures":[{"sig":"MEYCIQDtpzb1XmiLQsSVOALNy5EEAOsoqnu0f1z4z/kycFFfPgIhAPXbCS8f37gEbtOSEZU6bKDkUmBqLkk1UTsJ0g8iYt0G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYZCRA9TVsSAnZWagAAOIYP/Rx5wF6Nfxp4rgFvr8AV\nbpLcEGY//MAcSw99IHwGgISZnoVOz05t8YDHMkKnbqiq6weGT0ESUCTLZD1y\nnqtrwT4jCOCy3BVn477HlXFXZmoPrYb6K48HhN3CYescN6VbDSCsw+qAxDdx\nsDw1uzATrs3Rnt0lYY4iq7Y6saL67Q3pMBDmwN1w/fhsj5iisHpzmtrNHZzE\nTWs0NoMBaSVknALP6z1garLoO3PdJ+HSZl7pFbLPR/awq+H8HthPH231YzaU\nzO7TociGVc/coLk7EtoN3OR4smGkX8Og/uJ5EgH0WkXqfY9n5VkmvBOsd+35\nfAgPebc2GTeH5HJc5zMJEfxZxIWyplOZ3W7U+lfCFiCJfICA5KUBYluU0FTg\nJHCcVz4aA9/1Q33GQoYSFlIntCJAB76r19y/1lx2kXJELA4kjH70Mftr6Shc\n+LNLaQlz3Fl3wx29SoTZxP2D1Xs0T3jZWXIqkDNbhlNdeYMeCveMaZQtHMll\ngJZw5LkIy2LXgTam+JJL07i05s8fajXQIdSRdQFB/tw99SOMd0oqSxmPuJrs\nYXFvrHWpDls7QpYOt2hY57eGM+qGFJ7/DQFDzUJa5MRhaThIjsjTDLt3HnM1\nyAVC76Iba8E2mT/3DEtYR3NBynsXiba733LylKMcfLCh/6w9kghb50chcFJK\nmIsp\r\n=uf3h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/density":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/touch-target":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.05cc5c206.0_1591649817361_0.8326618251903628","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/radio","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6719a3a4f0305d935ab4dafbb639507251b0d55","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.3ee488f1c.0.tgz","fileCount":36,"integrity":"sha512-CMjfrLPGz1Xr7Vc3SACfK6tvMp2ROImM5CFNO+AAW9CQcuOKE7dIFqh02lqM3s+RcuEiX4j9L3Unlr91WaEQWg==","signatures":[{"sig":"MEYCIQDi87tPTjooWkEUXzcBLCIu3yt/Mystlu1u2a3k17HEtgIhAITg3xRxIT797QxZOMF+yHzv2b2UtMU5CLY5zRVBkTVE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KRCRA9TVsSAnZWagAA8csQAIg51eO9ktIHzt8716ds\n81ShDi2jG8fmo8+oPOQq3mFbssfp2VrZWNCeVDH6eB3y0QSMDa9VN+HzTlG0\nDnvzYLHVQZOcKiuygA0eeSnjWbj1fZz/RsCL0LJCigpTQ6bCsRRc/ncBwqrx\nvHNqevyQyBunK55+H81Orggd3srFaJ5vbYZA4HOnAuQ2/VlKl2He/3U6Y1//\nEOqOSzPBXqz5m0+ON8yA8TPeZJh6+Is4IlO6h6XqNZQ8cZx4jcKbYQkB9nje\nn1nrAndnj/r0Z1IoJCQmIepYwUSHGsAdiJ/j44SO4R0JfN58U1ZsVv3dwCKp\nPIdKGjc8inIa1gtaUSOQHo9VVO345bg6uOTMKiVigFtl6RUk+RYKjiz15cE+\ntPGjkLWRNyWeCmPdcNgp+rEP4qmNH8XXWSFlIKOBduW0GOBSd3nuJXC/sXjF\nBcrz9hcPs1dNr384Ksj7lc4d5sNNFiMd1wcKbGS/Rmmz04IeQr2JF/b8GJQa\nJS7P5r/ewKtsBIDNMimYaNk7eXCEJcSGxPZ5m/NWKPv7SND60wy0kxCgHXpt\nNX5hyxD+EkNr1252+5pMozi66mvi2lhxVd9BLMfRhFIH7mpYzJWIjVEShjJ7\nIu9wX5jJliK6xZzl0/k0n9GUwJEeVPxpqnDpOYojeMrwCckfKPAifgaaS0rW\nloAT\r\n=lC6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/density":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/touch-target":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.3ee488f1c.0_1591714448979_0.28526431657235163","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/radio","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5488b2c960bb9a2ce9c7cd6746371d97292faa6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.b83d720ee.0.tgz","fileCount":36,"integrity":"sha512-zxVuQwufNpB4jlsBPlk5CLkTfiNPYLCZysjiF9Cqj/Ewr4PazN4yGVslBgLNTWLR/yIQ8pC0srgjlYgYIuf4xw==","signatures":[{"sig":"MEUCIEsfGQ2Q5njWOR1qZRb1AYsmsYZfpsOzx30EzaP41tslAiEA6j8tQ6dKN8BJaKNvRBgNg3Sg5ttMWhVZV1TOLvuqa84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38Y7CRA9TVsSAnZWagAAGg8QAKMcHNVXYYeXaZt6Ho3g\nOxVSzK6dTA4krNt9q9RoQPAsHS3DK/V/s4CXBQNfGt9wFUJWbQeDmlryONay\nmrOhOyTC4I5B22fhnK16Mu8QlWa6vplk99db9msfqAgvAZOJjDtjFToMzwV2\ndzy05F4gpmUcNC4xQKu1j1+KjeUNeJFqWEhsf3WIyiowLFPNN634wGA6kbqz\nrGw3SYlZTNgN0pXx7StIXslxhNsV5YYeQI/krmoaaGpKrsu5nn0R2QPtWYUj\n3whwr6cZOpdWcNf0wPMxOU9XIZXOBqW9674i2EY/+72nAXBIQ388n4UhP3hH\nZatexZBgfbtznghMvk6g0iZPVm8Qzlyxxxx+eMGFF1QTxo37kCX3fUyQXmcB\nwjCz06egVBo4b95hDlSfopQgTGbUW5U7nxFk+9bMwlncgtbZEVMkKL/yinRM\n/6nlWQsy/THw+51VscZI1tjEziT+MIWjdSPrKW+4eyVojYLZPVRueerU4Xuk\n6cEFOzZXZnr6LiUMr6swGVLtLDfwpnk2rFEEeNLW1sx3bBs7IDVF50MCTAXG\nQ0qzOQjIPJonkFg535wRa+CXG17HD8LxiJFRcax6Va0XOqBrs3IGZM0NBgj8\nn6zIyelnVcAN5I7bAopX9kKIc6y7bdmIumFrJIrW2qUY5VAu/DfsvmMfZdJj\nV1mu\r\n=Dfb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/density":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/touch-target":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.b83d720ee.0_1591723578506_0.8625723771789335","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/radio","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d478f7db9db4a54625219f3ae9aeec9a9afd149","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.afb1c11a9.0.tgz","fileCount":36,"integrity":"sha512-aOujsaIaMspH0TEsPLGAUXilDFxSU1nlJ4NAK/DZbSQ1Z2H2KRaGLnHzNIv+LJy1rcmpBY9pE+Y/tY6/sZ1mUw==","signatures":[{"sig":"MEYCIQCjoC8tnK7T5EBZf4H++Ym/dRTghQ/Xg3ZAilsKvFXNzAIhAPefPrzS3rqz/iLsQjj4cjg88Ewn0LLeEhsH++up7z23","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4gCRA9TVsSAnZWagAAFkgP/1u1dMIvmWy1MLbuPH7u\noGGuw+TE5F1ds59NxEJqPbnkBqEoeazpnmniKJoRvpYUz8uf/GkOamKSMOUf\nAmeK4nyDsLB+v9ByJeCDyfdURuA6Xdg9BD2VLW2fMJumZwkcLWf8muCjnCE0\njX6c6s5DSIgLa25hFUf07n88S/pjMpakgAyEzfg19/CBoBdntGBcii5XeKSR\npp9K34JSfqDCQ9h1DDs6vAwZxQhPxH/8u52rcqRpizxgOGToxzHANpaLPkcA\npIribD63l9kThTBeGGp/8LhwL0wP4pJRoNP9yal0mtdbQIymWjPqd+nr2Lqw\nZoju2nQtb87gc0LfX/0aUKZ72Ht3+o/rTsNGN6/Gfh2EAR6TFHlVzmR0fXRu\nxN8dHkCqvko6sLp9ePfOU+YuWiwXlJEn8iTl/vRT5JcrPB64xsrqy47UPnxF\nFFZ3Oi42QYVQxRZaURFZuxULd8ZT1Q0JBcvdQLCup6Xz9EjVzu3K7G3+JqUu\nHv2sS8jiPDVxAfk53ZQ9as6Kh9tm/jiYmvwBMQxviwDxhL9KJ/VF2+oXu3A2\nuodua+6MbXVPqKxvROSwgfMqXYsudsLI8F6S06C6xFQULxCJwvUmmWcpB3ab\nqxULbPxSyJ25W019mgyIGD0nOie6DdjjmT3L8u6KZIQHSFXxhVi41TPMqO20\nQCrc\r\n=QO/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/density":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/touch-target":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.afb1c11a9.0_1591733792060_0.15821900783521414","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/radio","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c04fde59ae1e0bb427ecda3993524b81cc6a0b0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.39e6f71e2.0.tgz","fileCount":36,"integrity":"sha512-2OQc0Hmdig1UM8DzAIhHrC3Og+3SWMCtzhLmjT44MR/RnVR7MNZiOLhmAheDTuk8Ag8lU+uxJP3yosZVF4oWZg==","signatures":[{"sig":"MEQCIAkHYx+7rp/sPCBAoNYpkqQ4rEKqE6uCEHBnev3M1wGCAiAzqtAG14XuvBH7Bn9aCwC/FvrzyB3mISr3UgWoA+pV0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B24CRA9TVsSAnZWagAAoswP/3G/Y8Oavj5XpNhs0LPa\n4d7UhKtuhIqg8a7Z8K5v5hG6X7NYXUytgqdMm6pVxyO1vLkzfq3bu51mhj9o\nquKMlVQ+cbETKtMnQhhm/F+/VL80vnqES0PnkKau6his3JF4hPt+DP1QVcUH\nCe7M8oA/rf1/inaion4yM6bplip26tICEl9+Z9M/jVsmxpTatkgQRcICtP95\n2iKFGov8UBCL430376Q0bKg9Y7BfjEuJWTNJWNjKg5Q+CVpP32btLu7RSwHc\nXqCW1Hp3HRjrMNcy0fPvR+wnKZ+3t3KXBy+YgTthApaiiVDuDhFTfLSjGk9O\nOWXlBBpYIUU7bH9zxGFMEvAZifiz3QEnysi3TF+RhAxmzgq+Qx/3zDiCqijI\nUiIOLcFRgGebzE0r7fC+y6JvuchXp+VrDOtIlzXooeFYh4lA5l0Mj1kQS4G6\n+RokW30IgFRpWOMrLi5X6rqP1Ok5Foj1zhqo0Pty653Mxe+XrpXGGq5PPj1t\nirTDkdqQG+dRw35NY3syBN27R/j3WK2XIy7TvAIESUYBCF5w8AWR4y7BjmNr\nsHyQwYVSxWz2EVfSbt+fHM5tGwWHx401XljJeOfWQurf4+QYVwiLDOByZ4Vk\nRjLTnxudCsqhC5M7d93W4dBTADK9/CplUX/xIIs1ldddRoI4kEiomTo+q/2R\n8Fz2\r\n=UnSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/density":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/touch-target":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.39e6f71e2.0_1591745975926_0.17555238730807754","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/radio","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01b3d9f83f6fdf4a059389dd29020aafd5b4874","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":36,"integrity":"sha512-EFsogop/Isc/mv3oPd282pluyfryhl3+jjsYNSdN2gu3Y/DDQZBsuiHv4ER0tvQfMqk3n65FfdRTtLZNd+LQ9g==","signatures":[{"sig":"MEUCIQDOpGEy0MlJhTig3Y5c6TT4UmfPHksl4N4t4SZ5Elt71wIgXq8M/u84CoC3+JD3INV2P2ECkR3L4P6Ne3MP7Dgu5CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m34CRA9TVsSAnZWagAA7IgP+we8OdFWL9r/QeQeznO3\n1u4cmAEzQCLpx4Wk0STaDpl4KreF7ir/UeyntSTdHo4K5vf1MhE9xBedeuNO\nx/xcldg5QTEHyu7xeB1risZ8fo8ALElrXv0w1X4QB3fYGh9/lcLA1Ec0Zm99\n2qRaOW4XhblVoS1fCmpRG178RPOsZ24oVC9XY7LuaS1g1JKWHTfRdczCcCln\noNLEfC62pb5Z0Uh6R+O89EpWjcCQZ1THU6LdxrG9fOoZBI7TG8rgdVZJXOqn\nWu+tX5F02vaHdukwKGWdkUYOW7MalrnLQb1JxPs4MQfXeFM2EqlHAiXcjTGY\nKtNWut+H8KYH2MFha5kpUzhlDvgGcg9IvyTmG1LoPLvYyULoJrlVKV1Us/5q\n5hFHilE6g9Fs6mYhu63aUeLxt9yWJRCxxsZ/Qkt+y9TSBRLl/6fkGNCmzHin\nwBVOSyTgHMlHxfMuxQEICVzdF1K7JVZba4a6nqmNXTu2VL5G0hYNUy4VRuQN\nQWsjjSURSZxg65+Z9NIR3rSNYhhHn6fg2cbn1ZOMm7QnIp0IoxZSt1w1IAxu\nW4YxXcAQQxcbbpPnTgAv9gfPsfl42D9Fy1ScwMVsmEk2qvvgH0LlAWDDR7j/\nf8AHNFhJr12IQY19kYmiFx8wv/grbS5g0Jr7dLJfAebXsQj7iP02Bthfc6ds\n7tbQ\r\n=izGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/density":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/touch-target":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d4c66dc7d.0_1591897591801_0.2986346005413498","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/radio","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03c110e5e1f74efd28c5cbf116612758ec575fa6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.be4a19f9f.0.tgz","fileCount":36,"integrity":"sha512-fIrcflJasNycvA+8A8bCJj5QlQtCZFTuyQCTuA6JosJcbmxLBrctMedQbDXq4SvXNGH+HobE3IpCQJZafoJEmQ==","signatures":[{"sig":"MEYCIQCTFPRVCCn0lvybYOLpzHc3HS+kdaLTwsF6Co8rcwFpUQIhAL9Tr/s70Zztm8NnUoxyl2DEsvVvWuZYheWDvzfcVpri","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvcCRA9TVsSAnZWagAAk5UP/06KCQqy5Sc9O3FIktcI\namNm188cTdyBV6ooPi7Y7c40Y9pUbOHj+lSeANbSSiPp4ZpDnrLo3kslt860\nFM3I4V6CMuFTqSVnWQ/tMf2tLxDuzoGYZRdmg1E0/Ds+TQtZr499iC42I2X3\n2YHK3e5WlLSOxZop9RPFz6hRwbIu5mx679cX33jk86SiUhnl5+V7FTxxpoe7\naVXu7otQ/oi1oDQlRBGzk60Jvo1SBc0mk3r4xx5VuEbYqeFPGSypm62mZ76u\nZv1XRwrvpLqCK8jJ0YryWiLDSUsGpPaFKyunlH8H1IlF8j1kIm+DKCUbw2Gl\nviUQW8O9eql+G31Ak3PjUDnyDa4KdHqays7Ns45KqfLVpI+GAlTP+2qw8yuf\nPWxW5oCxP2PJMJ1eJ0CPlsCrjg+dlzPySkbo8ltCdTK/LMzJNtcMQQCG4Nlp\n4qpPC5iE1CJNe7IvMoU8ndMetVU0YoavtPntJp7+qdVNyml8WFfHF+7bCSEb\nCkq4bT8sqxoW048SMulY4x+WzktBH9ka4bPyWy8QHhcv7kir8CVVCJwfcI9K\nXQDm8XdGGin9N2+iqZVz35eUX4DwXeY8AgGz5AciAIsTV/L4tcxzakEv3i1O\nPyYwg6XI1Yw6Enyv++CxiFPejyk7w3lWd1w4z9ZEQ6xAegZcnpEciv3ObSfP\nAtap\r\n=KpfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/density":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/touch-target":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.be4a19f9f.0_1591942108042_0.07595208004952836","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/radio","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec39e3a37b51d8c265d4002250af068509eec23","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a6ac8f629.0.tgz","fileCount":36,"integrity":"sha512-DGiqOsSyGxyQflSzzUn+ADCloEZsnZI9HNX0JIXeg/oW3fPwlvDQg1UZLToq7GQGBap5usJWo815O1nc3u5cDA==","signatures":[{"sig":"MEQCIAndkzCWkihI2XzEoswGSeM80L6czJcykI3ZYZXKVuweAiAal+gFq/Z+7ih1SsOFsGKFsE/86udUG8lqR1SP51KFNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iHCRA9TVsSAnZWagAA32cP/iEgm1qeSPZcPfOwWGuO\nkmQQ6QbGLbYX2Za9KG6LjtFibXrXfFHMU1K2FbmYaw8ZKsaV0x/FKJAHDtR4\nbbzknco2ohh2BMjzfLYBtGHllAB6nLWhwwYB9EMzKJpwLJ/qzSO+KxsoEDod\nslKwJ9Aynuf4DIonWefWVAp8M/OVo9xqX+623O782D7xoaHL0aOZW3EBgvXc\nyCYUKYbEo1sEGqBd4Nt6ANRAHXacdDM47nh2lPj/fQ45T4Z9gWiEUWMiS3nt\n3145LIxoZclBWXLkrvOzzn9r3ZKA1G6ONckehepOeN/nxW21CTJXHHgaNTTa\nsdDrhKRHB0RG1O4aZtwwvBBngCPvN/8J/lbBW2ILU+18cn6CrTF+3+gvXc0N\np4NxYwzoqZpBO+sazrq6UQtp4h//IaRMbvmseJKxss2K3s8kGcRrhNGVaQTR\nRb3Or5WK5BCQsAtZo0Hidcsr/HWM7hZ+mOn6DCyOkXGSYpn/S8fp81kcC7CJ\nxSPdTUKDNDxmEBsdpoLxxRKGmY2GaBidZCC5fizwqBpa9rGeO2qnH09KF8Zc\nhGiGoNDWzVydcaqFzflzBpuxV7y7AEymP7AZGPALXHAV7KTxQbiIWfudYZcj\n4iX7HTBq4RBIcCnw14MXSzSMX6DG9jpfv+XfvSHXQOYf8GGVaMy5ODYVj89T\nXM8M\r\n=0WpA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/density":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/touch-target":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a6ac8f629.0_1592256647084_0.7123237720556646","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/radio","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d8c675bd4b0db4368fcce6d8bf5a3f6fd96470","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.9833dc287.0.tgz","fileCount":36,"integrity":"sha512-qpBEnvR/7wUbUWNR3DzUJLkE8VsL+8XStdkUlYArB8CYoq2ZGUcew97A/N0t+VtF8SVBSUmUB5gEOAMaWmBnGQ==","signatures":[{"sig":"MEQCIFZ5RI25PF4L2t4PPysBRFzzqc9H5CeNXTedrY8irSCKAiA5QlqE/4/h9pcCc27GmIEwYowBo7x7R6E5wZiQtLhPjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJHCRA9TVsSAnZWagAAf+YP/RgKWs76x0Wp6SyTOcx3\nEN7bZJcfsppm7eX4vS6ILaMYENG3UzBNDxWV4bqUmop9v5Petu94pPiYYKtP\ncAyErXNHVxzew4Ge/CVTxQd0o54nyo2Mun3phzEiBdBTIFXEKlQbgVUmk1gE\nWaK5yr/BlDvac4iA2TNJ2YlFZMlSVIggQFOcOnJKE5zP8xIl1aralT2iCeF9\nQb6u03MO4rfp73JfhgSvRqxgYIWF9ZzeW2vINMDSHJaTXqYGNNKqvDlrUXtq\nGwtkhbqsADIGCRVvMM5baEMwWK9hXo0fkg5sQk9RZZIOLvws4pbxqmOsXWYV\nAVcLkApS3mNi+/9eItOpcqd0oIvh0HIj06W+yVj7LeHIgfoSwvOHSVz8/P/N\n5A1L9olAmUZESDPUAlD6jtv/VL35uL8lBkJqeTLv/0SMn8AJ5IBjA3oEzPMX\nZh4MBSimTC3jIVN9/bHtQe9lMBsiOIyACtQLStd7MBdxo/U4Nh+mHyVDXJ/M\nJSIpDe5Dc+vY4/fheXbKXMugFd16+C+Y8XCeipmp7alXPQ4EbzncFFgDx0zs\nRLOkraosRXs9yfcmQIYqmjNQJJIvuu34TZTxWzzrkmnOXTYuYF/AwAjr8A2d\neDTP2dR4vGLnUpsHZH81k9iA1mXMpNi6gKiCA6/UpVczXXDbZYLqudQp5Ax0\nx2Jd\r\n=0ymi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/density":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/touch-target":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.9833dc287.0_1592336967151_0.01629721224916736","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/radio","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48efe80984df328210404d0204d4e6552cfd4f8a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.3aa33998e.0.tgz","fileCount":36,"integrity":"sha512-JQqDJ7Dz5LGahAjbwBnFSoKASdAOOdF355SBeIlVmsiL/MerpiKZjNm5YZvW5Ahdnn71eqvR0MnIf0rNdkwjTw==","signatures":[{"sig":"MEUCIQDhEb7Sa9IpaR5enx38LJpqwmsZnqiLCbxXh//as2XTVgIgD+7UE2iZxHi2DYDeC4PsDnDDQp7UH7cFAj/LnX51S9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sm0CRA9TVsSAnZWagAAn6oQAIE/VYStk6y2KH8e+stQ\nQIopUf2Ha83l+sd8YRY2gPOdH9GDVxFQ8ntDS43SUesxsNF93/wkgUSTRfIA\nVT+cGyj/1u0O4mtuqP/H9RqQvFFPONaVKFH8X8TLDZlScYNebmJ8B/THgTzO\n3dLAg+yHvoFR0KwIAxvL2360KQ/JD5h0SFlqZv/6nHfK9aJbgGGNIhiLWhPN\nL6VGqPZzq2P9IMQ5pfJpVKx/CTnmj4mz6Z8Yf44+ru/V3pAtPdVrMu4t0SmL\no7crZkWoC/K8qNA918isk6D10HzXhnuQnqvLFXnmRS1OdF/fV8+J3xnbqt+R\nIP7xPLCUMCEiioX/if92FM4RnCsi4ZGjrJOkJlj8AYJ5C0vDwgOVxAjabCNo\nwIrrVnOL6hbZeDeARl7VOVAbLeR/8CKZbdhUUjlAK7nDEUmrpZBEzTzAAvm4\ngyNaqN03P/yuMnlf5LlKemBbzD4Yt3shFbS/1fgzTGEF2KvjeRJRX+piXCXq\n+07xkOktBidsm6g1W+REH5fxMF2wA9lpx2LQnr2w4ogdCHTfM7A/wjyN1W0s\n2uuDn9/M+BpzoZG5uc51HICv1+HMXC0LyKtTHPE6ouc5sw3MgOQp/N+qiwWd\nfBztYeltfMPfEmXiBT844Z1vOhaGTiPHNYE4Qtwzulf0OSInaah2TdHpvK3x\nFM+b\r\n=ev2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/density":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/touch-target":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.3aa33998e.0_1592338867642_0.11664001252715761","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/radio","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4cbbe207e8bc3558421599fee27d55c8bd5ace4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.d2b54d183.0.tgz","fileCount":36,"integrity":"sha512-3RkJBHbig82kTIBpZfWWfyXDKaJOGMvFL8IVejOvFg7Kvpm4otTuRAOZHpxUR7BkpwhMrkWr2KYH5PBx8LTGXA==","signatures":[{"sig":"MEUCIDXhe/0+kI0iJLKmp4jMsgBu9Ucho6NgrLJxic6OHFPmAiEA2CYvvpgasSEulW/vASZ3uGuCpP3qcxdABENxRYekeLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBECRA9TVsSAnZWagAAmE4P/2vS3X0J+00ydq4tqGSU\nPQ67oYI1fM3SIc6l4llLiIcQcVFBa82voH/yUXMY53L4Ew0AeIP1jQvBmruP\n3Sc7Afh6cl4eqNuI23AQM0zCSXyYsdVS5V0cKqfuIaGSITWVlQoFvjfvtzIn\nWt/eI2g4zwSaDJmmgnG9eeKjtFfNvXbLUYVbh8PEkC1xvFai32J41h/z72i9\n6liiwXE18WwhSm/DZTaH74+K2snPJKC9AWegiFiKqKT4+jWAW0m78iD5sdnR\nUjFU7Fm+F9zdlXo1F11ujDLJBbhCbVgwUp7xgoNUfsnnZ4La5iGyCUVfv8+d\nH1NrgY0ATkwnCv8NZzOjQKs2w4+QEuMwHswQXpocAUgrLbKVymyq3FcU7buv\nIiM3Bohntae+6jkvtR8pNBmlVUjeNRqyLpO+wpsymJFHHFljzS90NogAMdwL\nudGdkvaaHQ1DhuDN3IrWG8pLyWHD6NpXPy3utS07ebiTAimmJWRS+BWpisQa\nMjLXS7RlKv1iqiINjhATp6QzxXbuT5NFWuZkbulyvRjxCW9zjaLzbdrP2AhQ\neOCv6D4oGpxV0IqYamNP9aL5ZxppfSDAazYc1OlEbWp9/KRHX3X/IQU38d3l\nUZw0i6Hgvv5D/ydZkxnF0BcomBJ5ECSiIbY36vdIBbxmLS2rpfYT/lBWsQdC\naNCH\r\n=9Of0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Radio Buttons\n\n\n\nRadio buttons allow the user to select one option from a set while seeing all available options.\n\n## Design & API Documentation\n\n
\n\n## Installation\n\n```\nnpm install @material/radio\n```\n\n## Basic Usage\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/radio/mdc-radio\";\n```\n\n### JavaScript Instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/density":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/touch-target":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.d2b54d183.0_1592442948187_0.13415883050557342","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/radio","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb7cf534246b12588bf29627df3a788bb1794c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.f2a488e95.0.tgz","fileCount":38,"integrity":"sha512-fU8D8BOcQ4NNKhLEHSY0+xvDQnXcGp35dO3ijNxZ8egJhQCS5dQfzOhklaMbqIiOcnwtd5kOAoBUvSTOzolyJg==","signatures":[{"sig":"MEUCIQCY8dugL7CKSud7cOXHbXq/NmX37uQt8fdpgfpHYV2QKwIgVNJ/xv+qhXgNzRdQIk1NF1dAPGRA7XWez4pEGw+TVTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64J1CRA9TVsSAnZWagAANGYP/j7ysI3UwHKSCHac/qxj\n1FPpj3zBHiHc/0CvepMQjzzLsyzu0cUtuHS/R1EAl6+FKvsq7a4k1xeO8afl\na5u4tE7MtnaSTcuPs0s2Pxcsf5ErVgH06hVc+j31pEe/sTcY/3f+SbgHWobR\n7wioH0HeumW7fCkYDrKCMDjPU+uUlsI9C3J2AhzGX+blbyDhzvy6IKssyjJn\nNBzD672OmjdF5IwUXHgrt4xIJ5505qXgsNHjtSZ+Enc1cdr2jfyVzGwljVu4\nP5Gzgs3bNJevFA1py18wA6G0CZ5mgEa6EWdWsfFgl9BLFh2NbvhXHsMRAusJ\nIEFmlwF7IyGbPsQCv8i5uiWGBQcyHVBI6NDfvIxOxgH2YyH1xu1yoHbOny99\n30kDPsgrMOZTNNm9Bw0Un+wVrB3f4qR+D/943bGGkmDFffqmYp74vjoSD8KS\noCp6OBq+X46Zxw80OOxYAa/Kl1BGabFEneTJO07Mz3au16WQTBix9tVOYAKg\n8BPhVJFxKpscQYvv3V3vlfzMZJj6kSphdNi/ZqD9Xm2JfYjSvmddBFMmZ2/S\ndEVAITSd3+5pT6UzaV2DgkJ1S01e8CiOl09VrI4ZkrgXs9KQKBEnoESaA1vV\nT6nmrOewsqZroS8i6KyHoe0cko3V/T8vgAboASKJAfRq5zr2d2JEdXgrShFP\ngPER\r\n=vMra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/density":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/touch-target":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.f2a488e95.0_1592492660414_0.44711435208305983","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/radio","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f421d2d5429763bf3745cf626d96b8f41d61c0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":38,"integrity":"sha512-qM//RKB2YkPjZLro4IfM3LErOzZbSAf9RIjySAwsGnKl5QlBcFHr15fxmENBnugmxGD9zkXSh5XowUK3kKVnMQ==","signatures":[{"sig":"MEYCIQCt0XVvDWtDj+OskzBgvW7LPIg1RSeCafOAtKagB/owIQIhAPEv4edL+tI18HIJUOpc5a1L/7CqsIc5tHqevh+g3FX1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VACRA9TVsSAnZWagAA4ZQP/iuTDJ3sAmA8r4hjr6xd\nvrGSbqzp0zHSx4U3wt555irI5dq5sbg55o+YStucDoJVCHyuGXmSJMFSB3F6\naz3iVdmn4hLsuFw6ToqjSM5VaHbNjZh/QMbD8zWc31+FKTvvje3o0TZdvXZV\nSs0GHp2MPivg6eDBeEJLhZL+3PVkTCbwhgaPdRNTDlQG9fIXHEKkFSN5YUf+\nTNjxmYLm0aMU7Elju3RRvGxwsZi0QQ16Wgk1wgm6o+BNm0Z8Ual0ksOhpZsR\nh2kv30Uh0DoBw8Rzi+jb9Jv9EzuxeCqVBkW1tFqauImgENoSXCUn/JiE5d3H\n7CuyBQTXbUL4n9y9PQ2NHKIgL2L7QnDkK30XtjBCTbRnKXe6lwP3kE2n3eU7\nb/8Dpv0JUn3ChAd0kSowQJEpoFlJK9EX5CLJSjF96xMw0PC2GPFgTPzq8kTD\nQMgrZuEIv+qGZA2a2FOahg4XmgWCHBWZ58yJ1fmhjhwVADh/DfUibb1MiOvy\n+5wncm2Gd5NFd35L9uZDivT1w8lYiQIrLYw1Lb0AILnlo+PREcE4nMS3COpP\nARq9qIPfiemF0GJasgn1PNDMuLbrFsnydN12Ra4AtaIakvfPRY5kEl2m77by\nizCpWLzaFefBW74+2r2jxjQis39APnc8i2xVrYaU/6mhP3yPEkOo3ECMMnJu\nWN+m\r\n=wERA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/density":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/touch-target":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.bd8d1aafa.0_1592493375644_0.054481556063489034","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/radio","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"278fe74770725cdc50b01cd246dbc611d9f373a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.1321eb968.0.tgz","fileCount":38,"integrity":"sha512-KzIcFiZbcEr/Dkj3s/KceAUGac/XgWmdNEuPCiuh5BxPokPgE3maVLA9vjtIY0Erz+dagGndXjrWQe0EdIEGSw==","signatures":[{"sig":"MEUCIHjg1m8mOzkE4Ih9pqwZkbKVTb1F2cvF9t5PJbsC2FTaAiEA2bcqeg5IiYUD7rwqEyUL1yvcCy37DzlyvUxNHsf/86Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAvCRA9TVsSAnZWagAACNEP/jMoWXOhBi9o5CWFxBsI\n4Z0W+Nfl5HcYIBjC7re5IFSkkbsoDZY3QRF3DhIzbwvuMHGd6aGhmToRNz2I\nNn2zCYE2lOblhur1ylFU5RQqYG+Yxd7cw6bdypypvOStFvBbaDxq8gKH92UP\nD/Ecm2UBJR9OrAxu+vR/+H5tU1NIlvY4EWqQHNZMrPCzIyqnr/pvz2jqjZvq\nEQEdSDmH0rBz2rLqDlQN16sB6l5lI0ynGsJE0Chu7ZQUMMO+qu/qV0mmF0m9\nFlEH2by6SlUU/qw98Xkst+Tj71lkIohHtTyiwAfOJKAaxwbE3q8Lfi6uP12s\n4AHb/NG5I4sVqjYr1VodzIx8GZC2LXN9rHTvl6+s+u+lKdBn9dGEqEV9syee\nXvqhAmGTRfsZJvrwz1U+UJ2fne1a6FfpPw8d/CtpszhnqKhpXTi8PBlnDKLT\n91Hz0hGFdGnXXJaCgOLnz2/0m7oydRFTleuVTZi0P33IGHeZBFh0GpFLXZ4z\nwGOfB1llNZUpvIa8T52i2jBz7nmLbw/chM8a9gnIGarNE09jWZVY9Pq9Umwv\n+NwnlhFwrLROhNPKW6yzDqv24loH6kusRQIya7JFW707hAqgZWMk3nFkLLT2\nJnoRMLrrZnyzUvybT8L8Ukey6YnrTlpnDQlLLTK8GTmqo2ei8FSaaxZyaIGe\n8hxL\r\n=fXb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/density":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/touch-target":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.1321eb968.0_1592594478648_0.6930938477031201","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/radio","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43754641c90de8a6ae9ffeea4b65624abf118e84","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.db5cc0382.0.tgz","fileCount":38,"integrity":"sha512-YI4Eqb8hiRfFWTMbKr51pk5CwO2nhV2J/Pv26c6lu9kEYlxoiELHwhSokPpdUHsa2P9XQ7KuSf9mZlbI/K2Z+Q==","signatures":[{"sig":"MEUCIQCOKZOv7Z11Dfe8qO/NnhJ/GhkvwiI/gIX1xPBcWNanFwIgIpKUfxt5Rh5jSG0I0J9dPuafxruQ/um8a2JYwHmVNsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RG3CRA9TVsSAnZWagAAdgIP/3mikMXNZc93TQmYqK9d\nHG4O6Hg8BEOt8yvq7qU2oLdclPRXpHQh9IKKcFsVNH6uHchk7HBnkka1maDa\nXphJu6dSVk9uyPSFY1kqTQPolOc7Gn0X16lyQsSPOW6QJHP71qCM+hrFMe/A\nlu1hII7EeeA3PiV6/M7+C5cTYfgo4ihg5ADCzOvgxJkg/V2oZhWINIAmrQwd\nDNmo+aMyXJ1he70qQNqxwgN05/u2jDuXW6QMFYIy9/ff5H9xKRon8UYlsmc+\npiMsz9FYmDI0doprcsI24/5WVAdW+TkyqLvFAgplvVOrMq10/1cb8La2Nv4t\nbYfK6WNxMKzK5rOEaAWBlr8IXRiiOTTAN0gJJVo4HPt9JufMdTSDOMwPT4VR\n8YjqbJH1zhbUKzmrzP3v7WFbfDMxvUIKmpx7COZad4iPSstgt1QFLtg0Ot7n\nHTFWWT94fKagtxjQMTV7YlF2jDP6jKtKCJqwWLLQiMAO8WDOGTUGBzEJKyBZ\nVV+fG6Y8vc0duhH2EWsF6hxwHltMrm3yi/Kvlji77oDFGSCype5bJPm+kq1R\nC5hOdtb8WhVDnZmIw7I2PDRpGqU4+fylEw3VqCiB1zQAO16YeVo7hrU8UntW\n9wJKF2kxrQuroamQC0c4r/bNKZi9KT3tfwnWnDEfIpeDM/+ETC43j9BshIhe\n9bZc\r\n=LS2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/density":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/touch-target":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.db5cc0382.0_1592594871378_0.5539125213472862","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/radio","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bcbb55e1ea65172e3168bc281dfdad9b726cbdb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.6ac9bf031.0.tgz","fileCount":38,"integrity":"sha512-YaXxlc0EghwgkHhAs3C0zWOC/HX6Eb2Xf+IaTLxOIyed66dmwnsbkH0y7M0yTfYv7KCn0xR8H0yyULUtyYB0Gg==","signatures":[{"sig":"MEUCIEbDch9RWc4c/FlcdjYWExg+b81MgCMpTiS4N0uy156bAiEA1G47HnUCNCcVW3JYkxFefzMGvOkh/a9NhIsUlHZz9Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZ8CRA9TVsSAnZWagAA9BQP+wSRDtgk/Pw6ZhWZKZUv\n+x1OsThxdqW7gfTCMEEe1aBU4DmMpha2WON5jwStFbu4qrGI35UnrN2bWIxO\nqyWPbJfg7lLREjRboJk07vCwYF7hkeF2//gRu30U5iNakZwa3tC1BncIfkWg\n17M9Rav0Mgr9Ti+mA6iaBw6muHGgfgcMc5LJyafobb9COcuv2L75GR8rcxxQ\nMTkYcOA/YK1wlGPDEUmB25riC4kkcHqokMRa/mCMfIfbNR02dCvveoUxi2xp\nkkqsJb0nFUC4KM6iyunr/RhD/GNjwY+hcI7j4H5Vh+Yj0EOD5F9VkJv2fEMZ\n8S1ZcfwfaxMIvw5hRf7l3ROyhPvcI+iPVwSG8CP/mWfDgkY+H/SUrtC1rNTU\n/mDq7xTB5XxCHffPErue7JoM1Vxs3QMTAXeYKvoNEX45I9roF9E8r/B/Tcop\n3CKHIc65e8ktwflHqS7zc9iBIGTrs5tXJfIc9W/lQ9UpGzuUZ2NW8s6OhSii\nd0+7uMjI5hmGes/25GMUv3ifIFMirClyFmPOrnWUgxeHTdtfpW8DIUljv0vN\nNfEEpjPkxUmNaqbWl2gYzZXUCejzVvqpBDcFIG8mao6yM8zEaqFkjw+SjOql\n0/6cKsGLy/kSnhVXbx8hmqSXgcGEClTcW/4Us1wTdHirwbk9bjLxCMw6w+9D\ns5qZ\r\n=vrdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/density":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/touch-target":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.6ac9bf031.0_1592596090541_0.005502442431194909","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/radio","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8400d7bd07bca635cda8566316594c379ff48bec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.c21b5c367.0.tgz","fileCount":38,"integrity":"sha512-N4iWMwJxO2Nbzl/QZPrB91B4nmVOjDksAyYYATYXl4HbjneggwwSI9T4Zo+welMI/32LYhXl99Qra3qhaXI/7A==","signatures":[{"sig":"MEUCIQC3djcUnMA/2isy9JvkCoUPRKE9Fpv8Ml5xCQUWLiGiNAIgdE/X44gzlGxEsC1/SA70j8Z8BFSXi8FIcZpZw01Km4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvACRA9TVsSAnZWagAAbNYP/A90QaBL/p8xtu1/Y2s2\nDcJVJPyXnqNy0d8ZK/BCq0YS67d7FqlnL/du9AV14Z5M1IsT4eiKOGxZb8cO\n7Dz3ShDgNdAzajozwX5NbEDECjhqsOigKNA1suCL9jISXH5yXUk3UdEXwZzX\n9rv3l3y8eDsyVRucGR6ZPI3S8/qI/w1wELQIQ5QH7InAr5RNIQ8VXK6TXNwC\n7gAQMB1w4dcCeZpGXDy4JgbR+b3Ia6WHXsLKiNYK+J+wHmXmSbX61RwuFa0c\nM8A4TLeHrv5DakXDi8NWMgpLiM5OjWLbIZ/GL4BbU2IXkSCgiMI0Tlk6CU7+\nWP3UyH1b52gGg0PHiC1Ad2Ivzh2wgZWqDSkYWEWpP80Zms47nSExuE6bWbpp\nKU+BqoH0EdXh/By0h90ziDQ+uhzkweiltZGph/jgQoUrzl4kizg0G/F/2Utc\nYS9KnRPT95G1Uf0/MickI9AhK8588NSI7ipjQb/QP4V1VkB0dFyBOTuZqw4H\nI6LulX5NOj92Ftrqx5oE5svCqnRzMFL21cPQ9sGzpuJHwz9s2bFk7O81tgkO\nXzFfjoUkl8khfSrcored1mIWr37DVvBmnig4oXhWAGIIH2oQW93U9eCjw+tM\n0Pz/4UoZlPAZqSRHQzGUNXWerveEg2tKbC876ikbKM3yFlPfoyjhlkrMPcTH\nNRDR\r\n=kxRX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/density":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/touch-target":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.c21b5c367.0_1592597440067_0.5659791305673199","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/radio","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec818f4acc3b471ae818c7683bef724bf1dd64f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":38,"integrity":"sha512-fmdpj4sxOIz1DEtxJ8uNyLE+4zwTKp9U6D+oDfxCVBEEwkq+CKMYD2CLE1R1/HKEVPymV1f0tp+W//jqJ5QuJA==","signatures":[{"sig":"MEQCIGoLy8ybLnGfc6AHEDP7IHt5Ry3Icrtiww0RWEE3Q0tNAiBjzoYX68pQYymc00P4gEJfGI40uYDiXYCNrf8PEPh0gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3xCRA9TVsSAnZWagAAf4gP/2s4PoAqTuhKZ6KppwTG\n4tCWiB7GXxEI6PGfkduTdWcyp5OX/dC8vP0kVCaGPVCZGLGrsL2F1fBOYuh3\nxPSoq3wW03lGC2CI4V3sJHFyPdGn6L9tc4quLT1REbvDPErbB8kBEibqeiaD\n4ASeiri8wIDx55nW8AjNBgnxddlBFxfRzOxNGKV43VOS+M0H+tUWwDvqtza2\nXG8A19no/+T/6Igr+in0/16S5JmXhK5t9UyBPglsRSYnBvIM65GmNeq3gNnX\ncsQ3O208bLq5B66tE0lzuiNUN7ZvqMUOwe3krsTAlykcXRgeZgpBHzxX/qh9\nuhGgpHPqfbgSmoD7zqY7C6v1m6Zue+xRgDinXrRRIGRIosokqNYaTCMHY6hw\n0hM6AIcVLVNS8iWILFjiL6Z7RCS1RVALfZ/RZsHQTwMslE+6v7XBEfLm0d/I\n0oLn6k4yMwOceADo9G/GeAzF/svGmAYd/Nymtf5K8KcOGSVrSQCjcGU0xb6l\nUUdPXF0XG++gJDOZ9DSkjNzWvpOqKgfgw+liYbEV2OEV4RnYS2ZqMdwuXaq6\nC2eszwsqu+Y9yqskyh+TI617uhCnUPM4iakxwHeBVstx/xh5N5JjayWjHHRb\n0X4dRd0AWb+16v1TppobksnEb6Nt1E2de2sfPYL3GoP8IiXOkpB2kB5OfB4h\n5JAz\r\n=cXuv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/density":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/touch-target":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.bfdd7fd39.0_1592598000656_0.9320733753432633","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/radio","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d268796b0bcaad55e37b8893b2f6cf0053d0d137","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.10b505785.0.tgz","fileCount":38,"integrity":"sha512-G68tnNhEAZMkwHzyN1t0IPjCnyrp4YSev2JmlZVsvkncIO9lTwEuuw5mSEn6ixyAoLnFhRsq+/eDOA3I4J/6Yw==","signatures":[{"sig":"MEUCIQDCRTTZn9r3A2NvFwts9o5NDG3ONEUZ+WbbZRbDekS/pAIgCdtIV6K4wgD6+0kpetEZ+m78DFaXHAFKs241jMXKq6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5HCRA9TVsSAnZWagAAwK4P+wQychnz0Slak7B2M/PQ\nj9grUkKIlH83C8UEKFon42LGooJ++tQfSxX72I7sidtiVamVgFNfNx/cM9/t\nsXG5w3bp9aXkrB6cSnmjTtWSDtSAMQaxj4qt43N6Kkg3vUd5Kjac6KzFV+1z\n2HkXxse+6+XmJb0lb9kI/Bl3NjxBA5NwktXu5N1tZuWbuSyCXV/ZlOb3tSLN\n3pl+wlHBoJLjkhs6rV7pxoM97D1s9rjNqoLFGXwcGQoDsOWaB5yqt0noYXWw\n5monv+9QBzYMV0GCRCkxBK1sSZ1fd3c8KqCmPj5mTv9KzHArBDsIJ9qGsTs6\nDUmlPUJO4gF1HmyaSDKA0fR2ZI5cKVGAZF6KYcsJldwc9UIlJl9t4OupgstL\nqyzpdl4qZTlve/T8XGtv/EOjZhYgzxdLJjWnsqdmTf0MOvUDZFcy99XQj/B0\ntyaPHpZmmm5esPYGHFK+odZWy9nPkO4XZ4+4Ql8N2f61DJ66hGMdiZShXwaU\nHI5rayqu3SOfRldWohteIrS4/4/+I8sbhM0f90PTVS7fRUEo8cYJ4whuTbKu\ncPV3TXriU1q1ki8rGHgjHaGh6L02TlxaU29qgDk/+tGk434pbVjE+CddJVKk\ngXW3ldjegpBrXDKUxRGMQg/9UvEoMpAimAIj7hJaUWuNjGnUERelt8+F0n+B\nV55F\r\n=PDGq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/density":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/touch-target":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.10b505785.0_1592598087355_0.3378579990929016","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/radio","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc20ab6a871a7250efd1d24459587083f2bf14d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.6483d3f44.0.tgz","fileCount":38,"integrity":"sha512-d7XhJNybB4MGKFhJ2sF7qklzvPjeS7jw8TxzFFbYCYl9bd+pBDTmCDnU7Xt3gUZKEoaehqJmgNBwRvgk5yAY6A==","signatures":[{"sig":"MEYCIQDItdxTXqtGG6fpOyp1fq0E/L2vP1ONPxqgG9htLLVt/QIhALXTJBtybaCGI1x0x492Ooi8a1BfhYWxZzAhQiNnpT73","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIUCRA9TVsSAnZWagAApsMQAJ18JMqSZZqOnSk22O3w\nFFst4OiZCS6nYseg34fc8cG/Tl/DmdMnbvKeJ3QR+3+NoQeECt8ZVfYQUdZP\nV7O0HXMiLXofwjEXZfcSTvRvdM4zvZ0tuaTJ9Xalnaa6DIlMLqXwortK9luS\ngQ0Sluq0g7mJhzAUxmY5kAOsUotrSZ9hFFC8l0AEuBBVl5Cy+ETEOUfWbUMn\nxCIi+SQ0W5QRijEkw4U4m1fANllUysZJCKTsoiLUchvGNgx8SQzJw2x5sG5f\nSw7lQiIaegNJI9w5Kxfmh7oLtN7A0sowknTektWiqBzoFBbAv7jLU/N2ijAE\nLSAAqpIV93iyCmnC9O6LYPeDpnJmkFYZmRz1dwYrVxFQylh0jE4HJEcl5d2N\nmB8a0UoyGOsHjtqOZ6dhcca8WWktlnN8WxsqCkn99NRMMmFMCCC6IZ4nesJW\n5xcrB9V3jZEhkACZu1Wrlu3P1lO3NmyRXfguZ7Do4QPaYEjU1luO8AUFo2NU\nmtn98Ad8QdpaaVpwrpxOw/6FneKSbW49+cix1vaOO9jMrgmva/8yHgbM1+kU\niqbcs8wRUq0mbKaTfzS2ef9ZN0yDziZ8Zmftr7YqB0ThVO9JAd+FQ8ObfLdC\nSh07kBefW4P1k1vvzF5drYDM1GCixkauUE0qXukFCNPKrDPpvxJ+gxHXNhsn\nkmUF\r\n=oxQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/density":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/touch-target":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.6483d3f44.0_1592599059665_0.5691906338240125","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/radio","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e5aa7e58ec93dbac9b15ea8b6842418c150752","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.30a74e921.0.tgz","fileCount":38,"integrity":"sha512-R/xlpL6b41F0MoKhn9eCJIhWmpub066wdyf3G8mFO/uF5y8h44qmbgJ9I/eJi+muneCUj7sQjmGkaNrPp7YIuQ==","signatures":[{"sig":"MEUCIQCdMb+SweuObFHdrNg4JSjWQaSyXB6QXbmWZ9vrIA1sbQIgEO2j+IZw6dnDY7Lx+JdYqh1gKVlnhZ9moUrLSInPtZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKbCRA9TVsSAnZWagAAKbwP/0QHxoLBrvCNlBookiov\nOWa+JP7PIosT6tz7kZJlZVsSiISKS+BTwNfmKTiNfpWdafdSMhooXhNjJ8yQ\n/g3WjMvXF4X5C5Ae8krw7Gg0b3W/imd8rC5wEbh1tECifnzOmP/DL6zL+z4S\n+Tp5aRHKtT3Hnot7DpYNTBnHuBuEt+4j8jdlGZk9bUQow8bQpigKCD29WzBF\nmy54aPPBc4mrP/BqoLGQcozF2elHUNwJ+WakQqlsiBbCD/3TT5QA9pqIXsVH\nyy18j5exTuTRk5XVnP+laG2QwlX8/Uei1KYzAS4V6Gw15LuJS4VbHbJuS7JL\nB9YSz1Y+IeDSkBpjo7pnAgYEEdEE0ZHalccmGH4luKR+7EkOygAFmE5A2qfw\n1LF88JcmLRKGdcbBZQxtcEqgtS2JZlH4K+z4Tph8cE4y+ojaY2+mvW4FsfqW\nLpFpxplbCdgFsggbgsk3cPBp08fXGPKiwfM5+XFsGxS+Op67A5u+5+74CoXh\n/4Ij3e5Vc4vfRHtaVcX1WsFuOonqoL1RqWB2qtkppQ9k3xrYY1OExRnSQ7LG\np3kzYpA4MIv1dFc6iQMqebcv7MsKAi+R3gATWokOvds40A6JXuo9ZSmldE3/\nNfVxzqlfe0v7tCe06a9KJUcQzurKf2NnoDGLxUw9z1/O+DIEf1kS016GVG8e\nydi5\r\n=XncT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/density":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/touch-target":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.30a74e921.0_1592599195354_0.967585592367534","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/radio","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2366517b80b81d5fc36afd9fb9890f253b669223","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.c20727498.0.tgz","fileCount":38,"integrity":"sha512-c1TW5VZ9RSK5FdwccXjCxYe+cnhgx8RGzE9ALqMF7nSxN9hUkhPwrhtvcSl8zMMydKqbJ7hGw7KqAwDT1Z/Fvw==","signatures":[{"sig":"MEYCIQDjZS4VRD5OlGKRCZSPW2vENgyZxijdP0jWinxINyy38gIhAL+w5EzWV5tJRdyWQBD0ZbpPpR5VEOC4ST/mG6vQDNdR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNICRA9TVsSAnZWagAAtCEP/jfItj7p2gmFXL5lA/6f\nY/4iiH2JZ/kO7f8Hi/HC+HaiaAo4fGKL1qLpvLstJgwMRNnLlJUrOLOzDN6Y\nj4fO7xAqApQiR9FBWWaRQ8NYjO6AvnD4hT6bSMmLmgQGtvjbZEbaKMKADh3V\n/frt4kpCMSal4Tvuau7rEjwV6hQlTPZBRqJ868tW19Bxk/3ZTPIkgpWfV4ys\nSMNTZ7s/x4YeL8BMBAWhZ1O7m7f4lwnBKVZWETAxwq69VmoTO4dlVqsCp+Rn\nm/Kp0Edpc/v8ESzCeqWDEEZcRuNVQLpLazSbmHO9bScCCvnFnjVFZFVZji+l\nehE5NH18o5n832rgwgH2V5VN4pWEfZJnIvPqSSgD2c5MfMyVZO35XX8GM+kV\nNlnfX5FI1DZFnau9qsQ349L7lhxgD81dM52f4mBbArJRtspP4hBwOcqRQbMd\nD8KA9j78XCdWaiLkI9kZSG8jeFmoI4kKV2wGcWW6efhvtdajUaY2Ejbxldgv\n4jVUCGU0yPUalUpFW7HvJNftJOuJcHrSKJjvyMcUztF3YUhU/vud9GQDeT+e\nUIm3MUlqLjKJXZDpxxC8UAvwtgkuX6WzK9Jfzg+8+9qjKagXLqcbla/12ioK\nO/5qEVHh7RFlxi6hYmKddsC+yCwuiiJqjH6NwAUoo36gFG2OZH5QMTbn4+Oo\nQqR8\r\n=raWg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/density":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/touch-target":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.c20727498.0_1592599368317_0.19338058781388345","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/radio","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d81c13ad7808d78d2de0a7e6eb75e306b34468cd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4e360ae94.0.tgz","fileCount":38,"integrity":"sha512-llZHLbLhR3lfs+FHTF68DC28TaRvJtMcscIblr9Z92dHM65ofYXCBb5fS0AaFX26GQdG+v2rBvw+c3IDEhUMmg==","signatures":[{"sig":"MEQCIARbEYFT1oj6d1RrakoUsvnnqOqu8gk+ilBX3Vrk4w33AiBoDYqgubKTPTwjgx3pn0M9FtonFAT0oMxgsSwCKavODw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sc0CRA9TVsSAnZWagAA7MYP/RiLU7XVoWDzdgG23d9Y\nHRwFPLdjOUvikXTjlX3CsZCzhuRRGNm9lB+g8GGtKd1w8d7vbtQUTLPbgcir\n2Y7cgAKr5yz3uYIkd4vs8Dg6jlfVQMYd5dTVY0OB+OsnJafzA0ScKbQ8/8nE\nOrpsyxP7joW0oYSxhjhgDuYPoTWIknrDvv0T3k4ZtS4TsoOkw79CSRUxGe09\nU861PduklcTNajIiD5CgiGb3fqcqS7Q8WtS8Qa2LACWhTJFwTwaqauFiMuK2\nlUMtJ32TzRfsdAH/bDQ7HN2/T76z55BE9nxY0ytpAMuF4lPhMRaD+aOoJFF+\nmoRq36BK3Vo7YjMcNVluJ5C5MYGZFj4WC6ZF39xGvfb7oZvdAWGl55CHgoa9\nD3XbZyRzUoSyg7JC/QBMPJUYm/4U//Laz49v7HoHrJFFtKr/0bkXfJYs7kE0\nVmmHo/DppW26/Hmtc26Of2tRn2g9GTathvPt8sVwoybVxfw5IgJP24cNref7\nuAXiIAiKiFBETvQCQruiCjw7BNaes2c3RC/fRDRqa3LKoFwxeeLJ1zrRKtaC\nilKnM1U1neV/WzaFHptn1E2XFSnKvtMzJuOIGTIriKMN1dvwYZaK1KrQMsuV\nTruPAkGvAN77g0TfwA0PEmPJuEH8/66Gp5UyglWzKALgMWsvkAFiNdCDkr6F\nW/sx\r\n=psDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/density":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/touch-target":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4e360ae94.0_1592600371980_0.3919368550875377","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/radio","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8a38edec54731e8b704a5ff0519d854536061ab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8550fa53b.0.tgz","fileCount":38,"integrity":"sha512-GVQ+y+nyT9Bkcgte4b67OYMFvU+dEVm3LOF1bVlZ3qgJaX74tTP9A8FTy9SqAzm4+ThdipEJ9kJ/7Y0FDOabIg==","signatures":[{"sig":"MEUCIEGows9IrFD/fI1K6B1w/tL24I7qFrZsTstophCcTJ2PAiEA2dPDLG3WAjtiUTrrm+5ZyuGwyu+HMcpe2wuRW1FwZUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Se5CRA9TVsSAnZWagAAJwQP/jNVfl4pFxS8ms02rs9k\nK/JzAdwERyBNQvlQ8TTvTxVXch51JJgAz6oMfCvX0zYC9f3MBQKCjxHR+3dI\npKN4QzqOD+Ty+VIsvT/0Vze7sjzGPfHGoLwrdJhN05T6UaXBpUP4dawQXeFM\nCKiAmBykUC9Ft+VuAz7Cvv01V9vv24iSsZIoRR9w8tR+5lsQ6u7LlVX5JtOo\nUw/NQ0rwDWE0NZR54wgSSJ2LYBe/W4aSwnFan6tw0nA/zJkOLXgnnJN7J355\nJxOjghvOZtqhf2chTS5myvMwzTmjE2BUoD1/bmIO170fLtyFtPYxtYfnaCcl\nL8MFQB5wtdr+2P4yFktw9xXZvlBuiJsfgAdPWa+c2mKmSgYRLlWcaHsLLKA+\nsal2N6wIegiwq+VeeFzyfcwtA6kpt+F5RA0ub4/pS42q6kVTl7IjnphaYgIW\nI6I/Sc+U7RopD8g1GPvBYbsb6f3ujizntjSNJz3wnWw+/49cnkivzpNtF7Vd\n8tEOPI2EMopuooV0gcuc/4/ZPhLRo146a9KatKzwPOM7R35/tbikIQfoFK42\njUv+rEePpsOpx1XMNSmXhj0pwRvqvYIwjtrV0zcYb1lSRqAo72KDnxJcE8QN\nCepibmPiHGXWsAo8uFO/HPQ0+n6xus1b9livFlcmDiR2oU8WsoIUEI0tGSO3\nOGcb\r\n=YIpG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/density":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/touch-target":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8550fa53b.0_1592600505294_0.648744884522835","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/radio","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15123561272ee1d88938d2cad7178c5c054c4a78","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.93ade142e.0.tgz","fileCount":38,"integrity":"sha512-JXraoGqd5FCXbAZqbjTdY5UIMFTpmUSqN/qQd0k1QXQJ3YAs+BLLUOhBfDD+mcY/uBbuAv232M4EvTj/NC4LGg==","signatures":[{"sig":"MEQCIGRwLRsSBVXsLaR82t3bTuIMJNXrFeZ5x/9ZRSbz0h8uAiArLtexmbthN79Vo26J+ncB4JRLBf2u3Gy/uCvroRg2XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgFCRA9TVsSAnZWagAAH7MQAJSiC9eMxQ7NamHxpMJ2\nH0VLUv1LVvYhg1gxnXGA0G+RheKL+x/v61M1MkD1Twv/0pjHR5pMR/VnbOMN\nCm0s6sWyzCHD5ic5ur9ckW42i8RPmgU4xa3T3iqb852hUK+3o7fcUQaVawtb\nvHK6GF4g8Jy1Nc7elYAWCE2MBtxFGOgXREfIYwGNXp0aOHrWCV7QUY20yG+6\nIdB1tHeY7tuq+kt5GdF0A6KCi1B+OV0O/AuDTrRMxK/c/tqq3ibpviAACv3K\npFOeEm2gYsFjMEQKbKyJGkvRrEr2m3th0VxAbTPTo9fdreyXGqFa+mWbMk0j\ncdonSYGLF95BFnx9xOnkHeL1u7mjUUodtpWwDJXBnK2+sHltaxWFsvTU5blv\nv1XuCwZB9u22MC8F+HEG2rvIirJsw25zZ9qtGvQqByel3WUtnDcQnF+6ckF/\ndvk82XIscbA4vU7y1uTAH5pgC1xQBfOhEmQSOAipGO31xSKRlVy7Ccj+2F8F\npUGFfHUHrLh9HQRwuCAcDyZZWUULR6BqOXIfy6bMZtizzj/dyCYgxaRCzH1S\nUgYu93fAM8+6mSedc7XcLxgwWntJm1TXhOeC0LWDgjkof+jBTc0ZL8GW2CWN\nTDctuZiIOGT2B3wCDPuzq/Fv5HhAhHafLwDuop8mDpQyJfgBAZybFUKDLLh0\n9WiU\r\n=xEDO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/density":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/touch-target":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.93ade142e.0_1592600580981_0.8752558658776863","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/radio","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c20095699bb01ea12b4b0be897375cb40aad2493","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a0032f5bb.0.tgz","fileCount":38,"integrity":"sha512-jS9WTda8iQ+5U5RF9y4vuc3oLUM/xU0mR0EN6e+tzZ8GUT7xWZSMcEkrsFhBLzNxCPQBSD5syBfxRSAySJ30EQ==","signatures":[{"sig":"MEQCIBN6RK2zunkuiYyYboc+sC1PdIiYPaBmPEL1YUZaoAqsAiBk3XAC/ptGyyrVCf3oUVg+0Zz1//ngfPKVg8Oqy+UsRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3kCRA9TVsSAnZWagAA4A0P/3R/uHncHlD2ugbAxjqi\ntxtw39yg7roNk3BqV15Ah7+4KA/3W/6L0UKnaCiE8z3u2OCPgnRraa3a5uHE\nT56Pqz3OBw9VIBWCuCB9OJgTQlUyMVn4BWbQVgzujxxluZuZo9Nkql9FXbml\nDp0agCJUm2OunsD8AiOeBmTZVxUf52zrdEmyCiWt2pnw1cnyqqs7LpdowQe/\nzAZaOfxXZootebbWUpRQGhTt4yJwSmzTakiPRB7jCZ1GoNxgSAfbH/vaM8VV\nbnmLjET1i6xr/lIRE7wejIBYImV1v3xM/NXrC3HwjBsid7U3ZBNT4vsXSvzC\nbT0VYaM65MuASad3CVoMdKOXV09gc8PvCK2nJKT91BN0qyRr47Yz7R5rXjZU\nZXt4Cswp3FAiPSNqhzzpdoqMY3XXUEvOXb5rQbQY4cMswKqxCgujY37V2sp8\nrkuvAs2wUrx6O1QHIIMfx466xe7Ogq4K6NFU880AO39yJf52SVSY9rNWtmKz\nfMtSuoBTJqe9tbYTooNWYOzUbBFJYutYiBnBBLpDq4RHfhEyGvR+iDiy59l0\ncJz2LcQj7c4BN59osuXAjacDvvTCSHxMeYgrA9cwZsuFe3h+2TkPVzy4zQTh\nAMevKDK5CqiWZnv8Nkn7voeWOCmjlqWUtqsqiB+Ot8FjLWv3I4sYEXfXJVOb\nZItP\r\n=m8bz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/density":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/touch-target":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a0032f5bb.0_1592602084072_0.23549818401485756","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/radio","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"782612822c61f20475f8332efb77d07bee5a9188","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.3f342e721.0.tgz","fileCount":38,"integrity":"sha512-xgUmvtstaS2vy4be4yC1S7vAKHORMWoxIzT20faHfVcINGjyjzuPfP5+axZsOsUQubfPOvNwhQYZ8kaOXU0hGw==","signatures":[{"sig":"MEUCIQCNSovfV9r8kpJtlArmxDpIPzFmdNk95gHGeVpq55fX0gIgVew58xzuU/bsqtbiEHPEVw4QWT8XXMTupv8RqikgVi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S56CRA9TVsSAnZWagAAFesP/36aQ4+0cB1ROAqUDzsa\nxsz4lfch3CBwlnCkXkaPUz1l4xX3robKbqvBRERZPYBNGUPu0Na+Zx4b2kTY\ntLhGOrVSZbEnknlYQXzC8uBG56EOARZYAritRmTpgOnpK7F7rufZVh5t2IVv\n0psv2/88jmcMfH+puqxX+LPvzvajHn+ZBuMF5vBxI9hg0a7VapNtTIJMCJYL\nbou/G27NYlBEBMAD+UkTT5hD0EkH09wZFM4S0wWkr+2Oy0LAkFYJfsTD4gt+\n7cDQqKF5hpVggEkrYnrOa+9TwEToGbzR1v+h5DP1IKOK0hZn/E9mttq9Zqkg\n247+FKLPxm2126kEU8C/UcyFR7sGimLCtpgeBQgLIVrdL9Ch0Y1ccVb0oObt\nmGv+VarSrK5PYGIzYYVRZYjLTEd5qekdXbdFwXOMWVKAQuBHvLWhSbsDXXMk\nakXywgxKwrdzM3QqZE02KD4k20E8lsGAScBY0fGodJwoCRWS5RCMf3xSc6/E\nyrXsNZrPCYkYHpNIBoZ0Qiw7595B/Ow+0RnBfMzvRGFF0ZH6Wfv7aU2niT2y\n7RBWDJl13YKEUWjcAV6XvY5ZiXhxgRXu9bzwLRd4bqPW2JpM2Vt1p+XRE6IP\nO5E7Klefcr0aUtGZOEEgoYl/SKn/U73RXhi4W5yfogt4IbRW2TmAH21eSQyi\n75i6\r\n=MpfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/density":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/touch-target":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.3f342e721.0_1592602233514_0.6370389936671372","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/radio","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"824d053fcabcdc1b83a1db6510d7593fba389656","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ff89457cc.0.tgz","fileCount":38,"integrity":"sha512-0K1XFQhQgnkNJg5jJGj0t7OWYUeMg5tDFmaEeBCXu/T1tLWJ4HDq446HMjfptv0kimZJ8BcuyzOyYA3maX8Kuw==","signatures":[{"sig":"MEYCIQCaS8sy0rpXSdRTW5nutNH+XGrn4WHEy8gdZUZe4o/vvQIhAKAflfgViEgj4wyXL9BV+LlpmFuPVS3jOo2tThLFnJiY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6rCRA9TVsSAnZWagAAvVgQAIdBtsPIwc2IRNC65MXd\noFSzm0ihxTxuj2cfMOYHN9nh/TL5Ug9XPo2bWARgd45GDagNiTbM7m63TLGO\nR/AZR7RUfU1wOmyb26UKN5NSrzkK9NKYiKC35aSn+eyQdnJ8iyGS/urKhY0d\nBy7dwIiLAfr3vXl6RHkbu9kP23nmgig/QaE3boBcTF3HUic+3KoeqV7tV3lU\njmOaJicL9uolKasfDuYYX1itBsWQm5aG6hHxetWks4Ncm3U40UJYlBhHbJuT\nlXh4et5lwYMRl8XvjDd8lIXT5ECjybiPB9bMdUgrFLtMFYrAeGzeuLLJTAMB\njEGr0bW36kZkzJc5w5OG0Jh5awcVJva+URJOOFQAxziNcsPygQhKO690FDK+\n1BMZj/iBGyjwNzaV/oXk+rZz/53SIRjTWzfteISLtqmZ7mSC8vs6PK0uKtxr\nr2nOmyJiBnOArnXVZxophsbEQ9YFoUH9+F3BpaSjjDuVKALxId1OyAO12pSt\nWFf0/lO45tZ0tNinaQHziRS8WMhD/vVlIUL915h13hLKlQfy4Nz7zT+vIumt\nSSTEuXi5t/Ohc+Lk5AfodCypFcoH3c3rwElPPrfzEbQZwZ0z03Ajdi+6clWr\nDslXQy0sh9gHSw0hecvrRiTLv96Bz6gIf+V4L20pMHCQV4Jql877QV8gUwQI\n0Adn\r\n=JZSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/density":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/touch-target":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ff89457cc.0_1592602282479_0.6214285027494499","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/radio","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"176a71002a41d6a00660e1606dadff3cb86de6c5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4a1855cf8.0.tgz","fileCount":38,"integrity":"sha512-++xUM9uTjDNbCLp2LQ9lOx6U2HM+bMRQ5/DVP/Ae06VovDFKzqFnQmxPJAJDz2aoWC/4vAq5FqJh3BpwyXQPiA==","signatures":[{"sig":"MEYCIQC6PGlfB8oVlCBBrTGBUdp9lwbItQtGZl3cmVrzo2kS0wIhAN0etQPu4838YV0PebFibn3nMBMFLG6CoU0i5SEpr+6O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9PCRA9TVsSAnZWagAAXeoP/2dHHnZJFgMkcIOSOSld\nB/CEYyTe+K6oHyPuG8+1nVsLFGt4BaCLs1MMSrHtlHFBBBV1IFYwn26GxFN+\najrX4Vj7Fz7LyrgufhRigiAr8Kj+jxYN08Fr8M2IQOnkoj0HXwLGYjakAvBn\nef3/LmZ7mfILeQgAng3EKsPmI7dadqwIhhCnHU5CLcYASI1nqWy91242oYTW\ndA+YteODR5sqeHiUGS+dlOE7pk6HksUb1ml2mTdMXWL8pj2DLOOfklM1yN2I\nrpExnSsZfrwCLcos8+TJWgguQAFRYsuGcrUbda8U7Tx9Vst6HrSRFD60XehK\nHcjG+lIXtTBgBX2FBCjwjyD9pqKcMU8zTNqJm1RUwOUPC7GtiUXiDNQXk5ya\n1/XkyYwYc6sB9ea3garKeuaRXrT+ZSIe6PJoYmzooHuRcclEFNmq6U0OLRuT\ny5LA0B7Di5vnRdcByzEzPvfsS8fCb8vted6pNHK0MVR+vPZJoo2GWXTWYCVX\nd/YLO1yFeM+yiPtS7XGUal2gC00QpfyRPIWv9Y6rREWOvxB1+x+BNQFX3RFv\nbuNCJUyy2ITYUM+M/+Z72fdKlKigZgK8EdKgYu3BPCDf4YCpdxw+br0Xf9Bj\njxM1qbDnPpbPh9isVe3MkUmI3xZH0+RKlcAZVYhOwWGQ/jRZlqCo8oX6/uhq\n7M1l\r\n=e4Jg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/density":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/touch-target":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4a1855cf8.0_1592602447207_0.2554191169489064","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/radio","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042bdf287d139a3a055c237ce183ee6d58628ed1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.8602f1b4d.0.tgz","fileCount":38,"integrity":"sha512-/3UI5gileTIuWCwLLURq1Etp3bPmMivORbqr1dMw7tQB7llcc784vWw5AF/2pmLUV+KbVuG2zShgZLi1WKTjeA==","signatures":[{"sig":"MEUCIQCMMjQKg09XBR4s3WftpXnxFa6CnfrT9t3kYOVxUHV8SAIgVKraC1nwaRskvQROf3pF5Cslx7r3fInA8ROnaum0x6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OklCRA9TVsSAnZWagAAEIoP/RlVkTHwphTb++1Nkfv+\nNIN8y6dehRraiUKaYJohHs+tEt/XRAcwnFjITpvQDzVT7YQtNv7n00Uut5Jj\nczYlTsGcyHHbo6d8ETN5UZ1Tu/s0GAhNh9hDi57n91975QBkAhvElf5oRQlG\n/CLFZdQP0Xz7UZvxqNpRbkaZa9oSEU+ydRUeZHFoyjL3UX+VciMNfjQjA7On\ne0WltpvNcrwnqBqHmFmj36yMb8HXNuYtX7UyCs/CPNMGafpL77NnncUh91WG\nXGzJMgo19dC4GMGHPIZOkhLmMTranWIEFO52+h/sM88WYg423gcCcz29GFb7\n7939O3cCQfmitlPXDrzKKIvunO9S4tLdWT4K8plc3fMxGRdDyraR1SSBauH1\nHBqYY/L20Sl4FNr8wIhPo2m52o5bIGZSPXLcUTxbNsrYNfmoIurUa3vS5QS6\nnFpdUnvLX4UyJXT09ULT3icULU4IvS7Hf52RY7z4aBnTQCZWa7EGfHS1yJ/G\nM/3xwiD56H3rQOaAS3Gs8+D0lCOYq25r8ExRjT6ehHqye5EGlo1sndPUJIqJ\nq/wmSr8ATN4bq5HIGn7WePRUiWBY/cwKyb/6gSkyqiQl7d9wpDOpVWUmvmys\n0QkZ/ffZM0N8mfV/RJrKoMDGM0WP9DPjYg40j823MSVlpazfVVA/G38sSa9U\nIIpf\r\n=ldD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/density":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/touch-target":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.8602f1b4d.0_1592846628487_0.9453497051329174","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/radio","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"071ae76a5e3fec48a4339362bc13b298d38db0bd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.69f9f0982.0.tgz","fileCount":38,"integrity":"sha512-JRHBcTGZUMfBFwby9/0YfZDw7LsBkM6+xFCZqkWQnufuxBgcvsqo8QH8551umGIkjwxPJYtQkmKvqb1h6wCjvg==","signatures":[{"sig":"MEUCIFj79oaBt2gZmp4tjysOA2T5ni3WzqZzR58kui1Yo12qAiEAyRi9KWC2iwuowWqcSSiNz3T0FLc0hlYhSbhd8YvsiKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9JCRA9TVsSAnZWagAAnSsP/2ag6KLdaJr1894pOl1l\nFXeD3T6kkwVH2XMjKUKqOA0/qAqy0bRLuNBDurS4qXTbgvb2fYUouhqRc8VD\nf1X4SKPdPcS83V6tvXA9LDARzSY4H2tF64mrgqv9CWzW81+mbQZgpdV0ey0B\n9j6CEn0eWKtIlh4WS+xeddZ3xGgpAL9+ivzXgyRn6ji8PGlLfiWn/5xD1LAJ\npdgW6PBYoXCnAQxISGbFjgf2Nt0tDocjyuuMF5QaS8IBS0lxhxH8gBVIgdcx\n8ib15zsSLC3NpOsRCUV9vMv8t3LP5hGVMxket8WzzQauheuYXdONxWdMOEZr\ncCdsvH34bZfGt80xLQ0+LIq4YSNRJodi2T24JIKksYPldL0nrlEb2qEyR+XN\nvBJ3H6Kf5sfsn6AUDw9OBSb7YiGXjq2aGHoi6hO45+uN8qOBWGzfkKUodzFS\nwwR46j3hjA68kAscQjEoptDqSvfOUfUp4Sx7xyzrx7+gZjUcFiMgiAb34uzG\n/DmBVEp4N+wHat6t8ibrhmviSZTmZ4neZjO7mYt5bcu48Y9xkpvmqpSwdHMz\nB009SUhndKu/oyHHsqoU1ymNcCLg1LZ3Gia7yYAkKe2EdLPHU5XvRNRf3iPd\nDN2YCbCkemJKtC0rcLB4fIsaa/Iph6+VC5+nCyXEPK2nqO8vjYTSeCCVLAY5\nXWwQ\r\n=HQ8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/density":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/touch-target":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.69f9f0982.0_1592860488814_0.8237114619946835","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/radio","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedebe0917bf29ae8dc981c36eda48bf5910bb84","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.369a293f0.0.tgz","fileCount":38,"integrity":"sha512-qF+YtSF6FVg5Whyf34uZTuBIgHIpvCI88MnrzP+kAJSyNZ2kQfHd6IPVcSLAJl6xzMt0auuxYJkJvo6Sbax4dw==","signatures":[{"sig":"MEQCIFdj2x+Je7iB8nQ2nNptyDl4rUfpsWje1a4fOr5jfjJ7AiBkgI5IZqsKxYfrGWS4HZxbjjslb5bzf+u60/zeyCsXdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+5CRA9TVsSAnZWagAADAUP/2zBt7l3EBU7wAeifryd\n+RdGs7Y10fOLmhh5VUpqXyjTnoFu7i0PcnUZ+gnm92av+/eq1UjOEAeFm1XS\nrlJnVxgrT+cq/RMneIW57Zuq1TVyvYNe7SWcnaVWul2iU6qZ4iAkY9JoEv1A\nHet+frDwhd3RIeH6gq8eHA2lJLqO9mnVMDWN0P5XiGMlKzc1z5JtmUa9KTIR\n82WWzUEBu78Gva/CdObgYHJN2pDkX6gepQ6ZtSNj+rVln8VjzepBwvmZWOg8\ntghX2H1GN/k1UNFArmgq3xSjAyg/luiiqWKw8fzmEM/jUJH85AJd0sbiX5z4\nDiSfXSjExCokCRRF6s9w5ngrTaBNDKII9S6VHBgvIiXLTHfCFO/DYdktFzoh\nR7leDdvQYR8nOooo4MRDOAw9/+0NxaV2Gs1IdmtY0i4rbvtB2EYpCPqi49yq\nbOUUU1VRyuelryeR7NpexUtWVJGQnoOqIok2lX3SqytbtMcEIruto2EVc3CI\nPZvDx47bb+NFwtcrR7xhFZaqeC5Lud6M0bzGQ3yqwVhZDlDmuFI6zPNMf9KJ\nqWk09ZbjrlTp3xbvzq+LmLXopIdcODUNqa020MGB9mpEBK/7DPVlmSL2g1ww\nxAUN+cyfhsQ/2q8n6BvSdsrnAv+qAH2G8BPC7rxUXu/dgQFM1/7hHB0cDw/G\neCkA\r\n=vuWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/density":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/touch-target":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.369a293f0.0_1592860600879_0.9165557847742845","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/radio","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"910314da6e567a73caad58d9571a8dd0da3ce902","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.f1432b5c6.0.tgz","fileCount":38,"integrity":"sha512-n/sL7ceOLhNc8W1wsIl9ZEULdFhazPlM+/6A6CKOXtDBBwzUN75Wmn1naqOAFsVzoYZng4z8vNBjtr3bzjPf+g==","signatures":[{"sig":"MEUCIEkZg4suWV51wGcxtH+Edxum/Pxnad4yAq2PKmo4QIn5AiEA2OBfMJUe/Qz+xEYTG0VtS7JW4sGHzzwTAENKYy7ILPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SG+CRA9TVsSAnZWagAAkjMQAIu8iYCX9RWZ44tlDIq8\nThvSkiGds/7/rFjsbbZLwx08HapmNMev4Id7O9I7ItXQ4g659BlaNts2xvgI\nx5obIiQ7uFqU2bNfn11ayGFXjWHeDFVc3iKdDUs9loElfmDh77X2j5dJVK+l\n1gfWkDf75c3g94FP2gBLv99B5b9eokCvQQEUdHlYDFpEOETyWQRdM+GgTX0Q\nrhPdgswjK6Aw7rDEIbT8SDRxx9P9ZU7JxVzFyl0Ubv65ETpWFfzgw6fhiXrv\n1DTdCi3Yf/t8OOHY6ctvO0Z7K7FEVDXtxhOdaKIUMblfDgZOsoJu/a96p3Y/\ngPu+acntcF/DZF9AP6fEOonsmGUnQRFGrxzjBVuXIOf4JoIBS3zgYcMCR5yO\nLykYz17d8jN6IKmz4G+YxT71UIljvYdr/gYDj9JvtQn4UclaLlernfBDlpTk\nsoVEHOOkPVGMjnaiK+TyvVt7dbrkmghsxIRsfG8AWzUdS0uTJKeLoF8no7jB\nmC19do4eE6xnGt8f/Qspa/E57hjR4Kk4JjAUnC2PURWE0yTezUeh/50rjRv7\nqIy6C+JlcPj7TyG1iv5sZ3xennkeZghlSvTPPGoQNSk0weUqOfhpw5R9EFlo\nk5A5C4HWBbfH6lXo+Q5x6IHxJrM3OXlLNHaI3JgTcd96USe/qDcw9Ls8AZxr\nKH88\r\n=Jdu5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/density":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/touch-target":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.f1432b5c6.0_1592861117803_0.7908822147556522","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/radio","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8d9002ea458b507335e9babe92f6cadd9e59ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.4757a16b4.0.tgz","fileCount":38,"integrity":"sha512-C4AaoQfaYaOy/M6UVq7h9QB2Kh5vdQd80XRSBXCxbKgbZECoGb8x8SxyF9LLkUow7tkx11ucTJBco3f41LqbRw==","signatures":[{"sig":"MEQCIC0tLLFGOiDrmKaqvUVmtJ68ZMtSVFFiSAaTpbJP1aU9AiBVQchDnDRVKRX1Q2lWaNB8px7DzaNuHenmFHfwCk0aUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShRCRA9TVsSAnZWagAAXosP/jRBkldeBHF+AakHiopA\n4aNFt+Rn6hRUlOF0Qac5NcijsxRbtHr7xtTGpqx4kdkNEWC57zBA5WQtEiIw\nFbxAb+imMWsDLeqAZak8OJ/LRW6kuFWl6LKiNqHM2IlwmRuCSDbQz0a1XIxl\nanBZR+98QPqtcIEWbUxsDCV10HZ1HJtZhzc8lF1T8+M5HCNZw96oO6j7Wh0O\nTUWAH5QZFFFZ/cV8jckh8zb2YUEuGaYF2880R6IhOrrCyMh5CNYz+167i6Sg\nuOx/XqSoRHrqn+TjwZsjzc10Tlke/4LQI5CziWebFeVaw4MAOWCpS9UgJK0O\nh5MMcmN69UNBw45EUm3pRLTKmFHrySTfssfikFyEMVhNXZGJ02EhlPM2+cU/\nF7fzAoicPMKbA+CWdF173qVvPJqmf4+R+2+HNe5PCbzMdgAUWFTvhCAIVNH4\nEkeJ7I9NqzR4GxGQczNOosg7V5LRpYw5F0SVZVA2LJvqiL5dRmZfv2rLXGoM\nP2WMTxOjiNRXmk65Iwvrsa94maxI5G1cjnOlbGi/Oekg9g182IsYba85slRb\nghpqQAw8nVHTPWxv5jljVeCabgPyq6EcMYAW/EEUThKzB4lW8+11Wv3CdVg4\n5YV1giQAF+hXVc02bK6bYzXSTUnmL31sxOpTFEuMYfmuz3vQwHFLJLIr3YJO\nABnl\r\n=r7L/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/density":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/touch-target":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.4757a16b4.0_1592862800331_0.21606134737532634","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/radio","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01b8f28a8a4d391a439e6e96f684301b01b891e1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.f8f472762.0.tgz","fileCount":38,"integrity":"sha512-oDH5onk9Yy0UyrgmnHSVbX4oUxvyA1SGO45l0TnLPoBOh9voQICsBWuVlFhNI95E9tbcMJ1wGOy3ftIgA8UCHg==","signatures":[{"sig":"MEUCIQDzv3r2BM3XtRvdFzTnh90iEA6J3kZLIi+H7h8zq4ZsbwIge60yMBAVpCA/mEJVDi442Mhue2Vw+PStTEW3i2wBB4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlKCRA9TVsSAnZWagAA9ZIP/3exe3KmWRZ4FwcfI7fW\nEsbhzk5K0Yfvj7ky5N47pm2/13EHKGW0HnBW2lmGFFzRJdqPWFocRrOLWe3n\nqJKsJuYq2d85jPIiT/if94AUHoRrOMoe3dyzDbvNLJx9WMd5TVluo4NfV9Rq\n4wFyPHpzkXhkeHkVFZiP87cWVNKDG2LFlloyhMVNxaj3iFFofh0unTR1/GcZ\nDcWwhHwcjScfSiwj4V2asGxSL/ncRbwES9Ch0FSSWoT9n2LHY0DS7PVZNl0/\nmof0LjinbzI7IF7CtAn6/wxc9vzeI7XywRLNVa7YHOhAHv6Y74LUejUIvLWI\n9cPrgk6UZXfbes/hF5i1cdlF4OPssoLYK9JkXk/+iGGyEsQPGaiLOF0wFtR+\nXFAaSTy4JMkew3TPUMxfJlXNbuyUaUzLPCcu7UbvWl9JdZkBOobt1Hd3bWds\nAgPBGUAx8/S1IAnr1f4dr0Etehefwx65FcHYlhL+JCf5Ze6wqknqygWc6AV/\n/smMOjVrbzBGF4knSvJCsQqGNwr99yFEVoHNFb6Riw11Un6JreBV/IhOLcYW\n/VrLVIAppPPXDygJ8bXSaHozt/s85lEH0G5auEDzJJYNEgW7nlVJT9djqSQA\nFn3ayEKaGsh7z9fSSfkS1i7aKKD0G8etXmjtCXRe5bjOXg89yV10PVpBYFz0\nJ8T4\r\n=nBF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/density":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/touch-target":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.f8f472762.0_1592863049706_0.26636822544923455","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/radio","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccc05e0c9fb528b9b6cc40fa49e9552ffc4cc149","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.7e4d55c34.0.tgz","fileCount":38,"integrity":"sha512-rkFHGbUdT+ZduoeJdZ6M5jOuHH4AkFRbfUSTZKz4lQZ4lA7g8Zgm1zc34XGjJYSUmmGoLB9jHqQ2s3P15PfHhQ==","signatures":[{"sig":"MEUCIQDvXt3oolsduDdKuU3WeTvIlkOjXWKJ2JvR6TlG6hHUPgIgDkVTtWZRJN8dd7bjb1E09QCMYOQYFLf2/W49ycxigyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDCCRA9TVsSAnZWagAAcmEP/0lq3S7f6wG99WrlezIO\n94iKL4SBPv2EuirqsDzSrFfr/dgM4DN71mbg8E6CXN++27ZlKnz8g+jDB0hc\nsz5vOsvRJL/IJOqylYGOYoz9R05mm44D/Q6OZEZirJYAGAAEMC7G/ruvBTuy\n0Py40rn41CCSeZYyy8Lr0LEOAqzUG7uT4ajGVLh3SHpAa0+90a+CtV3gW5QN\nUj7c/bLqdpJPndDk5eSO41C73YshDoD5ozkag70AhVyYdrtZz8lKpnQ+fUbk\nAX0+yYC1D84QfZ3see0Y5kGXanIUbBethfJhRYXwAbXKpWhLttzpHb687+rV\n4QaAL9qjQPz3Aa7bcw3d5kEHE0nDGBW8YDahx93fw4ZMy3jXzuOdye1PZLwm\nNlOUAx3uTlp6/uJDqTgAiw1g+YvMOOiBrH0/NZE7E6+q+Q0U2g3y7o8vxFa5\nUhZBOVJgdCbQWp5UqQnuuHz41ZxgefkALF2EjVMv3P0IYJtjtp6L4VPWhQQ4\nTk7BJmtnW9dLrWsak5xRmr4trHi8DqdsP69vdz0vu9SioMqADN1GhwzodTRL\nra/tfdHpiFLErMD2Ba+vlLPV+Bu3DZ830lCN9A6wRFw/XRerAog0Jbyx1osf\nSv46og7PCq3gAri/P7iYGD0vU5t++WDYQukSOrZuiDaZF1aErFwQhn5T6kDa\na6fB\r\n=/3Gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/density":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/touch-target":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.7e4d55c34.0_1592864962253_0.8631128596612807","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/radio","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2702c02cfdcd620df0a6ec248077d26485bb2a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":38,"integrity":"sha512-x1HYTxQYVj69TjBpQF+j+n961AgxJATrdJm4krvOfS9zgEGZ0PZsxGJkNX4Ny7ER7tCjc7sjiLK6xkUSDhkuTQ==","signatures":[{"sig":"MEUCIBTNHa1xQntGlz1MBbiuXyu/YvrNhsj/SLORzFLSUxPbAiEA2Z4JALjDeTojR/1DnZ4pYfuqUITrjlPJKBcZmNXLlN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hF3CRA9TVsSAnZWagAA6X4P/24KHikcqEU1FcZKi174\nh3mP6PHwmW4/zsWsjyJjKHOLV6lyiiJzxzGDsVVViOH+53kVAIRapTQ0eKYW\nV6EQPFC/mtPfeSE/CYz08bnEnHnsEhKq+s1RNypISkCanuVVEWou0l37vpdQ\npVI3NUSLw066nHTfGIi/cgqte77Ht9IoaTwkbPwvbxXTY82rIdAwJj2EOAwP\nUMZOjD0Nr6fB673W5lF4fX9pv+l+irJVevpwzuF46CEc3Rk+F4YXpTXyHXCE\nV8G7y2UUYmq97z/AYoLK8kt+K26jh2rjwwe9zwnYF2IQbVusF/+rMCtLnuTS\nY+/89v31Afj0CcsKu43Gp9rxh3OsAv0i8xpwhirnaZ4M8HUB5AAKAZsv4Iyi\nzp8WnUAkj70wa3/BRvzJnGUyrIHIwt14ulcTSWrEughKjvNMYtvJJKLThuFy\nsGsguJVFZSL5DVYtbiaED/hI3B5MXbWUGg2Zo40b3y1/zXEfJ4N3mJPJ19C1\nP6lSKEbE0+FBpNQtgfphXuPxMcrjyNNZsvoTFfsQg9EHekbqlwejY1wycF0g\nSpH+93w9zBH+FnM0In3IAaRTySdKPElj7+wHppwaxXTKCWe8mwCgHzCyzCEH\nKJEPHKM9/MUepyJniz4sAA92+WroP4UeBnDBMeMxIznxAPK1nRAei7F8epwS\n2hAu\r\n=ZGnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/density":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/touch-target":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.bd1dbc91f.0_1592922486724_0.50358544406085","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/radio","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1e308a314feba7f793114f8bcf84941fb86d743","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.31523bc62.0.tgz","fileCount":38,"integrity":"sha512-0nI3yX2z5NYAwBNtJ+PDyPaDKlYfOfmnNr0pdp6um66yiWRvKAVksJh7JaZ1Eg2mF/4rvrcmSOpcLB7HyXCibA==","signatures":[{"sig":"MEUCIQCIjC5+Bv3B0pVqBoFlTG4DlmMkpW/Xyf72h8gvZGQQHAIgBm2CLiKXKzVw4d/r7gz0KosWvsYO741uEw1YAcOhgf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLICRA9TVsSAnZWagAAJ3EP/3DT1l9sajdMw8eUog0z\nZ27ESN8IDkIAGMDA7SCqCTdkq+y2JLEfj80ZnnWzEFYqp1xRi58wA75+sko2\naO628Hj+/08Eo6kBP79eQYGoUCEBXGNelUYDIPluDNZZrL+CAOEbnKp4+NYB\nhHhd+a2hP8AAUS06VGPPXnJ4fc9FBsGxI/Tkg+CBQSWfBWx6bMl+8viImsie\nXUTx6O2D+gsE4Llm+YT8hLiiu6ZYQa7QxLmHlcfkmrQS9D6QqmnA65MEghXk\nr2q8VI6q3BUUK9Vuy0pq8/QR7AF8e0+DJHK5ZrxMbrBjN6RyYLBKXrwOgflD\ne8tyxJlHa71wwLueDSafPxC8qFNRBDJxTbcdl/G3NkP8kkhaQX6ogZ5CqQCq\n9vCNb7gjXDF5bnFd0C8OAhgxmh01yJhQ0CMuUiPFR8bOn4fpbYtgO8w4GtUG\n8HM5bXkze4B2Fj2t8elRut9DfRfLAkKrxmdTgQOwCcpJ9q++L/FAq9picLc0\n4+fICzMS3GJclEX/DZ2PZWRSdKBkFMB/HdNa8cwg4TahT4EgARkvz08MZdPy\nufgLwi9jo9Ajh7fCGSvoB8KhYIKGLqkTfS4EikDmuAFgX7hyYgqmbRXFQ6qQ\nreXMjN6OJvcc4QJmK//xsw3NWbzHCFr0Wb6tNihj9wiM4HId/stFV9eykkyp\nuMCg\r\n=R6in\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/density":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/touch-target":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.31523bc62.0_1592922823675_0.7711134920190585","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/radio","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5286f681ee2742a32c4fe20c71d06cc0d22ba667","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":38,"integrity":"sha512-jBJaREW/bil7rfD6JerRPDM6HUHgsgaPYMW1nFHWemmRaEKAueqOb4UiPhO87fKF17Hrn+68l6OrbYag/edM8A==","signatures":[{"sig":"MEYCIQCWlv5SwwXbr5LMnHewAfVjUUepKyEFBjLrzFc91DMxfQIhAKENtC4QyV7OkAmpr1u5dkYQRZdBGgdf9APjcopuU2rm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRGCRA9TVsSAnZWagAA+TUQAJHvNZAfh2+MFyOyEjw2\niusuoLppCb0s8z1MFBjfeKHJpCTFYaM631NA2B7TbcWrzzdaDSEQ7kp9s+D9\nwwUdR+u5YbNBBsDmTwoHI2/Yb/mfGNnukGlwUrD79UpMfDdi/MCDWqGODpa0\n969l//HhgjZTf/q3eNKIGOaa8QtOmYjJoQqKI2fIODQQsW4d8VC35KsAn7OZ\nkS6TPCaFth4tWkeLBcJzjkBZ5+7SDqt7ipGwdLCv9BX7NP0qC0ovqpIJS1af\nhbQaFMsbgeZM2//NKDUB5WA7n8jcw+X0Ltj79RX0CGjvGYq3bLadWPjignSk\n9nOyJZmpvnCEFUtqJ7+TThvuqQF5gX/VPNkr29zdJMMo6q0QKsITuNvh7N2f\nRFKwhW8dv/uEb2Z/i8OlkfOyitRq0ZENINwE3EYDSQs6sKdLD7NDbcnFtPUe\n7LLU89ERuO6ZkZSjJdbZRgAXWDSY4O+0MGdtPml7Re8A3JBBG5sgtrrmIu/x\nSOeJNEErQ2HW0CpHrLgoCFa+LKyGbMf0/tuKfPXZ2ZOyfxBQ/giA84qksAkB\naCKM9rxqwX67kCUkBjwzuXR253RQeNd8tbUTA8I3GDQHB1g0CAma5xkS7659\nVh7ssKPv4BvnUZk/0QY1qcAbnHTLBu0oLsLBWU/sobNx9yEfBS3VUyBLwelg\nk7Oi\r\n=ZG0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/density":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/touch-target":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.a96b6d4d6.0_1592923205744_0.10455945861179594","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/radio","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af71b72475cda796102ca2a887fa8db25a0eb2c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.ef3a09533.0.tgz","fileCount":38,"integrity":"sha512-wI4mxHyfmKyYIs85RTcXNgzroT/N/rn13lYlQU/WJhqFxzyZdNvMXfayM1nzVPySAJuFz5U6RMSigrc56C0jtA==","signatures":[{"sig":"MEQCIAnoLl5WA2OZTjLZT3f49U+vqAzfJUv0CTMRwjuoyuumAiAAq/awB7H20DpUBoUBKX/HdLGPNYVEoCkjHkD8/FL6Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYoCRA9TVsSAnZWagAAf5MQAKK4mzZfcrTccjJ4uyhx\nINzvmJQ0uDro7GuQTalTgVdDMphpQHWlDFUBfh5jUDEXLRuas2S1DDcylF5k\n3gdarIFdJ4UajZItXeXZA0/F1N1HguYxxB1oKszNmuTo6VvWdbS/2KhhoLS1\nH5A6p8BiiHbzJ28tLxUh8nKRFErOJYmOwoDY1FgT8RxF2WiXk0VhtlimF0Cn\n5Tsjl7TP3WPEXyGqPySPpZqTv6dUoBY8CISqaBv847IUJ8OQdz4kV+qy0m/V\nqTggXdnBzqawM8ITDlhNqmYNLWjnHSdw1ekd4dOjrPfvPIWL/y0+3J6cyDFh\nhu8JnJuQe2HXbaY3wJmK5b+O/8FCr/qwgWu+KziD4S96iTwoQgcaXm8ZtkNA\nHkIph+qgqyczAlkLH3M0CBxJuzJrKKz3MTEQATdzJxkwGJ/8mx2+3MYjZgbk\nERcohVswE8K3WaMpUUPqFlJVUSh96y3/1/HnxYW9klAxggoC+pdBLsjrYzB+\nLlhd7mWirmDCNCkyLmYA8QWEO17MPvJqYkWEZ5Dd8FEfT0gijmRVXbHd05Vr\nDWCwKc9tfE5O16r2OD+o/W+Vco6Pt9L6fEDDofHzxuXiw1lvK0QwZ8d0EcVt\ni6w83+l8qxoZ8Fh6axL0XzwYgmJ/wVajx3iMPWn1/aOQNpNmmtCgkvthdxDr\nWQBj\r\n=vpKe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/density":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/touch-target":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.ef3a09533.0_1592923687579_0.2926101057037105","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/radio","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd6c8afe1218de6c22d88926e6db6324d477c837","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.080965f39.0.tgz","fileCount":38,"integrity":"sha512-NSAj9wtGQUqZWKpHZPN1JrfeBdjSY+KaeucHN/cCGzjLTrn53PgT10YllMhEtQM0Y0upVLHWJrbcySPzGPW3Qg==","signatures":[{"sig":"MEYCIQDe988T2Quo9c/FXzWhc9yfykz9PGSr1ZjMxW0aRQrzuQIhAM9IWq9h9vRr2BCk38t+jKWYCUYnJ2H8wLfeDD2MhE45","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0QCRA9TVsSAnZWagAA0NYP/2C+SgMjvipqoX0Gwk+7\nErIpoGsz/VkMGsFl6AnbnoAIUXQxwLPV+rzV+4y0tl8gBmbh7CLY9N3lhfmB\nFwjr/GAxpI/K2i1OpQ6sseLhueibBxCOVU86G4VXFjFcI8WKlY6o87uLSiBK\nxsixYEvYOJJ0JnS5jQzd9uHs1JiMj2P58B31vy3d8JvowcdTG5YmZZkjzKd3\n/SOxvtUB9+AVaDwVK1BvYjcju6Y+e4t8ZREi8LvGNhrHlgsiIny94+EHjNFU\nnC+xbiUeomXK+ooJoWnrR0euJhwcgxAUBNbjc5MMnSNglO/clhTyqiAzJijA\naxe38dOP2yHzyzauZ4fc6hoMjg+zRtD7f7yGJmA/x90Ndn5SY3Rgo7sutjWN\nhy7YIXiXPNohYguk6kS8ZTROrkzUU7gcwKN9Pc5EQP2p62y5ETr/63apsjYd\nj3eeq0vuKpGmOkrnYK2cz/l1I5w2w36nMTyo74aKnjWK8mX3MQJOH+aCWqPT\nmKW+B+exTbVMdlmYiepeO7cBkksxls8om0wBILUjNjLzGHIVk4BC4gajIQTx\nMv6vx0AwKJUyYAu/r7qu2xhf2jtEr7sNaTjfgED3OZIu7RaQDiDS8eb3C3vs\nbbb9+xm6aHepv9BSki2t8AeS5T7IO3lkavqTpKcAPrcwhWScrZVZbhRdWPO7\ngrkp\r\n=ut5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/density":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/touch-target":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.080965f39.0_1592925455837_0.7158149525426889","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/radio","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bdd706cab92b7b098791e02f28c1d4d692e33fa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.1bd67b65d.0.tgz","fileCount":38,"integrity":"sha512-CvYs5fXfv0g54gHWIUngHoIXT5FpQ7Ze6D0XVuby9Gh4rRfHiaCRVUOWS055ewxgSevffpJM5k2+5YFVzCvefA==","signatures":[{"sig":"MEUCICo4eJqLVulqKCb/KBMbS8jcJG47S+GGF7YQ93efwC4wAiEAmCrUlPx/DhDiTTOz8JFVE59pyA48OP7g6KTf7mlUaHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ib+CRA9TVsSAnZWagAAHucP/Rw7hBmQTFFqK5PtpM9/\n5wNAn4nPSdvSOYCXl7ZjRQV4OL+nuA8CT90f7GVvuNXn56KrtvsCQdiZd4ev\nhiY44R+ne4+AZid0DGQibmQNKw+cKbFTIlgRrHgmYlvqNUsf+02Wr1QJ2rzt\niGwsmI6ezY7I5Y/UgFlx4B8fnCJ7gLHZuimNZtSd4ffkWdUDIcsHj0fTCUpa\n+JvqhSJTTXGBrdtHQkEUSKhmKZ6HrJ8FYwVupK3U2VbVx9PAqyNKKHnZRFcV\nJG6xhyfF5a+K7V5IgiYAre06sCl/KXONARM2ZrqRhxT3RJeqV1KDVDdh/E0Z\nGN9ivwaTI8+lMRct42jeUYwtbioZ+X2jLQmCsRxdipadtbfIWl4yZNE/EL51\nAh1pVgQYNjMM8JIVY/7oFKT5OAba1NiYfjsfs1tn0D5uJfK4EmmNYCHSvlS6\nz0tUctoQ++3pe+gfCnP0pFLXbKSt0A7teiV19hPiIu4XiZW8Ts7rehTPnB+Y\nmkPG2iJxSH2Ku0rIf9WGO0G0J+6GYOdQ2/U1TF7dZ8z+u0RJJvukoqUiTY7O\nVJMrqSNWMC1WINIfhYBENsgcAftX+CU1Vigser43dgNY8MEJN3qy4/ipApRK\nW9G9lJb8nW8f7E7yKMIohRc9IqOhp3fnf5l5TsNmXNHEhipZjQCP0iDYb99E\nBMzq\r\n=dXUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/density":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/touch-target":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.1bd67b65d.0_1592927997433_0.3697747857115905","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/radio","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ffae0a8848f4b71e841cda73b14c98ee17141e9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.18ca31248.0.tgz","fileCount":38,"integrity":"sha512-4aDvF+Cs966ACTIU6KFtPz13yX2p784avd2Twql8oMLudgPEgC4ipHlRLoKxc9vo1JCz09yhedybQi5LzcyqZg==","signatures":[{"sig":"MEUCIQCCMKqs/WfO5aDEy0Ja2ZpE/qK0X/PaG6zF6hWQCY4THgIgc9k4RQlDvEZqAUGpXFNIpLDFJCCb2R09E43i+ca4OVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kj5CRA9TVsSAnZWagAAZ4IQAKGLECh/Veo9U++WO2K4\nGHVZjBBxCBJ3odctB/bxrU0rQX+qJkmlm6YkjbQkH1K9cMpIqn+eReEoVxLt\n1ZQOg9JTtVgbAe+kUvW/NPueScPufX+T8YYxmeX7V3AO54fBS8tvp35JeglP\nh2F3JaXdIIXfP0DvutDUR8Gv4hV54uxBA+++kEOLOdMEzAjSBMutMhA4BNfD\nPOcC0froNqyAvHj16j3CpxeBxieo/eyP4Rix+RxKVCxftQB5EtLsyaDwtIfh\nlxsz1GYENHotE1Dk76NsDwALeFAyimvDPyWldFh6E0yqb5+OBP/BrpTsHB2o\nAYG/wGNajFRVfjwDxe/2C16vk2ruojBE/+P0QZUtd+wmY4KlGjdywofO3Dsp\nj8xrPX1iikPVFIR/4NgaC8M4W+ssK08uM7O/5seGyvFPZ9Dqv564TIkR6wr2\nEXRAIq9e+FrzF/nIqX+S485wixBdlWiDueCSZ60udwzz70SU2qRcbl7prTqw\n7/myFmrR2pQPfWZP+nEu4HeNn69uhrURt/ORDfZm9jP28YPGpwPoQ+LgjEXN\nPGHpUzjMxh8Uxy3frEIvrzBR94YBgCDevX8tRwZ9QM5U5B/1lkJ8Qxa0U3zN\nZZ4GrsoGWWXbPMsKmRGmTB/7YJxtA/Thd1j9kdhEAQVQBpdc3Gx3Kly950s4\nV5mt\r\n=Z1T5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/density":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/touch-target":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.18ca31248.0_1592936696736_0.5986745305107342","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/radio","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dbcd0a86f9bbf80a6d5f534aa6a00147fa8b414","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.39cf00836.0.tgz","fileCount":38,"integrity":"sha512-8VFd+ZWI8IaRnFFEV0QhXcfk5+4tzMNP7LwhK2czuM+quhqP2ukfNCCjDa02YoeF9N1pHBrOQPxFsthXc/DM1Q==","signatures":[{"sig":"MEQCIFodNCV0gBbKZ7eq7YdsyplomJUM2hMpcw89qKWcHFU2AiARSfWlS5alUXu8wu/DoC/8XbdhqdgFBz5NAqT1KGVggQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5aCRA9TVsSAnZWagAApUQQAJRRWcehfVO/S/ztWupB\njmbfodHVKbcwQUncjgcTiANtVrpkk0RnL2cyfGNItMFSOym9RnpWWNRA2plO\nfqzedJr4ffGcL1CQ80m8d+50LtUD3z/v9u0ZCKy4dDu0ObeMA5NYAd1Kbopb\nHGeoAQh9uEziot38+UY9NRLxNmpTKPoxLB/m5XpPWel6pesdnodaSHt8vPXZ\n8Wrv6tiCk7geEFh7+1W6H98WHe2GWXb+URVMHyjo8hHJ3YbfM6gA1fR2Zify\naF5TXSUIoqoGcSQpQa035LQ6Imk9G2byFzqvQeMOSyAt0LDEY+r1YBOMj+KH\nocOzsXhMuQcAa/dcD91xk3dN+pO1qBJwQ72M6F5Hb2f1pVIzxtJhHDWJhCmD\nsfTBg2RDg9MJ0Qv47PHCdw9pAuohk3p0goIK1IQIYoFbc9pPFflvcpVDWAYK\n0UWaJJUW85jt50+BQJako5aYtDqkWNbpIglmF0/v/VgXdCPahHOLUmQ/Clcd\njzfyp9ABDIAP1FC77bExn8yxAnetqhAfMi56GZ62MSqUxxD9Sw7Ob5bbzUDN\nKJCNMXdeW+tf2urQkgO0dR9qzcSuPP3VF+xoclwq3GOsWEBPBPLTWz/KC2ED\n5eqwAcWMAwfB1VwdRvK9vBcB/DKk0h+XST0rdHAkgRuMJETWI2L5qRG4w+xP\n1zpq\r\n=8ISD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/density":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/touch-target":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.39cf00836.0_1592938073474_0.22393884067954928","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/radio","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"211b65003fb257957bdf2d433874a217f0c4e0a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.1bfda9e05.0.tgz","fileCount":38,"integrity":"sha512-e8QFjF8ufZ40stVTTbLdgeFU4BbNhdt3SEWeQYlVez2nyXs71ISFBmAevLcR/uPFdg/WyAbYxkz+pXeo9GkgUQ==","signatures":[{"sig":"MEUCICkCZ5XK6xdsV/JfXkgKKwimpMLewbU9hCkF837CbmSGAiEA+NxpAOZ/LZ+RZzGOUseG3i9Z/bt+9mTh+0cVGdOqEt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFLCRA9TVsSAnZWagAAqhAQAJRSBY+y4ruYFzREuP87\n6/yrZ6C+YtRaqk7gevBtJywHPZQrqU3sbxX812KGdBpmQ5Y31R/GN8fEbJW0\nBQ7R+0eRJHTgdIKKkCDEV1sc1qGVlQ7iiti9ShdcWJIoJQ6EDtC5kJIdMZky\nV87xxz+LK+Fa51RElo9Kd5R7fccQyX8rwIk5jyDckMXmsQmwmm6trz3O/Zui\nYXoWM9XpVu1UFp4RiDpmBiXOfBA9LU3iWE7RoOvmfvdK2UkF/Sw2IdaIXE6w\nU9itAwp5FRd0fDuMIFcZxGJALnMltIl4quzVTVhRFxPwNjv2zg3swoVjHIUk\nfrU9kWxaoOjTAuPwUrh8/v1M5JwjwMxi1LoSk/mAQ3UR3JI2obhR4BeKRShs\ndri2GzQMcCQ4TLF+3p6SuY72VN/VP2SPOfZ7/nkpHWv4S+bkb6wiPCWXgCng\nxJrTzwkSxXtaQmmr06S8TVT5PNWH4i2hgQhGAK/4sgg6SQ43FV7XUFFcdw/4\nSVWOb7m+3T0yCponuhqS5Cx9kLmHZi1qLZhIgpBGkLSmXbqu1LVzKQUOezpr\nNWDL4HermFduPw16A4urXfAi4J+t8SCa0zTnsWDhcdGEso6Hd6DLr1cd09Pn\nLbOVWXQqqa/3LwA2TXdPs4s2QVM1TowQ5FbNlVDaZd9HBCLp9s8EcTw2y6aW\nzrbB\r\n=HBeM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/density":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/touch-target":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.1bfda9e05.0_1592938827170_0.7802761105209994","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/radio","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8340ca609417f62dbf055281aec545cfa6560d63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0-canary.08731bd95.0.tgz","fileCount":38,"integrity":"sha512-59cCrMvIihgmSdDH1MgJxzOBrUfAj0z+C2QJQXqloQ3Xyf64omWKwf8nee3MU3pHHATJaleV5Z9zQqgEfXMxsg==","signatures":[{"sig":"MEUCIQDeiiok10VpsTVdZ/ZOgJUH/TFA3YLzL04eIvPehURPywIgYKDa+/avJiWLMnd/5SEK58s2XXEqGt1GcAU/6sIrYEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHnCRA9TVsSAnZWagAA2BwP/0cZxhpdP4evsC+G6CRs\nCw2TCawVRm2WJ7o8pbRqi8zAomSjbO1W5pwzT3Nqh2JYF4UQmBSKwZW7jqb7\nPOB+WRgk6rtXU8qRen+Ql+Reamzl8Sq6mrU90+3Al3GK0/eRvQv3Kgis08J4\nv8v9IaTX+NnMUsloNYYtCClzSJOhR4/h/dpLqcHqm6FaYlIAolmVB2hjqUhw\nkrZ4AObv0vSXvCmGlkLXF0r4NYEw6irQIL6CRkWAIxKdbqLEjNzwvciCN4IS\nfvHDoFsV9rrBX9LQhsuzjEdOWiJuOatk9jKPWm942jmi9Y02EnwJtJgQv2lo\nzyqz/DoGty1upPP9FPCJ9MKME0IkRoLw2LP3shRkxqCEVgy7CgXTXAXq3sXf\nRhiplWUI7F22KZiZOreuODpIYWLmVHlg6ZZBeXxsTPBqosM+tNXzM/nAIPJe\nI+x99QS9iQtYAizCr+dlGDx2YrIRH1vSUUnXcdHzWDhLT/42/+6Zcb/LEGe7\neQJlA7OQ8wdQ2x2QHH/PY0+aD7vZFeL5u490h3rBq99QzOGNxfpWh2IxWp0k\n129GkZoiB/RrFYO/L5JYSTtIbLV8oF14RcXYT/rSDpFHnESQ6zwjna/fOqcB\nuagpzGpr2Wspc+l2wipXktaxeBIp7wLsFRZgTiD0qLVxdLcniYx5a6TZpUGK\nm5k5\r\n=Yt2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/density":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/touch-target":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0-canary.08731bd95.0_1592938983002_0.5314495694895474","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/radio","version":"7.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7175fa86d91d59bf852352e5788241ee2638d91b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-7.0.0.tgz","fileCount":37,"integrity":"sha512-0jpOJ1BVq2UlIcTxpSzsnyoAsWDf7nUaPYe55tqCyMfSMrDPCY4x2DeJw5fOhGyq61cRCotAlQRFDAe1qqxQfQ==","signatures":[{"sig":"MEUCIFg5e62ppVbuf8AsI/brGmX8aAuF42kAxufwcyzsAhX4AiEAjcY8TjntFCp2r7pRr8h0QXEPTbIiHZRCsvDQ7QVRdC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lO1CRA9TVsSAnZWagAAg8AP/jqWPMDMJJr4RL4dPCzE\nwnU/G6LUHyAR3bKQHgBS05qTCVpjTI53Min8WHCl2FvV4fnb4QR9FTfwJhBH\n0CwL5/+ZpQ3PcVRDZmcUd7TNsXro8Z3IGuD5CNOfswCjmgeeeIQ/tN3MLF6h\n+DfPkIBbHTHq00oz77WdQkfwTsXMHBM6lv4S+j8rFog6IsvOJEBteOK5y3ut\n8F1HDIeF75vFb1ebBosNf8fyZ7+n00nHvmhOU2k8bC6Ooph2YnfKUGaAIHiG\n1qx19EykO+ntoXIdSioTfdjA2WLbqOwHCss97+bTF8uZIDDZyDcbtw9DC05u\nJGM2VjvfCmFsm0GyxeTUnlqDBm3WtPGeCnYNQW+4VZN6e+tXSgaN4Cc+OA5N\n0LDyos9Bx3cdSR6C8odvW8QmkuHS7smU6HKNddtJrrjY1IjkCBO0Ioq/Dwoe\nH2vP4poGUXQvtnyOAQm6doAXfI7vPq0uSmWW2nqmpfjQXkJsC0PVx4Dw4UX2\nhggg5FGld2yetQDZ5pB6NU3fZv/3IxMKCVIbvpDDqdkp2540oPqrSz9SpXCe\ndQw5SgNyP03Dj1pbldbt76fNsqEr8sXYeSJsgwXbQqopvVH6L3+j/KZHrF34\nsd8cFIpcbaw6w0xME3w3rtXJWHM5/3Pq6QFyfiv+5jClKt0MnbxpCr6ClnpJ\nav3d\r\n=5yqn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^7.0.0","@material/animation":"^7.0.0","@material/touch-target":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_7.0.0_1592939445261_0.954309103435586","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/radio","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18ce8b4380c4ebd8f90368400d1fd50ac6a845c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a3212b209.0.tgz","fileCount":38,"integrity":"sha512-bFtzzfkLCoyttSF+tXmwgoQC5E7bI1rRtCkwwOsGuEjgRHMlt8mkzC+8o+Y3WEfLqKyczwU6Dcna674dTPQKDg==","signatures":[{"sig":"MEUCIF78gGRnyZG3JsyX1IZpkNxiWqIaxSrAicVfTHZKkFP+AiEA7GTXl778TAbC3/xGmGfe7M5arxySViNiswMGeQQIf/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPsCRA9TVsSAnZWagAAfZsP/2ymaUFST/qm4Erj8Q6b\n0wxTDznNm4KS26R/urAPfHBxUt1u/jRZ8EtViHJAGFT6KLucMDhPSEvV6wMI\nLXbnUp/dr7t4H/j1meThcnTLKiW217YpmUXSfBn63dyy5gy/lt2ISJCBkb2m\n6ibK8OQRIGOOb1FmOYjSiRsBBk+1G1KiZ0lxU8LuVbogWTdLXDyMuSz47N04\neyn2/kd+cPCLvKrOsO8BpvMqED1ggKQw7xbUF3zvq01T5n47YyvzBGmE+7GD\nXeSBSohpTaIALIHd+qens7ace9dx4lyPPYNG7/FtQ35r4MMSmoGzvJqX9CGF\nP+yrbnNw1a+BBPaMKY+eXl4I+LD0rpywoAwgPuEHpDYJNubpfRiTZ78aUaAL\nOxLFbEhb3b8+D7cY3PcYaBTM6R9nDSyQhHT+NzVb8KIidqrtL2EeJdl6dTrE\n/26bpEE9QxQI9b5U/VwtSqBdkDZauq6IJ6rWWXSTB8DI60sjpIG2t01RXhYP\nfEYjECMiCDNvsRiM+MREtGK4fezub9oELlDFTbMK3QiaX4Bcu/JcSlwKZOu+\nUGhixunxZGongE+8w7OU1KesbLaWZ83TfOMffoPXX/PbmvYqGuS88cnkhOX+\nwIBlAA8zvAC3ZfOq9s4OnzCi3gfVK6esecIouLm9pzNImsQACd0w+O0xGZbY\nA1C9\r\n=awzD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/density":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/touch-target":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a3212b209.0_1592939499555_0.05767072933846262","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/radio","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f6f16b28f2ea09e066dd741339c23f7b751e79d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.15e81fe98.0.tgz","fileCount":38,"integrity":"sha512-2lu4DCSSlYLb71bIowOPtby1TokOMSYUPKwoWdgNC9dlHh9coPCR3IlPPSGkds1h5B1Ld25fyx2R9h0sL9jBtA==","signatures":[{"sig":"MEMCH3sZI5ANf8d0XmxxpLB6PfvvY35sXuZ9QfgtVtzkIk0CIBAVHdFCdqmQWF9Flh17wx6Jqcrp/NHI23WU2IbQ7aSW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrPCRA9TVsSAnZWagAA3uIP/iwFNgaU7r1mJEdDa5tH\nrrYwoKn9WEuLIOBp/a8idtTjgtjeHFW616lCQArxXBaHaDDlMYroyYgSNaA9\np3i7foWxGtBFtyj62/f4gXNC2cL2EBmtszIk1zeM8x0mAuAYyOY1yUEXI+sE\n+EYwzXPS9LhWYcuvTUQCwr49T6epGhCcw96+/eZYI/CYLty0vJb4OWPcJ64t\nWfNESRrFFBNInTSHnH1r/KCXn60oBCpv1/xpJoibhZRdOg57W4cK5p7Qx7MK\n3VzBSzQoCxVKeyRm/UU+WwP6oqV7GOz2acnQsZoqZahhT+jlHaDkuyg9XxmW\ncTjugbfAN91q5ttdUiO+gxaH5rMe8qzllSv3MS7a2hHfjskp5uG9lqLG7bud\nmDVhWNKIMlF0+NAAHm/SJ9Zqn7v02UobwtdGChSPKWmzNRls73GE2JYwkGN9\n0yFM4sEWccAMsEz/x4HeVLRWgA304klyL6kFiuEPRlLaHWyr59AvJXhUfvcU\nZJs4nQjKST4Wc4YIskpGJ2RBakt5qZQv64oAExElaEGVjt6ijmBXV9cK2003\nrXUeUwEDNQPCt5nixbUaacERlhxlCK1PpzotRJ2PZjCd9k2czX9hNS7MkA+3\n2dyhB/hq2vq7O0l4cEPpTHrcYPRw8mtkZsxb41Sjqe569oROdtT+104HieKJ\nEM2U\r\n=HwfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/density":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/touch-target":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.15e81fe98.0_1592941262687_0.8052094810373485","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/radio","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb397bdec469461e251be8f470586164f8110093","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.004c9d392.0.tgz","fileCount":38,"integrity":"sha512-tsjIR1rXJN/AiU7Fm7/SAhPA2ou9Z/51obhP5SwbXp+xcYvDqu2CzQiWVEuo1pXE2J2lCpHKTV9og/kpsxagxA==","signatures":[{"sig":"MEQCIGSaWTQc/GiGmrjiBe4LfX6GRaexH8LLoXqkBFw0WdwZAiBQ1q/x2tD8Mtyoxfffjyg93skYerWSnOrslQINdnQGPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oh4CRA9TVsSAnZWagAA+rsQAI3GwC84qwdASQv2jlSv\n/FavW6H9efQk2cjreH4xl5URHhBWfVPvIHTqW4rI+/uMnO1k/CR/MCORrvWZ\nvhU9/g3YMfIx0MFyYaS5RBGR2Jy3bxK0mqjjmVvvSEfLIzKEvzlZRLo7j3rO\nKkSpqEvy5nhnrUmd0kzIXesOFidfUyYgGMpCZcDG8FQ3Hqwx5PM6EkTiZVsl\nUEV3XdZulAnjBFVIqpRxyf0vfnMQY1lVYMaccGltrVU5g3mY6Wy+swAhvxPv\nI2ug65VZSschAtZ1CCGUEWDk/K9Yj2nDa18idGdi3crFlp417c17y+TeNeQP\nejwDNLqqC2l1j5vrbqVHbC9ZuX0UDM/YhDjGxaMpn0ilPXIyUJXI6UIqV3b9\n4VwAJu5lHPkhEi1PKrNvWC5FaAWTp56TdsW2ApWhgqkiDvkPBZzTEwn4rRir\nwy/l/1Oa9TnNZ1ePFqIyW708gGGphnWTi8mIEKsdtsK8dSxfFpmFbM46+7fk\nfm+hPW0zgh18EBdiVy8q6LE337YnipRtIB6BO6qLlWcFigHTQUCwoPi8aN+y\nagCJQU/1O7E8XZTBJH+BRUHpd9FEiDtKp+hziQGMJohGL74V/rGJvShnAzo3\n4fkZdc8LBk+vfFeC3gG8EQfZdRKgtUjqn+0yTQXTb22GSg8ANPJT3RN/jAu9\nGaLB\r\n=s3QG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/density":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/touch-target":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.004c9d392.0_1592952951964_0.48959989719108066","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/radio","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c50c17952be629d97a4251d72aa87503fbfff0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.03bde00f5.0.tgz","fileCount":38,"integrity":"sha512-li4tx/UhSjOAIVy5c4/9u1acfIp0efMF+QOSG11uWRv+SpLpRusQMxOolW1scAiOg9iacwH05jjoc+AsScWd+A==","signatures":[{"sig":"MEQCIBalxaUgvI8on64UvKQg6WVcOw3XouW3UC8zzd4T/USKAiAPT1zlp3IWBERw3tUodmyMtq0i7rEXfhN35dohdSHa4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7tCRA9TVsSAnZWagAATAsP/j2yyi6zefhte+mv3L/b\nENwMGszYNfjtoKAw3Uv6cCOhx3mA8yoAX3tRSeRv1SlFC9MRj3EkGef+1ArS\n6TwHz8qC4ZCAPSdSX9FLSFUBBpm1VJ8et6iAef/sEQ/6Spr9aZ4xEcZHSCgg\noNew0tMkFz4k8yunUBrIMqRzDB8La3lNFqGNWAtmFRQVJRDG4tZYB3KFqpM3\n8JWD3WnwZHmWPmZKEQpUwziNBa2Nd1mkPMGRHsP5hUsjyfPQs3y4Nq+zjKl9\n4Q/b1awFVm9ngyy/VGNqEmkghmIzbixWkfVDwRgKKmWemwWCYXg33gQPxN4o\nvgPM29cjC3ka+5L+509MW/yNZ6El+XZbFebc9twbTFEx0ErUX5zu5RXJlfM0\nPvz23p3Y+mxrPB+T49iNWFy4BZ86ookdXngFrUKK8Mca4sj0r1FrYC5dgxMs\n+wQGmWtoJ0CLk5IWI8YrhbV78V4NQ5xhWiYK056tsPqCRNDh2Auy5bFpnIkw\nqyBZERe9Vgh0N5+bpoG7L2evgYh2OXv8Dz3RXJzXBXaFSGmCxrE91GCHhk5p\nUeRuXxIThedc4M7lsiT+21Sfz7/W3oz4IVvtJEUz3Q66p1fEm7USAuveQbQ9\nlSGtwWdJ21MJHFFOrcmmdvbbSDGE2T/VwRzda/CA9jMpkDO80IzYp2jeEsYP\n3AeD\r\n=0L3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/density":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/touch-target":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.03bde00f5.0_1592958701255_0.6180413950606762","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/radio","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f03670e7c50b455906e4fa521161902bb26ceaa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.599b8c319.0.tgz","fileCount":38,"integrity":"sha512-ZO8P6/m13HQF+vMbMcPQBnU38l+qW5+R2heMIKeuLBSXPfexaPTkrRjrq7SWkyvnFtaBXCNZUwzzR3/o6i8Z6w==","signatures":[{"sig":"MEYCIQCQ0dFgFXw8BabObJY3OfI06iB4/mhoIO0QddQ81L9CMQIhANKCufWK8R3s6MHQYHe7pss8vdrIcBV7VcJ3UIZ6eL+g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mgCRA9TVsSAnZWagAA450P/1EDgE7EA8vqJE8C6yfq\nd/szPxiZWJU4ExWj+2ad5i8CS1XWSzVTKBQlucKehGBzce/hYWXItCbBRrG0\nhqLr4XlIlrWrIPJJ61xEf7QWdovEAN7oTkhEZmh8PY6pf6sWft4s2MKINggG\n8PRbECTd1CM2ZKBH9/OzCaaIfHP9Wd9VBbmN3yphD49oNwb4rmhNBQav3OTf\nM6EIK48IWublaUdqRRA5FOLwFKDgsJyiGHZaguZttEMMfwKzL3NA+oirIyQ0\nJ4SKbKTPTY5CpebxBqNCxPyNM4C8GLYwugVGAdthQjg5KBqeTiTsSTxX8CYf\nvKg+VFmwfJJTBqWSHsPCrQ7mcoLyiVIVUT3K79naIlwEgWRWq/dUhXXt/aQK\ncZTNlY3RIbczpCH2hOqyjb9Zv+DhMJkp6LZuhzxLHGrqlxcQigRcWUIpQ8z9\njNE3iFUnbmHxb2JdkC0QQUOKRFeXX6lS0QAUX0ksKxtKcXuZsDWtTlBIe+kB\nDtbtkMKJKqBWkHE+8Usg3Z1K7Eofp5RJ4o+u8ojpG/N563phs1HVMbwJu7FM\nmMeAPwn5qbGrWvHXSA3iKOk0l2woGSKAQibsIL+IZWh+af9+S2rwfA2I5G+a\nAa6dHDS6AoTV5mH10cLEMLx7Y6zApzOc+raIXoVQ9uvEoI26lxKA4rIGB3iz\nVm5V\r\n=RO3Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/density":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/touch-target":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.599b8c319.0_1593010591437_0.7701820771310173","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/radio","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a52ad67ddd9cb856badd0b81c93fe8236ae2dfc7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.87e3be418.0.tgz","fileCount":38,"integrity":"sha512-WI+7IbQ3StW3MYvcmo/VQm/UpdW+o29QdDww0yUQ9ykb8ImRQLfMHEFTaNJDkqTc8BQ9JZ+C/KwS36gQAw3qgg==","signatures":[{"sig":"MEUCIQDu5HGVF4gMwSvXXAl13+Dm9qOTC6a+0BaIlxVy8CLt0wIgXagY6rP6BO36wO/P1VWqRMzWMAsq23EdrNGoNseerHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MICRA9TVsSAnZWagAAURoP/0J0OFe0PuGwPmiEO5nf\nDmSlsZDII3wr4GjIrK74TeTc4bNq5raZycY6DRh+appCFd2w9QYOXh0HsXMp\n0qa62/o2Ol7XGd2CZsgHYKPfT2i7NoFJlDDJRdptMCUPWyG+BR5bS0/OeJjw\ngpVmOVW4W0MM3/+W4VJ8MWFYviCXn8rJMMtTQRwFvSh57afmIKpHMOqRa8Z+\nusAwTIt0EkeSBy45JbLcmxGbih69dXV5DbCiBljbk4ylFwpVhgGzCn+IYb64\nOTbOde0v0s0F7m2k9c1lcoAoUyY/8FvKtfpgM1nW/COn7xKJr5tTy2wUnPbA\no6Di1Q25ag9lTjcRW6ZlrNFZg/eRMHKf42W+Bioje5hh6xaY3U/YJvRuIjV3\nSRXR+NmtDBOQUYZ37yrR1mnyYHQTZD9+EJJF0SBXqnRwCuzFrCUF5QuOzGwk\nesYaxIwvEp97Qq1Z3qBtl/OAKG1tH2LhS7fmH871T6R6LlxFWRiTNlp7oE3J\nh2av16rrA8uPawad50MJgeJVCNexW8Btxh5wwviDodrQ9+80z5ZM0OpXRmX5\ngoxBmmHlGgHCJmeEewziOSDY8uXa+DsTsc1Rc8JXNQHOyyBtBaDEvwM9euXt\nXW7ncecYrOxeu90b3QoNrz/dQW0I3OCVB1kB947Wk0Yg8PFwIdTu3JvHpFQt\nQmhu\r\n=JkrN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/density":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/touch-target":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.87e3be418.0_1593021191687_0.7238516285218435","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/radio","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf4df6905d6dedb464c7c9ae4e869b3f9e4e1f95","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.035cf2a6f.0.tgz","fileCount":38,"integrity":"sha512-zZQVfjqD5JEZZvzEikvJRoa+GKX6iEwrgm70tPkg9r2ahN6W+bv1NwamNH4Fi7QtFvvG776ATCXZmIZp5zFLHA==","signatures":[{"sig":"MEUCIAm1RKEnXVdfs/JhxERNM5EeH9QSxIEa4Ta/PHU32n+1AiEA/eL2L1Wx0JZ0XUIPExkTQjgvWTebouBvnQkfMuWDKO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852yCRA9TVsSAnZWagAAWNUP/iflSVi/DlFTAdvb1FLi\nmsp2c1f6nOMEuc7IuLTrVWZu1OWH50fVw96w7Fk2Ha4ZromzO3R4701fwUOK\nGBr8cOVvS4zbbdhNnY4kiJFm8kDCvglMN3lGLdo9shoryrkaPFSt5l175kcR\n94wTNxabAxqRKzopTuO8Z6K0xSGJ2KRvDd8pkGVEDrgJlntni0l47sw2sVXS\nD0roN8kKuNlHGaUEX8sTBLrTZo9nB497sG4zDfn7h+J4/de1yK4r5r6HwSp9\n9n5gARpBmamBmH+93PI//a+jPtvYHPTtbwBgLlvUiCHGgkjOzVUJJ5xzcUpk\nUCZ+80058TayyTnQI1+43vxYVFPgj6QLBl2rStFpc1AVO83uWSnIZHnRoj0K\nyM0CeHgLLGuUEn4wAFRvWCyKNSYTJAYmaQobhcYYBdcsxb0owJagbp7JFr+2\n78XJemRfGhgRRsmya/3n1ltFXEIMGW6YIo4jta23VGiinjvZg/nDeYAV0dQ0\nS3U+avFzRGYudSGrJoU/AeDn/KMHCNzMILYdfVnykk6+oFQgMEhPbbpOkYoS\nP4ZuxZua782YlgwER+sX9FeIMrajH1BS1M+EWRR0Iy5weVOXAiYGXLJ3uhEL\nW+lUW1NLdwmedv4G5mXt9jHfno36fcm/LyeW0B/bmuReDOldmV8KkPv9NxIF\nNuhf\r\n=ZM75\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/density":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/touch-target":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.035cf2a6f.0_1593023921512_0.4520615843612916","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/radio","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7979d43a34ff0c2d256c0d4304927b6d798c37f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2fed2c12f.0.tgz","fileCount":38,"integrity":"sha512-LC4URld0MtoVEDSqZftMyZxNN8+QjGa0zy7qDmEPfbIW3XVtDQseCLs19dPmgSpa1PjeNo1Vtzbo47ArDAXoLg==","signatures":[{"sig":"MEUCIQCyDb3WYdRh+MAPxPuTJ32oBpj1aGkot79+KDeHlGqjjQIgF4L/XGuUXsIirN+7c8Dm0zU74xwvm82q3kQbRmf/Gj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKnCRA9TVsSAnZWagAAwlwP/2bwCI3tGqrRt63smb6m\nHty7MW1UVQNT0RJbbsaubIs4zuk+VKzs+1E8Bh4TnXkN72OD6ByLlu6D+Beo\nUhLVpjPArW7EDOE27kKaOQYdISVex5TGOrhm9VoD5IwgKsFv3EXg+7XABInw\nEP8gaUNzWE9J2upjvwsIeB1zg04betg0TyY71ptsBXJsURpBQ7XTjYikRig1\nXij93PJKgWJ54Z40w9dARx0fgiGOeMaSGGA3uZ7QKGPUHKw/XEFye9rPnGRR\nOkXBek5FoAA5il43IA7Gw4JjzGgsr9ZBb8J3yx1GHWERq2bulUtPBw38VOZ7\nPFMCf9qlsk+npDQPUl5pcg+fn5kM2v1A4Yht8hzvpwASZXJH7/2t/DpEOx3c\nPU1UkFIb0VXJn8+8wqYROeFuJ7ztAI44MeLuW5WTQXcozrWlhOxTfRSSDSGV\nqIIh9Okw1fhnOCPe2UL7z808pNZjxLk9F4V91AtPqA1hCXvt+XiGW/Kl80KF\njx2on73vJAVzjjc0BlQi49FFj+JXcDVzQ4I8pWqoTYN0pvitXJrwgZ2xXXNa\nyQhPNIvJ3IHc4HzqkiqxB10rGiYvuj9pccztK9ViwMSM2FRVNjcUn723+8JR\n+9JEPfCMq445j5vxvn8GJtR/4/XI7lGxlRON6kNMvHEFElAArechMKMTsidj\nXP1V\r\n=XcKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/density":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/touch-target":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2fed2c12f.0_1593115302778_0.01934760213443898","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/radio","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c5d176ab658b1aa2d627dc751c9b49cc0ecc32","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.38197b443.0.tgz","fileCount":38,"integrity":"sha512-UaFwpn6FfPaaDVSUYSMnn+vRFo8TT/WsPfye/qUh3yYSt759MPA1DtrMXsTSdH8bChcnxPHGEP9PGvCxhhdSxw==","signatures":[{"sig":"MEYCIQDdYx5x6Fd42qyyBkdrs3T/GWoni6byqRBeaqp6+1AOUQIhAJhANYB4FTy0HGOG7UJZSqwsDMJoQTDbdKnzsV5eoRjY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWTCRA9TVsSAnZWagAAj5EP/icxNGVRhrBcxuF4HtAl\n6ir0mE0/9vIZMgqYPcHOTFOP1aM66yo/TF8fB5Zky0OjNAZ0fwuM/sQwQvEr\nuFlMY8fvTLbp3oqoNgRFIrpWQCn13JlRNOMXCxHG1qfTDOdYnn636Vy2Cyss\n/GJ7nBVhrEp8bpVJSOaHllm+KVQFy1quvSje/uycHLp4dLQ+4oEtUjqEglPt\n7iDZ2n03QZqLjNDq/EhtY6bkN7+csJxmFmpTrBEe4ZH/5goFIRKKQ/Djuqpz\nq00vgf3okGsP2HGZckWgBxDY3BvJKBjUvfJkCMdQ1pp49WE4ogAOsSsAyEcI\nowrq39a+ToyQnrgOfuXsnA+Guvxc+La/519z8GkqoV+QNoDKGbTJpzX+tF+p\n2qHAun+cvVsVzUZ3eXNVBqorzItITtRmf71KBscQXb4C8HOY8sPbplbH3T4U\n6/IAjzCGwc5y7jAC9zfsOdq7n72Kj7wAkSoB1QF6qni6XDCXW0q/Q8ODNTCU\nCQyB06eLFNAQ83M9zlXq7sSiBXNXMNQmmr7RnPU0MseDfozy7GnYxFRG/tXg\nKmeWIRp44iFcXj1B2vmCV2QiJ1uzJ8CQdi6Qr+Acu5TR3c6cje2xXU5ybmAW\nS8p11kHXqerqYsb+ljou03TjjdcEpm5JriFWTBDD6ODRVbLMPhLJ60rY1KjJ\nMQV7\r\n=hcxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/density":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/touch-target":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.38197b443.0_1593120147307_0.3255417582314153","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/radio","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"456f6cc9070c5eda934bf3047a6e4e361290ea90","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.69a35e80c.0.tgz","fileCount":38,"integrity":"sha512-hqQGen8XhsedWE22zIWsFldPd3iGRgUffpcrC1jWgKu6WihnWUg9BC65nTmZTOyyjEvC6te2USyA69J6PvDIsg==","signatures":[{"sig":"MEUCIQCFUOiEji0RVmV6D+0PkTcOmHyHNg5ofB2c8lBgPIwANgIgCZC73ga/ffVtYpetP9t7ioEVL7iAdlIW9KDvUHWUhDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKoCRA9TVsSAnZWagAA/FMP/Rtky7pFrXZPLy2WlBed\nJQm3M8C9dPP8ieeKkocUuoJXtf+nuuaubpio0EWe4P0z4XVZuxKi7pmkf+kJ\n+epLWMLPazGvZlsNT360aCFRBCPxNDOzYZbn1fTPUIVEDUA5+QYrbuJ7+Ov7\nBNMkOBT0JQoeCQqXy0odNivg/Qv+YDTNs42C1ON+SomkpyicEG18f7YLUKTP\nmjV0MO3l+oR+T/NSL6RhKCZf13As3NfGMYCdlX8cZoeZOja8oD3tQfYQx459\ne9EMvV5TnmZcMQTzr/ue9BQM+6LgmyEI7EqND9YvxvX+4el59jWL6tPt0lpN\n+xXYN5kCPN5B12mwKx1ZYPNVSAzxsCUOKnbBLVqYmzQf7p1qho/h+DJ4BUKx\nA4iUtMIyNVTRfY/VPHxvXbXmnW/43gv0XRGSIdt0OOaPji58cQsNHWKvvFsV\nQJBDOscerVpqefO6n3pCmqPHXcA/cucD278Y0AI07Exejil8HMcnfn9CtKmY\n6bpXJzgIN+Fs4CuLDPOtxBl3M03Cfv2ax+mcdY0MzwbexEZKj+RbwJ1JR4zB\naFGfl0j9rdkWTIpy++tn/xjof1K7GKUXU7JQCUtoAFiaX1pE9gf6szRRgzGA\nT/At7SgCEA8ToFmBkqIFFhknUEh610ezR42OxKe4Q5oQ6qpJ9X5XMCFf/6/7\n2AkM\r\n=dOrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/density":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/touch-target":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.69a35e80c.0_1593193127897_0.5508166694234347","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/radio","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fb28c23a617855ef98636c517c95046ab920918","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.df7154fb3.0.tgz","fileCount":38,"integrity":"sha512-8h9oZHQTPzb8bpInV/xlFJ1uFvBGrUCbwM01NiIYpC87XV/LVfhyOg6ohmqud6QCtj+DJgRu6Ofvjub8hgu/dQ==","signatures":[{"sig":"MEUCID2H6FxNQGV9pPXUPaaqSl5imbvcRqL5nJO/0TGGBy3oAiEAqkDrNJFKNwhGgodAJY5scDWPfgAnXd5Tgyo30uom9Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juICRA9TVsSAnZWagAAzsoP/1oWn7h0Ssc9F6l/kc38\nEkD/SCdTm3RPJzIL4dSZLIc+odUS8NkOhzV0OQoU6tE6nL3Z2JVbGRNebyXw\nEgE3ZfZHFXnQWf8e5pgpQm+fBs/iSxwvJL8FQQmJKIZkgNcmlzu8pY6nAhud\nkNhXWi364586k/+kYgyGRu29yUpCk2w8R8ishqwnmFyvj7UbaeIekxFTtLb8\nCpMs5ssELcmazte3pBv0uyrl5xh92n2qy4fzSvwqMp0Ajtr46f56CTQzWLEs\nZTTTmccwmsR3l0zhZEFYXBuE/+s2Rm90WMFkHN7p5A3rkrxdB5svSHmKbcj3\nPkw9edbOsptUgDaoNwMbMxDJf6Wzk89JgBE0CdmKrTuj5CfSIlSjSDpJt9PI\n4oDbPWS4FXS71BKxd5Nflp0AANqT0JR9QVeg4BRL3Y5dKylGfrsJOYLifodD\nhZECF4gxoUVBOZlpheLvgZlpZ9ulO73jWmHM/0nlro6InfyQ5LySqtrVKxR/\nsDRpY8Cs719ahAgU+S8rEuUGFwIvQ4rckjauY1ww0ElxBL9z1HgyhNnuHigU\nVJdAkxSRy9YZYWQ0oRnjTlLhq4yBEhd/Khg5AYg54wveq41gBQPxQuu/uD3A\nKwouDOmp826StAM3OXRQxlbSLaOvsbtzA37Bm5u89xXtelOoxb1nyL3v/jjU\nG32w\r\n=y9Jj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/density":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/touch-target":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.df7154fb3.0_1593195400114_0.1818137220042335","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/radio","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c09b873ee1222e1eb3a11ff8771ecd70c014bb7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d5618602a.0.tgz","fileCount":38,"integrity":"sha512-jXBU7XByGBMdRLOJmodntpTm7olY2s3PbNrelicjXo/4BxTg79pYzaiAiFuzFrfAzFnTAsGWB2gjyLF8/CtG1Q==","signatures":[{"sig":"MEUCICKfjaaar3EFIsNDD3d3MmSGR+ps+5gRweB78e1MwkIgAiEAyyIu5lUVien4eYeo42U455Mm3JIFXToJfftzheF+tYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0bCRA9TVsSAnZWagAAn1gP/2k15jZ/C4uRNa/a24Ya\n3UZi1yN89GVIUJf21pDJOyJQ30Wj+OyTBvGjdApVq0cRsZHs6wQy7KCabYZJ\nQVarufxI0KYjivwWg87JrWKIUWqF+j+zqGnUHyWEQmhfjEdmBbZWYRBOLVeB\n4gCw2vqCTPe/wryfKUrkEAZr6fEnSCTqnHV/jiX23oiTI1M3Ja5dA8fa9qXq\n3UEqy5yl2NG5Cxs8lo6OOfIEIVIAY2hOG0dOpL5SK3XRTCtG181U95CfS9hh\nH3yOuuIrbD3baaZtgD1jTrobN6ggD55FyLwBh8fcbPMs+mZhlQUP7jRhwK9R\nqbaqnPxMt7nhDZKLedmqUoiCsR0uSMOdQ70KUnubUcrmaEL8EWDQk1YyDkpr\nevM1l8hVmRpwUL20jYMHW6Vce7jawCVvRGnB4/k8XGOktX3sQfWHAuuOAIHE\n8/t2H7dgK+gSamcWKOEvqU4l+Pwy5es7LEnGP8IygWXzKqz6QrjlYpsiK/pc\n6GA+KsmhsZn7qXNcnG/vl90f/VBcW54sUB5vfDGVE+pdeVKGKnBCd0YaUj1i\nd4Mcp+4ASEBFDUT/Tdb/NUlhmNhrw+r6o6Zdo/1rZW6NmRThd3Qnw3Jh2CGx\nlkJX012StnC/fmI7ifq0CatSvmA3kjf7V5+ATVIlDh1btvkwL4fpBVk3617L\n44s2\r\n=nCYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/density":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/touch-target":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d5618602a.0_1593208091538_0.4280623185738077","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/radio","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce950f56d6c1d18cdaa03b69db25ab49b1455f74","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e590b376b.0.tgz","fileCount":38,"integrity":"sha512-W1WLO9SCHS8yjVlGTtsDgC05d5u+OL8R+dRVzD14nF77Gt+joZlUCVKcHHSa2Tm5hqtESp/klhQFn1jNsA0Upw==","signatures":[{"sig":"MEQCIHFmUTwvq/0EbqO+VjUteQ0Ehyed7OuDnTYB7Y787GUuAiBVKQDYZT8gAth/cOFsbEychKMWBJdND8dQOrQGkDalNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oN0CRA9TVsSAnZWagAAdRwQAJu0ergv/l65fd7Zgg0u\ngRqJ6MYGkv6Vu+DsNIJP140bKUGlTeEhxqjENr1HT81IZwCo7Gn9Ds3WE+Wq\nfAVTJXqU5XlHnl0sRKcwV67Gt6NpoYXNAeOV71oNoNHWpQMH1P529R1fcQPQ\nrbx2zjLVhZzoT1zZvCvUGX+XjD59dpZt3Y2BnxUyLl0/OWL2KwrwlCSkLwXy\n/JNqFJgybiZx6X1djM6LfQq1Lx2RiDb/FSVxxuUV/oLjSTnfM/o/VuoQ99G3\nZZPf4tUMvTXLqUrUHIvDCbGiqawAXzQ6tE62YSQMEcovetxfDnMk9hWHyYRO\nGRP3m6GILeRMgouZIiS3Iv9kq+wUO/WYrNz5ttRwV3/Aw3VjOCuCZRivrC8M\nwcTa7mpQPWt68zxnl+yX/Maf3Q9xoqRiNkzHN5LtQMnUmRe2wDOIjQSAkNaf\nAbY6VgVgajy1cpYpRETc/Cw8U9RV/zlDjVVVWFXd3NOYdoMTTEeNsLlew7e/\nY56VzvMEMQoSl7pdnRf4vWt67rXgl3zrqcLVTWnRIRrBtzG64V1+l3BRZ88B\nAU1Hgf3YA4i+rdBvAwVWK0RnGEw8Uvhz0ddqz2xtbNyfav419H9/LEvmpN6g\nv/nXyq9itsl9aRmR9PyHZ9CZ0Ftdtt3e8xkhcBkoMv5JZSTiC93TpOhL85BE\nDWVI\r\n=YW4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/density":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/touch-target":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e590b376b.0_1593213812104_0.779410477236194","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/radio","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9349379d08ba674d0e5a1d523e0da6895b76fc46","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":38,"integrity":"sha512-x3Bw+m6H9QKay7bQmZ5UlFzZZBaAQLjDKxuLosWufDZz/GmE2yfgMk6qPgJbEBizeLNlv5NkgDmjA+773kiF/Q==","signatures":[{"sig":"MEUCIHSQeljQNmyovo9AhuLKbFq44Ef7Yk9iYZu36nhS3UWPAiEA+G9iW4WUCACIeDgbY7xRoDHMyaXamLlxXcvzKdSh2RM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGoCRA9TVsSAnZWagAAN4wP/iRFqkx+/FErOGBoTtpu\nQqJviNrw2qM6K6p6ilfP86aro8lAHpKxOjMmOLgx/zlmoUHYT1wrmbL+hz7D\nQWQ3JY474FjA/rKK8GtuFQByQie9zhVXXxGBFvLQ2t6U7J/1mRSYz68CpUh3\n88dXQpWL5aAXH4hpkAU1yB42cQn4+WnyfOGuY6zBs6lGaogoA4tIi7e2zBMv\n6R1uV/AS1d8Dv/eMKH55LdrHvyI9CylPxlBnTVhZ66fr4T7slnzJDI4sMUe7\nS4OalRpPWx0JPcR/6VXQobaKnbtwwBf3B0RkxZI6LsVPwsAtuBISSPpK2JhG\ns7qFduXAmrNdHhvPDFhzHcRxTRQsdCn8QJhkIlGmNBFo3G5eWjp07eVJP35v\nlGwy92zSoZHWcMx9cqoVTsuoJ69MV09EmwvrlwyqYmgucm6bidB1Qiws8nW9\neicz1w9MwGd2kgRy97NHsgdn+CPJ0qmnrIzeuUKwVN378YtVqvD/zAxCnWmk\ns77q0qCNnaQmzxmLSrghPrVtdF2ZhsIwrkxfUkdspjDPzxbpiFmBa8YfZ/cT\nuPskLJXfthVAReh3SDuK9eXRJwXLFzKP8vlLi3pTbAEwxQKMjGSZm6Sd5N0u\nNg7QRgNqkJ7uBCdjpJPF08ui9lP3XOKvNaBA3NaZUeWvDcdK7pDbiHxUJcKt\nypJ+\r\n=Pup7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/density":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/touch-target":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.0c9d6bd2d.0_1593450920454_0.8275580127441728","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/radio","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95f81e2f6a5d4073d6e7c47e5ff8eab5f508b31","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c1fec4246.0.tgz","fileCount":38,"integrity":"sha512-U0CgAAtXbwd5ZGiagkW7x0Th2LFuQkL1YEg3F5JRe+yJZEHq7ZxlPMUQXwnygCimRaJPYfeNPueak4XpMy5DPQ==","signatures":[{"sig":"MEUCIGxSNiQmwKMW/wn1YX7NI8prc9uu/svq9VPWRNmJ9A3sAiEA+w7XnoGLMyADvG99E1qgbcsWIfaSey+2P+tc2RbDGUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iU2CRA9TVsSAnZWagAAVYEP/2cUO0wphO/qnSZg1GC8\nt3XAbkLMV7tIIwyQ8/uj810wwmqIwLtxcSZhg1DkN6yUv1Qyj4SBlo1Ibzed\nuzocOY9e51hUTlrw8Um5/UTTvaI9coUJ+2uDTqjF6WGcpOQDt1DvEN78XNuK\na0ZoCn4AHYLBX7LXyoE0kYMrHZvK422riYOcAKEVtzF44KJWePYLAxl9NY9z\nIHT5HINiLZvZl0l4K3xiUpKmO5wk6GV6I513auGwifT26RMWf0yubNCOkSXx\nDzvpCT7eBlUyslmS8e/IoFHsvT07hA8Tg5i1UoT4Beh9vof9m5J9hJXuJsln\nkIXMi1xhJPhjDgcQa5TXPdeio/uh9tnnw4wmZSZSqqAV2eNAQ/dpkgCwW1F+\nx8wRsT676cgMT9Cb9zLZtffY5gKLQGqQeGdIZh3MeOIYi/zKCX1PPTf1rGLJ\nUS6dv4h0GIkbkiDrSxEjGbpRuM4z1QMsD8WEqy06J6a1zlK6yehAIyH2jm2y\nkwCMUSSUP040FwMnbnWO0XPt5kkoTOliVM5lvxGHORubXuYnS1Loarr0bkfs\nw5pew+9RIJaVMfOJ/461m7twN7jNLsBkOmq9L8UKiXMnQ1uXsWIjVaPV0b4b\nVePdAErKhcA+zUyD2s8mb74/iA2PFUkrVeFlkDldf4vIZ0AeRcEUxBiHV1Zx\nHsDs\r\n=hWgr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/density":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/touch-target":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c1fec4246.0_1593451830252_0.15150472537299486","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/radio","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02399828a2f8cafcdddc7503c2cae60886563618","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c678a9d34.0.tgz","fileCount":38,"integrity":"sha512-uNm/O/IpsRXmdRZTxTcX+nEmrfDhWIH+qwh1wWwa+I7Wp9ZhMNdfRpBaS6LDUKJIoCJnp3rYi2hqZkcW4B8F2w==","signatures":[{"sig":"MEYCIQCAEKn88caOawKbZV43OPShdrxWA7d+ohf4vRjjZQPuiwIhAKZWLRpoXw2IVn/4BszieJwrZW3QEmSQE+58+wIKwIbh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iozCRA9TVsSAnZWagAAZwYP/RfBuBsfgcTUv6LhG73k\nfV1UvQPNbJZCZJ+nsOmIKAhnm9Yvzkg5zMKlGWWL8m8bkW/HqOvmQapFFwa+\nLKklfxg5QNavzkFDQaBAV/x4ZWFGyQNcnXo0fBf6sy5SlL33hbh1AIvCtwnV\nlSR0xKvGO5uYbXaqgVTcW0fQS3IPSvSxm+qvkBT9F5BieLV+17JkexLRV578\ngQQHkyuGNnN1Y+2E5r3I262ui1G5eUqc49C7zEiHeZCua0tWrz2qRFai1DiU\n4z1EjxFk5J+otGeydhHd+5YUaLzximrIqZuUUFBE3a0yeVjSHm4xyBha844M\nllJbkKq/A6SNg5KEEsrxD3qa3JPz/poOC0nHhdyHKvBmpwPubS3kG2fpEa5k\ndyGCVKNKQ/O+32UZMqyPdsYvvP2J8i9PZ4hx2F3B0GZQFQbcwE1zR9aHrMA2\nI3ez6Ye8tHnU3vWrAKd38ObU3EV9a0rugeib8V603E0iAqkB9iIAukEHYnrb\nkDBRCLy8zllpCCxOvV5LDoJEIRNaHGlV0ou3qFE8Q8idu05ofGY6/IvuVpJK\nEETkgN1WsOhOwlqiO8Y4pin77GxquWONIvMWmZD6W8n/BnPP+SlW0TwT19Zq\n5wwfm32LWc9Pc32vqfH38Pk74oQHm2EnU+UqMmlxvP2MY5JckRI7ZdJDvitt\nSqXb\r\n=Gz3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/density":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/touch-target":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c678a9d34.0_1593453107081_0.25516637838468115","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/radio","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7193eb96458abf540505cc75da1ac99ac2e1e9ef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.521afaf6e.0.tgz","fileCount":38,"integrity":"sha512-kBoXDznVW5IzMIp244yHkr+hBWP8int9p+6tzUcAeupvXnzu/Q9rAWaKUtzQmn9T1GPblfiI/jCvssq9yMvm9A==","signatures":[{"sig":"MEUCIFfc/7gDwZ0FWx7fhpxhA3hiTXcPvoeB5dEbGyb7zuJeAiEA/s59E1uQXTdb/I5+QURusbWAbAMmeJMQtIyrX789X1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1S/CRA9TVsSAnZWagAAC5AQAIFnYNVv0441kRVkFM6F\nBzSIaFDPe9jv9+i8DNWwWdj+tDLb7IckkRIzdgbu27U6vC7ynq6SgolK+lKF\nPugnmh9gMg7hyAm/Miz6tDunHl+q5HskYkWbIvIz5ZKT0pby3i3h8x45rLvg\nJoapWAXt2FDa09oi7GDs7RFt4iyP7Y3UqIL2fybD7+MBXmdeGvZ0w9yyalnE\nP7drfOJyr5gZiIi4nPSq1gfjYsaNS7LxXRtPhfJzoErFDogOnLkbs/kv+tdw\nAhEbNY2pVdYMDqO/rA8pBn4E97jEu0ES2qXKxsU+ZSmoVO16zgt86ih4cDaP\n7qtUQSRSqhVX89QYmOzQzufqHx38bXRRbiQifOxsUH+r2cEt8iDiXzQRnKeL\nYg9cvm/axWw2VJjRMKlhFIObFYD6lI6/DLMVtqKkKSXRB+9tLDqn4wUSew1o\n8Wh8Pyzz8WHAz/h0dMSvoIXm6CEbgcDUdRwu1PwKawoX+BJKrnOkwkj+333s\noSiTT65KiDar9PFaUySfkO/ojAkiuHDX2yVFYDwujuOLzJ96PWujn5BM6hZd\nRyC8lRB5eyT18WFRjFGLWePwV1miBqg/UTXpnQtNwJ1lghaFFNImngO2gJNV\nWWm3fnhQcIJSifcZXXlrg8ttJV1dnmc4MxEP3jy1aCKPwuasDR7Hpe8+ngr9\n09cm\r\n=4ndP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/density":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/touch-target":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.521afaf6e.0_1593529534859_0.8261661505759219","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/radio","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52d47d469df41019c12a91b3374f0c390ae7f0f4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a2ad48839.0.tgz","fileCount":38,"integrity":"sha512-6GURQSzpB/fQShMCMUZPmm9uEukxhc79bKNq9ssdFCoqe5MrcFlCcPPAKL80jTRvbJLZ0rEqJiPskiuiU+K2HQ==","signatures":[{"sig":"MEUCIQCvAjJaTXI6kiiGel5P4Sxv7l/RTJKi+ALABgpgPsTuBQIgM4kcrED8iFrm8L58eZsbSlJKlMcNRR8uMkWqYAVvC3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48QCRA9TVsSAnZWagAAXb8QAI8vHVmqtwK6FEvrjdP5\n8nn8QL7v6Dk+Y5H8V6vBDVuQ/eKgI4oeCh225n1DelftjCKUHuy3fWK8xUxU\nNNav2AqXTo22VTpzWbG/0TEa/c4j6/M+kLnq0PrvQlMAuEW4NkqMl5gt/ipR\n8T2+8jzfN8254SPavfS6Cn1AVqMtcGl72EDMLvaCXSrXmSOvc3mDg0nQZACO\nsOAK8qnXdBzlMNgBgLaYbWN2rMCQKOIjM02M8qtR+AYKBTr3OYX/KX9CH/Zh\nZ9NH1N0JqbPnbk74JSuBhFyelDw+U4yUimdZtn3cNrJr+gifDuH9o9dj9H/0\nN6FZHif1Xwl3eEGiCmo49muNoy4qdA50Owz2Zs5w2sF2s9QLGk/lJ+YZ3i0I\niRghf1JWEzoO8bnbFK6d0i2QtTK7EbV/W6VgmReoCGK4DzVxS/wfejnFWDrx\nKyTah9CQXZmI63eLdYiMCJJEtRyvh/L2itnZxH6CJBWJ64K4NRYfTaugFboI\n69M2mEMY3zBfhkurk7KhVMABs+5Z1+GygyOlqDjWV9aE7eVyXBRV/wKE9Ylr\nV0LXRn1xFPpDcPB7zBhhvn8ox3Xj6+T7bHe163HPBkj6htvIFsk7JNPso13I\n297SCMFTv7qyE6M87yWz6i1HXgOYltVNB//hgPXC91jQOfxNSzoTTRJRHmx5\nZdkO\r\n=bx+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/density":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/touch-target":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a2ad48839.0_1593544464519_0.839592994195423","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/radio","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4704e4c42d7545e854359e21c766e3dc29d5504b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ec2385881.0.tgz","fileCount":38,"integrity":"sha512-nDhdtiPDfYe2TlYTwaTxhf8YE28v1wevPtUBLvwGvJd/aw73LlTqwFdGMpDOt3hXEmwf6Z8PuFYe8JuciRcV1A==","signatures":[{"sig":"MEUCIGskf5/8Q5fsuh0Fxx9jLGAr59Ye/01G4oC6vLrRYElnAiEAy/+he84FfwucvyLzaMmDAaBmqJ41knN/q8xgZbyHB1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LSCRA9TVsSAnZWagAAjwgQAKEA++fV4NVV2ngoyqsw\n5gBF2DtPYLl4q+nK+pjKlSa1Ce//mOmwBFrQeaNh8fAp4lnl8EwWG/hHzMpH\nmZ8KFqRrKHFqH2F7FOyc/0l6hHMP6piEhKRFCFfRanaoV8yPWo/Fna0GyFTY\nOYmWJLWuUmM6p6nLfh9sQ2jZaWINwxGh/e3Ah936iVYpWfymv7nquWx1etXI\nobRogJ94VGD7293sHirFwqEbwRZ2/zBJGY5JT/t5z+c3y7oZwZC2zGLx2twJ\nKMylLA7iCzyUtou29sxwxllX7hyzpcTZ93j4OZ9Bl8LR+f/A5YS00zxqHy9A\npObqR/6+sei97js/1Uu9HxptPvmNf9N478EV+yf1G9F9J/N7XIyH+xi5I8At\nqKj9nyE7x8SKrJonCXdGxn7RazJezDZNvcoBIfA2R9y6VG9TfcGfbmtIb278\naPROvujOSkDhDZEJkVM9+krq53eYMcmQg6SBp7Br0hgXzu6mJP0ln+yObNw2\nupu8oYfug3ySKHjv6XBAmPjsOyajCjVtdPgM3iKsD8PNnwCIWmqKWmsX9Xft\nPo0l6jr1sJXFQQmu/gsXwBOXGNtTvZP/sUFB3/HMQTqvpBTcjy2ZV/uO26Py\nC/rfzjubZTxF20OPi8Uk9CHSDaiqDaw5SKvllHRxG5XIxx9lm/aIj65vD1Xw\nwv/c\r\n=2J1a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/density":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/touch-target":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ec2385881.0_1593553618365_0.022735715468690243","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/radio","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"710189ea02e680a52cb9e6cae09265ca27423890","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.610c26c4a.0.tgz","fileCount":38,"integrity":"sha512-f5N/yGT2qI0VLsjajokSOZ+Lb5CFMKhf/dkbi9h20O2hDgZFiFWisLqT6/Upy0N+2qW/QV/VtEyd4eivWnH7Lw==","signatures":[{"sig":"MEUCIQD5rAfMA/OG3wxekdkldJdRvJjzRVsnn/4UupK1l53hbgIgK9Tn6yYLRar8e8abBOhJgqhXO5/w5clSKQ+35dvGAS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQMCRA9TVsSAnZWagAAonkP/0JniQ3Eds3Pum3/3RNs\npkWTv+eKxlTyeLgjCLhV0KQkYOPdwQLMFkY+IBx9ENjvfkgQyM6bziqQGvvO\naupoFYiGfyw+IG7OXLK0OkspwOkCISxcBlcHuzESGnMSOhQmFDDp3DvrtS9k\npxA/Q8WVKC+L0fkcLdLnqbocrOOQmWbVdrEk6vLL09eOOHj+2l3kf+wHeZSv\nlxjMZ7I1Er1T2Rsg8UtLMfRdF4D56YJ9r3dI95v03/fwjZcoklbVr5wHojC5\n+F5wmpmmhLsWusRiE6JFw6yN7dGn2TjiwZMcjvtGRnInmcnoy2QVk60+oaPp\nc1ZVdIiUmkVHJHmVSoHebl/MD6r9eAAAuXSA7lkVB0JfCDN9Die3WOqFNnkG\nFojavgGgEqhr+M3QKlDz0EfajzmmSTrP4Vo/tbWaDW7FrZSY1tXLytYpCRwp\nXthVbiAVhQPrlp3WheWV9fhewPK5eerZWk5mKkg7w0eWuzHRRKmJ9xcOEfHe\nHLaF1iIGKGc1fGqZDVipkEuPf4GMeD0kJj0Ww4YGujtCndKyn5d3Sb6vDuNF\nD5mx7co8u5FiS8qqo3wwah84dQCvWNE0bwvfY3IMtfM7q0uDgwNHuty36aaw\nl/PiIA9OqcRVkB+SfgZpHWChH/6YaKHqqTJMc6Iix5xh5O4krXdHXmfbD8Gl\nnAcY\r\n=e0VK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/density":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/touch-target":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.610c26c4a.0_1593615371789_0.5006961151926592","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/radio","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"459b31494db28da5f0a5dda1016c542187ed5897","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":38,"integrity":"sha512-RVFw5n6HeH0LY2lvifYFN+YeTieG+J+X/ryxQfz2tvfzH/luO8SltIYEJ4sf7zQm8Z4OdUtm5BxNy85iP1EUMA==","signatures":[{"sig":"MEQCIGBZun5zRNmvy2xXd7jWMmi/lsItuzDtjAMmbnGuvW0AAiAhJvrgMM30SetjkejINYm85GRApZRR9EnPwnxp2gtWpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOSCRA9TVsSAnZWagAAXDMP/0g1nTFwS6SKy63in7cf\np6Dz+yYkcOKszZrzGouFardih0lGOZhxtXQUBQolOeCFU6RxCQoi8M3IHcE0\nJ0z8lA6Eeyvj9m6BOihTFh5bgQQ0nJWTUxqlhqTKlkxvEJg2sREl2dzcASeN\nn6qNOOecvPCRzMVlekCEBqi8EnxjfKHYBdzC+9+8hhmRPTCgHhukFwDr2JsJ\nwfs3VulyC0qv0zh1EOZzJfYjrBGLxNMnHDo0YRIfDlkSbvw+hMaShNCl7gi3\neRzG1Im8G5zg3+jzaRnec3Kkbc3NSVKv1gF2gzWtpKIP101SOwtrVup78P+/\nOjBn593gZpg38KP6D5Xmuf4Pwgf7a2pOXLECGSLeok6U47a/bvzDDQnsRlW4\ntj4mVOBgC6z0rvHNh/BAF30/d5Byjlt33P+Vs/04Mx9yTICoLSBEC4pL6C/8\n3mnCsIF/ZpiAY/q+mKMDFys4PVwCeggCOLM04XXZJiMKCY/VLLd3jxpORAjL\nFhhtlQyTZaQxUubpw5xqpgClXzvaFttDxrOqPCsxdgdSvJ+tq/hN4IiFFITr\nsYz+EXBQWP12cxPEt/F9tplKmDk5MLxvGPHwJVA/CSyKFlR+VXQbrSQ+zGXZ\nkPt08nOOWPow+noa8XH7IeBWdYaYVnUuHIzvnFox9aEKuhaARlatgyG9/atF\nXyfS\r\n=C3If\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/density":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/touch-target":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e2ea4a99e.0_1593631633999_0.5386780449792874","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/radio","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ff41946e3cfc34af7a056f242700d34e00eda2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a78ceb112.0.tgz","fileCount":38,"integrity":"sha512-wjJ4MP9In0mhh+vafraFeuVa/M8HImwpFPzIkgH7TcSS4yIPK3KnTK5RHyWWEUA+Lk3DK02B8VRCqNPjRUhUBQ==","signatures":[{"sig":"MEUCIQDVJRta6chfoZV8PxTN102A5vK02krqR9O3ANxlWwhlTgIgEZoOv6g2n2wIVLjTK4aUH++59o0d5MkZAlOhUTnL084=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZUCRA9TVsSAnZWagAAEtEP/2e3PgCUU2r/mAAuFeA7\nHASCffsaBWk+2dCwIj1yTHGn+1X6BH62U3uxtjsZjSKLiNR1cCGbioHVwRLO\nRz40rapGIx9rPejheJHvAE2wGu23M5L44DrvqT1EYR573GNDYBCEonlYImBv\n/kk9embzLFu1OF/DPsX+5K7MF5xUE62uBcPbZ7BLtA9kq3LwVY3C2Olw8eUS\nRG08kFu/Ds6Ll9CimigaIg+h3ozAeDXpjCVlurIiRz5E9AV+dv1V/xqRJuiy\nJvQV/v6QmnXn8sWV/u4jYTPT5ImG3WI4hNHGTzAl3slMl/EBhdQm+p9O688V\n0TO58VaEgNBMHa6NQOPLZ1GsRye9ohyMtYYDfaZ9IjPAJLWPQwUdCfe0EG5C\nsqy28SRpRESdrnC3rcmzlOfmxyHpBCvNn+/BaeibFE7MflsLhw83TXBXvZkE\nK8JkXcY1OBw0XG1MPBZXDNS0Rdx25It0BsezJ4HhrAS4H/VYqbxATIhR9ORf\nmAFLKzBoLfTutQWBIDjeSkvUJAFyG3e7eFwe0x+OiZSGjhYLZ4cYOxKAoLh/\nGBflnnPBMsos4CZvkGv+eFFAx8nDwNYUDelt2HUSPBFTHcK48+6EQuGBX/JF\nvwlvI4jAT02R2oZy40iG8y8b1ThBBubL3tqdaJLY+gzmGccadeHmXcPcdExi\noWvE\r\n=r+YX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/density":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/touch-target":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a78ceb112.0_1593632339939_0.8449668910669421","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/radio","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de37504fca5f1e36001986ba5166a53747b1687","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b0c456d33.0.tgz","fileCount":38,"integrity":"sha512-Tu9IfSoNyYMn2X3vwNlYMKDtnwUFgyVfxGVvtFE0IVgEg7pcfxHH8LolHqKfxmj++uaaA0n90ZFwwC2K1/WaNg==","signatures":[{"sig":"MEUCIQDS4QpjsMmOMOrY8T1EjXJt2LgxtDxCcc1awVGpuF1kuQIgEQChy43QRh7PNHi1e63aCB/QiGKE0OkHJkEb+shYeEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iSCRA9TVsSAnZWagAAnBoP/jtCrtKH2mz85ZX3RZJn\nw7jWVW7afZpPSxvv4rGLGkpjQnL8Na+/VtnkGjFtWbuOVmzgMGFsHlujuuGJ\nthty+kMcD34/l9yUjH6Nq83v92/uePp3w6v0+yZ3ZmV1wJxWEYT33z0XSJDQ\nq0UQ/ygN+4nlUW0OP6e+bBwS4pGcsu5CDCEMDGRtSiwczWmd4ibOgXh7mwad\nEc74ylHgr0eIi47W67ROTRNbl9OSNtVFbqD4G5TSgOSo+XmQhesFdRupC+AR\nEFyV8pgC060Bq1LVUZfJZuapZIdDOCkk2hQy3IQ6MPIalKCsWKtkaXFzbt3d\nkbx8S+lN8OwQRewsyHLM2fhGp6I6DFvG9GnnlpZfEa3DdpfSm+sc90tT5JYC\nLUiM8qeezpanoz7atjWBz4mcg10OgcGOvbdp+27tdVtpPXODJ2Ex9YMekXFk\nBsaUY5HKE+PXfX45VwNKrqkMm3RJyd5MJKh1AJSMJZH9pH5hz79BfAqtjPI4\ndH+kpOJ48dHNm4RuBKYwBVnnHFjoQ1J2x6oCblJxuCWg0iCayqJ3ZtPXeOea\nih0QdZMdN+uHgBmZuxX1NT1csQLzVCuWQCfsThDP0Rjv4SnCh0BEMvPQCtD2\nQVe9WP/gPjekkeokTkFnD8FqXglb9WluBNidufDr+H1ASy0QaCR3ULfZSHXD\n/RfU\r\n=wdcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/density":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/touch-target":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b0c456d33.0_1594075282275_0.07686923875459861","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/radio","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"048f87617811232028e23bbd4a685e52eef3eb9f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2e5711e04.0.tgz","fileCount":38,"integrity":"sha512-VFMgWKKtmvc0JWgXuT3u4MhYrEywQ7eZeQs9xcnYpdIdeP/KH2Y/M+pvRbhTGqJ95Bit8CJn3YaHHWdRYZ7gsw==","signatures":[{"sig":"MEYCIQDQWWaCCfvtydV/dBpRcnDYZSqqjtg7GzzQzr6UwLAe2QIhAJfAn3+zxwFML9F5CBkgbaX6/pM4lumNcjo0CRY8m4CY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjMCRA9TVsSAnZWagAAsNMP/R6Fcjqlm7NFejq5mRkW\nqW05OghY1HsrOEFuGaBZdEF1G9O9dS3sDs9wcl6q8ggp6Z9N6WMEKmlnig9y\nmGxTFW3GD7QSmChc+fipr14dPPMbjeAh4gxcCwUbNRCnT+0cIblymLnTgcBC\nxdBTq3+N4n2DJaHk/x2K1/TNhyEMpF06FD2r2Ovyx6d0uGIsTS5oQWMvZ8Za\nXENu9V95qi57huxVdEbPvR/Oxigt2duMP+iaWXfEa54eLHuMBoVACAKoxYhZ\ntGQy6xyzQPK88Zak6VdKUr6sUyYInHc7DhayUf0LEcTCeYr5FND8I5n4/HUY\n44iLkUJKAJsUNsA5Ebsb9aJK1vSWRRic2Yh+FciLw5roewnPKOkrMA37g4iB\noacuAbp9sSrAnGdA96lA+/gc1K2a1lvLRAkOjwp3ZSiVkuhL2+d0WzQPheeW\nfNZ2oqKeKUJtTHtOYGQ1mN7i2qJyBw1bq0Ux/cEjgr7Cei2VjeNka8pKnwbY\npqCX4TWWxwoOxxK656jaJUaEHAa7NoQWJKa++2WpmSAurn0fe47RyBbcaMYP\nWq4SPaNUp7N03ITIO+gqPTEjwB4CfFe0NPjHVqOqT51IIFXVtm7jhn5LOTfi\npjGmavrBrZ9tJMMEe+pTw2BG+cElZ0bIVf0pQQzLcaf9LLqsQHZ1jfcdwLMV\nVFEa\r\n=VIZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/density":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/touch-target":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2e5711e04.0_1594226892328_0.8218972526593353","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/radio","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"278e70f8477ec12b08c975416951380b1897c17c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.811fc5d24.0.tgz","fileCount":38,"integrity":"sha512-22983V9k05v6rDLUXuIo7RT7QzOtP9IoGX7EjJvwm/LAIg6Th6P7yb0xN0qaw8fVmeIj+Gs9wFKc54nflJ0ALA==","signatures":[{"sig":"MEUCIGZ6H71QI6tc9LLfBRnX+LNjzmbbK1ZkbZl0yXaGvJR5AiEA/5bEqaXtFmGDbNKquFZqol08jx+cfJTudCmuApv6OeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9JCRA9TVsSAnZWagAAlT0P/iJmV3DdDKaTBw+cd9cV\noESIEuJJg9um6ZSu07wjSVpcL+xd0SjPD398lqg1IT3kUSIOd7iq1snAbnfl\nrek1sbnlcxGMTsnGsDVHpo+3pjy1GfLaRtVoLvDlhGwFcWV2jdjqWiZrsXN4\nW3sby6cs6S+9C+tqMwLHiFbnfNsmvXNSUBA1VwB1YjRmm1UVi01B0gI5C3d2\n5Ub78XeIE/COvetUDSVUMTu1dq+DPtEpVQgsD7GlZv8nemiEEULdU+RMjJzy\nEc2e3RcjNDOGyqvND24fZW/eN+eWAaHo7qznBhKTK13TuLoCCvHOcWtnJ70g\n4aeggSrcedPW0OKQWJI8lGT1JhuPHdyAcNDpcbzgYl+MpJ9IVVZTE7vT9dk5\ngCRRRg8ZacKRnqsFHgoYY6MX6lre7cVlrED2Iffw+JkZprhmtJR3fMgP+myh\nGQyKtyqqkTEXvOB3yFWcsHGP0iLhZ76PhV4B8HJguHNK3ClI7Ltj0npWb+Id\nnSRNhGwdn7bNs9UkTt4j10Q9ptQ5lwFfo0IWYvswwxGGcmS/4viyiBaGvfzc\n/pYtAGaTmSCkNIxgq3lw4yNAAEXuGOGCyzusQ8L5xs1EsFeBwtmlGvv3zK0s\nY+X2ZwPsrtfIXQsN0C2j4lIz8b5UI3U72A42maQOkP6RhIcp8Dx8hzk1bKL7\nIXN/\r\n=2EOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/density":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/touch-target":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.811fc5d24.0_1594228553238_0.5932984795413259","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/radio","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f0b66aeac8adbf15093ace37e14d185154e6009","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.6ed717ddd.0.tgz","fileCount":38,"integrity":"sha512-xrOOaJC+8Blwj1tlDtqrEWBgagI27xk93zlqt63B19dojnb5YJ34jU0UDkdc5ak5Ab8pOWgJP6ahbQ1dyJ5EAw==","signatures":[{"sig":"MEQCIHZgOgo9/Xmkva1GD4FRjc++YPl5GbR2wrB0QYPQj7asAiBk3kKaHlO7r/LSHzckFF4GW8a9UFe2afwrIv5adY//lQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiILCRA9TVsSAnZWagAAFhMP/Ah2Qi9C/vHVzbdkV/Ah\nRxswquXQPvfZfHGNnZZE//r2eHD2abj+9/v00Y011qSykzrYIB4Ek3CEU+kl\ndP5Pm6y8Rw+Q5sxc38iOfGvda7hAyc2xdgsnwP7jS3QsqRbe3tA7EPkgwPac\n0+zuPQF3sDh75WQtV6LenplAM3EmoV+/VATJ+Zl2GKhbaBprumdDnyMxGJfk\n1maANo8HirA0z+I+o/gEOPzXWyBMkGQ5qyOHdsS3AMGfZq5ncNFk8Rnj4Mgs\nj0XPaZvlYW/ryXuMd5m097IKCEayq4Vo1hsbrpLx+tFIwl8Uj3TPunEaONSh\noXRHGdDDx2LS1yyE2JTDbuYKjF39x/BIbbBz90lC6AQPhbZKXeTYb1kHTuyt\nIBjwUTQEo6khHdLU+Z9MalGHEWdK+4VlPFzWUgV7EtfNKt4iREuiXCm7oDAC\n28/TShyOGLLTG2mTG0sPjkvgQd8KsNn5o/a2MTZqsXM7CxS2LmsboX02F54k\nS7PwPydFV7DRdfp9eWAOiQRQXFl859SYxtWrF1jx2S01q5QutLiDv/Eq/Nan\nkC4X7dvNCvBc4ze+mzKBDG5QrXlsepY8EfjgV8ccyafA5ZSljYwBs+0jAcqA\nxGr5IBzWrUuikIMKTEUUwq8XpNxPVgXdrOlmzgCFY0VI/R66Zaa21FPZe13q\nqcrI\r\n=97eu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/density":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/touch-target":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.6ed717ddd.0_1594237450551_0.6321392243577406","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/radio","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9992dff81ed8c93c76511fbbee5b9b39304d3a1e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d850de590.0.tgz","fileCount":38,"integrity":"sha512-HhPHZjEbY/hHz62zC141uBkReKaMudnv7t4j7X85O4imcfLcuq9FR3HFiUIliUED/I7Z8eE2V0h3vb5BvlItXg==","signatures":[{"sig":"MEYCIQDlurbib6cf5VBCArQoW068AeJBreVeUiZn6pyGRAzmtAIhAPJli+Dd5jE0PKeNjOD19diKeU9yTqq+xyAOMTsBrwI2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xkCRA9TVsSAnZWagAAfvUP/icdEKhnhKNQ5SMGuH50\nhNXU/ovBXJ4uE7zpz1BugXVNjsGRBC5Bzmj7xb+/4Z+lSsAMxZYsuzfR1+8I\n4AmLpAsAF3a6r1Iy7YlfMd4lgsxAtM+4VuYeLvjeAcU46qvjdPztTsCKbZ8H\nlNrQVoAf/e/tCiv0XIK6qtkNjCtcSkWL6pBtdTDTsMp5mDPeg464bUcOhZHr\nRtZ/g57aZgvO9eWU0Xege4cQRA+oTdR0AhU1JkspicpHQmXC0AfNDPpz51Pg\nUlTSeDaxpdf0VQwO8OVB/ITpeeQlgEuOo6ftMnUOp/S1877LKPp0rSQWGPEu\nR/ZR0Nalbhqjhxn52vVOvxVxB0YYs7u4GdbFrBPMsRgdI9UzjdD+mRqRSUOg\np47YFCbuY/7D3dDcyjQFghVIIZBIWJUe02bXi6ODQN1YDiw+XI4+SIUgUa/R\n9g7c2MwMTcb92twcryEEb3DCtfNi5QqDKXb1H3+BJCwlmyqAehr0eynDPDX9\nuYFj3mNjiPNQtdacknH4416ijOberB5S+KqQ/mPc16H7lLY8UGkkyL6pPcZM\nIojt9neG5KjwYqyvVx/fWBVao9HKG6LZUE9H37CtbPUaBiLzzbe7GQLvOJpf\ngQ6IT5BeMF3lPPJ6igDscRWp4rks3HZLEocGy89PfKh7v285gqY0RF4LX4Wb\nSos8\r\n=eUEm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/density":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/touch-target":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d850de590.0_1594317923488_0.3306186425773219","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/radio","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11fe1c3e154d40e5acf4d870e59b93d31d5880c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e07a70841.0.tgz","fileCount":38,"integrity":"sha512-GJFQAnK5h2DiRsMMc229CNgLYAA4NaWvqSKqOQndF26h1ZO7zg2W9bMZyjUBKKWJhN71xXzyZLkY1TtRlKpJBw==","signatures":[{"sig":"MEUCIQCFDYpyImnchftbjzH8r41ZYhe2rW7Ixdg023w8FEKMbgIgdGuaCzPANT+qPwEM7QfSwqWAdGBXyVaIH1gj6gew70g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NgCRA9TVsSAnZWagAAVHoP/0UoHFsf62cnFHipa+/P\nz9YAWfRZjZHUkLheRkzZu74/Md1fIdENEgD6wjqqofgzAMlZZ+rWx/5aIPAb\nxRkXmlwxYvaZkSyqHEQd0nyhPQWT2vhRZn9FbFrZmbd7fdsbjenLpRnTmkau\nNwzdeg18VtdJT46XuE36BC9iAmrvB9bmtEFDLgQEK8kdVUppfWRTX9yj5Vhc\nDl1n7LFeBUVMODCbLdUERaZPBJj2GPi3ftSYq9JYe59WQ4vAq/IjDa/RJET3\nKaCpAnFV4YJ8HdyhZJQGnivOFdamYDQdM1IeJiNNmz4AYkzmqv0YTLzt61Q+\nZNMERBnHfWvANLn9Yu/CjRyJs0LvP6nfl3fTV1P35AIAo2Ti5Ht6zISX7zCl\n5Que9MpVkB823BhdvSwErzM9V1IdRzKkh7p3ERftkcrBvU0MWNb4JzvAY6zF\n+kNN/TIJBC/pywpzcV8sdmZeyRVkvnsFBOV/beIUSKxMSf7hFLNXgTN0FMAn\nUwvAHy0K4zvGzkLZ6ZqryAFKTFMOz1hiJJLpIlyJI4fA2q+HA6qxdAio8aLe\nRs8zZavn9R7F/XFhmBOEgu6FnRIOf535IoUOmorI3kfnwFcux+2+YbQe73o3\nx90wLhCrftyv2GJetHEp9OJMV7UYqLiCHAj8eyBx2WNekqnxM6/4tZbYGzoa\nOPWB\r\n=xHQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/density":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/touch-target":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e07a70841.0_1594319711589_0.3711885791440608","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/radio","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9834632811b6ad38af623b26e4842c7904413fcb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.37947ed6c.0.tgz","fileCount":38,"integrity":"sha512-IRG1+UJvP2RjuifRAT7ftCbQ/n5VcWtKgzfi1IueZ0wcYCzZ7errvLc2Wsm1FkhtMThEo3+wBcqBgupV2UDLTg==","signatures":[{"sig":"MEUCIEYtLC47fm9Lz2bcq4ZYZG5GDzK2uYRvkqOVizl2NbI/AiEAn7MWUzHnRj1ouD6biomazIjOmrJ7Auvkc+/M0iUmKKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/ACRA9TVsSAnZWagAAFNIQAIfWk40DwrqIT/8Sk9Xk\njVmHUfPnNgJ7oBrqfpV6odZMM4i+dlea6ABWfxbaJridA5qif9dQAF978Bwr\nlDcn66L3eSvO7lwv9YXbSHvZTbNGGZTl0Dcijgt14F7+IM5EHb6VqX4TdRTx\ntEam3ZDf4wH1jJn8LXFaygwh8CVT983hcGvqWkwG320rYedhD3e+m+sLWDr7\niYUOH6hh+6617swumVEmwwTtbTE0QMwAQ7zTx44WBacrQWBcs7+yUNFl6Ite\nTUSoJGk98I6i851a/rVZigdzSiexTrA17+zgxkLUZTGC++A+/0TgbJU1mWJm\nMYAFiZ4Iwp0i8AN5TeMn+RnQOFfnaReZWyrLcFsFqdJ6gNmWAY+4NB+2hqOf\n8ubne7CMu0N8gW2TalrT2QseBL91BZvxV5swJRsI1EKFoJOBBmFZbYn7nx8Q\n9KrRa34m1HRHpVieSH4x5ZiypAsZ8sfxwcrQPMVH01nS/Mpg5oCYc7jrsiPX\no7JQAfGw79UUcJ9WoBiLB7JbckdmeBMIJGRpf7m6TGvYhDVzx7luIH+NkjVo\nw3eP9OgeAD5qgy+gQ9rSY7BUhmTY6VZ8K6e/+1Y4if/lQN2A5qjT9Y8+AJ3d\n2vo0QAsUL0VuldG+5yMJ7nQgT0KTrSNc9zcXsGF+cGUh+j/mTfS/ksCdhkqA\ntq3m\r\n=Tc4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/density":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/touch-target":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.37947ed6c.0_1594326976219_0.7646089870161441","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/radio","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dafba12a62dca2234bed252cabb5f2b212d1b4c0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5d443afec.0.tgz","fileCount":38,"integrity":"sha512-Wr1+mRgJuPMUhozxzOntXgIjl4ADltqeXUaDzecfoxF5Yl4RvJNPjaVw8uiFo7sZ1TbeIpYUiBCrbFj1Njm4VA==","signatures":[{"sig":"MEQCIFiLGHYhhVXB0+3RtX+1xUFoI3RJKswFvh0VG+BXVdn8AiBcVCYF1VL7jnfOrMYPIfTUoTKmSNpUMTjRi/LG+kLMPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NnCRA9TVsSAnZWagAA/b8QAJj1eM9BAGY4lwbQ4PyB\nrYrCuvz1hjgAGG8V57TFrBewCtoR17HSQJm9yhcA5U3YaASOhdtVJyzH0j53\nLK/noSKxKkrILpVSonSjyjYkDWX1y6B6z9No6KnLPppwLzduDMTPASIKOKgn\nIvhGCpL17zso9wUR58uURzTirx24G96aHyxbIkSrWSklFno28hNYY14O5d8U\nXD89iY7rhObhndiwNE+D6B41KX7UoU4JL5zaUwa0HOvqLcsP4lltRhHi45lU\nAolMuU+Y/yt+K+gBoSFJ7EITMXxhZLXr0DgQRzoXB6UdYHTsTUdLaEjypinx\nau7BhrGAaRlYXQcjbwgFzgngKZBjIVfdELrDnsZO5rp4Wgm9UA/kX+nzV8XO\n53y2edktJIM2IWY68YpS/HTRlfUte7iEDBAhb2iQe7ifgE7mAEozA0pgwSgt\noM4vcbR0SM+jtH9nEzvpXraKnuWGauFsugvVcq4JbkzVAVzbnprkU/ukwuuW\na6PlTD9vQuV7juTfEpNcZ/yIInshPY4U+1LNbFApoTOBzVfLC+4rHVxOYIWt\nWflypDBwR5F7+eWtRCxb3W8O7lIPtcPg1VCDnyFp1x4hYqR+hAH7LRTsx5fS\nozbClt++DcQzNTXSgFcdrjwf/OZB9y5h/n45iGCkMLXft+657rzbdg346B+r\nWavq\r\n=C/ex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/density":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/touch-target":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5d443afec.0_1594327910861_0.38138907057760885","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/radio","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf701b070211f574d21fa6b5a681dd5755fd6ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.9ac1ed914.0.tgz","fileCount":38,"integrity":"sha512-uPFE7xk40N84x69KANuF2odakFrW4mpl+uBxohvcX614nQD/CYGIRQ187gr/Px9774hrR1hITK76pd56YFB4JA==","signatures":[{"sig":"MEYCIQD3av7hw8AW+97h4PjglAD9f7djPYsRWUUTkcBds1rxnQIhANCdX0YuHZzKUQ3RlMqXa12yF9ztJZiY9JaEmIo86y6I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4ojCRA9TVsSAnZWagAAe6wP/2pO3ZGHcmmsS25xvMv7\nEm08uoMQLEHs7U2k1srukP4NZqDnQBkgX0MdJtRZ9l7Z7wSnibusG4VjL7ht\nE8ibPeHByR8H/OQ1fxoMSP/L4JHQKoCJMyF1AlJT2iuyaHEyNsT4ShIzPkGx\na9n/p//gOizYjEoiS43PTXbmjYe+MxFQBer2pZQGEqh4G+UP7WOx31uQmFFe\nrBjmdvnaFHuLEZgsdWY/UJ9xEWbIRyWNXpp1JSDcZrzmN1A0SWfC7xqHHGGr\nwZM6R8HxubG9jCD6sONwtRpOku1tBl8FXgqhvs15L4U9AkGXB+H6GuMpUu5i\ncCB4/reuOMCT03boC9bUUG+FZPAgVltksXoyhZfQVGOSuAT83nFWB3M/umna\n0m9HktYcZ9TPXcFBbuNGErDqE48XvGZNdOo1fIICo7SU8T5HQ20DiP4zN3ea\nly8agDRHYWHU87suxPYU8NpF+NL+o+HrXDnzSJYDkjtgIOWJiZ+gWafUoxu/\nkgMDW6s0keHhMFoX2eMgV77oGeDX5RxIJGajDZAATVD3wJo7mxgyyFDDIxDN\nt0+mpgDp+JWxmYZ79ehzeEfhrKb9SUIoLJRxb1mN9PHwrCQIvyYkOg1E4puO\nWmDRB6K9/6f9g+lAmgDh4vXqa/aUH9qUZgulKvlhMhSgYnxZ71JvYf+nMT9+\n8pIt\r\n=Wlmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/density":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/touch-target":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.9ac1ed914.0_1594329635031_0.45086505978486713","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/radio","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa241bb4cafb5cc768d6a138c04027cbfa85334","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.1e7cb6198.0.tgz","fileCount":38,"integrity":"sha512-uu1n8D1wW4muc3rbaFNkqvo83se7ZKQCdkYhCPjMcNa0XU2x7acmM857RT9KGmK0lirjcsJZHnhlNFqxLUPZQg==","signatures":[{"sig":"MEUCIQDUHVz7D2PJUXUHK9/+IKDKXVdi0mrF1UxHtMdE2edqkQIgOYc3dOGc+26eqKZcwUwWLTIsyLyizykaacCALf4fsZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZFCRA9TVsSAnZWagAADjEP/3csfVn8Z4u2Lu3X71Af\nrg+8PK4+gIADoUb57t8ak8VvHl9KduQyTmuj7k9QO89+cZi1cKtKgZsK2bWs\nAn++lRW/qeghYzADBLQbGcgbTpJ50DlYC1d+uLQZhN+NqqmivmLmphh2iizX\nBVhLI3L5WDilKY+rGTO9hm5AP4Lui7vOravjpfXjLDsDRlPrn1hvNkDn0hsR\nWYCPbkVRBJbpUmmJXlYPcpKkbeObcfNI65C5KoBrtHd6/y5AioLpCfkZ0Z1R\nN/Oz4a5dt8kWWJo45P0jUPXaGg39mOqYd/DT9juCmV4xK7txe8tlDg+70QiZ\nNlCGJv3Bf39nD3CNZwODiu4J0PylO/EEnKcFXjG9nHwIFdtEujCIciENlZwb\nvWCgHHxKkOzkHAj0mbrE+w8kNYnyoUxMqV38JwHu+TX0YEWlEz9S5GNEMJSp\nkU+Lp+Q2JFhmNU6RiVuEcGzxlnS5zlEooTu9g06mcdDlIU+OY3+M+im0cFci\nuCXkzw5B+YBDe+VtaYBX0aoKytOVxFipf/8cuLGWi5Xpsh65HlYesQ8KTG0V\nnnNojQDDITnoV0HUXFdhHhbwC+h/PMD8iQPHVpjIadb01jPbumHx1w3B/eeR\nDy+4TLaIDonK8KCzJQlEaDZZFKei6maFFDjEjQg02HuJDuK7yurJnxeEN1/W\npFF9\r\n=8/Zb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/density":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/touch-target":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.1e7cb6198.0_1594332741246_0.4633065174698112","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/radio","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adbb0ab2f95f324a5ac928cd27d626cf848ffbc1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.843f636c0.0.tgz","fileCount":38,"integrity":"sha512-2Lqz9+qrnkvBn9qoWGn+Ir3ZBDhaMm6LjnGfQr+Px41MgP7ikNBa0e3/LYmdmK0wsItDC56ty1oDZa0f3rXfTw==","signatures":[{"sig":"MEQCIFaug2kEfsVShnwgyvtznT+E0+O9F8xRYZ6EJBJ9JBWyAiBv8Om43mwJMuWNdxNBReERqIq+FXS/coSz4RqlYwOgXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiPCRA9TVsSAnZWagAAa5oQAJUDEEKdynKGPg9pqC0/\ncAL8/XNJqmdIrPLSpW9G9CgdnajyhpN7Udw3pja2Bgx6QKzV5HKC7stqi1FI\nxEhWh9wQR+S+XgZ0iHCsqC/cSLV85doSbTkwUzim97ECqfmktC7sC223Q8uq\n4K/okOo15QTfQOFHys8TWfz0nfJ9Gpf3RGvxdQRBC1drkrdgkgF3NQSDfcis\nMC39lGsJPGs55eHjhSkRor8pW1ZApIm3p4UoFVfXVpz+fqRE+ez1qpxnztbZ\nD3QYiOOYY1oVwxTbInopjGXi6vOQHjfZAPMQAGFEQ5KYPluXwlQm1ivf3GMO\n50hgY8GJzQh7OSZ+MTQqxHxNhlsmrCFaOxzA1Yu+TJQQikWMvlzjoX1VqvGV\nNuaYjyShxdfrFPjN5w1c+Mw+Wz8d1FxcOHvpKwfZ5huS0/OkNdjjcIQESm68\n02qSPZQaAjZidj/TjCr0/X+L5sm6P0YSx1pw/7qCdTAF+ia+bfh0fEPyar7o\nRseOcL4NlkbQLE8ZGZ5C4YHn9WVwlglvX2skJ5JzW2oaZn0HO8deG97cgidm\nd9p4WQcC9VsM3kAoxjrpGSe8UqJoSDX9O/a6q3hrq5RrZDbiDfTwK0b652xw\nlm41TX/hg4LpA3nSbNyD/1KZ5P+wOmjp5B43PaHZOWu1eXChvGnDjwc3KcU9\ntLMt\r\n=/8n5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/density":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/touch-target":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.843f636c0.0_1594402958751_0.6010224305742089","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/radio","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12004e0b5178df85948afb10188caa8dc478672d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b2edaeead.0.tgz","fileCount":38,"integrity":"sha512-ui2YDdgDCMPeqUeOzqo9aaUtt1k7xeonev6ggi9pa+bfSRIY0RmNU+R00A3t8cLnpgULrg2ZZvp0lR4EojXzAA==","signatures":[{"sig":"MEYCIQDPFuVLVNFOwPLEGXChWt4f/+1SBlDfJakcgKI7nhO93AIhAJERq/pf54DntSs48PT00+zDfalUl8vle+c+DHikM10+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5UCRA9TVsSAnZWagAAo08P/i+HWDZ6ficbZeX4PqZ8\nWSNr/vaq7/X4gCIN6/IvNkA9SiuQfChn5aMlvj4mI0jX8Pt9nGG4/l+YKLgH\nveRo0znlVldAOfZH1+1ERyhtSU0wfMKl2axReU8fue5LvTGULW1OPCMJLIhx\n1DwwQqQqK3JThkuBOKoF/xIiPorhVumAVcoGEPcD1gyXE0pQ3mrJQ59FHYDZ\nK20i6nDphTww9+Zkmf6YFFHNx1Tq45aO0ty+rNeJ753gRJvut4epv2nWto99\nLe5mztEhD/+KREFhIY9l2XUdppLl177T0NbUTPAfZMyw5TSOnqptv9YuXLQS\nAw8+GaNnQ7QKywT667pQEPER5cTybs37Yo/KQAldFCM3BrQnQERL80gH5g/d\nVP4GPy3IUXYKUrqd++ZFtSCq3WWIuzwSM6M2vtV7iRPvULuOMVUMP6XIoasZ\n+2VFvd1n8o/VRTxWBUI2Jp69R1R6izcSRe/lSPL1ix6bpSfzc+gkFQPgRVmU\nAMUXVCJ/QiiI11EXueTAbF6mon8o0WC7QXS9vdhJIkoMbjg3rso96Yqgt87t\nqlCcz9Nhp9L23pF2Zm+2xtp1BtN4TZ+ha7szn1tqe5YyGqfSIRfq8e1oaTAj\nTIUVAGUHXryRp1e4qOOx/O1K/d1B1A/4rO9ycCX6p6s3dyx0NOhJy6Lqb8gk\nrndN\r\n=8Phi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/density":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/touch-target":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b2edaeead.0_1594404436181_0.414619278756422","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/radio","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b197827843cc493a51c003b1b528f6eda95ad3d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5dac1f624.0.tgz","fileCount":38,"integrity":"sha512-V1iqH2Epa2WNEtlsuR0B0wArTTeS0v0PZlWrHvroBzj2uAt4CDc+ieGzcL5M0kJdwryHLaDhXR5LHECWuo5QgQ==","signatures":[{"sig":"MEUCIQD0NVaXYdKYK0IvAELWTrJ5c5XRa9awnMuBSqmh7HV+jQIgGZ7EvJfdrWsN8TR0cYd0oRM0gEuIt9bm716gHcGKAuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0HCRA9TVsSAnZWagAAU34P/0PHZL8ilzuhskCtgUbG\nP2J7siNKLpuo2G6k/K6X3JIOaISL/Pn5qTWSj1WQYYzrOvc6s9OP54NGIdEG\nVefH/p4cmUspO3+xHfZ5OlUf4gazslxnNzuWrKQgylwJB3yWEVUjjpLTPLdE\nkQ49tFl9Ir+OgAl620MDYwz3VgsLOpdzwvNftekts8XlfWM/8j2eOyE7tSRV\nJYsmrySJ5D/eEFiEd3FWGaU6ALrP1LrGzgqrA5PjuYNO7LOnTm/A1LM09tGt\nmNpWYEs6r01TCQTyFdbpTVDsbc0pfe+G9DhIN4azO/Bsb7KDfK10EUnYdt4j\noJwB86Jyz6P9YpsJsDNUGZTDzOTWak4w6SxrPbaEXuYasYnDayt5wFKRqcPl\n7GAgRTFYSu/hKQHol30B8S6NVafSeS6uuCvgHahUshPE7htrTUUuEWZ7nSnU\nRym+dKSaGap/v4/lc7uaCgvQJzcU4QW66efpT4zdbpbw321gMQidrtpZ9nXG\nk4fGutqJd7eY01P17NDjqhpcagPCkckK8TZDQToWTlBsmjzo6kI5/WOJMQ3O\nT5iaUmDLA2YFC4lmmI1fEGxhNKZukw4h9RjPJCCo5XpgxJsmbSfDzKspmkUN\n3g5ennLvgw+G/5L6KXF5fFnQGnS3kW7jKeHrjlXWQA0bOwq5Lcnw/Kxg523H\n1TDt\r\n=pIO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/density":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/touch-target":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5dac1f624.0_1594658054960_0.820903003112365","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/radio","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f263789e856611e005dd455a0bd1544c9c567e4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4497acef8.0.tgz","fileCount":38,"integrity":"sha512-pvrLj3zzPY14NfUrpBpAmp/YHklEBWwJCvZA1qTko1tjPT/9VdVtBRUi++5iytC6BAD1sSibbu/XCWjgWyhm3g==","signatures":[{"sig":"MEUCIB879fa62S7BuN2AFGQyY0biH9SqPW5pmNvmOUw2bonxAiEAnc2kgaeflAG+NotNi+PS/HA7WgxYw50RwaCQ115U0Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8cCRA9TVsSAnZWagAAoHYP/AllsxDLg0oCNf5CLJOO\n/YoRX4/URIABv1lrk61BZ5DpHmqx8U2BZ0Aq0S3AZzbEXXYZ82gLNh6nX4ZB\nJTCy2spi+U1mdGFxdzafFK4ziL9/o1a72FsvcIK1TCNvVz7B0P2Q0bTQYPby\nEOblluG2k5C+PQwQu5x4cmDE3ZIHV0IjwxEEMS8xPqcACTwkL2nF3wQ+r9CM\nlnDs3dTFQzuTS9MC5sxSVDOxgnnzu2dpBM0Id/lKzN6++olmMh8yIogju207\nQMJQTAUTbW8vXe1GbDeX6Sy8Xczf3IOXt6WZtEh95XEujvECi3jJ7A1Uw5y8\nKPeD48YXJHmFZIi30453M0UFmstS3omwi8jjZ/juw5avAVqH9E219cSHwG2u\nZZKUWgv4xpP2mJOvj/5SLVsdic37xHis0TUZ6A97WeaAhcdfFR8WZO+ECp1r\n2XWdh7J+77/aAwOmIhfVPW7DXYeAapicH84AO7Sz9omXnFngDo0IEdefZDxg\ne4T0GOUI0yamzupoQuFhIX+4d7Amqz9TXgXHfIYf59u7FVQjab2V5nH4QuEQ\nVQea7DjzFEoo/WIeayYNOxalz825qgkjA5mhOujFu/KOa6U//LWMtCOWS/Ze\nmSk/vKex9FvrVj6irAiKnXgaA6rWNUiSj3qnqnPedITFKyKDbxl5J9qC0be/\niwtZ\r\n=e+YX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/density":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/touch-target":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4497acef8.0_1594736412177_0.9784906952864267","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/radio","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a61bf487dbc41c62dd8e7701b92347ce8c398f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e6e23019d.0.tgz","fileCount":38,"integrity":"sha512-4OAV+g9Y0lCgZUO7Gq5G1342kAzjwoRYHYmmklVQAxHT2ZV1BPCyIHZE9MHVHQSxf5+CAjnn3Pj3d45929X6GA==","signatures":[{"sig":"MEYCIQCe7d6eb1K0u2zJKd0To0brZLe8s4W8uImd/6D+b/j4bwIhAPG8nbOdgLL3AcDNz4fssQr04ebDsiSKBsb9ld1exE33","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhE0CRA9TVsSAnZWagAAdQIP/3hufG48m0EBxr28UjfG\nyGlBtqmDZeD2UjItAsg0i2fEYHcNmyosCd79CQylUT+PFJ9g20StYVT6WK7L\n0sc0O2E2tw2nb5JMzTm/Cxu8NN4Wpoxk0C24jQy6nOMtxi+X/nje2hJffQWq\n+M6exZeLgFJLZz5RYCu6TK8uXLYzqh58Cq/WtGFDZMx8IJ5GwbuPx//RpAGB\nqnGRR3OUFnc8hL4vcpmkJsVP1GuZFFs0A/j+VaN+aBl22N/Bq/faWJFBl+56\nrF9ozxD8JKs9uIlp8hwnhR56wcsUU8sb7e9VRY0yvU4AB4/8xL6SQK/QkJ4h\nTzXytZsLZmUn8G8dxsCULLaagg0/mk2rmftWlxynu7XOVZk1yv9pTqGLXyg2\nXQB95uAJ9DdhJa303uiO0lPIYhL9iurze/TOvPDVzTmN22nM+NgNM6j+eyZi\nXAFVMTLOa9A0Cl5zo4QWOuZB8El7w6Tyo5lLWB2pa4MQhbxG0PYiwlQSxNSp\nC81Nfk0hruQvcQa+jbYUwb3C2RcObCUJHlsYGa98JsNEUeP8+aJrI1icbh1D\nIpJIaLVLcHlFYPOC8EE4jyKJHCzAcWxziMLmwwdp4Yi6UW3FuKVmnGpKoXi5\nzFxYKz/3N1pNvLuK/pOH2RHYiPan0Ugengbzv1kE2i7NbqoGQXQOHCLwYtmb\nHs8f\r\n=CqEr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/density":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/touch-target":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e6e23019d.0_1594757428267_0.17026444949869224","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/radio","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d2b6f264906ecd80d8ec17dec7e2a8344e58238","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d548d7a92.0.tgz","fileCount":38,"integrity":"sha512-dI/HLb2BjcG6cubngiGr3gHZ1A6pZwPrWltOEdxDIEUarXjy4FuHuOuD+BU/y5keX1XyrOBpp95L2MLhOZlhhg==","signatures":[{"sig":"MEUCIDSHb07KTbe8RwTQKdNaFT7VpSswZOg2/WAZRnVYDUuzAiEAhXpg3OuCl5ela0tnOkub0gAcSZOt+jwTYwpdaiHlNUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/dCRA9TVsSAnZWagAAv5AP/00fC7bc79AMkq/t9Aw5\n3F4iQRAzQ6c3RtU9uVAibAvaY5zAqSWLOgPjSUKM/GZROt9NlTofNuY7WKxf\nky1gk1aZi9l52jSWjTTz2FSv9VFtnRESLmV4zLTEC45vP4SjANK/ynlpiwIv\nv4bd/Cc1W0lnbDHdIpQF6NgMkkJ4xR9y/RQMyYBBio5ASs6Fg2IDW5iMpGyC\nAkIV24kDuHTSRGcRI8Tb+hGGbaF0YteSV7EBnX59INzpO4niXCP5XiiKrV2Q\n+HKLQkqyYKL8aden8QNdoPtXQnRe0S1nKNkfZ2BcWaaO8q0Ku7vmf7LoNm2O\ny0pfBoMSE0MASdqGTGfvt7nLl1WzetvM8owsdBAeraKLuqEIAzHoA3/jAeaM\n1g1rdH1FGXu8YmbMGgLvS2Y5iV+4gO9TR+gMuTb9gOmXWVFnboC9+WiQW5Ln\nsetIJyqId9iHhc2rft8Fb+May9NTbhHSOmPuJbEy7gVSUvUkUZs6cEL53opJ\nPdwUkChw/rHRpkFT+TCRsd0whqV7eCMs3MZUq5PH4Zo+1XsE/j/R5f/UP/0l\n4w7A+OfJ23/i0//rdPEVvpTBO1hvYQD/Tw0hZdHi4tU8R9TaD880nvvfZy7Q\nRbWEWufj/zgnxknnHCk2rN2TnFFIINYnNC6YPYiCJYU1WDkw3pp0AB0AU5Jj\nYHP9\r\n=NCHL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/density":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/touch-target":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d548d7a92.0_1594761180625_0.7763464062291228","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/radio","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9582df110f4b24db4b0e4ebe977511bea125f13","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.58ce529cc.0.tgz","fileCount":38,"integrity":"sha512-Ss3xqhroAzGqy7ao80XvGeah5vymn8/QTGTmY8Y0VDAU+LboNHut6YtsFvGRuxQRXIPvmyXtUbAphVO6iB8AyQ==","signatures":[{"sig":"MEUCIQDbW+DaQiyEiVEuRpbdGFv9NZlOmtWrVLT0FIGf/eCZHQIgFRnDswcKqaHdm89V92P1YUJP/m/STyGil40oVMAllvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBXCRA9TVsSAnZWagAAQzEP/RM43U7UxiD9wCTyMp86\n9tTGJBzA37WnZ0VDHIOCBnLsmPaLNFYTwwLd0bK2la/MPOHlYBG1RHPkHEGI\no+EJiyt16QhrkwttsN8fr9T57W1PPglxxEy+eI5LaoWLVBLlEQVs9q+K1JIg\nFRdtFMpQQaYMBzy9mDhyPZrwHYB061FZIOhwdYGEOH4fRINMovnBJyRSnES2\nNW0WLiZ75hRna1ZTl+ZjfDkxY4Ke+9N9+AO/V554/wLaM+kmNqNfK2YCqLPI\nlVARu5Qm3Yy3jW9m0YlWh3JArj6Oumu1h6RHdRiYbeCLSAS81poCEWRBDhE0\nqnRM6Fx9KJ3SjZIyrZJx8qcdfZGfDQmPMM9l3AexUU7RWPM9wADRMQvHvSaL\n2OzxmUHLJBH6dVydJCzAh4tp/542RT7fdC3Sno8X4XkInsfH2Qed2KoFIJCq\n5pOeT0PK+iNi2q+u9msiGSlb6YulVwGlvHraKdrwNgj8z6MD3Ypkz87Ytf3F\nSGy5VIL+W8CI4qYf3P5Qjl+r67LeqFg2ja09snK3BJ/AfuShYIIpWelgliDN\ngK0l3vep0WDCtkMSUgfk3hbz5my6srmUYxheVm7GOAdcqSKVXiQSHiQkGhRU\nRYG8G6siZvcLp0ww5sW+d0DB9CxarzZFtsmYl6GqtUuRCPkK2jcn33SsDijh\nOQJM\r\n=BcuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/density":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/touch-target":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.58ce529cc.0_1594761302990_0.5686439599052855","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/radio","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4cea72f3e5c4069c1fec11d7b073da0ad9149f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a0f1202dc.0.tgz","fileCount":38,"integrity":"sha512-gt+v/ZqERkgiYYOKgHFOjiZo8c2jGZQYp/vrRANwYKeD3oFJhDZsEPSfksSyYRbS5XEbwGU8ebHOrU3uMpqiKA==","signatures":[{"sig":"MEYCIQDrXhPesOWfY8kHhFezhX0XXRi1IwnLZ/+2D4TOjDO09gIhAJHrMIbcfzDlMlBDGUALqUAdP78gs3Hzbiw57nX7x/R1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTWCRA9TVsSAnZWagAAhxYP/RuFhVn9Ukpm6jozkdVG\nyKUZQxm7/hPIMA6CN0Iab1HgrzT2vdlNngnOZ33FiAQQdfHpHKYkaJrPZp77\nG6zOK7hidk1cc7rlP62YNnZKDd+yUxCIj5ABFrCQqdBYjK2t4m0gdewcNcPM\ngPuoBSTxwKPiojFv9IDFaRe+ieLMHp3X+zbealx/LcQRNL7QQLjddiI0NoIH\nWOMtMipyGqqgYmzyBAEq54b5A3H3W7iM3+rig6zf+hQLI9EFhyqV1xfNRs38\nDVBRtv2b5NO93VNkDgB/g1le4f4uPzo2NAKwSGN5f3dXx0WJGvS4QQMMQMqf\nZoaCwKREWIkJuA4H7Y64jvCZimuIwOuKSiagmOromyS3mLyuGQ+64MGn/CYA\n7wOgLjckqP0zBsePnNuiUliylsJOYrkBzkOSjqwQw/63Catj7HbqYXETRq4p\nWgr31DHutPcZ7EpcPrTtVeFruGJj7T/7qE29uTQrfE1xFW+hEoHgOgfGc1RN\n2VWeT8xjPDhQYMMSxsrYr4BrGSWNn4QXCmTttUU8S6YfRiiYbiOFQd2084lC\ntPqyLZeQszuqeWkH948pBC48hSAvGf9t9reMZepBRFMu6Wm7jRgDPeM1T0c4\nY4Hq0T83PIy6mbYziesANx+BNGrgnfRc/SGq/KZm6npUZlqFmCNi4UgN4wGG\n2JrL\r\n=JQV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/density":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/touch-target":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a0f1202dc.0_1594762453843_0.9409247343110372","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/radio","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea4af24ad8a13a63c7dd895d77c7f3396eb8b09","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ad4df58c1.0.tgz","fileCount":38,"integrity":"sha512-zyF7sF1fqhjrX/o3nQzjEiaEx4mVsAPUFhVh3q3WSp8wf4K8qyuVMejkuoHG2L2KD52gSIGnDiFmzsQ+/O3yeg==","signatures":[{"sig":"MEUCIGv0t/kNsl+XcUvridLHDfKh3iCjcAr9pzuQvZ37Fty1AiEA4qlxx9XTOZkzymlbkUJPn6n4h8yNtZZR97Hsm20O7PE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkktCRA9TVsSAnZWagAARdwP+wUwksWrkd4FQaoxQCuE\nvq2jTVssR0z25KaijSgKfkEtkV+jQolmv3Uz7fejwseUHX6j6rEOKuQP/n0R\n4TuSrEZJeljxBnJ72DTDHOdYUm/fUeVa3l4nu5cgOfP+o64aIzYaNSuly7Cy\n3o4/MS8Hd065OAv+mV4V5jD2PwMw53g/dWrHaJys+hXwg8hdyLsh8pexx4Fh\n1+Ue2quCCIvdInq9ox8EqH1MmW/ALQfcNEW+KWiP5wTB4pSwsgtlisy9vXGC\nwzqaDLzCUTfUbEYhw+EqF43BtD5LJ077epphmP3wGq+M86ay5skrIYgJ1E7I\nJLgtcSs7kQAO/uBDBB+bDMhDTnTDj6LI9JZZb+wDcHx7T+mTGuLZt/dq4cwa\nkskkulqGxK+00kj1Dk2Y13mpni0vV8VGRkkAg336NzCLxH44unMdhsh0skW9\nN1G8BhJ0lT2pxxZid0t6spcWldTUV7I5U9RnXZrIY811SdRXBuDH3y329chP\nz2vizNwonGdKhV3cxVc6nQehCGswQ/eyeCY4wUYqrx12G4c+nPa7Dgr4kkxX\nzndxzmMgeCF5GCwvNNoGbBqmTO/987SZL9qhQz/rUN9W/3rA6WDptxAryJu0\nnGeXqTJDfflnwagbo2Hm1DId+gfP+XZpL6n4grY7RKxu3XgOnbsoVIKDyN7c\nucVw\r\n=cinM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/density":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/touch-target":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ad4df58c1.0_1594771757128_0.7007343810201929","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/radio","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b036d5544b49019ddde41c275baf52128d3f4d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.01db89053.0.tgz","fileCount":38,"integrity":"sha512-Ju6ADOBIp+0s4y8w63MXOvR4piwNJOrLzMdBJbtMMAUpOA417dsOQR8IZKV2xY/CXuyd0BKCJ7mFUDpWk5eWTA==","signatures":[{"sig":"MEYCIQC6hSiBaMHaABiyYolXQltVESS1uUx6m8dM1ry+NKRfzAIhAJQEi9O2O3YN+W8g5q8iuW3bILZvimoJ9wX24o5IOpe+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIK8CRA9TVsSAnZWagAAptUP/0NJLWwkrZUbL817oUwT\ngcNkD9w3HD7euxt3xbQN0Bh0SC+Ot6ndf5Bbs89QUSYGSrYv8TPkHOj0aOH7\nXsIZ1Xf3/S8u88TdpAukvIb8AKh1cJbYszx74SH4NyhnqUr5Wy60DLJw4hUS\n+OeEWn4vM+NzmB+1xUnisiLg15dq8BIY+deUhP6E6f1uDmFFRr0yAKtaAiJC\njwQd28kjF+OHQankcDCzfy32YWgEJVakUb1D7V8X5/dUCF8P5FJbrU1tbAej\ncq0VnnotIT9B1wgOyvTl8Z0cv6kqMXnAmEiOAhZjeLpEaNsrQysTXIA4I8il\nIK1YGrUZxXVqCIG8rsK9qDObfzkCQG1AZQ9LVDG81GA8ArwWF4Ls92G/SxsR\nQoYPR1EKi8uywhn+lpBEZTgOyCn42NHj9PdrJ+C44osyfofAo34nlLyv0GD5\n4whXaIN2xYl9FFfaQ9wc36bV9y8Aar2kshRQEcdXSXuxSoPNB3FuGjA9nt65\n2nZFKlHIQ4TGQWRiU9dhfCZRMqUZIm3SWcozftbqafubb+Vvpc69UrsgkUkP\nEyrMEXxV+qnBqI9TeYeTIm3KbDVT9bDTZmPkNE1EejhwbvpbypYqZAnIxcOk\nyz+hL5N6FAG4z3W2e0IyqF/cB4s+RSonP5OB2E9hhWEtLBu2BA/Hs14xrBVj\nBsPs\r\n=wGHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/density":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/touch-target":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.01db89053.0_1594917564367_0.7435718486373484","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/radio","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc13aa3a6a1be483fe570744e5730da693752d5b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":38,"integrity":"sha512-Z+AF1vX55Xti99zq+ZhPxdm8s5nUh6EhkyaNj+uznd+TO5obeTG+OnoW7fU2rY6HPOpSD3VBT4eKPQwL3GJ2gw==","signatures":[{"sig":"MEUCIQDm2F3cHs0wBOK8AGHKEK2fjsNBxo8tQWlCwd7X9IE4KQIgNSCY8ueHZCVPVeQ6d4MfuXkUscbZIVv4xUT8p9Gzv3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5iCRA9TVsSAnZWagAAnn4P+QFhJ0YfOA8mn5g+7YXN\nYNV4Rz9tnWJjKSaCAOzCSTCOwYepWugrICUrL5SZ/N26eLU77ryyyZ3GWxSb\n5oFMGp5U7uWDNkRQagQLwbDGbtmP1HDERDWTQBsmucphLnOr5gusBRvN8PQs\ntRzQneWUgyY/FbQw8zT1leWby5dp09XHAK2oTKdFYLv5b3MigdnITY76ZSsA\nc70GCH/XLBkavxx4wiwH+/d03tbigcCwmogu0s8VqccYBJaPeS9HzKkORaQ3\nlePkdNkFdZpumczO+0XCB3XbGpHsLGk+0JqtET3isMEUVAUyZuhgDowdesmT\nZVvDnw6T96OdcxirVvs0Ao8A92sZbhDEr3/YucSF1uel0HEATQsEpB6uEeO3\naK+Jxpmu4pUi3YcbSGrP0tQ6rcY9aCOy2BBwbZyfA8OfgZdeJZ5tKRAgj0yB\nTlKSLZ9O/0AQIPyh3TE+9D+s0Is71VENZIRiKi7GcRptkvzb4guRARTvaR/V\nTUsByVt7LhPInpAkEQwJ25UPAzgtFEbZNKbnNkn8mGnoB+uRWUcB6obgOWXC\n9wLcbl4U/vyrb4guySjNFNJpwzhSXqP/tSNM+Q2ieMsl2oJLmR9i9Hn2zG4H\nKyYxgUaN/Kh514WNvSOomR0e41DXkPsypc63f04zEp10YkttdW6CXsDiuTJE\nPoZK\r\n=xBKH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/density":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/touch-target":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fb5a4cdeb.0_1595272802258_0.43571614199085884","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/radio","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a7aed80e46f738b322653ce710f8342a84bf93","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.8df0f517c.0.tgz","fileCount":38,"integrity":"sha512-QlNV4iJnsxbFPg+rX2NLbumGQcdMYB0Dl8nWq2FkAFT3e6U/nYSDZYGKnTznJnYUKIg/5lAquzMNTiaoiLlGTA==","signatures":[{"sig":"MEUCIBeHRthwbAewaAEluV6FlFrN8oLxKSWcj1fwZaTB4UDpAiEA2qk8cWrSIQhT+2nGJg3lJr3SuEWLqrBVs8MDaouo0fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi74CRA9TVsSAnZWagAA40oP/RvesoZh04nrg0L41Udm\nNHmwYN6kC9uCyIPGXghG64UctCx2PriTwGnaF12lSXLY+zSKNWpseTS3MbM8\nwEXFHHqrbo5bq30D25khe+g1vsyWYGbza4Sd8tl/FDrdFL8D97jmpG/Xb4Rs\nFFeFjzLAlOa1njjvgx4o4RgDWX+tv7PI4FkkANQc/ODu+lmPrJxNM/3H3xuW\nNa6Adjm8RdFecalA6jSC/YLC4p+vYaRDZM3YMzeolZw77HFzI2m6MVu3Lpfq\nAEiDhBdPCM5KOh3aUfNmU9b7EZWRwRvRiW0NI9Du3L+0RFGzyX9roqss85Ha\njo96Y9jTSVt+X3LuCNRw9miXTVoRqf/6X2rUacj4lxIm8fJWSSOFM0M/h+BH\nHEqUmu0ldd2rR1EKenIUNrQ0Q0TMM2MygSUKutDGepbRaezcqGowxtygQ7+W\nT6x6uec92OYJ0ASbsFzfigHY/nHYLKAP1PntavsXlTUrHxsXRUlbXUAQOIVb\nOofdTYWspR2elMPWnsQriF04/rd+6B63VK2J52EfT2zcMCThEvqQbkhFJ7KV\nVqnycdUEwvucPdRaRdN11oSn/B4CZwzvaKWOnDpGhBSNi3/cVo0WzsPcb8Qv\nu28FhKGY9zFyDe6dRWq27MGcvc6/5odiCD+Ttki4O2ERset2BVynFPN2WCJS\n/25K\r\n=VcPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/density":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/touch-target":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.8df0f517c.0_1595289336111_0.2900477308235476","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/radio","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"651582df174cd23b816bef13aa0afb72eafd4b6c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":38,"integrity":"sha512-7uThP3V8W8v4+hBjhVzUK4dpzDz4F9ATgcKIP+5RiHeixz8vWE0cddLs97C+3wu+YASLZ7eVL33r26tVtFsaIQ==","signatures":[{"sig":"MEQCIHiyeJODUjFNyC+fY/leZpLcYXsbGo+CDzzDoYkVcZaWAiBgjD0Mz9vsC/lgoro9e+EPt4fe1Fy0/ojb2obb1B95XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvACRA9TVsSAnZWagAAqioQAIdme+FlwT+Zu0JBHKXj\nB7aYo7mWB1ZIzmvGLI7e1w7H8dV9SvqYyce2A/MfocKIusCm5JsCzB5/KE2u\n69qj9SPMGrcz7rHv8D5IxsUDuP97g9LYjVQzVWiFip4n85jIFn1T5sgUymso\nsLyysaEF4w43G0CmofzATrZ9oeup/sBDmgNrdWwELliEPVDUY3qJdjHC7GjR\njWgOUbGOZzF8kLVthBeGmdkDTeWizfkHGoqwQKjh9RgI2Dngv+yituPuHfg/\nOgtrEKsZVOHpN3QXiGqULguNDwlLXTr/IV6zJpH2s7MPPoIwcD90rN3kxy8J\nqfHBOJikV5DPQKo/y2tSxa47aw26wbpu9I+dfKAUEsrB/pMr41bb0vUGSdp8\nGxG2ZYMSSlxDwleKsvR3ts4zPWgf6WAZjNn5vaEjLD+QalYPk+BLM/U53q6Y\nWuHey1dCSOhX9KlSNkGt8eklQYPM1z1wAE3WpkrgBqk0mCcZa1ZJzIxEzZkq\n23AuEkCL1jMnkcLCO0fpv+O1OOA2m97tO2Ocflqey+FWZXnN2woehM+wEAj+\nYjkVHwLvEBsM2AEahjDaM1UudgfSTho84EhpFCkBUglU7liCb90Mi3japiOs\nTNbiGOvm9i1eZc+iHX0B1SNpvLnjrkP3M7jrOH0CLuTkXXMQoyoEMXZJ49b4\nj9tz\r\n=nRpm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/density":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/touch-target":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.abcdbcfeb.0_1595292607560_0.3469590768127586","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/radio","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903acb7e2217424490a909da404f55a8180b58b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.7bd5075de.0.tgz","fileCount":38,"integrity":"sha512-/riz1Fg/86ZUhGWm2YQfEdGCLcm+nG+qtvHi2c4/NGLNqM+/11wFnh+yl1Yr3k1iYOKzqZRIMG9pMuv2+/fVlg==","signatures":[{"sig":"MEQCID8YV36FmZEQs6M0WHmIhRjGJW0sJMBZ8yRR3ALX+/iuAiAfHuqsoMGU4lHwSHHa8Hc8R8DxJY/b64L2iraQEDpYYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgpCRA9TVsSAnZWagAAyXEP/38MI64IvgZ2cE3CIRSZ\n3e4GmswwLvElHVLYJoRlauMUHIdqJ64tu27mBRVMFuFfNHpoUWUHCeeY2gKl\nikCeF5aGORNKjDUAYY/+j/Ce8UuOvK//f2ThJ5xm8zcq5Ny7czixSRYIsjqy\nk7Lvkadcqwoc42GzkyNGG/yFCadUa4vnW9bQECVfW5VEZj5An8BzAcFAPVNF\ns2ipmrXJ7Fa7mR4BSi65LnlHjub83sSETG56sCYHge46N9qwGXFdz5Y9gaBk\nuPD5TZhSWQbAXnMQZ7HMfd6EKxgydaLOdS41+tcM7JxQmIUxIDUhsKtfRrM/\nyEf84QZJ9OAGBYAI36s32na13k/VyMHXwWSVN6BprHMdF2bvXy5wLopGzw6k\nLmyNl2tq9UFKImQHOHIg8ns/anBNqLsB/HYAMwUkZDZmQUgioL72a9x0pIrN\nCcOvpOf9LcWIwK4bNFWDuSWh7Vc47K2fHvuBy0sAHYNmZBXSEZ3WhAkBBHfO\nF1BzNfBu7F/yPsUAdicHx8YNKl1FUxbn4yAZZsWek54NdVakvCpsn53D/zF7\nG2Gh6e3zxGSz3LeoX20xnE7So5SeFp6v4xLrvbWbFKWDPrz4AYL7r6GuYQIC\nfcc4RVp+vd0B9MlBDBRsQ8RioE/BSMkT9Ylr6hIKIO41M5NSBhsMlcSjDHua\nj+T0\r\n=a2wn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/density":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/touch-target":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.7bd5075de.0_1595357225367_0.9634575797776972","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/radio","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43b5a97cc38ba305d829d1438b8c996341a4902b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.405a29a20.0.tgz","fileCount":38,"integrity":"sha512-DsenvvXUMtJ7Bd3VsR5YRGTQ2Zzxuyq9vcRK4m4gm3l2B2t51FC/Yhshv2JodM1KPUjFPJqJN/CJC8WjfnC3Qw==","signatures":[{"sig":"MEYCIQDiyNUFieEXLm5Td2GZejG8n/kKZg9Jus2vlGemE8Cw6AIhAOdnaHw5Fb5AVWF2THl6sofE18X/O1YZNWNGsbI8V/SG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxUCRA9TVsSAnZWagAALX0P/AkuE6DZW6pNv5suBipL\nO/OtXk5VZAA8WysP+t0KdTWmcNSnWPIHQDZzI1K7LSOnQCIUzV85tFsiboCP\nWx5YKG1YxwnJHC1dTMhc01Qctxxb5SJQxuHbSVfJeoeYHxIzWAQupv4p7p2C\nTT+a388kT2kzQFODZ9j/qcvm9rX8kU5KrhZ+1Leae/zIDpDg3A+j1mT2Lkvh\nlNjjQnpzj3ly2uMVsT9t6s1H8l9mQHo3U2F5WeEWimgpeA0UsZ1BXCNivsgv\nM4YrUjIjldqHjWgcrTU7WY7fxeruEO3nCm55SD+Dan7BTCM49A8mmdVa0c1M\ndaKYYB9DONGmrd08e6FIerbwEDZ3e5+Q2ATkpPoCBnCgFAr0K/B9vGpRadVv\nlPFZlbQxYfeZxqFpxL1nnCA1YzZ9v4Jglbu7YO6huouALD9kfPkMSr6ThmvA\nV173WeITZDa0Mj+dLDS8sRDcuXxLc0JGQpgKmzyY4GhR3q/CXbVcJV7Y2jOG\nRHHyvBZlVRpW0t/s6Vfat0YtHODUzLPnmqw3Tc3rl72yZWGATFf7ZIUfzGiB\n+PFW6LXgAKM7xUfUg7DW4E8eLwE0TyJu65IRpwZrnWhoU8tedfRDge6g4HYJ\nb5EOPhIs+B8A9j5WX0x0wPIJCRu6QuwNF9+61F1QlnyxnOniF/9M7QO7Wom/\nmeF2\r\n=32Rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/density":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/touch-target":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.405a29a20.0_1595456595556_0.2977729665986155","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/radio","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a7ac41495dfe868ebed85231e27737778a44021","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f3693ac4c.0.tgz","fileCount":38,"integrity":"sha512-YF53+sVjSsiTDST62SDvEJK7VBdn5NBtkraRYOb2dAxFxLR6Gnd3N4PqmtuHVLzoyHR8pJjgXdkFCThjaBhHFA==","signatures":[{"sig":"MEYCIQDzjMjDdKAm10ZYbG26GsytKI81ybWPAI4Tpu9eLxOLoAIhAL99amj0+KI7/GVhGSj6XzXP0rLO5ZEaJzzTXkXsfM0L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7NCRA9TVsSAnZWagAAP2sP/RwxfG5jU1rFmENAoh8x\nfmvaoZpiQZIIAUTi42c46S9xpAb3v4r5UCGxt/M+sNHk0hNWJZsnmySplZ4l\n9Ul98RigwYRKNQVbdH6Fd742Rzx2pWWxa8bjYKOK/SCWvQwHXty4j8WzI36G\n94lr5W80lnR0pzm6ydnboEbcifY5733cqr3+Fg5jM7kFCft5h/tokeEITE2D\naR3hVkZPMYpxAcQlOqu2jag9R7ehS3ZQX+h2A/92bRUXxyKQyvbG/wBBsAjk\n606CYhYm7PA9pRPlppla9a3cvsDd7ZaZCQS5hfr52t0RNArHV0k5E6plSiPV\njb0FCcnh6R7CUsNbCxYZpYLzDsn7Wow0Z0USftY7yHSF5h1O8Xe+Hvg3lf6A\nrZUUSt0QMZGzBD2deBf9ekD7LVrtYooNinY8pgQyUuwU9Z6Jq9pGnoSS0g36\nRarY+GlxAhNEeCZiCyZWhc4/BLQkHQnZSxKdMsk2wozkZxBcOJJAuBfWlaEl\n6UAj1jIiXuhijv7acgWD8h0Vexk0cMG0O9eA50QNC0t3GqR1GisNtFZGnyRa\nJDW+l+lO+G4Vu8afxVrFU+IgqWuvPFNdThxPVRIbRp8bDH4MKvTJrhZLwIYV\nLZFHgtXCigzsOBruDkTZVcGcqNyCzEUE6O2tUUcizpWuBNRYwU6BzzzJSPu8\n2g8W\r\n=74bD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/density":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/touch-target":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f3693ac4c.0_1595457228624_0.155817585595585","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/radio","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2b4a3cc5bb794305c2736fc18c14598eaec5d0b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.12a109680.0.tgz","fileCount":38,"integrity":"sha512-ilL8Ovq8/aKVaHGDL4NaAugy2O/lw73lxA9Loof8b06VsyHW3K1ofbsGLb1pFITz7sQ77UTQ1kJyxhOXBdbFVw==","signatures":[{"sig":"MEUCIFwGN4dPEA/2L0rp3FzoqOARThV1nZilSUufU4PDH8aPAiEA2Va2jurhiGQ73sq84JdI0Lq55xTptzw4ZjnnkO5XtHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMW+CRA9TVsSAnZWagAAxBYP/26HWAfbtsAFpdqwkGwT\n3cTPSmZRFD9BByOfLTyC30tefe6aXSxcMTRHum6FYJ5Jy/7Cb3SzZCBKIpgu\njYwKp9devMFDBLtoP71XTBAbTuDovauH8dK1hh23aDpyg5Tc9o9zsyYC4HxU\nnCcMmvK0z6nK6pB9LbhSgo4nKcsgNPG+5n19QnLbVRNu9aNk6RCGZI4H015Q\neaLPthMJZOsyXX9Va3O8MHQinHVsn3QmoZy6g05U6Mh1ZmLxszpxF+AV2rjR\n+m7TxtUEq28ORPG0NTBBHtyIU1RjBDN0ANdPTP/zlvkE/rUdBwunI7+kYGHD\ndPppmpsJ4xoISAgkxVrPm7xpWPngkUMohtwNQPKHzG6e3x+Eo7jovle81qNh\nstenMDKCsCEn7lI02Zc8kMph59r7UdKN/h/PQdV0YOzGU2Myv5EZ4HlZXxSq\nJLlumycagYC3wa/0OGQMVnhCXfZJoMKMDV9eSkfMQmTEtANn/qtJyqHbfgN3\nr7BdFyB4F3Rltk29SbLdgkKHnnJHB5vWTsjxD9o6qv1kTniC504NLohauSPu\nn5mkOwzKhcMyyfX2/gYfwHJE/Ti6MMrfsO1g1ZYn8pFq3sowg6Iwpu/uA/AQ\nrq1BXYg89N0kDBNq0eRYIJlaUn11960M9HudwGUmENlwHbrLWdImYoglqlWo\ngaSg\r\n=sqHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/density":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/touch-target":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.12a109680.0_1595459006119_0.7747546244968133","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/radio","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f38a1e8d47958ed8ca1fcfeb8e5d30cb36126f1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.bbd06696e.0.tgz","fileCount":38,"integrity":"sha512-9gaDFov4kzqt15WEyY4gvdgqgnGc5HIW0JyimnB4O3g30ctfiKHvDJdDmpi3iXPjKv5qF34ltAB8pTQ81UzgSA==","signatures":[{"sig":"MEUCIDLNewr6lU3wCvNIUCixjrVL78X5QGjEHM3Jgofbji0qAiEAhfAE8kNOguOZhis5QzWA5pMXEiZ80up9ZqnN9LyHCEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFUCRA9TVsSAnZWagAAd0cP/iF7wKOunPFUC03bFX9P\nfc2g3LvcPj/eR0gP3FTVRDmNEbRR+XYyXT1RDvuNn7GVyHumLIZo/NcWEMWH\nC8kShWosDj/vmOvKD5sneFbCHeQvmP6tuvBJ1jfj/TR+PW+kdw5eIp5NaHsW\ncqG/8aSYn5j9MV+I4W0r/h/OTU3ePDpILxmVs7nsQTF4vhquJ86o0a9IkHKY\nsC1nHY/ctVu1gWs9bwe0hFZB4WoJL3xGmqF2VhyqRwYa2S6kA7TNXGD+tJhF\nCgAtOnPxl/s4WDvzwpqNkH0zz4Fzja0o6dLWenvq6zwtXClCZlrJ7c2ReDXZ\nQ5XK+mdh+jcLXl7Qhkr0YZ8bH8OhRHpRi7F/ZzJRlCa//KxTZaNRIjsfnNYq\n8fOu3iaTxBk67cFNtPtP4GPoXWyVrwdVjkrDWkE8UD+wiOf9et7Cd/rgs0I8\n6sCcFHWQYPJc4f/C/n1icDQUoW4ZqlPDEuNf3jAQl/BAPv+mzSdIOcxUeZ9p\nz5KSmv/pBEmqRuXytIbVWzylyTqjn3jerO3mOw4f2Qfwf+gMDA4osFjEGSfz\n4WelhBaMkGCS6faAhdeHp0drrhXNQ/zoMsvwae/LrKDSvYdJ0e6Fs7L0/7nA\nVgdpfTOWot6nQB9Yt90hAopigOCIP7hI9t8xlM5SjIRn0B46JeQOKKWfZq1P\nM8/a\r\n=qPIH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/density":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/touch-target":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.bbd06696e.0_1595461972256_0.12178154949409947","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/radio","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd1cab0671aecc62f1e10eb4187bdd7ac3b5101","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4951e7651.0.tgz","fileCount":38,"integrity":"sha512-9Wuqbd6AeEX7/lpVHcW7APz6ulCVPvnuaj8Y0HP7DccKfJxOC2+/Q5u616sbzPLLQytHZvaT4jj50GOuem53sg==","signatures":[{"sig":"MEQCIFmWiyT9wQ3t3tpMCsO+OiLJNHWjKUM2KAM5xYpiyhhhAiBDeJmhgm90iFCGkn9Hg6Iyc8k9pXkqg+U+isOLmcvQrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyuCRA9TVsSAnZWagAASmEP/24v06tnEIEk862ABRov\nQMJdWOKbbZqc/vHXRp76UVtzHcQ2dUn/2VZAufYGN/4WlVh49qFBtjm/GIIm\nfhKW5219MyAtMjWGr6niddi9w3JCjr+YMj6uJ8QtHMMtU3EHfYxfFYkCre3i\nUbzRhHeRta/Dwpfrvm9NglRHYDIL2/J18lM9MA7yV9Givut+OmDfJJ4vDud0\neZ9gB5BdkTNx8KkPeBN7Eh/8bxDa3APoGahxzWLABLrTHc+abIiIH+t+YXEk\nOIh/EZplMS8SfBGyqa4Tc7QqJyCFcXVAz4QN2Q8PzkR03yiJDQj9JUeQ41RP\nqB9lgQGXntfBCdVSTbEhTgxfJCRxQ5t5oc8v9q+kPNCmYifrRsRtyzMnjnYZ\nrye9K6m9vgUGdKANfVNALPAK/Om+Vc9vh++R0UfFenebOp8a/rqSWJmC17VS\n4txHlGA8M0LfppX/iZXvJa9Zr9RZRELlJ+xtAJnb1ZYLYfZGW8Z3pqM061t5\n1GidEOXvIXWJQc4rooTMeqPvsihF9AJ/Z0aJwEY7uP6saO86H7pVoM7Ajgmr\nQSi50N4LKPyYpG0N1C07lr0Lls9xrPxN2MmlQh+hSivisNwABSgquWd7ftq9\nxCaUNtBLjHcj7GiMcdY6ZuqHJCKW3Z0NW1wa59QDW66wbbPPPNfkiGiqgm5X\nb/2Q\r\n=mk2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/density":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/touch-target":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4951e7651.0_1595468973824_0.9921097833737649","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/radio","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20d33bc36d605637cc706ddc7abb60fbdcf6214c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.75deebbef.0.tgz","fileCount":38,"integrity":"sha512-+XNoBMLVPEfkrKgz6IowpSbw/Odk2DlY+tcPHxbLV91pK6suNVr7IQo2++s+GLbG1JXm05cuoK1zAg18bzsXYA==","signatures":[{"sig":"MEUCIQCM6/Cvl7IBhIbcSLdlAAzak3D+3KIcBfXV6kpzSoUorwIgYp4PLM+0wpEmPRY74f25O9W1WhpTgSfNn8wDe/K9Yx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczOCRA9TVsSAnZWagAAy8oP/RDRJGuW4e7voQlQXtVD\nK/BTINBUvio07qFVjgy/ikKaseHpUI1BX6SC7/C9/HDyeN3JTZNmaW6gkBA5\n80vql+r/Y800TKy2Eq7HTzEK8U8nKeQVikV0DMSHP9lPJZyI8geg3rhlvZGV\nNXP6Q4m7xl8w4qgITZILhPp9mzWeKkpi0ZfefeN0gGhOLWIUK8XPLzhbAeFn\nEvCcn8Y1Pq3JV8UPaJdS4++fxg6d38VRES1/ynRAY8I7A6t2MstMw+CfCfCy\nNpEn2dAa66DVB+d1ij4PD7TXKELhgVuZz/VNJk8UqYdpZtjFLwieYjYUWZEz\n1Szpm8XIapZ6KA7VUw4zTHERAVzoXRuZ1Qp8FzJ+QZmCCb4dcy8YUhKu7pO/\njqhRGtkJxrBXmisc9iuSK3kOyCNpfUYBKvSuhzLGX9A4PJgm0pDagVFzO4y7\nv+4S793y7w8oo5bkL4CqcWRUGpKNgPzepbF7MKUSct/0WTjXR9PQiItkORrl\nNO79HPuR6AZwpeo/KNrTlee+Siw9qevlROC3O1G+0AxYoJfmWAxV2rCzpveP\nxZHJXHGfN8c34buLelNAV8T5igNhA6e3axStnoDyIEkfLwRUMGx5pa2JEryo\n9XQ6egGL4d9pHYgbJwc00Z80QINDxjRQoDkR4beD7cQO5v3iWjDTq1yJr2KO\nf/eL\r\n=sk75\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/density":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/touch-target":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.75deebbef.0_1595526349879_0.2714738644512511","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/radio","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f05b2983617dc8aed1275ecd9750fa265c9623","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.95aff33ee.0.tgz","fileCount":38,"integrity":"sha512-6V3Rz8jq8WGUjIfUZ/rqdg70XQivFc9eWSubRWniP3rUqJ4h2DI+J9FCTldy59cXm0hcLbo4nUgLiM+ExQJzYw==","signatures":[{"sig":"MEUCIChkhfcDP9A4hdV8UjrQcYyM0f78TgIOLy7kQ378ad6PAiEAmJU2CVcdSBzRcA+BJ4mytkQxMgz8X+1TsWhbVKGC2eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGds3CRA9TVsSAnZWagAAzP0P/1YwBzBFkcIe4FJdkzEn\nE79CYzMjW3ArLzo/MkR3/df+henGFxMJUHuLOQq03d0VUeDws8auwy2mCWL5\nzAMdK8lAvSx9gaVhuQ3YakVdLsDy0YbPzPvXkPAC0jQTXdjzxwEgyLk4cx80\nAxzdJdBiFpXR/vAl34Wa+NSJJfWKxVl2tg5D+rYGvg/7K1UyEuXcbsqALkk4\nQ94bfhIsM2KIOtc81PFcv+e7ZdqPooutwJV5keVZs2qAOLl1cyNSEFQ/Pyjo\nlohwPgX30dvm9cKk/w/jbIuS59aXNfwiZtgMmMI3GPvVbc8eaDIx9CpExIkf\nNkDtYQdKwW4Z5WRY55Q7KnEy/pMfxlUE/sIIgpi/sID+SxvJJDpqTTRq8s/f\nFTnuinWu6edhiyDtN/CROYP1KyqUTNbDLZC+PhgHX4LuQGahI9AakKzOgVzZ\nb0gNnVzt5hV3tRMa1MiuKxJr7iPOTfMlX+/AVa+iJnfaiheURhgntKFTP2dq\n7L90iqITyR/i6jV94aP0j8vDdxKPuuYFTeCoQQZCJUmdbKcvaFpMVFChCYZO\nfPLWAyvZARxd0PM2LPfp5lYu96uWxYSAW7WHcMtLwto5oXJbT7EIsW/EO65f\nn18TRWs5z8cKNfqk6Jz5k4+jOl2zDQraa21p5GaZnQZ1OUD7Kdxql4rf8sK2\nGSGJ\r\n=35IZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/density":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/touch-target":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.95aff33ee.0_1595530038538_0.7039621742477005","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/radio","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8f4007b84011c365e42b536239d1b9388e752a9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.9d9f47473.0.tgz","fileCount":38,"integrity":"sha512-c8nsjjZEYvr1a4mgl6EeCOpdAPUxUvPV9pl8X11KV/9Vo5D6/P4tJNlcaZTZORZDpK54/qm7EulWV4CWPXzYqQ==","signatures":[{"sig":"MEYCIQD72dELEza7JK4GDvaxStsinbEmFdogzB7xl82xlqgI9wIhALL4Y/lkn/vcn3M2AFdxT9nCh7j26x3RzJoM0C6ULes/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevyCRA9TVsSAnZWagAAwrgQAJm5hRpOW+oMv4OvxsQv\nmujXe5ZI1QUYqgNHtqgauPZMcWKuNdizJpNZvVk5q7e4nvw834XwWiqjfNAH\nddvNQc0MLiK2xUpReQSopNYBucI1DFibjRPq+TvpOM+nN16NFv/hwdRRlzxS\nBL4oI8QfsDtEEWoG3abG31Hc26cnSpsyY1o1YKZW6kCXVf1cWHsEbb3nRUj/\nl8j78Qk7sjqAqp+um/rvFlxhAYbHg/MFDBp7rMzOqJQKrMCvsep0NrsopJAr\nUJd3dJLJq6pFV8YeLJjt59xpvisqtRtxeSSxgJwDS0IMyHszk0fcuNY3gIj7\nRacMjznCVXAq2twSy7emILtCCYg6Ru+xtam8oa6OQAjHnSFKn3+/EWIk+ivs\nEbWMjOAmxa0/7QIIKLuqK5DilEoE6694Y/Z6X63bz88ZnFBaOyxRqsWI0KEE\nGzQc4EQF/uwftDDQVMDk7WR8AkHvMJ4vkaa7aycGPpUdlA3ShpzyK2IkuseV\nbuNTHfsJLvmj3HM/w5gBej63x7e5uxd274ka62rAGJi9W9Y40xzD6583nGzX\nem5IBOFIkHT5XCv22+NRssnkXolIpN5bDYJAAz1BCEFxH+DM23cAhH+IidB8\nGB8u3JxotHINJBhAtksfge9IOWmw6M+Ih6ryC7D3XZ3QqPsvOXAucHPhXJsu\nRtE7\r\n=eEtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/density":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/touch-target":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.9d9f47473.0_1595534321329_0.7251981075105369","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/radio","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c22b19405ff2a3f6b8b55b0397db79a7b08d3a16","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.00dfbf6be.0.tgz","fileCount":38,"integrity":"sha512-WoKxQML4bXZ1G/O8aS/cLCC2XX9/azaKUsXNsMK2ZisMTume32/FDP53UKXNeuQzu1aPaEF4teaQo/BpgAoz/w==","signatures":[{"sig":"MEQCICO1vxFWhfCDYPXCg92xQWsFSP/Q4ismv/bFD9z2Z35vAiAOHzYzCpv60vytkODKZk02GPHqp28//Er6gAILhrQdlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfo6CRA9TVsSAnZWagAAd38QAIN4n83Ocn3rlTXd63A+\nu44m05QKDIwJE1//9Ptyq1OyxhxZa4d5acQ+kbR+EK6SpKvaHxV3L6RQku2Q\ntH7fJ6pEXcNsSS/26K3LLoHUW1AarJXm63QybS1HhI1HYZLhTpS6MA+DgR9q\nokIHWK++rHHiIax1/g5teUhMQj0ztI2Bpt0Ylb4JmwBwB5faAqvc4CPCFKz1\negXaMgk3ya//xQX1xC9TqwonwqpG/iHAygatTeEcfXmy9BIMUohMi7QTpf6L\nBN4cIHJOjDuH62QgIcgaRe6Ub+Fdx7uUnukJjAtsriwCIePuFNDKai7qQwyS\n3WWjw4fFAlMZ1YsH9PUL8L+bSattnwvT97Ci6y4XAqsnv/bWLafJGBDgQmFX\nJELSBMkVDuTz6TsFf6y4rgF84PwvHUhCeNv/SoTnilmb511VIenIbUlZspPr\nrRLQktjxz6a4bwlLQQvEd9D6kw9W/6UhBzL39vF1u0s03JKxMnbme/oL3vnP\nsGvH6K6OMaXHHZDGZr+pIpCXnTafFfECII9wgHVxIYvftq3NHnVktlHR1w39\naQqdOz3Kqhl6Hpeww9KtxrIJ9hpOUcXb9/oGGzmKZX8/rBDonWBOnPiw23/i\nRjJU6DDCPzlRsmYyBWAoF0Owc0IGvH2UOhqc0KYDbFZ8pfgDI2QyTM25PPE4\nW1Lc\r\n=MtI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/density":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/touch-target":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.00dfbf6be.0_1595537978471_0.8151147258908897","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/radio","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61608507436f1d9e82ffaac6f7a3dbcd9b76c054","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b87e522d2.0.tgz","fileCount":38,"integrity":"sha512-A0hxnBDfAjEsJg2P1XXy90KPgJPFh+c+wbV76EXyyUEHUxIkA0Ft/2lFcBbbdKiJZJfdxIprqhKh6i6kM+86JA==","signatures":[{"sig":"MEQCICo6Eqy+CwmH948YSL349E6hmfOVlPwiTbrd78gwwiAtAiA65tKBelMd4riIpYfBm4HJFSkKjJHg7D2xvg4NGcCenA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/fCRA9TVsSAnZWagAA7FUQAIO2DVfLgUyZXxxZfKUT\nP3GQF1n1tHLGwjos4ZtZgb2L/I6XxxJXhoEtEPrGg67p0JGZXCInJLgLycMl\nS/WgxvTD0mqa9+ACD9O3R2G1M8FYU2+ufGihYTn3b6UNQX0xtLzKK9BLVG69\nR+ngVlnuvr7+thGlM587Xg8GaS0IhkqmSz76Y/g/AN9fzSWX/PrTLPzZt2JN\nzpukWIbbx/vnapAsqft8/W6/5p+81FtiT0d5zvkOHFR+Jx/VscvQIAmIblNI\n0Jec92dJdXPdlXNflVm9diYALYyJbC24105rYQtl333lu9fxTTVLHQgFA6D9\nhAH74FadY4a+NNfY09fUG9/VVvW/TKWQxEyzKRcmuuYzsqA1gZirrRHk1DHL\n5mbzBxyKzq/NR/Mzki6XApnIFrseW//JSbP76Z7iMnZzeZ464S2MCV4bewbK\nhZ+u6KFumVMvOank/FFkA+5HpILKet+78MFVk/ga2qaJJW+vX1LHvc//hL8J\nkdGbmDBTtKcu/VrM88JE9nqsP4ps4TGBacesNtRqQedAvaWT8m5ymqEOqJHj\np7Qrrat0g73m/TY35DaOnuzDBnr+Nr3uTE57l3T/lsCDr1XfR7103wtEQGb4\ndKAm7NBFAl70wdMlLKaZHaB6pc9AeSyPHmo2t5mngQK/T/DVPHilw8Rmk/ZJ\n2J1p\r\n=ZLOG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/density":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/touch-target":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b87e522d2.0_1595539423268_0.18219799011028126","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/radio","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e0a0a772de13cccab770f20935e34eaf851fcc6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5b3e150e5.0.tgz","fileCount":38,"integrity":"sha512-Yq6fE+CBcZf4bt2qu4sdraR9rsodJVHdxq0n50FgYBZHshHQGyhV+JIT8dJ/FT+11L/u86LDoZK+CxXfRF9RNQ==","signatures":[{"sig":"MEUCICCfRgoPEhoaBqH7Q6C44F3uYevLeCWQWDZlDnlcWfFVAiEAhwMDmXtUN3hTdyNCPIb6X4qovCFsrpPspvo+fKT5f38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgvCRA9TVsSAnZWagAA8GwQAIQk1g9rb4dJ5DqO15DZ\n6hRM2roHl6AEQdyMMmz+FUws+0ti+mrD4Xc+aXWUax9hbURDnJl4KpQixCEo\nX8XMlvRxrT1W2qxvuBcbZFvch1oAnZ7r8sfXWvgOLo3kOY5DXMgSN7nROcAw\nzb1ZgfGEFA1RxcVYSSxJ2bOPeQoMbJ0pSoG3eemws0F3YAnjPRnj4AI+zko0\nloYwZJg/nC9qEXK6PpVuDlt0NNYg84HIo9Ieq8E8bjChPc22LbLvtCruc9b0\nyaRJUsUrVn7zq7sQ0URBVavHhSP1wP2pr/U9+90T8fPgD3Sokf9JNpQLUjmO\n8aCgLFTvbLuuhH7cd34KUys0nBKxYnv/wOV8NAiEQSavPtWz4+4Rwg3+FXyR\nNryeTB+niSx2BXPpYQApMIyVNuzM6G8bH5Jz9WQFUTIIspQkzFAx4iZT+7uQ\nsFx0jXTZJ2Sb0EEqDactPEpuFfPMH6NKGl70hD4BmIGp4q4i48hdqXveo0x2\nmvV4GhdzYgFLF8u7+nVzTDRrtcB5JbQgBTf9/KpVD9gmwjTKPNM2HV90563R\n7BaJA7PXIs+tVinGXAsLroIjLDNHY7LDG+cp4lmTmXrOBjDh9tVYyKpBKh2V\neW16s9wnTW87zi/OY3p2nNNp262ic+2J8xu+aznL48SVxVlCRk/sxLkHJ/jC\nUfmu\r\n=xfFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/density":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/touch-target":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5b3e150e5.0_1595553839037_0.15964816710848928","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/radio","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9733c4e3cb78b14b3cca99a5e0cb0bc62628726f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f0ae11786.0.tgz","fileCount":38,"integrity":"sha512-W992IwaIf+UTWLzcTmzdTLxhDbIKFhb1X6H8+GmuzKEToatsZsfd6FDpDpu4zk6vLQKl8lCSJWouvHot3KKa4A==","signatures":[{"sig":"MEUCIQDsqmdWdmvcA/a7AqCHhdv4UiTjEqcqRUPAY6rQezuCswIgDwVT91j2Q7D+YXed3MoKBAnrT+nNRxqZqkFedyEgIGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzNCRA9TVsSAnZWagAAM0gP/3omp9G5OdwapYZ668KJ\nTrI2TxVg4skSq5D6+ShtMHzv8IjgwuyU7zHrJ/IdNbpI8BGlKSiS2nBTt6g5\nGryQFxmnntL94pZSivVnFZut2GTI+/ddpobxTxt0biQWWN1yVcWw/jeUMIF5\nUvM5u86jibFH+F1q25zrvmBmC5NsNz2jGY2PQjW8dcsWmyR5sv14+kWCV/35\nPPv9b3xCdsU6NxAxXmUcKWlPVlTP9A5j/XgNP/41oWOP/xEat2tf16fv+Jc+\na5ZxMKzaqV5adRrLQIoscAfJLzQv1jqT4iOFBgV0zofnwLN7AJsmky4qqxqc\nSU8eg+FKuQ+ef9xe0YNkuHn4YLZl4HGqk6Bbg8qtbIeLNCt7IkpXj0QqNctG\nwiYSMcBUaLyhoxmbZ0sNZ3IJ6dSzHx0LwfzTofh3MR2NzSHJPfQSH6C9/ZwJ\noiiYFs+U2Gs9hUPW1Fzqcwe20/w4uJMVCMp5tyNtNtJMWFO6/KU2RZKO/f2U\ncYVmQDqnkGtpNniakn+26hruDF7w5/4ILkVXTRVRN6NdPGn7q8e9hukqQRqv\nTcj2NeFGqoNbdo1nGRZtcPQ5/d125XPWCR9fJ+m80nRMz1s64nKwP7Q4efiq\nOb8R5ofxkgTFuh/4g6tTlPsjU97v6p5N59dbI6h5L7g++5aa2uF7602lKB3V\n5erS\r\n=rznb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/density":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/touch-target":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f0ae11786.0_1595555021207_0.9706191093549528","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/radio","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"626c4ee07aa2c9861bca8d6e0716846cabfc6d0e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":38,"integrity":"sha512-uNIWpOPu518iJJlY77leQMLSdYvq+k2Xwb9+sLZzEy8+rjTAUmvoy3Q1LX7VDblAnEsO5UBrAVDM3fnV+WX6mQ==","signatures":[{"sig":"MEYCIQCy1HvQw7a73VUAFoev/PM2mcYaCZP6KTFqXCDg08EdUAIhAPltpg9fxohQKb6aWeb1SZcqED3WsvcFDKYpjtbhHh/e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMlCRA9TVsSAnZWagAAF4wP/RH5dSrWaGuL1BbBqzwx\n4WAuc+Pzr485aT/75pwm8KOAb6lLXlWZm+uIyuQxsCcXrI1Zo4a2Ck/XOMMJ\nrTESl4DqyXbK1xGWju11//m7ov5/XPkTGycLpOioQXhYY2ytbjxGKSolPg+q\nAkWK2KGoA8i3wT6Zwj1/kw7AX+HSY5OY2Ym71zo89aJwVy+Zpsx0+uhKFo/e\nM4l5Sr7rae40NQGb4LYvSQJ0PlLoHcoI/okf/UKfOIjDe3ANMtmVMPcaYrqz\nPvr5PRhnoIzuBiBm6NIT3q8usOnrCN3pL7zVcdhMOFLeygeI0K3QE015ReVe\nge/5hHeUJ1dCkqf07ri+DDkFc9TCtph7mfXyyGbVr2OjiOtJ4PMPiO/8vr4m\na9FtrWMq6Jhh6BsJqYsFJuRjA/IlMNMLnf1OAP8N1lhzcJMqUhgbMBGUZ2bp\n9WV3GY18pY5RixM91sjCysP2ClttCMuS6h0r7ORFYWxdBYESoXFLKfgP/5AC\n67pYkViZw06CimKj8unVDmejyvKFnwtDTNat1yg6lrXANLdriakZVIYItPGa\nbkaf2scDJRo7sSJDAGVE3uZOJk5VG5emnT4ubxIrtE7oTldvR8oZjlQUo15L\nCBufiXjgNKzfhAe5RlSELoTxAU6dQGrv5eCuOFp6+2Zab/VhaLp3IOG6B6KH\nzaGT\r\n=fYxY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/density":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/touch-target":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fb4ee66c0.0_1595556645055_0.2691586578068774","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/radio","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffeab8484da22f1931c96435aa3473c85605f9d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5511e0aeb.0.tgz","fileCount":38,"integrity":"sha512-5WTpfNL7GSpwNaCzuGMcw85/669DmlN/SAa9au5PUSyr1JPjAHCTSgaQT7IEbaaLNbsS1GSKFxMhn/jl0xBnwQ==","signatures":[{"sig":"MEQCIGsTVYgZonMCVyOwxYEaPj0+qwdjbMAuD8T425nV4XcZAiBvISkFO7rmG8HCtG2Prm1ARKwU2pwkrR7acoAHHFS1Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLWCRA9TVsSAnZWagAAVQMP/3aiG29XNua4uFn7QGUt\nmtjoF1XzlU3wlg4OQ9yxDiHcgwNu9JNsCOpyfKldr6SnTJtT4wjVTwt3bxN9\nzfpUofreo1e360jnNI9VrmJz0SlknukYVszr7KO7ATBFYtic0tO3dwjgV8rJ\n5qbpGm32y311b6PV/SSqPxJnByyzSTfEj4VD32XBFik6aamKQS9fSX8ghgYe\nDQ8YkXvZzEbdgU5sBh38Py/EURrsyD3frvbT7HjIbYh1Mh/YVFsk0x6a49k7\nC5FKXSyhKxp4lBgz20eyQweV4w4RF/l18sw0b5iiY/ikRz2LQELm2CgvbxUb\nezuSO2BjwwX0UMy88JZ5KwAUllYNarNnsxr6aK+OUXlpI1QqtAX3nn4fDO/5\nvM33OKo2GuQcfGZ5iKrB1iBTh6z6z/E4xjnnm4whYfd54O8L6J8rY5kwwKqM\nCsLmbe/M13Dcly6MRYzoFL6A7/DLekEMCPWzX9M9aPgzg8ayehG1r5hQ47lI\nkvu0hV1ii/8RVmkhgQNv3kqzxQdl0Q7KitMCaewSH/JVpeRq4zsuueMmkZxm\nHSxb9iKz1se9mAQ70/dcthw7KMRFxPY8W/0d1/0oyC0Rf9FSjaF6DsLASHsX\nuuj8Bp36qCHVh3t3OZbC34ALGmMF91a1TDNCvL2EEfzHE0bUworSrynRuXdB\n+DGH\r\n=vBH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/density":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/touch-target":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5511e0aeb.0_1595609814392_0.014760501992875152","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/radio","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643e63c69d2969396bcfe51f655c737ec655e351","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.8388a9bf6.0.tgz","fileCount":38,"integrity":"sha512-8AWjqegPz7gMsFb1CHzUfJUTwaseAbauTqtgxRD53kBdWhdOmF8EC5V4SswJFupSKypbNsfCalaA4BtP0fCnUQ==","signatures":[{"sig":"MEYCIQCGHDB6cGiN/9zbS2PAIt06geqegN7HLBF2HAW2bElTmQIhALzYVxNi03xIi7vFPUNWblzQvQ7RrLJ5geswH0XzsruQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DWCRA9TVsSAnZWagAAP6EP/R11wncAbTmRCKFpXwS3\nOda7c5pnMhvCM5YfTVJVjBKU8l4ZtRNrbkf3Fyzo49VfmVcz229mfo9aGymb\nEF3esGG/hboR7Qa5zxbAYVlwY7w6GcCsGQAZ6YC90pkHpl3jsrC2lLg59dgo\nvz0UNv7AyF7BBjanLSTuTn2kN6zTtbX8DOmr2bqFz03Z2m+olzgq5h34P/kV\nfS4Wj36ho+PKRCjuKiGLZaf2mdfqBMfIRXrA5aWrY9KZA8yrGj1A590fvuJs\nHqzpdUCyNPKOtYfKYqHNk1S+VEzzYEvbipI/7Sm0RuPERmaND9Wtdr0nlCOq\nPTqqWfXMd47y54FZuWkgXG9WfLli14SVj6FxTXkX4wJcd9AJv8Khmb/H6LeO\nHCbJ0lxBxbqbkVktn5XJkug88c+xrbDExH4bPWXa8GoT4l5OGBijQ7tQSzgc\nLjBMexR6Qx81j3xMncgADNbn6iO7IvwFRmJiuE34904Rbi1M8K26UUscVqIl\nCNGmUYDhBmrHxnU+igkS9KHYeCgD6JG+hBJyfMdqT+AnyvfZgXtUFCFFS8sd\n+GJPmKZZYm+sCTe0RVo8zBbBRfXZM7B/v3j7ZRG7T8I87f4TYDKl08XiavfX\n127LK7MoKLzAq6BSLf7Wn6DdBclzke8UDvLMp0cSDhZ8593BjJpD9DOv4OLH\ngAkU\r\n=hvby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/density":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/touch-target":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.8388a9bf6.0_1595621589332_0.42841996000614224","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/radio","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936cedd562feb33c0fe7883050a8a0e566e336a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ac405eae1.0.tgz","fileCount":38,"integrity":"sha512-XvvLQElYSIioHk2qEIngcULnUR/XJfKHfgjRASGD/+KdOxnz90hTCMFPoUigHu4bMwn3eBZwdfRMEi0mE0EEJg==","signatures":[{"sig":"MEUCIHSkDHOSQjhRMPr2OF3V/augN6Og36ACd6HYjH7ofnmEAiEAtUpOb44LoGRNe3sfCX6z6hJBez+CHNKTkyffle+h6Lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1+CRA9TVsSAnZWagAAnmcP/RcRSd4nxgZSgBDyJ+M+\nD0CoFEItEFCg5BJhG629pLMLecYarnEyOpIjkDIDQ2hamqVhUXwrNVqLb8Zp\n1wVagQGWQzh1fnarlCao6faLSq+8iRPifTXBN16VU46iCtgudmGfd3OoD0l4\n0sZMx/3hrbTKVQhSuweoXrSYNvQmNcIHREYqyOxBVjQf/xy+AW36jPQXU4Bd\nf8d78IaZx0TOHpXImwv1LYryZHdfwYjTdKJ5QsR3MNXGpcNge/8I8UKXQExF\nIDZdSvnzzfR4Khok3CtzIo+CgqPuqurF/B1XfCbrm2U7TaF7uHiF5WoSqwc1\nrpUi14HZNFOxwigLc1Ed9r+UTvxAnuopDAWHf0cxBn/wrjimS1C+yHXWeO9Y\nj41rKrfp3rPDY6EVx1JYx7F6UD9qLFEFvGMk4GVofBKqU063Yar7pQ4As1Jw\nP+kQ7Kt4AYggKTDDcSjtXgIlrKm0IguaKG9RZ/tIi1RS0fNgi8anIlUoY4ik\nOWeaTw66Qa3CFhHkn9l7CAYMf9noRCYUKnAWLBJB4Us5TELSa9L47sO83dRk\nvaexakXKEjpaibnG02e7GQYdtJyhoRiBEmVz/my3tMBU6GMk9V/qwazmE5DX\ny/3Eqh9w41CTV+5fyZWJEbS1r0Drtm0wCoVGJhlbP5Vq/afuCEHvUW8axDVl\ntvuY\r\n=lXhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/density":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/touch-target":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ac405eae1.0_1595862397799_0.4743609220593741","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/radio","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95f5f21278029e9f050b08c5e07ab280a2175fd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.75553837c.0.tgz","fileCount":38,"integrity":"sha512-wQEEKspr81c/yHKyLuy7koJJa6295Z8VqK0QVfTIwuxhKLJqnKvq0Db+QnYCUXZdKITbq6fT0i3QMgvcNuSINg==","signatures":[{"sig":"MEUCIQD2auMX3nrZEhkZM6QtZsNEOH00RcR14R1tH2CZ3hHp0QIgYRyMq65QplYasR3RXPXqckur4pRxFpROzhQ78dpcGmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7eCRA9TVsSAnZWagAA3zAP/01Mk4uHFFwWAX1c77FA\nVmsuFr4vPxv90kkG9p0mSTakX8X9sSd9kgonQCWQY/ieyT5OSOfVlRyf5vHB\nGqWGaWwsyrcASH/fdmEoGjXmoD2OAwSDaQJ/7+EPyIdJGBS78E0R1IRNZQfF\nGsR2kgUM2ZYEPYZWJs+uzjFpzXeZ7FSUYqarrv1dBlOqwjrvL2vImm/sTpSJ\nF5OhZ2EV1a5+Q/uZK7cP4oQdWA75+VUIMQPH4IAH+F1Wp2q4fpQK2HfQPQGN\n9MctaVjBG7wB7OxR35d0p9oITn67nI6wf7Ydpm8hwrV59YfBSthyUSzzlk/A\nbPs5wjv1HuTAW8mWg12lrJoEmFqOQC22Ly9N1B/RGgxewgIR3wF677fp7KDd\nHaKlTvb9uUDvlpLqmlI8oUbAthiD8Uo/ffDPFgU1kr6HCsSAKybFk9XeZRdH\nem7AA9xQgsZGVqvs3Kiqh45O2qjt8mFwVUHW8qNSPS3/nDYPqvDZtQMm7RKG\nDu0GMv65WDqIH1gH1hPYay2NQdfllKXa+9ne8edxJwaz2nwy0pqqAk+/XZZ4\nbYASOafVAb08MZfMa79YP29CWRndRA+mIqVJVcIQLZ08H5I+VhOd9YL75dZg\n5C/pPyIf8uj7ERVKULfV6b6o2nYD6Y2eJamxOvAaSOt6Uqb/cIyK9y79ldEp\nzczJ\r\n=F7SB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/density":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/touch-target":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.75553837c.0_1595862750286_0.5110025315593576","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/radio","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccbb9016434382c3f95f6cdc50382a49d12573db","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":38,"integrity":"sha512-bWUGJSQpcz73JIJ0UtI2KTBuXtQulcdX1nKz5MmMJW02j4OBRWrIHr9ilaxdiGdmtT2upzhQ2dC49nWWd++iyQ==","signatures":[{"sig":"MEUCIQCttJOkl+A3J9NQBQbkuF+Lg1/Mu1+SAOZrVZ56rxrjmQIgL3coG1T2uNEJA7hJymjj7w3FJhIY9EsyeCHCZYEFdxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTiCRA9TVsSAnZWagAAbNMP/0SMMbjFS2Avhk0TDoEz\nR/XM1WE6+CdZOCUszN9/ESIgMmjxwrTXtoj7JStbtjCAPJQ/GWjSkwwfXd1K\nJkSolZdqfxUUs8Hp8jLWsAgVLmu12y5zoqiha/qgwpGypdrkl1xzz8gSSO4I\n/Vysz5NUOKAVnqdVXbdwrG4mGohdmXIjtiuB05c420BH758DqrNXKyJvFg0k\n4YWTZOdjU0U2wHCP3atHtI+/PwNoPR8L1uedKy47hwzkgQoTtFjdicmH48WI\nKJQF4X80THAQgOL+p7rJZR0YRoVStuukO8EvOqE7SNFI1SxJSlv57aAt98gQ\nxAxhbDcZxBGyL+96sd6hKhZ7pTe24b8Q/tiQWgWGF4LpR3yv6IyGIae4wWwQ\n4rdls7vCJ6ad5XhJ4G8fbFXlOx7nnINTWZ6IEF3kLMDg4R9CN2kAAL22H4Hg\naarM1u5Lu3hWN5t02Vf647Ygii4SDhJ9MBWQxms62uWjHdNqK2A5GWFSIJ87\nw5kw0r5wT1IVrHlri/GEsqA6GY9Hgqzf3Co2hSwAYZywRUYiGYZRSb/2lcri\nvhxlInebtc/zIV35vg/6etzYRRa9BjVFgfIVM6ExGxQy+hszDhcoapXZsr51\n+rs/O6832OXN8JY+q7LABGHTS0QT9o43l15H2FMLok8Wnu6eAWG874aJ+qz9\nAtJv\r\n=oLkK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/density":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/touch-target":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b96fbfc7a.0_1595864290465_0.5727370144524122","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/radio","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86a8d94407e946dee812aeeb9d5de02ecc3dee91","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.61f1a8d85.0.tgz","fileCount":38,"integrity":"sha512-GoVhuWCOoupIqJ90Cr5oFJqt3rXAGNNAc0W5ozTQrIfCxPMHPS+OBgVIphI+MlR5T6MTjeAm88zJLEGqQUiEpQ==","signatures":[{"sig":"MEUCIDJBa6PVafs5ZLN9VuDzRhKF0lauAXSQtOO6cLZcwJEnAiEA1s2H210QWRA/tvmkmuN+Gd2ozzz6CaEB+NlJhor78yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvb2CRA9TVsSAnZWagAANsgQAJPkWIM+zF/mBWiKSQdH\nAREfqDcwpSyBCZt4ay9+k32oKL50cmph3x3sD60KrmdA9geeq1eDz6gZ6MEk\nWSkOE4ktAmnCtccgtnjabmRMnUFm6lxWvR6d2iNK+oR2ppYzA0bDMD1J1Iu2\nzaJriPZiC+a0PEHt0XO5C2fj4OxuOHC7miZJSZwYthV4T1q7/M0nZZyBPcvY\nf2XBUC89GHgEzsNk0IvZUuparA3E78fkwdFVNV04ThUKG1Tm6oVoN0O9g6vh\nm5xvqP7FTJzX7XUOAGZSHIv1NGeSB3nPiCEyxr8kY72t1nNwb5oYs5uppypH\nCh6ZmMBV+J93n+sBbekN7EwoL1vMdU4CF4RXOep5Rq/h45ttBOqMnlQ5amEQ\na+DO8FdXyGlJObMnTlEv0A+WIOsamfQVFurG7YpJQNVelYEedSqmVeN8zNu7\nTNiYZzeOW9pd73QncjVmbWrpg09c9SVh6jpOFORvq7s05FPxeCy9ntcB8oCU\nxfodpAY4VG5XUwlPO05l4kPs1a3w7d3KvViy/KmPotJTvxT5UodOgT0Cix4p\nTexR01Zb5BRh8ZRf7YYvTYfAvEaZeqdEdIcu8vvWSvqw4TVVAzVSaFmiFULi\nO71HjUZ9gQHrm+NL+VFrEcBhuKJFSwLCzCYQ+JsRDDg72QlsmVvqeZoE/7k2\nogeh\r\n=WEN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/density":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/touch-target":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.61f1a8d85.0_1595864822047_0.8132734202275713","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/radio","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c8ada653e5c1c622d9f2d79ec6fa6a7bb236c0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.81dc33377.0.tgz","fileCount":38,"integrity":"sha512-fJJViXLUgIFBFsn6fo280jy5z11iCRSVuTz+L7WKm6625POaTgSqD+qVKbh2yWKwTiZ9UYFICE4ppwGADrcGAQ==","signatures":[{"sig":"MEUCIFqEbCZDK5Tktz4L0bWRHnDy5BoZNy6Pu+CVV3ExZXPmAiEA/MZBYIMBVBPTUXdrErQ62z05w8CSEh2PT1O0WOmaX3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnUCRA9TVsSAnZWagAAch8P/0idKRUQal+SdRfE3aos\ngdxSlf9PIWt2UfT5T4KoD8Uuhm1Ox6RN2GeXt5Q1KT9evsUDQYro2J0NLqUR\nxruS8mULdrBxS2XJAubWMQJTJkb26D0bUDif/srX0hFGvsVCh8N57ATcLyTA\ncjW+wxH8xPL3kJ5RDu2rnbxJJm8Pdg6lOPbPKwXe4dqhIPuaQaDtPzmjYNhg\nRSiKo+UzFM4hUodlJpMKoR8VCnlvaCR9KaRYVKAdGrI1UvuYccBus2+hOOiK\n7jmKzgbbpVkfVPFWRCPmkwJs1G6BopxWtsa0OvmzT534FWRuUdkpZfTD8vf9\n4UyNiYKuSbCCOH++dT6GMZ7af+9Wa0sFqTEHfFKzSSLtwd9k2CSTh5oVkaMi\nRk24uX8bLqOlSGX5nJdfbT07lF/nZLcs7QqWDPWdm2WATpGr+P7TH2l92IEk\nYhprADotQlIjA9328G4MM/MOUTbYj6OVwHBdscJ6m0kmEIHdnjgXEaJaPa+v\nsUYrxNXfueNXEA17kToeN0dSClW0OcGsoyuNLBeDYFiUTWCC1sYF707uHebN\njIJOyFlQkrUAstuvxs/0VPjqKj2SPTkE4ivPfytMcgIK/vnnGy6dYbDntth4\njQOQfyPgGv09AEc/rGU8Cm3Q27Sfp8o2ZzahZQgZl13NzbZPSNKxwjw5d1y0\ncxkV\r\n=/y7T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/density":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/touch-target":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.81dc33377.0_1595865555526_0.370985030650119","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/radio","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87a905eecb7f5766b57cff6f97b68a1b5ec2b952","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ffd9ede58.0.tgz","fileCount":38,"integrity":"sha512-Pwv6hMEQe+BAIh9EQtxtEkDLAm9Xyuqu//5aFXgor56u3mTcewXZ6sgFDp2lmFDbxPJ/VfOs8ykHOlGKGVOnAw==","signatures":[{"sig":"MEQCIChrxA9XoPdWnamBlT7vkEXuOxpt8t83+K1c44uhCXKbAiAC3zP2eWkas6T7cgll3IUfqWQjESVeh7YPJdanZXTR1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGXCRA9TVsSAnZWagAAk3kQAIOnuTZ686OySINmNJcC\nCxyJp7Cb7thrHS3fd+cvTT/ScQ/+AxzS5w821XJ0sCEmFSPeQzqrPaR5CLME\nEn14vhkhjjQZOOHU2kvwr5muybpV3ag5WHuagh0QMar3cWb6kl3aUGbBEJ7w\nmHUJSQ31v6tBPhT5nU0ILOspQthK4P5JHkXWDoYc/bjUnL7LQIaJu9O2KoCr\njxVSGc1uqpnXKhBW6BhtxrYZNAECZ7NPJLjWPRdt10g7pRoD3i0OMciGjtk3\naSPA0004OlCJySFQKH5pEJsEGGDB/6/GcSXMZh8bwzByrrLrP3girALtqum0\n2JAZXNrYYF5oG+Z8FSZ/xc4lPxTfQhwxm3mj7kaGsZ50pbCuDFgbkiMV5laf\nRB0F2QyXp0oqY1HEul41dpoP9KKkzximRMflQIO4ObygSSg/AAli8pKLkSeA\ntZTOB/4fLhjIicRSnnNu+UJVyWsYbEOM87nxDSUCy9MrwSXxD34b8h5RM5kJ\nzGAsH2QQ07GTu2tR0ccKBfRHp3KeNpZMrBUKSa1JWsjhAk3jnQrl7G9I7bWj\nlSvOH514Nbbxko8iJnwMgfBoI4ccBAqunnG/HvlzKsdg3GLfuecgycrxS8lv\nUY7xthC6ouwhGs81iucT+/K4XBoKKEuwEBUkDex59F423fMUg5Ryq9d/pApc\nkS64\r\n=ZcUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/density":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/touch-target":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ffd9ede58.0_1595867543154_0.6965301748108701","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/radio","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f18add6bd75d95e77a3b6501f3b58b37f8a716fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.52dc55acf.0.tgz","fileCount":38,"integrity":"sha512-i9GujBBYq84onUx21emrxkKl3m57R1N5EndnKsuSn7YCM4DjoGV4T+XCL9NdV+Ei3C7J+jDZzniR4ApPvJ5EEQ==","signatures":[{"sig":"MEUCIHCm+clXX1TKmqIrwvUAoMyMpJasJ+bVDG2iIJ6jmUJjAiEAgxa0riZahjazF3V9Ol3K2zqDjjVMubWLW4JmiEvZnN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoNCRA9TVsSAnZWagAA+CsP/3uy2RTs/yQxLDmmWn9d\nZdeRlwf8rbB69kaXgAfoFTGQfU0y7rv+gxzcU9atW0IuMU3Z1E4eSS3/0pdC\nGs1emLQH5ITeL01/bwkWjrE8rmE6v41xdjvnfeGBfDfUEUwuRY8iIgcgQR/R\nqvMGQWlsJgMvmY7n3ttoJDExv2gKegZXFy2t5oVMf6oCobRBL/zN00oP72FB\n+3R710zb8nSgKO3dje5uCFpEvdb4lA5YT+mjtzRDZwsaQJ0MPgzPH/8pE/Xp\nbAum28ObfcSaRRCmG2puJuO01CmErca0EkOFM23ybHJHvCYQ0ih1MlPJcopH\nmf5dsMnCKDkGuXJcmvG00+PAOYQaf7NoA2Ft5udWuBwhiTxPKrkckwtg8bG8\notQV16IKeK4QixDOhJwd27F0RMmHBD7xQ1VFlmrYXltytQ1OqTgJi3yG08Li\n+dNJu/4lZ4dmoWHlGJdG1PSazXUAO5Q1sp3NYi+YAMqJ21zKeKS9LYC9yyta\n1jeb0ZGgbMj30jGO0ykh5aSEf99dZPG/IVOKNGYNSIvfVfMArjYPnBJHhcrm\nqHZ6R6JKtsCOXex29WXCnYdxp0oMWWFBhDJQazVhBtsW9kDfM2vLlAWRoCUH\n+Fy0xvfx2dbCODC4dQU9nvkzYSXWnE3HD9Xl2r0PNdZbkhy2nIrcvjIsA/Ya\nA+AY\r\n=/YqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/density":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/touch-target":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.52dc55acf.0_1595869709297_0.7650487917953723","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/radio","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e89abe72138778ef0cf3b671dd0e89a3e347c471","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d4274ff05.0.tgz","fileCount":38,"integrity":"sha512-oYKsvGhivjCJEyUu2N3AJFKUEfs2P2eBPnjSMdErroPBFarfRqHOxvlPV+c8Pk3Pfa6xjdPTfrSmiX08vq5eTw==","signatures":[{"sig":"MEUCIQCy+dvDaBEyLJeRGVygmfod9hHQ6qrRNUaJEdJc9ne/MAIgbHZI4lq77DVxUsE4MP0DtWhmH386Re0wXBVWzOX0tMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBsCRA9TVsSAnZWagAAZgQP/R1b/kNTVQjfGdOvEknc\nfan7hmToEb4um0WK43GUwZSje7EJdSFY/xTBpVkO2UIBUnQkvMPLjF5Qby64\nj81VKG0l9S3r7wDTiUApAgxavgxRd6U7FIeNI3nEndPxwjGtU/YQi0do57CQ\nSUEVrtyzP3xMMkgL+o2Yc1Or0CrbOYjMtzZMvKfEOmcFo3NWJaGhHS0g2GS6\ntvtEMD+SZadQ/xJX8mcfRXoB0Tx/9SCaT3hLGUBRKI5D/6GZcTAJH+vBPph1\nubcvl180zos8hqC7qST14cnWUqZGN8GUvinhwkrsCEA5YlDgBVx70GrFpthc\n6EKXcsEha63VrkcAsf6s2lyVGMOoqVF77DgZhKUtRYf7LjtASyFfEqDvz1TO\nhho5ODXjJDERoA4+VH6z7/02IVGZXLxRThZ3+JOfQcrN/B6GRDKBYKG2KDUC\nNgKqW0oKaUwecZAzGOgBcSDBU4ZzZKLWsB0fDkSj/7kR2zFk9QJZ6L6frI8R\nPUyJHHftDbq+Q1aj/xaJCFqP73lNjD63wHCjURkvCsE4zoSH1g3r6iubX1yA\n+861SjLRCekpeetAPy2i5LFEGKLe7zkNwS3jKbTdk1ORf8oR/cqpAwVbELza\n04zynlixFDVJEXh64Utqhk1+y6/DQ7fsptdH1lIxKshbDSTG7r7CdP4+DJ7G\npObu\r\n=9il0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/density":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/touch-target":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d4274ff05.0_1595879531764_0.9558411397130442","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/radio","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"650330c32bd864c7780263af7ad0490ef1880c5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b82d0696d.0.tgz","fileCount":38,"integrity":"sha512-hXSbRcsAD8JYCGp7jyJMOX+rCzGbPxjXQMRAO76GBGZS8uGsedx2OgS/uW/X2aouxG0Jae9bt9U4IfYMfPgtsA==","signatures":[{"sig":"MEQCIAXI8015LWcbsaMH7Rcfejj3brnSabM3gUNGd5T/awgEAiBit7y16C6QEW7y9AoPwyhtgWRCOWUMxz/e1eGhEqFBtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHRCRA9TVsSAnZWagAA8xYP/i1GaUveN4VblhopuucJ\nc4dAUumGJ84HFHa6I30BQOy6ldZMlQD43a3FrfhqJTyu6wzXchI2VUgO3ucS\n/6ToxCBP91YYUjP1tcapadNgCUL9znUZDF7pf4LkoHCXjs6fT3ocNpXuJvDI\n3HSGSimIw1WaS3oUgVoymFZbcT283caompJNgnQuV0NyRjgGGwcYR2aHsFlY\n1unVsxmVX0RHBpkKpeeekCljlvMtiRPiqO4Ptn3JDmkWKDYg8YHw+1vNlfOr\nQoG0vxwvo+bQtYj25tU+ak/DZy/eCowa1axsy+2dDFiky/Q9bwsTDNYsTKMf\ndSDWdHtbH1relmPcHgCpXBtXvIU6YiPIoUiEKRg2R9naYRLrLLHhegrktKdM\nziRFfmH4k8aeK/Gr36CzUHV5DTcvhK/NVchOoaUu8CQV2lCuQlCJTIiD3/SC\nzg41ZkSLCH8WcobUjI2xrK9ctbDho/iw2+4QTGDCbErl4384rjrJR9i1sftz\npIh1+VGp1n4h6q/gev+hVrXs4hVbJPhnJNHqv8u0Xih1kJugGZfqUHNRWqBX\nEc6LNnaCHpko4ndxcfk4qADJ21cyPutzoCHO7Gj+cZNr6XZBa3XxvzMCyI96\noTeFogxLlVsIJGSjdHB4KO9ZaJ9A3/eFPNluKEW/KLldyn9vpYT31oBxpypB\n/Oaw\r\n=TKGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/density":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/touch-target":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b82d0696d.0_1595879888569_0.416545568443748","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/radio","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c72f308e509c73a7838f1553bc4de901f0cf73","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c2852000d.0.tgz","fileCount":38,"integrity":"sha512-bZJlTPbLt2InLgY1/SBsfvW5WqAzQQBA/8IvkhYttHegL2fWArRRvbVg3nbxJqe5DyWpuYkUPiYgfxxj0X8Lkg==","signatures":[{"sig":"MEQCIFOdV5+Q2agw5duFajYhIuctUh7BFJTQoAk0eNFOJ2JnAiAbd+hXmc4uXsH/TSmXp5aI6iSM5EGc8h0Mnb+vMz7Rng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/wCRA9TVsSAnZWagAAoWAQAKQaNgEPUL7w4ZS7l3zI\ntrwAawUMgfyla4zi4fJzwiIivRXfsj0i4pfHoFRdxuGUFIZ4q22lSkw2bXuL\nedobkwmOjl53dbGGM336heGs1HNk3eQDOD4pGal9GAPvfQjExAm8K3RKwYJf\nKPmCcsFBMdkUYczz+vMfDjbvl8fdy1xEKLcahokeMUFfyNItTZzUgpQvmW17\nPDyAxeiI8hDEnOLkgAsoAM3pcRa4qL5JTIUzzj8di/nRDjsQyHNQXfNXxE5z\nUGubRvH84EueuNs9eliZu4VgO7v2MiaDsnf4zHoGByiaqn1k5oG35jEYqhdj\nLlgVjFZEkLQyea6dZ/RVyeEyFO/nP22qXXJXgGsEGrx+XvG6vJu0NPjnOHI8\n5iXEekVZQxpTKO0gp7gMteHp2f+NeO3gir7IUoqDut1TTukGK7SI/m2ACTMy\nYLFuIwqmOrV+6I/f+14XjB/eLgNoKwZ9pOlclFshfYBdy4PWA2HKk7ZK0TK1\nJ/cdXPy3YA7sHuHYoWeOTt+/X98w6YEdO1jx/r+oJMWBNCbtPlCODBS5WRGt\nKno+WnJJJ/Md1BMUUcGgtGqsbuOMs+vFjvUVkyeL3dNPJi0kcprG1TMdjrBp\nqUdAlKcVEs/pYuIZXMNA+rqwpvj2i/INEUcnchzbBba/L1qICqxYzvak8IMr\nSpxS\r\n=NlrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/density":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/touch-target":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c2852000d.0_1595883503767_0.3159213215400438","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/radio","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa506e8ce1a20fa8d22a4700d5245a3f4249045f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f86f83f54.0.tgz","fileCount":38,"integrity":"sha512-DENK9cTQOX223kWkktkJm+znxxpeV3EBSSM1rgd4J18BTOn15Hn+gEolmbNZBW9EEG71pAmbwK0VTiieA2EzAg==","signatures":[{"sig":"MEUCIQCX60Hi/Y5lA1KnWDHRJk3s0aFa40cc0LYG0Rk/T0iASQIgNT7ZDNBeCVmiKGymzqgKYi3tZZwIHUoBuNiKDSikDpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00CCRA9TVsSAnZWagAAKO0P/2fg7V74QkAvngZoAKde\nIkbRl5gEyBBaYyYDdehrh3ACTj745Qh/EF3OS+SKXEQcWX9meI5jJa25JPg9\nGNjj8AiCK363v6ykVuBKMcdAc16FJ0578bkAYLat1wmFAxwS3dB/SyETt6RF\nYQyjytoU2lG3uWK1f4mN0QrxQnM0PYBb77MDMGltaL7vtT4vcxUK7Io84bM/\n3v/ZNMebihqgmDAHaKyt2TdRyDjSvpse/nn0p4hGFwySYkX+n52+nFVBnomG\nlLcZQNrZFxBbQ8cXRsJvMIyak36n4LhqO7ZhBo4/o+WzfPvS82NAqUENIb7J\nJlUqPB4/WW6DF4OdUFA5hHfpGjn0upUzJ8YTDZ1j7qcGUBuXvPl0TH4iQy5A\n8e+/6TmjZPGv2bL21zBOfuDQV++gPmiMHvKpgvyQ6+X0SCBnii3pqTro20hE\nkH3W88y+OhRA+X2CBAVP+qGMw+LF3Js9v++OyqKuZZFbV41xdS39dAms7xUa\nlVWd+6HuCA8KEEdu69oGZW5V4p70F0hzP0u4e4d0uuIYEs+PEX8Q/fLb2aJo\nczao5aARWkc5t7N7Ha5anFmzpIq3VBu1OA85bhRCf1U050QO1I7va3Ptrth9\n9yY3XESUgeU0tTVVHDX+SXOa5n1xNGPvKbU6SKo1RJlqc1Bcj8JUTMLjRLFl\ntZZf\r\n=SXNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/density":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/touch-target":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f86f83f54.0_1595886849731_0.8457624842776472","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/radio","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd5d62d2ef4646e95bc3ef4885b7df815c27507d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.41eb1684c.0.tgz","fileCount":38,"integrity":"sha512-Apo3qpW/WE3AqfA6i+S2tO4qitKLYRlXSZuQsLSlbRdzK4cu44F7h5LeHP/5E1c37bw+fzKwewQbPWakx03mHA==","signatures":[{"sig":"MEYCIQDzv7qM0rOsXw1j0sy95bXWbA7Fafhbd94TVdYI83OmsgIhAInp0cZEEqIxo8OdA9o6CL8DbrTQXKLywD8ErtNarjA+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVXCRA9TVsSAnZWagAANfMQAKUGdTaTezyuM6K2ghGf\nQk8kmK7PoaRZhzQpxptBZXX5RO03JjZG4YIFoEHbPTWPAwo+S71uW+DYpHLz\nFT73CaqGN+aD+yXCGbKafHeuNx5M/QZPJkAAYwSaBDOa77bsmQh9RvA/dhZC\nuTRvZy+P78PZt5zisS8cEg+WSEl9vzJ6Wnzhjq4MiHE/5f+jhwqKSurWOXns\nGgDNWjID19C4x2M1mFzjCTfMa3iPnZHMMNhpOT3hK1nBQvlxkDhTonKWll/4\nQI/cjLee02YT+HuK912OZBTopInFvIdZPO++VUwx/RkDAT3ljNrltmVocwvd\n3pnneFCJrGxsyBeZoHrXK4/x/t34sYSDTiU9ZIwER0t8J9ckuNgdsfMo7h4/\namd4aY3k+BfFOAfXAoj+bXFAjxTfasyaabX8Q1ac0dsRRICgbDAdkkCkg0hq\n7FWhr9+sLwpUycR0F+k16j5FNR7axWy0MOKrqaE8aBoZKD9RlzSwF5UxABmL\nryRsvk33iAwMBOXe9ffvft+V+2l+rI6Mv8L40jKTJ5yuN+sseuyohs8Gm9ve\nv9jFYLEl9cGaU+pCpcLxD+l0QL401wC4IFMrznlLYpOCPDhHfEz8t7nkfW+B\nuQiqHZrc+n+FysSrzJ4CA9Ka5jaH1zQB4OW7EZilV4JuxBhGbPfYcEu1+sTM\ndK1y\r\n=v1zC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/density":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/touch-target":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.41eb1684c.0_1595958614803_0.3636799294627464","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/radio","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6633b90a81cd311b371ed45c1070c5254f066346","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.9e2f6c450.0.tgz","fileCount":38,"integrity":"sha512-KjVM/nsJCkOydZorsozFAkmw9aFltBAJerYuGkjOPqUhGFT26MrWL4GTq4h7JN+gz8TDd0fzWE7RrVaGWz12SA==","signatures":[{"sig":"MEYCIQDSOwp7dZm871lkkXghvbwUeiDVwkDedPY+jFsWgV+g8AIhAN6gVPIyUP81QUIILeBDdbzfiD+KhS0k4HL28L8lb8aa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkWCRA9TVsSAnZWagAA8OAP/jCdFSnmokMoId+UTtqG\n5d6Sh+hOBdQvJWGpCSbC+8DSMFVCT1g1qvbawSTw3eOaA+b0PmMk6IBuVC36\nIuJYNIjCeFO1sC3r2QMYHQ8o7PRK7E4ABrJ5bdXrugslaXr9JKlx4TOxDX5d\nN8fV8AytvcKD6eeCblzF8jJz4+G5OKY7ipDUM40DVIpB20hgfSrZyYDmx3I5\njcgN9JtlPney6JL/NufKKyneJJ1gm5nsXlvzHm6/ODn8NBz02VGhOuFiUCu/\nphR1dSlCoXJqU64SDqjGgm0Gqj5Fmj2rTHww7kZG3xaBhxazx/Qs7gJq4wlu\nPLT6z5adLqOn6tl3FvJ6dH9CwYRt31nPs25HuKav1ttc3Hh0yPXnvC5q1zn3\nA+1JuU0LUEmApdVV73ZYTGywBkyJv0AXvgc8+wrS9jA9d2BTp4Ph+dn8zXL3\nM0DCTxGGmOwkDvQvCclj2H3iKsnBpF0e/k/JL9j/R/dAQUipzWC89j1kZ04d\nJm8uPiskXbjR3/HYBTkC0dcUPmt95VlMYAuIZI44FOO/USAazt20XBNyHRKu\nOMKGlQzOVoCPG4le9iJHBcC9dWwrUrftoCiaQbGAJEl87nakWr25aoV/pQyj\n1LVUGYwJG0Gcv0Jzra729D2GxT9MveKgKgTnzf4xucZxlUExKNR9mxPBz4pP\nMAlx\r\n=WgDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/density":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/touch-target":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.9e2f6c450.0_1595975958101_0.4100121673936046","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/radio","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f21a48fb85aee26685b756bfcf4907c1518939c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e6950b55a.0.tgz","fileCount":38,"integrity":"sha512-4Ay5Gt3z8rPjUKfMwX5mPYw4xGTcg19G6xCSJ0QVYb9nIEuN7BW8aZGa9LlFJ8Ffl0Wk/zCUFcABkgRetRHodw==","signatures":[{"sig":"MEQCIC/+teSbGC2V+0GNCnfa11gerGTMbUPocd/1zruV5f8WAiBvwye1Nz95+q54frFZeB/Xw+OFde10pKE2NIHxxf/3Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwdCRA9TVsSAnZWagAAn84QAId+1QXMBMgX5oBrZgfd\njZHsXIq3SLQVkSfZdIcdGLX6WAxghGUZEekrcl1zl0gfk4KoK6vYJOgshttW\npg8fgiMct7IqJwbmSrT0Z43NoT62S7TzMQFLQhrRj0pP3+h3tTYSCjLfwF0i\nyjhuc82tHPxOaqzDp+i3WomnbYDEvtZ5m9bVZzkBPVQV3OUkhBPQk6VHteEC\nLyhPAr8cK2tNz1rxGpYpk6nXSEl6MM1hG4WutzK75KSnNNCT/w1dD+i2hd4Z\nNKVEot+2cBRyU3lJeF6FH4bM0OXu+7XD1oSPZ0hy0p/j/LvXQm3NftHwYN6+\nQj+HmSnD570gU8ddURCf/ZWnDJL3VA3PEfAjByl1s8Rs1G0zTRvhycwAFr7C\n2iHw/3XQqAQ06Kj9+6FSUHt1cEMuOemhkVoU6+6ee90BdjWMkH5p0d0zG0lK\nK6rodi3W/sD3Ox5ffNtOI3OAPFPyhgYeZHXvFkfuUk/KSzTZmA8yIwJD6K7Y\n+AiJjcLusj5sHvkqc1+d8aWWOeAycB4n5qSIEJ7g5x+EYPSWwVnRBjVEJc6Z\nqmaOmumdVvZ/PLmrULc8deskHuIEHBS04vmairsvuNWezqK06xwDRQgT/G7f\ncrYe3Oew5d8FFCt/GAjHPor9WpbDrNN3TuvcPaDGTMr13kBS8ach/or+KKjv\nG1Vx\r\n=X5le\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/density":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/touch-target":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e6950b55a.0_1595976732854_0.3793887378628453","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/radio","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520fec7a7844f7e43b8db6629b0b8086461e247d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5e51ee38e.0.tgz","fileCount":38,"integrity":"sha512-W5tztYCC2dPkpuZ4TiggLXCexiqcxJulNkyP/BesLCMq/aaSzl4bfbTwNO2d2DkWc1xnAVm9zlq0HVBxVldUtg==","signatures":[{"sig":"MEQCIFDZpagEVxQ4tg/fa5k3mYAevzm1IL9S7xx5WNYzxo8bAiBnD7WljMy3gWxcZzQSLVVQsxIeiu28ApmwSYNRr9kxUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGyCRA9TVsSAnZWagAABScQAII1GBlZ0YEfJN2mfiHt\n4VL982R9l78qXMs9dfi2VivCbUR33bi5KN4QlcuSTMAz9T8jO0tx8yIAyMQI\nKGFsVxHBIeDTmV4gbMVPQJ85VTtsmPl6zI0E2w/PVtHcriunXPBtePYKt5BQ\ndo7sMUbpEzmnNYinIMivpnBehkVwAuSfpew57xI+3kyupRTBMXJ0Hlv3ZZuH\nrd3luY4itR3xbOTT59r6jiHWNe26iBYITyBjUdmdCxWaBxXjDcE1NYC/BJ3H\nPpAzkR3pmAI268FnTdKN9f4ZdOiF3lwgqAvyxtGuqiH4GTOmsakyYNwHljqh\nxPvIHInv2+gcPzW/14Z77Vr9R9CrS/34SHEQHEY8/5ZxtxtIjgG4QVxsTjLE\n8yRTp/T8gnO/2OU7HguG0gqyCn77mKB8wTIQ7UJ0Ko2soqukv0b5D8Hw2hBf\nE+hTxPskgcoT6C6oKFawWc3jZ58diPPDzKf1caZKFh4MjBmFkjctR+ngIbXM\nIMDY1yZrfGLvW/dS5kvbianUVRXLYSiFLzMqc7iPcRxa6c5q3G29FrNBlXy+\nf+JziZxfLpfq4SfkK5joSL2GpcD/QB/3HadmqS4l/TwCF8hnpZhg29REbyHQ\nAOi8Artzt2CnhhzDprnS2SOrVocwrhlDggXMDniH2eZwiZxK57LLB9g2NzoW\n/ggj\r\n=tqJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/density":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/touch-target":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5e51ee38e.0_1595978161558_0.5159107001446956","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/radio","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81a47efb3d3d5a325942c909be3cd8c916012997","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a3898ffcf.0.tgz","fileCount":38,"integrity":"sha512-/kmiScZA2pIFtmbKowaxMrNAxKD6KLgmSdEbIInBFt7XNn5jmNAKL7Xip+OocnYXrGudVsjnvisFWOr6pDPnVw==","signatures":[{"sig":"MEUCIAt6nLsOBAVp0qnP/yI7KUPjrZTZaUvUqtlXFRLFKdthAiEAkEoIRjUrvlGGWwLsKdeJ/ep1fR7E3sbFamZRPWHyQL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSMCRA9TVsSAnZWagAAcgoP/0p1mXf+9Qpx6jc/8dY9\nvjq8qCRSfG047hscJ8/BRpgcpwgQois28PB2HqcZDbSx6EW4XS/wrHYJytg5\nPE1d4ZdcQLkSEX1jf4x9TAWE4BkMNTCdXST+PEtQDmIXHfN9UXKsUt/fbRFy\nJFXpm0bGtOvK0IOljReFaqKQK9DI4mMityIgG7mQnEAJhP96+bLkXiQSUrcj\njXlnzzO9WDSraX1e4Mk3QBlgFXarKCU9wMZay93qSKaVHOV25OMK+VLFjxxn\nZup5Qv5UwzHlkZ4b3nmne+0OCPh2h0qlIdmaN+fT9/T/0UnjZ5JvebBIVru8\npsQmOMyLfmsl0uNwdkmwIcoHEXzeV6SG5kK0YCv0LMtpKcTmXrGvBPKzKPBH\nvDgrjrGeBkh8Rf7jckjGLqDVRE6hDZI9Y3iO7aYGOfpBsJHkSx0YfHFNipzR\nnI+dBXQDbkfsUQ8uXpe0DUrumis5957YX75La/64hf+uHRlWNUNUL7YOqMZE\nzQZdPh1JylN0UNvdGz56V6Qe2sT3SuAHDsMbfhUUmR5bMdzlpdlpVnQNUTAr\nDTcDdM4OZ8WeEwhLFCeVM6mDp2O5NFLeUBW3vtdD6IovIM/z4nWoUOXBvIpE\njO6jwb6jM4xSV0Q07QKpeP0n2MQ7BVo9m6k5qbLDMTQkKI+qzyF+uISAZOKu\n/QZd\r\n=FVUn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/density":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/touch-target":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a3898ffcf.0_1595982987661_0.9169710998205507","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/radio","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff94e5be1d1027d7f14d0a681ffbb3818587bf4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":38,"integrity":"sha512-L4t4PKh/A1ycbTqv0sHQfo5Len1+oeLnTwYZJA6K5HXqMZZR1+26RhG92XarCkcvAbpefdwox9IM1Ppb7BQu6w==","signatures":[{"sig":"MEYCIQCi1F+QXaPKJkMl702NGaufKAK931/5Isg3CNshif4xvQIhAJcAtlViQ8wTuMcvVWmeA+INfD5OiCrgr5eJrjWoxgo7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeNCRA9TVsSAnZWagAAktMP/0YvRDOMYPskvyTaLZ67\nAhqTWCvdBQHfRBdBWwQrpueZXu+SytDz7oED5dAHgn7Fcmf+KxKat0UV5PIq\nRMDGm1ArTdWKn20BSBEdOyT4OY0tvNxzajAfafJ0eEC9p7GV62qMPkf5qk+E\nyFGINxwkNpCeYb8trbEn36IoiHqPkorMIRgmFwsCW81hTr3XZ6KGQp3AmKQf\ngVHckW02+EPQHN2tAgkdaak42FLBvnxSSlvtMOy5k4oL232cCJecXN9N3L7a\nbM6QcILLZb9L8UVt3vC15oeKP2QuxW/cDjq2UHmowz5kXZYp6eW5O3R0jCzk\nLwyN+EY3mbSaxIPRhVB9asgetWkP7om2R9K3OACK2GVmqbTHuaPKhKE9MBTg\nzHS1DfA75i3WHgOewutp5XknXBIyHrlfmt9Ovdp7N7pPSgGP4nnMqyBMtsi9\nI2KrHBRWoNbVVv2G9S7ZebQ4vkYiP7+rh9g+TVwK9a75k6Bw8jgTB3iN4cM+\n3t+LOiCWgcDTdv1aujb6/3jeX0ZH8duEYFRoFWa4gqXerJSn8q385kzlN8kL\nXYvGukxDOmiadKxODvPpM7tdpdm6Xsn9xn8CyNk8lSbKMWzG+YkMFYlMcYwV\ne6sVUOD1tQV5XWc0mjHpbacGGINYg1+nEpciRW+TvrQGl3poL0zQleYndgAS\nQRj1\r\n=6u9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/density":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/touch-target":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.bc5cc6c96.0_1595983757136_0.18982599888150498","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/radio","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10c60412d8a9a09761520f0fb3961172c551eb7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.9bdeaf928.0.tgz","fileCount":38,"integrity":"sha512-owJ8bGPiHNhjYLn4iwsr/DJLKYrS/qViuLg5jLNdRicN9kf64Aq5hV/iuPCeaONppyeO6M7E+ITQ6JcGA8m8vA==","signatures":[{"sig":"MEYCIQCeQyrlTwW6oPBJ3s6CIewlSjE+dUJfAYJKp7MZO1evVwIhALYa2mw8je1/dKb+JswQprD7P7NfwRgME3QqVn5W+1QO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7nCRA9TVsSAnZWagAAlXYP/jvrUbDRYrVih2gLPtkD\nkFcaluMt+ud4N29r2tlYKJ3px/k+juaUmQ29fxqx0TfxFnS8lUN/3xp90cf3\nhUtG7yqERNH+69LPigKHNa/Tqqxr62nHBIqWHuC0yvj8jfH8LqkCaFevj3LY\nj4smZUs6XPWz4gg2A9tlz/8wEhH29ZnVDPwV3SrNG7ZV15/1DJpogoNX8GSe\ne0XlbYZzg+BbK+zx2dldjWAuyWMAc++E+vW1PDya+Jnd2xu6JluIGuodtbYV\nTibLT9q3+P/yXKDa1Y4MUrD7wQ3YSIpgDWVxsJclQ98dm8zK1IUsvFHCxOLz\nf5yOAe+JXlb6EfvGfWnVtiMY/ZYnGS1M8sz+lLzLBfAn+1QwifiEEBWXOULz\nyT+gLAT4YJpO1sP2MidsCwPVbrh64tcb6Uo7b/ZreBRKR4cdJHrwPhxkrj0K\nRqysjqzqKOyaGN4bHLCvbiFuGhPgALYBo3caBx2VgAN1vkks2P4m6KZvouYs\n2hFIkB+hc0+/IoJHIThYHczIc+QQJoZXejPx1aL5tRclusU+ymLmGw5Vt9p7\nbqO5ornmnoz4lL8TwGM2U25p/w6Yjj58kUL+oRqGDzKl7h9j3tNGXsXNP3z6\nmAYjbsFiZjeQw0GuB7yS4x9wxFI/qj3tqPy+JdCLuhwJnQbHEPdcBw5f/2Bu\nXdEW\r\n=+gOm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/density":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/touch-target":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.9bdeaf928.0_1595985638560_0.9521529453197604","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/radio","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa87b0bcd1f8940edfdb1a20ca74d81d8c37eaf3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":38,"integrity":"sha512-xHwwrflzxmBs78S0tNIJT5v45o/UtcR8L/7N/dUYVLPD+ai72UsSV4BiCzuZRTPIxQqCHRMIRMzov6DZbuzZWA==","signatures":[{"sig":"MEUCIBdYA1skTN59wisMjT61AbetX5xyzw+9GKrmLRJ5BAwUAiEAqw0T9J2PpCYMUL2m/3PROUtyTDuH+lB6wt0Ct8CNVbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJGCRA9TVsSAnZWagAAZPsP/3Er+8eoGqJD9UtN2yY9\nV1vfgJhigm/HJXPu5FwLiaopx0rVyE1+AQkEjzdDKEgL+NgP2bK0cfIXh11e\nCrkG2GVciYI+XSzjKnRjchm1XM/UB+pyMAj4j4VfUcGYIx0hzCE7c6cMREZY\ne4EeSMMiV52otkalGibxhooxWF2oUUiErHPcJVuob/WW4V+GKLEyHq2R63tW\nNg/x738Q9vsaVixLds/1F7md7ERe0jHPu4fBg+6zpkP71Y85bOFWUffpA/Ww\nm4KUHQEa4L/YdHqNC0JbeJkTW8MYqdO/V+El9viTDqJ9sDg5dTeXhaocpW5X\nWzjti4bnlqQwlnJUEGBlM4q0KEjqN9B77ySJRLzhvVhTpmmKIe6E7xk58n7F\nVNNc9F/Fj3MjZbYPxNdca7MddWw9AZMDedPsS2Dlx0WDkunUiEcYeCfSNYjx\n1jUTtlLYvdPIntaEDPhGSMud9IvY9FmAi50IxxEg+KBXDKYOu4iR2uskvb6Q\nfTjRbCwUNoQgmr1DS2hl2raNUv/cfUfozLyjaTHsx2mUrMQQkF0Xt2bvyt2v\nWCVNGQYGheCxl5PQMeyeHH1wbWqFeLbBOqeSURcIHTBCo+T07wUS8d8w4DE+\nciphbFRfSIjYDpIfdZZJSFVeTQIs+zZrvgC4XKIO4RqRf6AZ4ipuiE9elMQz\nWLXb\r\n=XJ7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/density":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/touch-target":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fde2c1f9d.0_1595986502446_0.39652799098559544","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/radio","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72decd1a01e9cc11d658bbaa7409273f133b3a88","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.6b3876d5d.0.tgz","fileCount":38,"integrity":"sha512-Xc3uW+whB+9HZ1ZvDp0Ly4Nnx0u2Az3Lgu3leuvYG1NEJoJc4W4cHMu0kpAGvO85z+a2kZG8+5lisHxKbZbkxw==","signatures":[{"sig":"MEQCIC2YQEjhQ5tlwqB9McP2bbb99Tjr5PpaPnZjHiWzsN1oAiBQj7NuNuOGYwuygM1msQAmnlK2SoAzIgo74oW1BHy5Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMjCRA9TVsSAnZWagAAZ5AQAI5OLPOOnt8gQuu9H25d\nTdi+8puHGX1g9E722es3n8EB1Ia0zTv1OnYcwtm9PYl8WKGImZkjHSwIASXi\n2s13bfIG6bJyK4nvD75i8YlNzmaHkBEYwsVZuFl+SoS4P/f2LoZ6T0QpWFYs\nm8WF9f+mjZKKC95fyqXnURYRodncDvzRtxGF+Uj8OiXtoH1IbpmFtpKIt+Y/\nksfyeD0MHSkKnOc8xckbRbhAN6iqqVuYb9wNZGdrQtwOAMGDiU3qwWcPjg3I\nB5TdMFsbb9M9HZ/zGuXpJhp2NMjU0nGHlMbAy9mr8ARe7FbOAYywsxLuEb4y\njANUllfvqj8IUitnZQP3sFI5ACI7UXnkyexqZ70iAqyvAE41hUYugicVIWUm\n68+IezVukHFbymEtkr3RpdXipmUqIpWrjIb9uwag0Ipk059M9Fb8xKF4VYmZ\nAo/b7Svs+YOosCPwsCTBDVIungzwjjFEzyYfU3/27NqRKCHdzxQ0+ahPZgxM\nO3uI2Du5dWMgDM0RqErKQdz1em4l+KoPojZyj0l8rfiHbyVgoX968Vbql+fa\n5lyL6941an6i2xFQRgqyvIKuTxFesLcoqOgJ7UooXdeLksGHbrVFeefnVA35\nX2luy/1jYjSM0HIXTrMc4/RjfDYKgJsp/N40+XqbIYc/q9lRYARL1uQ5WhTc\nqvOf\r\n=iMqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/density":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/touch-target":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.6b3876d5d.0_1595986722582_0.278931574762729","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/radio","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9197cc8be82c7f100b1b2a5631c702b7457d407a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.30ce17873.0.tgz","fileCount":38,"integrity":"sha512-UDDK+yW++9Qmq9S/ypohR/GoiJF/HJ7fa2CKEyMRZCRfEyLEaMIVEnnHmBgyH7hlBofcef9jdXMP8HFCNlaKmQ==","signatures":[{"sig":"MEQCID2SqrGGFV6ycIP2iPlBTRbVeh9bkHuKq7q7wrBHKXWRAiBgCEPevzfZI6rfVliNUTyC9PHf1qO1qSczZdnBdj9Zuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6MCRA9TVsSAnZWagAAiOgP/0HNsxA9awTUOQm6G6si\nMNIZ+crUmK4pMyrMT1dl/1J3GIER+Ptx+NM/kUrQEwqV7CAJLPtultb68B7H\nmefpHTAQbS8NFXl5+qU6pRgsPAtJAfkVk13jfj9kVfH8/YZ7beU6xsg7dOl4\n5AGSnQHsXrhzHGjqdaGf3zf9uE8wxDOmOwu1J8no7XV5t7E7xa2e9O3iRpAN\nQ5pvDDye6XFcVSDVYh//aPWSgRzInTgz7LuunYm24BnGSdlSb6HZtb0HRBfU\nHvlfYNWuhrnM7/KkltSWMpJdrmgMGlNvMYhK8LuC07rfe7mygQeCbMs+4Uye\nGcnUnp19PaCujZLARAhmBGeOWvuOPYMydo3ZHW4yIXxeqOTHybqmeOC9Ylfb\nxdcMirzAqC/TkjMm5+UtRF2xor6xai77KOXyxKWvutW84Cjz/NYhQCe7h8bp\nqXwsykUxZzgIcQsB+KwNS4keq4e/qNSUMyCyleH5hPYKzLX8u/7wxgJld8jx\nohP+xUxstLZz1bDtgJFEiGWGldzJ5SoRmvSXMqx806RX0LukN5abEHYhGYyn\nl2RLs3mQFDCPDXka52Sy86chdRcCbI78sF6a+P0+O4vVo+7ougfjRYCuWqrr\nv00B4srXocIjOTq+vZ1Hm+xrZ0aVnlqFdxcRBg6QtUggiN3H4tWjCwAHx0d9\nsekL\r\n=MLWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/density":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/touch-target":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.30ce17873.0_1596042891568_0.9907600898111815","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/radio","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4253e2f4e5afe21f73b6455928e94f490b4d023","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":38,"integrity":"sha512-mIXVEFIU7iKUcaRuPRctYWsx6VCeJao9ChBBDpJP2X+WW4jPDvbN5GivmnKoFof3LDEctk60hgX1ohg8qMKbjQ==","signatures":[{"sig":"MEUCICXLNFTT3yyQWKy49uFM3LMsAZH0QptkbsN9wW1x/4mRAiEAlcCpz7mfFeSttM92a/V1SbcC26TUYO0c7YkDRsFgKbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8TCRA9TVsSAnZWagAA5+0P/1fxAONHGwNBVZJ8+5VR\nwmpSyPIWwyQ1d4hFuj8KV3HdyQMzctWDo2KslEVBYnYhgOJCoIFd53PwKDqr\nWOVZ0W/mlO+zDuCxRNugupOIBGEs9J6L9POvtxEl2CeJ/BhNXe2JFM8H+HsX\nHy+5xATtxg4Ks2pJr9iYWhZWq4ruVCObr3QTupI5YYbMZi3PHshKEH5FMD6I\nKLCQ2M4cK40UVgccpescxkcsdjJ6m0fqo3xpvGpFFknUrkTnTByjxXe7V+2I\nAlQ7qKCK2dTxGZkCZGcboog6KxwfgXPIt+8rxRD9FSj85tBimfzpJ2WUOWH7\nHAX2FQ4IXcq02OtyLiQXO3OR2pR8UY2/imndya0hJQ4z8X/MeyRS2VzCU4xu\n7iATw5bKAsV8BXj56sJuSbi66UiUlMiprQGkRfBt8XsayUlJ+PJrl9oLwbEo\nt/EcEXFZXfw1oWNAVah+bTPhhcQwvK+wRI9OMxORkHncK33JkohoFojlZ9xu\nu62V/nF94Bv+ClnkBMBQ5nlVtkGiQf1TdQ/BcNIp9ov/nG9TJz9pGiafCzZT\nltarfwUiTOejh04v4Cr4zhHwK4rBDJnqtZQGnyp5KFrwMGEkF6GbGmpogH1r\nIwl1Aer0KM2rtgCBuSGSjdb2bP9GifNkcZ8neB+PS7wdCrVEcgANGRZ5X+R8\n4Iid\r\n=1NeE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/density":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/touch-target":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f6bb43bf0.0_1596047123355_0.4719647688066191","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/radio","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d548d08ac96188f06d27899d2298e11b3958f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.6af75f6ab.0.tgz","fileCount":38,"integrity":"sha512-1J0eMS4XApwKojLPn4GTKA4PiCzhcf69POlUbEEMtXG1C082nk6LYwpdGFGolRefplmCqBYqZGfUGkbHgifrlg==","signatures":[{"sig":"MEUCIDIUOh6gNko83DNfD3IpBL7VQvNpmRaKwp6xuswJcrjKAiEA2NwDQAYCVlY3Yxk3VfQbNAKS5NW3kfJ24SfwqY98zDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3OCRA9TVsSAnZWagAA9AUQAJP5ZDFEnFyJ0JQ7NyqX\nNaDu6hkJ0aSjkZD77RaaKYQgEY7xH4Q/hFzXPR/Zm59DYLHJYztmuSGShIeu\nY4i81dpMPj1oRxIG4jot2iiXbbXfQ6tJ7SmaHhclbcnJ18EFLbvh9vi82zqB\nRZ/M5HX54JIVcYM5Vn/ij2YuHic5oObYKdAtzVdexPex0Z3ft6XMVJGSs5QG\nKfdghZ7XbmSGu5XXz86PWvwbpQ4qNKBnmSljVPBH6GGrzHBlRVYx1enZyO+A\n72Iq6TyZ38fb5JCFMKQg8cx7DqZHbEqcqaF9PWUTx8PXNP3L8zHeICHFUA/d\n9dbrKFfz/rL7WeBXoxiJXdX+RGHfuy7H9Ux+yEOkhbyuYjCPzpeicyWh1Ei4\nS8xnnZMtA1NCHw+1I/sHpuaG0PaMIChxSRRoqzn1avZbcL8Fn5jGdKSyv+bf\n9KHlbdFEK0R4WGUJScyXryYSyMNQllDI6VPtgjvQXERH6NbY9v4/3cQW7rrY\nsoBf31uywy9DexMaVPdZaIcpAt0Q0xW7rk3QOc/Q1K0zhg96jjo976gjR/7K\nZ+JDIZzCeFgAr/9JgW/DsdLMLESXYTBj+38yoji1KUtMfzQlBvtEhVvpbrvZ\n9xES4A2GmOKzJbzkp2ZB11ziydkj9Jksj/W4t2VWP1XspXA0rDDnteqzpVhJ\nNqkZ\r\n=7FIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/density":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/touch-target":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.6af75f6ab.0_1596067277393_0.010976157472141201","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/radio","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82c92007de9b148d530a728117caf648fffb7ee8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.42d7a65aa.0.tgz","fileCount":38,"integrity":"sha512-VnwkoAOzTLT4BJK+XhYEI9+4oeFSMcDCidLp9kep40z3GF+dEZr+CcbNONyzn0xy6T8YNY1OZYuuQ2ohYbDk1w==","signatures":[{"sig":"MEUCIQCWsF/R2+yC7fEAW6QQpssUc5XOpXiLFWk6v/yrWK4jDgIgR8ak1qHt+8WkJK07vZNJC8mREN1IXpPJlcXx0a07w5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/qCRA9TVsSAnZWagAA1CMP/jmQODT2SxH/XqWkyVuN\npGCUvBqLYMZmhgQSTlERSzxa98OOpS5tAdeF5LHBpG+BfaI4x1e3fBQCUJdW\nNS61SgIVq+yljWkUrP5UkLDBjtkAiYFGlruVh5T7vu+LZIPuRqIcdESD7VVA\nwwA0mzHIAMpldvinEtFc6wU89C7HfsL4rX8hdK8Fu7jvEiQuLvw1paue+Zoo\nQBDZaSnaZfjLgo/yHcPpXn2Srhxp7o4Iyj9g57eZo2Peitq3U6WzujhC1KfH\n0J04XzCJMJA8qtkJubcl+2VtVG8ka8Wux0lCI9nSCucJntcgrsw5MwrWHNeK\nTL3yVPXbRV52FNxk6VI2LlyerMzKOKVsbvirS7LlYhT6okwDx4OQX/3DbZbA\nkNl4pR9zMCPkwxkMNgI37sx8lPYNR8BAraYkmBjskmMoz0lLejUXtS1leFZ0\nal/7tC3syUIwgJgzE7XffSCs1wDWebNRXjiKL5FABnPFjD3Ob82SXWybflDg\n1WyPSbm8ZlruBFOkguzN4/7V0D5/HgleZzmOwGdW5hUdVgj5D/6AyobMRnao\n5uU5t1uE4xtkSKm9ko+jc3rr+AmSI/u4hn+Z3YuLlS0oV1FRLFpFru2wJbr7\nLl9qjjdoFLEYdgzqqLvT9Z3673xU08o0JHd6Ul/SriyU3RAFR/O6nzQkS0PF\nm7PL\r\n=GPN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/density":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/touch-target":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.42d7a65aa.0_1596067817618_0.9546583989166653","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/radio","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f5658441bf552cffa2b6f84d3a253da1e6940a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.85abdabb7.0.tgz","fileCount":38,"integrity":"sha512-P676AaEFSvz3orew5cfTSrws69orMLfAp9DxELdUMoNjkbG9FAWiINMMY24Cmxb+oYlEx6CNSMccnBp5ph4jXw==","signatures":[{"sig":"MEUCIApVgLFTLNxmFnc8xz0xrw76BtUUbSvePwhJk2O/BJfKAiEAuq4sBDARsf93BJDRUbAcbuqzPPJ0eIoW/goaqT59Yt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEcCRA9TVsSAnZWagAARBkP/1nnhIKnCuKCxoxnBmMB\nSJphN6koYylcg2nWpqfwVKLMfDxziawSnC1AJcT5eVAqI4BJBMRmQd1soTIx\nuYJfQCJquprnXhlx1+SQWE4u9/x0SFQhzqYuBBaRw3//7oIOe/HdDZna3Ihm\nizEqJWR+TPrYYphZjE+UoETC7lRzSxnA12MmhPN/FQLxrm4mPfsWTgrVj9HI\nlUEGqoesfVWDKyFmN62YypiWNjDIDyb2DgxAJDVSHjXlPY5F8T6oCSWxqO1W\n9qkHp9I04M6dSb4fxZulpClBM7891+8U/mhvkyz44/sKqAl09yFVKidRVAnN\np9lqLWNxwuGWTDxk9iRM2KstEWX4zINIAkvef/HKbcMo/+8a9XCgVUz9GChu\n/9k2TGZiEP03GpXik3frCJ06pypKSJkuWgf1gsi6sEuPRVYPeVHcjOENGRWc\nHDoFzflG6Zw7ul4ukSl3oVTg9MP59vLVd0Ld929Ic5anX7J8PJWN+CM18RI4\noAu3Xd76SefZAhJKLv9P7d30iW9MuDOOv96KiUIx/glccxWLa0+PXDQkX5eL\nmGpaO6Zu8hLzAVhvtvhzZaQukSzzWIPh3x/VnGay/FJu2HNKuoLpMuNBQgOm\nzsL4jcKXSkLa4LcsYVAHNgZE3MS48LWXJxjpYhPIfosgDEwnCnQPaatDlXS2\nssHu\r\n=ahtZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/density":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/touch-target":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.85abdabb7.0_1596068123638_0.7814963583010734","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/radio","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990ccb9e3ff942b94b1672a43cdd233165619c8b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.49fb20ca3.0.tgz","fileCount":38,"integrity":"sha512-O8OmZcXsSeRp/X9ZAONraUynsIWXcXVXH7ibuhJa/mqv5eHYPG820AvymOvLmC1JWfQVSuETIGs4zjbuoeU1dA==","signatures":[{"sig":"MEYCIQCRwO4M2gmGPayK7x8/+QM3ttcMjWw8UgXbLvc3/mBlNAIhAJUdZWWPTQaQ3qqIQBMImTwlnfckfB8UDhwU4CVWPlO3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIOCRA9TVsSAnZWagAAiroP/1+9Za9iN/dS9z7dDNRT\nItiS01F8Agv0cziV1+bN0FykKsZX7nKNB4ymDq2D3Wn4H1JLK9A9tNdoi5lS\ndsaAlfmi/e4IoTVr8fVSerJKoRnpFcsa3Htob7xAwXSlxS+wY2p7WGUpOSPK\nHUSowStjbEFXitgd+vXppulUT8oVZRVgBz8s3HRDcddqvWXlvSyf0bSXeHzX\nEBAvIzNFq2imFLpPMIuR1Q6qprQR6/Vl4AkYcwGHuzMMl7Qz8Q52wPJynN88\n85p77bWo96f5zJ7nEdTcaNQ4UxIflmVBGCV2+a7RrpXrmBc8RWAVgU8n16gh\nEC3ZPEUFHoJCFG2Q3BA5KNG4ZjuGlbvsjKT58hkJK2clKZ4G1XNdetRRyyK4\nDRxEi8Dc20m586wYvmd+6SqJzqlOE0lJZv4DBabb2CrwTlp47dWD+zJs8+Qn\ne0o+OgN0CSOAJ+IXpiAYMIfYBDSQiRfp2fq4G8lbjr+ICbzC27yZzGO2/2Hf\nuSK+cqATzwRioA1oeqekQhI1qlZ1sPga3e/CW4Cg0jVk0JSvnA2jdDKGqORH\ngEfeMQFtyyUjbB2FvyFXUTewCtnzTD1dcZYqzKVqX1jeEyr6Vx7oOl3MskZM\nKsiOoMGAUMsuRlWLPBF+FbKXY2APu7SmAfPpAGdIXRxPjBpjZpqciAsKGLcX\nEt58\r\n=qXtf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/density":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/touch-target":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.49fb20ca3.0_1596072461522_0.9530982574829836","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/radio","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956c9ddb07b0c07b0212d740ae1d7ed602baeb9e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.962d4abbb.0.tgz","fileCount":41,"integrity":"sha512-DajOOM+Sz0ZacTVGDJY9slapPKP1UvKopHfvNfdyaQpb4hXcJvtIPG7SeRZtba4lLXD/pJMliUjORrChyGt+dw==","signatures":[{"sig":"MEQCIGOkPxzOZ9VzFP7sSGRuK8ItxS9Z55D4XECq6/8/iLIxAiByiGQD6mWbbAkgsJd4UMVpTPgo1kfScjAFtS44JTxfig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDjCRA9TVsSAnZWagAAvZoP/1qA88/WOgx7lbS3YHmk\ny37T09mQhsGQUwy8gApJ9RC2bOSdvJzCtXhFW4Y9JGHxa21U/I84AXJgT2c4\nZ1T6VcoqcYZz7JACMMEKjZxq5SFFh0ldtuQWIQ4p3EkkBolC9uXWjoEldNW3\nRLKLKl6WEuU5s7wHBnFKG03h0PxYBDUNdRDtD/Ds+Yoy8FD+JTQni0Nt7mrB\nhxk/VeaR9iabB/xnLL17iUX3jB0+zWYjHW0RkQvGDKRWr/hwcuXJnK2XYWlv\ndv86/D2lfP/WcNYafawh6dpi7kzfd2gIb75JJLaJjfKteN/WqkTE9LBgb08w\nRB60/l85SLnO/OHmSdBv3dKjGAIRUA3kraH1D4roLgheWMRbaE5gRTTzWEe9\nN31x+vl7wfh/4NyIltzl52DKzqjD8WPAiiakWfOai+9zKzabT6t0zE86e7hK\nxgsyt12bHeVTHF68ePrjhf+JSYpKc8NIjWHopu0RIiiUPDtFux08vMKrNwZN\np1m1twqNUv0j5WpYA+glH08VJatlXA+dnilCSr49l5+2bCTPp8soYuriiu02\nWQvEm4jeTieFsNViA2UolaMAiWR7nn96ERCTHSCAf1Fs4NYw6mT8YOdIeltb\nAK45ncq0mmnY1rMYm88ZoflgaVR93EyX3sJnqknF7vv9D69IuHmS3zA2tQf0\nWePR\r\n=4b4p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/density":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/touch-target":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.962d4abbb.0_1596125410860_0.6753499756864918","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/radio","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b59761c74600b21240babf2680944d16b5f4f91a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2fcee40cb.0.tgz","fileCount":41,"integrity":"sha512-TqvsLtZzPGanXWHvZJQ2ke/9LzaZcgT7B5tkh17rn2PAPdHg8Qh6+JKQIaKFrZjK3ntezbmqkddtFKMhlpA8Ww==","signatures":[{"sig":"MEUCIDK4Ld1Mm8hiInf/7TYpCAM/YjxCccRFV1bo4iYSXsjQAiEA/o2lAoG2vAhuj4zuFBN6U+YODIC//LfzyS1ZGAZ9xTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGfCRA9TVsSAnZWagAACQEP/2jf2xFBwXs9ZE5gB3S6\nfPWjtpRBjaMwSZcPVWIzYjL7by42Qm46bMUa29w1+zY52anrUoQrd4Cq2CNG\n6syRJr6LyCttxSG6SBEfxu+L6RXNdawDkH+O98DC2ghSEzOISsie48diNwSP\nFCOHh8nq7LCL7euWrGVCNc7+nCbvzD3Y6TExBg2DFYHJTcZ31AX+q/7evQrb\ng3kQhasx1uBlaDCCrTGnY12fN3V2kNKFYPPCip/wLLtdA1xhcU/knJM4M67M\nc1oq4y1/qDcP6BcEMGWJb/Qhl7BIykL5Bia97PlLolXeOcOf5MQf+8/PqRNM\n7oi1zj2YZw8pvVoG7ZlEVOjQmLhQgpyfZwmT5dVmsYE/E8vB0eG/utpL3fy2\nA324MhoH+fXEyFIABplNf5rWrMwgjUpMrtRI5dYaKLR6LRYqBUUC1LLPenqr\nHSts/M6fi9/MaTHOi8lrVRqGy+9gG3B+Z3DSIVpxiuV599biuf/C+30U4/tx\nE+vdWAZOXVQ2gsMiyLN2407cSL/LRzNNHyWqrtoMIpfewPi25omTPVolLQOr\ntGSqavcBoTw1074RlPne/M7/cd7itX50BH4kgxpYGWRG0hGhu6zZc/qvqrWL\nb3EoFHsoLxhuU2x/KMyYEO2Fp+Hg+hfg0o8nVI01xni5Dst+otNQA6RH48WB\nzsLb\r\n=1s3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/density":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/touch-target":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2fcee40cb.0_1596129695090_0.42166863149754286","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/radio","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4813798eb938210f2f78582163b2704da166a2a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.bd5987f5a.0.tgz","fileCount":41,"integrity":"sha512-sPyZy4UII6FnPTcE404b9k8kuE/56kkGlUhWz1pBWzpovodMOKSUF0rpidOOMzfzzLDXCY/7Y0ygWbntu/ycqw==","signatures":[{"sig":"MEQCIDiqq6RJQV0zJL5cAzwPDdJIHQv6o0yfJAhQxzpSI5aYAiBx/QYzWh0An9tmN3uDT03IHMrW9u/A6C9HnHS8fe2FCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdlCRA9TVsSAnZWagAAHs0P/1ccM5Hx4gfN1zG3ShGY\nw4MMr/s8wa/O6UN6QEMDzZwSjnlrQFNUyZuir+BKvpwWqB4Ds2VQuDCbkxEF\nyHp1MjgYBa5BBTt7bmy6Czbc5Nq3DndNLAR7OEBu+a0a0zb4tCm5rfmk8XxI\nRiO1AFIvJ8QJLjhnJtbzVFu9RGUPFvCdcT6m+xhHpq2Yqtpg00pKLmx8hQPg\nfk9jRD3MATUmJNZ3gyt/IsDKjWljt40/Sh/wh9bnrJxzTAg71YCXwymvMjO9\nwFcub/+xY65PEHZdqKOUDwEZ+FeZjpGAfLu/0AqQOP4S+3IcfVEnx+UMrnzv\n1k/oOIp4F088crq4gAFlVXvcBjKcP35JIJnVs9HR0fVAf8KIwbjOzRJ89k3j\nUGyVn3VHMqe0UBVfrhCKOh3K/xw3ni5F1xbE+CAbNbmEdDJGwk6TeI/4Txxm\ni5bJr7pmFNzQU7yGbVMvPI+6CBO54TV2t7iBBWkxEkCYUKxgcO3aCcWvxtL+\nhVRQOxw0fNG4BPVVGF+gV4COIAd4xqaWYTyfkQ7AM6ifg8yLcDvZQVKLvk1E\nQev1HkhLP9snclLYuG9fP48ymCvsqC1s5HFL5TDOHs0TuOV9kcbDZjRIhYjA\n3Mumh/672vIm3EjS/R8Y7eZbZkBRj3ftVqr2V7WeapacweuCp8eGrBr11Vsr\nNdvD\r\n=WaFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/density":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/touch-target":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.bd5987f5a.0_1596131173327_0.02185638580909033","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/radio","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52bae71df675580a7166d634f4a7083bf1152aaa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.005e86a9b.0.tgz","fileCount":41,"integrity":"sha512-87bV1X6y7nltnxukLdaIqihHPNKOWHUTxCxuF9qxwWKLPzN09tNVsdp6fXQ8bgFHmMiltsl7yfH3kyYKi0OcDA==","signatures":[{"sig":"MEYCIQDKxEf/u7XLD+Wz1Q505xIAdJ7oPVLDbI0RPhVT6Y/0bQIhALTSeyFGxeN6EVIQWvyXgr2bECdapFBJgwgjKOGoY2/k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqWCRA9TVsSAnZWagAA5lAQAIlqQsMbPh6buEt90aL6\nJBo4wQnsE3R20TSTujMxjFcg7tc6nzIAcY7CjCGqIUhC636VjmnlaIQXKBdk\nvapG2VKvkWk269vwp7fyMMk+CowhVD53VhAZGfPA0/SyqxySpy1mXivSmUec\nbB7iaJ2bRhu+DhBlcvSKAP1b5ru6oOis33CPupOu3wfYU15gClkzoKBN7Puj\nw7lGaKAaHGOpqOfsMwlFs8ze7srFcnqMQn5+Kv1RCnhVrPD/k9MC4Jm/YyUC\n2XtFSiUhoz4rgjMlRpDU43LN9axL890R1PdNsfj5Lx7t5DqRHEF2GCjckIHS\nCDw6jIXguXAa7SArn87orJ0a43U4MOZsvRNZ4PdK+qszwhHagYuRg85I0wuf\nvvgWSr21nHBHxFAbmLNpxrwEBy7MzyRzMqm87UwCYk/umqDRapBIyNwp6OCJ\nNKkpCtd3IMpUC2jwgFCgP5VzH8xjUFC7PfEeX/yrqaDHU98VijuBW89q/ii1\noqOx6zsO+jFxODXAAS7YO7Mj3d3XZYU+DweH1Dyz5+GaN7SnM3FN8VKZ/xyY\n6wxImrtuO1l70tmrcp1iTuek2KtULrR07lcF5cu1/XF6AhCzkfj7y2mrjzmF\nGln3Mn6oFQGJ8MdUDt0AeITY8OArRa9dOOYGRT4PinyJkI9ZiJtMzY6wEpqW\nBiiw\r\n=aowx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/density":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/touch-target":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.005e86a9b.0_1596131989803_0.8301338282413795","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/radio","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5addb9a4c87974e81d0720efc484a555613c19","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e309c7c68.0.tgz","fileCount":41,"integrity":"sha512-VDK8jHOwVvbDqrlLrBZC0xJ/MapVK+cw6qHcW0dMC+3sYwSQsXyxmSC8JMryQoxawErTzMfVWOhRG9AlCCAd1Q==","signatures":[{"sig":"MEYCIQDGx2hNKutUSmuT8/MTmL3SkSP7xc8Ig0E4256NHUT+gAIhALLhrPocn7hPSBS/97My+bize7vOlEduOKrJEpbrIm4n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwy1CRA9TVsSAnZWagAAKe8P/3e9AemUUpAS9uVoS1Td\nkn2K+PkDFzqOzujY4LlWudrBsx3rYgnlaRc5fHAXQc2kws/JijlwAYl4FY9Y\nfXZQZGDQLQrA67jnrj/ZBhdDHe2eJZu7LVfxKnhz9/FY5XL/iN3Hz+Qt0vNu\njenTArGdCgoaTyLjeWmxlUm82Q6AU5a8Xda2/jAvEiQtOcvrub6IxiEpc0W4\n77dnSOQCVnTmsKBZuO0UL8QB9X0jn2hFClMl0p7vntSSWhUNdJ6L2d8H81e0\nqSsCtBKkLtJWyD+dPi47XiOXulsf4FskQBAjA2734gWiM7ZrrqepzkdQ8nlu\n2Yfk4jxUG8unU0qJN6fON1NDsipWgenIL2mn4I0MmJkbO7B1e9HAFWKx48c9\naueaScj4dAyNTm1ekxx1BhEwlJjCUMUIPIV8HKTGF9uJ5Gzem1YJ6i0mDETO\nqlDgcPXvocAfZ/vTQKNCUHvQussQoEM064pWpnMTVO4kTTMK0T1uUr61GQZM\nBgPe6eKBy801tijw+i0/QjBZ7Oay+2vz1eToMNdon/P533mXqWNN1L8KVWLb\nzWfWlD2Ix+pWqOgGLcZtriLnTlXUwZL5nBMWEJzfjtJ0/rw/djBkDdJRie6l\no7/Q+cklUjfoSTJvlt4FG7Jg9QwV+ITMuLQ/ITZkb6rt+O4VevHg6cAwwwm/\nqsdD\r\n=sFpi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/density":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/touch-target":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e309c7c68.0_1596132532656_0.36922033345763783","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/radio","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cb8c3b50c151f64812d11224e0a92efff393709","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.935a51cc0.0.tgz","fileCount":41,"integrity":"sha512-J4glvedPesQ7WdnNarpzkTJc0iogL3iiQ000FYszJvb8xIGk+P4Gc7dl55EIh88EtaradDNFVlYc2Kv/78DADg==","signatures":[{"sig":"MEQCIHdOsjncbRwcBBs8i7B9GD8D/BiXmMbx5ZJo0h2b+j1IAiAPVdpyy384XO5clmZdD6kTHVlVqDQuJqpAW0d2VZLtUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9sCRA9TVsSAnZWagAAZHcP/2gEUdvLRX3k/uck+Ftv\nF2U74Y3yck6rWFqQJeH1Q7CIN4U/GkJf9ZgHJ7vw3JDy57waW0r3yLnQRBr7\nxZxIQbf+MtZmXfHdsVAVQ3buJprMznJwrHgXZENSAIRx0w+nySGginUngZ19\n5U9qNsqgVykP4DWHCMEZk6qUEfR9jKLh6JYICo73vXy7xbORt+tKBeQG2DTH\nPIDO3ZBpEG9ec69ns6zOkpCbA+3cwlyowChg8YFZsbDFuSdtLa7znj+4q7YL\ntbRgFGBCnOxsyBRHYTcvGrAywjFxYOWV6zSDC65GOZ07t80QYUxw+TMZrC4k\n4EMT616ludGxWUStSsMM9u4LWZpNvZkl4VpZnpVGbs6p2RHU6CqmNDya55/J\nzPkS6H6M+MiqOwKOA/uC/2rN+9kU+rkqShSpkGod767GD8ACYt0wpxKbeUf9\nfrjwiMgp8Oa69r02rXPPOOodJqwYKbzGBBUMsFFiBAzd+bZDX2uZmumBkqqj\n8/w7EBhVRhdViUlMcus8szsz6fDPQ5lQyWm7VZymYbeRmoWa01wKMuCP4Lz8\niC7G0RM9yPe3Tm6RTetZfz29eFBjgnjoWi0+OcNepJVEBTzVOW+UWsns9Gm9\nJAwobIS5VnG/mRxfQnshj9l7NzkxC8Nk73s/dDOzVpJF36H4rWw/n7MfqSWt\n5fvr\r\n=qg86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/density":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/touch-target":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.935a51cc0.0_1596133228110_0.8839424138031988","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/radio","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b2d48150ce91b6960318feba73b7c90480bcd23","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.74839da7b.0.tgz","fileCount":41,"integrity":"sha512-rlfcBnnvmXwv1P3gdY7phOIkFNpOqrhg2XVmQCioaHjMfnOa/B7fC3S4fkszc1lBlYTDXvnYuXhZWq040xuO1w==","signatures":[{"sig":"MEQCICOyhNTgtlwwLwSIRBZCBJpVhqldVAAhwT4VLnZrnfqlAiB0ppLSEtye3NrhrOVVpESHxEd7IijkNMda1Wv0IvvmSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxH+CRA9TVsSAnZWagAAAZcP+waXjtdW5/YsAVXvniHT\nbuwinFzn8AHGlYHXT21LIgGyC+oBSMMHvpOITqX9Jl1ez0VRlGru+RnjK40w\niziAmnmbPgQARurMhZKztcXFzAJcZopCKfCbrq0YodzIjUW0c5+U9AZytG/o\nB8sQ5jGJtqnHJxrfS4VQHQwk26Od3Q1DPn4pMn0IdZYd8vpyCHRi+ISxSnxH\n1+0mK9Gt4IqpbzcbtTuOTS0AtvcVOVny5sf5vTydBtkX6HquIxs4LUs6lOVu\nPdU0XbAZoUZW4rfPaMDZIgOel4r7Thhc6y+4CAcrwJTImLIBa3UrIIY4sZW6\ni5NHZgYqHGI6WIcK2HBR/CpFJAAKXr0ncPNlQKSREjVDGPgpHECQnY/ERIB+\nM/rooptV66rnRCb7jeBJidgtzykTGjSqUJa/teDXnGYMDpyx380FU90t0tgB\n/zJKQxwZ5rGveajo9fqc47R+m2KQBkpeuCOLkNzdwd8eEexbIHrzNW072HtR\ndbcj97mi7dMMsea9RFrJY6XbBlv91E9Y350YrgNhfmsW90OVgVLKRdW4Ba1j\nd98+z3zVMVxbBJ/TIHPktVSqMWaeXLoNwapyPlYBdXX/ZcRgaJUvZOWOdO0J\n/OUiQIn9Vqi8UeDgZaLxS/8KF/m0A5UcEwNevgK4knygbiq+3/DtuyI2a6jD\na1Nn\r\n=VjP0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/density":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/touch-target":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.74839da7b.0_1596133886295_0.28489456305227856","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/radio","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a79b07cf78d4713557c8eddde4d6b0e8c3a7ce","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f041a48c9.0.tgz","fileCount":41,"integrity":"sha512-A6kDXkXF76mUWVywphitls9wP7zG8YCzIdCECwGQAr4YFfRR7MNN73woy2mcMFe6MBJUVCRic6m4LoCeGl1DvA==","signatures":[{"sig":"MEQCIAS3NElSkoaWnHZ48C/YIpAPJnvVrfUEb46okv6wQ4CpAiA8wR+K0/sZnVdck6lspO1wXQeFhn/7dif6NKw3S+TRlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DZCRA9TVsSAnZWagAAdYAQAKLskgn4wF/mYlmgYpaa\nffgksvErgHiSIx/DaSL0Ma7iwWlPftL8itjzrtC1HNhxHKBnoQtXjpG+4aOg\nUisEFc2cg9t9y3LlloiwMMja6dIJpWq0j08J1ylwsQJv/3lDvjgXwwDgJHri\nWTcNKNwVmMgtjANmPgbpOL/BFoH90YLb4e2qDRwnCdRqLlwPahaIP9hci6Ym\nxxQrn0Xp1BEHSlDpOh8FU18XnKyzqDUzaQMMWTOJe/BF1Cpp7u+516/g/T1e\niMyr7oQ0ahk++asHys9a264kjxDVbHorv5dhtUDs2f8QQFBkcXiV8P1doXHr\nniNtimAux2/w8GEoe90nGCC680tMU0KpuUORkZe7TIdV8JDoenV36SbNtuZS\n3FwoHGupXdB6BY+9jhzhXm5ctjjU87c2NtZ7fTr6SbbTIln/opWCiHihKfFI\nikICyM5UDvjFQtM+uAFc/GTn70htvhsvD0fuxrjHTTWJvWZ64VXqJT6+vqyb\nm2bmEnzm/e0HB525EnkeRyf7nNAzPPfDlupYQwRLlRn270wMxf/qBwRmTqVK\n2BRgQaPFX27kG/58upo31dN5dY4SzejHHgcsBjO42KRsCBtKpTJIO6E3/iUd\na18FhYuQOIuny5nEQxMWBmhU6gDRH8tO+zMvinSUkfEgqA1NyhyA6/h/Y0cb\n+XZj\r\n=QKLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/density":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/touch-target":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f041a48c9.0_1596149977207_0.2327681627117386","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/radio","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde4c9ca9f93cab7bf3db88c1c88730af21a9e4b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fbb1381e1.0.tgz","fileCount":41,"integrity":"sha512-ou29oC9qDODhvL8bnJ7SP9JimS31rGPdVM/IhdkzbB/e8sG10dfirjL6x1cxRC7qfreV8lKbLHLCohXIIdyb5Q==","signatures":[{"sig":"MEYCIQCzoV3Eh2ns4t13STyzD0jXvMkW+0pw5FDfufD/PgAk0QIhAJqbR6+95XWVLyecju5PX/5ppjmvN1m7bvFH7xvf0joB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3HCRA9TVsSAnZWagAA1QIP/2zQd6YcglHaflEHGWmz\nICxT3BTZuoE4eCa6CIwKBmJDmerLFOrDwrMRkGjtMVW9Yytvd91tPCmEhctQ\npDlszhCNSJHShWVIZ+KUeUCEFc1Y5D73+zcMuJqXtM7KwEMeV/0A2FmwZ/z/\nhClSuaVNS3mxseYKRVDxQqyQij0N2vDcNRnxE58wCl1vz4liyLJzOjwPfkj4\n5ElhlerTZzlw0Y790wpTbWoyMq3y1DNpqbrtyOmnxh/KNVQg5hzK/VYtLmCN\nOk+Usep6PmsnksEfDdWVsVvvYm8OSYoW8DQpjIIunkfkovNLRUM306fThqwS\nmJRnmwrwyTxOHD4uknRIgaI/TGHaDyN6M54sQBoxjbQcLyjEUild2F3UIcYz\n/Tddum6fblU6l5QeVjgrQFeJMn5mUwNiBT46p1PY7Jiii1RtYKpz3/SCuTOI\nph8N9VEGFEWcXL50ad8obN7AggNKWhIRJcNNWXIZR6bAgFbvfauJjzqIL8df\nK6zIEntxNpF9vhYY4cQqlNMFSp5YFsCJw6pmwReQNA+RUG+oVCrwhBiqZCpV\nOLwbZWbR5nUeQW9waifGTDvfoMX9SR6wJni4fA1lW2hQBFy+zQ1JZ2eq/Be1\nxq1s/Ob3LM3tyR/q+7SAO9aixyvsWkGsVxScU6LIV+9cUP+wMZhHQNjHhKMv\n4rvH\r\n=M7qV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/density":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/touch-target":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fbb1381e1.0_1596210631201_0.8491315553238821","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/radio","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec43edf70f9fea4f8ba615e9f2c6e602e395e193","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.7f61d5785.0.tgz","fileCount":41,"integrity":"sha512-9LENsC3EvdlkWFhH4cWGzLl2yrPbnwu5Rs25SNKlKUDX4yQMEiUFlv9hVc3sAJPOIf6p7YY00dlyldNejW1Tig==","signatures":[{"sig":"MEUCIADHJM2yDG8MzVMDXxsAYgbOWl/kI+/lb+br2ynOkSqWAiEA0eIAniKuPSZO2vedG4F4d6BV8JRfalWxtI64fRK5FjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFN5CRA9TVsSAnZWagAAd3YP+gISJKQgpRldp+A/3FCa\nb2N51PnWt1pUQ0xhE5ezSJOgHmWFJ6Zq30kBz4fEL3xU+kHrPVEsYnEzV/MR\nieQgwHM73V5n+saP3WWH90rwiiwpC3PUxht82TCGARuWLHKVldqbOMLcpSJr\nReW/TE4Ag3AKESZOxSsdOksJlx8mDfbc2wbhCpSFCF+VPpThrGHOjQFtjHgR\nCngbF1ZKItlZQZb4jeQf2OqRBTKIdFGv6p5VnyGTRnlpNSZDLbpPOVwwQKxP\n9LxsPRMga9hRkGQNdDigxp6CNUg1RK6SJaKoQ0xN+EXONU//zL/nrPcoujKp\n46thIfZoeKmSnyjhrs8x3NoO9l+cqJz2KefqKDC1SzzfVfiz9ak5cU2VOvs1\nBMpLxeBGblGRKlh+BsjhDIATwiYIwf5tjz4gBBozoyqjkv+5/SaN6CysfUpQ\np9OKiPzJWKMyn77OnmgFhD7OBzpqKCyGqSdVyHTgXV5WQvLNCztI0v26/92/\nkjOQn0Klboj2mEYHXKNMWSnmGS6yI09oZSJyg8eJfTZvmIfumpuT4uNon6hd\n3oTl1BNSjhKZtBS9Dxqt5V6+XjMZt+ZKsnVMowCC+Ml+D/ra9FMIuvbBSgCr\nSOiAJiYKhstCFjoHxmPNNwcWrPX8hwsN3ZHmiOAxw9Hjv4v2L6R7bGkO9MM+\nCl7o\r\n=fOx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/density":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/touch-target":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.7f61d5785.0_1596216184665_0.31666788251474776","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/radio","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13a3258eb95eddf8803f528fdafeaf5608bee319","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e1bc84d10.0.tgz","fileCount":41,"integrity":"sha512-XXk+EeOkiAXpZ/4pnUOhyOXS+zApgvM2R61KZvRb2QZ1IlNdAC2O8DmagKUcZprMYFakyrM47d+uAr/AAIGN6Q==","signatures":[{"sig":"MEUCIB+aseyMmlGvw/C/LowoDFhEvHhIo532/HXRxeF8umvZAiEAlnHHjXQJT/f/YOm8pUcpM4RjprW+kS3jU1/vQZZciOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6ECRA9TVsSAnZWagAAosgP/1TBXvAqRFuRaWUjNd+h\nDjML9QEAsg7Vc/V4x5hamzHbK1qRZZ9bfOsbNBAfCMaLysL3zLchR9L6pmP4\nQSDdrAJOr+ho5lFs6zP5kRW9CWvnLaOnkuBDoEVu3PX5X8djrhZwzGFG3UwY\nAGD882prG3RL2wz4SBBgV2YHlDKq/Ou6kUNFlnGQl+GnNUCQk5QzXvgDqYR+\nBwbVj9yDGC2gF5qaOHXn1/a76HN2tLwQ8pNXSyxFORjxpUpn3q+1k/4UTZuT\n97X88ogaMs+DF57TSNMs+D29IbEZOgEwGnbmNYxI6JS783UrABXZ/i4o8ZXu\nGh/vADpb5yFrLhkkWwO22I2WVrl3vS2dcHB+Sh9PnS3f4mWWZNkOozYG2N2C\nKpcFyfb+bSHBcAV0EhL5EWm8EVeIB9QEQfV/ZodJ+p9udrwYK+3SiZN/NFHZ\nMNqrqHh/Q3M3bl8ui2cEhn+qIAC23mrKO50Ry6Pax1ob9EnnbdRVqL77DxVR\nO4YjYb/11krCiuU8a0ovn0t6eDxrDUGVQAzubdjcgEUt49OVVuZLGUjtxWsZ\nrwYELRIY5sept16KpC7ZRUJLEBnaiSyApICcMi0sg9ZRZvSBH67XB63TBcir\n+F11a2IrW+SHutFw7cjM3tQK/+chd16SbeYaDKJ6GZ+LurWFjm/wQM9X0LWW\nhqS+\r\n=FCMN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/density":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/touch-target":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e1bc84d10.0_1596477059139_0.1100222099951671","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/radio","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7edc80dbb5f9e3fd9e6b559eabe6eddda419e713","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.096a7a066.0.tgz","fileCount":41,"integrity":"sha512-EvjhY4R3BbhSYYr4uRsP10dDVGek+GWQoxGGf1Ydwbuc84JqS83mXoOueOxoiApYZKDZmW7sX8Rvmm4zY+LPNw==","signatures":[{"sig":"MEYCIQCqCTnNfhy/72w/+fA0falRSe9mFgmWczK1o/MtOSQgugIhAI78X1wQ9k+LYs611almuonnvDUeojbeki86TK5tOPDv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8gCRA9TVsSAnZWagAAKUYP/AnDjwW3NNYsJo2ljQtp\n6hZciXFRlJ4iDcG5+kks/5maP9etPRAAJ4yXjXOonWjr8lQAR+uv3QyTPd8/\nYUR3NuyqjTzWNOMJyGJslVniWS6290+7aDpgyTGLnyXn9Jaq1m77Uxlv7TWt\n9qA2QN71lQz6n2ylb6gWO8IPCAss3a2R2Hp4rItykgR+2H/nthyxq0bbQlrO\nU1/CumehhPQGehpFladkj2Z807MFyjiQxmejzvCb5qRuylXaUbX93jGMmAMJ\nfwsrlH/TfjzGkwKi3Q96KQXCOa7wqH+h4bKgjPdi9bA4rP8YDR536i0H/1gV\nrqUVjV49UnjeYdTzq1/ekD0+NNJnHn/JzfO5eT3T9vX7/MqI06ELu17m3Jx8\n3/4H9KAKIra/fGThQmGz3n6omdVxV4Fn2RXvNTzcICA+YJwBdmnfg0zvgslZ\nYjoP6Ejj1hfZkm8PRhnA4A/jtHGn260ELTE/oJj5rvuwpDWwGQefbgKryl1o\nc58clDWrE0shsb44m2PTOIX3i95KZVpYL9ocLcQAphz0BqdeL3/zCRaSjkFf\nOjcpxB79Ti1wMfY/bWpRNp2qaUIR6BQkJY5K6o8N2P13OP2k+CSDbKDNrxcF\nMQdBEB0VSvBuUEAq/OLvr6mViIjy3/16q6SQGKH4Mt30hXZNqOT34bvEcv4P\nctWv\r\n=mfhZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/density":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/touch-target":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.096a7a066.0_1596477215866_0.4603971175631856","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/radio","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c3d41603297924461bba161c9918ce5c963819","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":41,"integrity":"sha512-1JkUgF7myycag2z9KCB/RoMvunvSyrddYmeESw0YYXHCrqLzJmk1w130JBmACMr1HXOx56svXxbtCKJOv2CG2w==","signatures":[{"sig":"MEUCIQDDTkutFZ/gYwLmdWsxtK61aqTUSnX9NBvDJoSecjHWcwIgB98eCDSCQ0jvk3g4b1JJ7qMvypbg7dv+YGDDyQVQa7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8xCRA9TVsSAnZWagAA/v8P/0qo42D8JLicGGo+ELV9\nLSn7dMYx0vD4j4X5KDnPGxMCd+PiVWguDlhHfUJMI8+EvL4+LleSeX9fHA7y\nJesfzXHlJ6OsWcKJRvt2+ER3FdYa5Zd6pjQwIF6rDB8sA5Bu3LDzsNxcGDV+\nJz7ai/OD+rnmtHC/LcieIzjdBCEdZ+rEChIp5j2Rinl8R0FtbnLlmhLmaNX7\n8pVBK/v7vKfSO3K/Q9DCNJTquULt44XjeZrT5qLETBRkG01PMlBngQoDgC8s\nklkPu2Cx12y6QGeKrx4TKqG7fY8X0xzj3VkeZTWC7jmhUNNRqwoUpzdnQDKk\n8qE6YTTMBEdOOHoH0UBsF/B+/kZAFpaFeXfxnjTPGAT8nqpqUq5TK12ZnFKG\n49t3dEUgg8eIAngoYztiytuzQKcZaIY/U65K1B9GPHF+3HhAa+ZptNL44l/l\nn+VUMY6Z8GWC5FY+WC1whkfKV7nbQQRt4QVHTEdh3s+1TdZhSOle/uJFA9+g\nBJRPMLfhTrowkKU3DXelI70enl0My5abPi/xazbNIk8BY3PLBGcLFMB1hasb\nN+K73ellmpoaA4jVhoU3/+XCtUraJ883rzJUGluqpYN7TjvDndmJaxtnjt+s\ncQ7a73p20t62Swi7LojH5JfyzaIfH73tOZLiP6rD4/Hsv/42bfaUav/ZLGHS\nh7ay\r\n=GCJO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/density":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/touch-target":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.aa3a3e5a4.0_1596477232728_0.8521108099706634","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/radio","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca847af8db7a202b9f2700876c2c74aa56607f94","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5903d39af.0.tgz","fileCount":41,"integrity":"sha512-VnP73sAUL0ecsKe1X93zBh4mNILn+4HQ6rTJ8chC1DYSDjznpALdkQpZyg0QCTiBL4jg3bFsslfJiAnOeNHl6g==","signatures":[{"sig":"MEYCIQCk+IXEkUUQlPBnJ2gEWBwlHHkp3dj+gcCjg/GY1WmEYwIhAOSVZ0SIivaQYQU50bCY/cwsc0Em98fYN2HUsvk8iC18","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9VCRA9TVsSAnZWagAAZk0P/ijI+Ndx3nqrrBD7Fkfh\nhm/HQ+/QdW7s0d2BOymJN9saqvGNw5ggUYXIZboQNDSalZWmLTXro3Ru5dog\nOwO6SA64oci37cNSG4UXQp+js2GQnTNtazMGHGxBuY6TU0MhxZ00GFAcpPQb\n+XZmP129kbZUM9o4LeSWLOaGXjuiqHrsAyyK9U5E9pUFsIE3atKMhQIYv/NY\n9+Nn1RSDBgTVwEMBN48tcz7r2yNvFedUZ5r8fQCFtDvZq4G98Vs3s+uu+ms1\nNqvldM8+5Cml47b97JisJJnj501lT1pBhzbV9pmqse12YBrkxdmUY+REqh//\nuwZDDW8oUXKKIiodWHMv6oYXFbUrQHIxY213w8hWNX8FHZa98bF08onDao5q\nj6c6CD1q15/CbyBQkj18OnCNQbmacYGsD7AVG4iuBEV8P4Fq9948DaZr6qZv\n9FWD6rB3eSqXzRWo00E/a2a0/K64apT+OoL0ytFIm8Arw2i1cZBNafHlnjqV\n0xX6ZbtICJrzOSgn5RELGNjhC8YkIauW2WCXWUQJEBt6zFLG/BC1QKXd55Hp\nXlO2G82jFRwPFgY3xafSMib+H0koTVDsQ5kUZcN1oikX07FDuPHRE90n0nGw\ni2edwK9ypYyiW30yUG9cQKZIjVPfscbwR3UATqH3kFqgcz3A0Iz+SoveG/C+\n5WT1\r\n=36I/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/density":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/touch-target":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5903d39af.0_1596477268717_0.2881630766375576","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/radio","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4be7a30e6867e13b535b09afccd26586364f90b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.72258f898.0.tgz","fileCount":42,"integrity":"sha512-OOibDhrZ3bcS7QDw4LqdK40pClbVHnmIhnc3EbNwK2o5iQvHTeeYUbxEvvQb+zgPAfWJS5gkR9HQZUiL0EXP3w==","signatures":[{"sig":"MEUCIQCd5IETZfkBJ4SShEghS71FucHeyZgp/QjKhEi9cUhGjgIgQJa6ebGjkctOHX4Iv10to7R3IM/90IfiXrloCmhCjHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcjCRA9TVsSAnZWagAAieMQAJ+rF372gWDC/dt+Xl8L\nulOap/stCEv78tt8r/qJnDIauhaQGHNb4QWnWmdpIkkJgxSfSnK0ub16gRKh\n71iBdFmY3QgWFyH5WFLJ3xKdTcf/3J/z9c2toTswOTAB1gcSc2zdZhUGPFuv\nparcs14I8Fw+QmOqSyI1zRlsSC6DfsZR64tr0bHm/JSYpSnedUjBJPE0VmSN\nHlBLilxdznL6G5T/QC/+RdIH67jggQeec+cBOBjie7vJV6MR+6Usr9Y5lqRX\nmsmfCPtwLOf8WvgkHpFB+6XthlxeYzQ6DrIn3ZFSY8e48u1b7IJM7ISq96fQ\n9skhXOKtvQP8OxLDnrIxXr21S7DAYn06FsskM2syyTbfWEKUDun407YoSbz3\novMGnKpJ1nrXdjd/qcgEf3swv/ooiFVQZ3Z30zpDxhvSvVOQoCqkgAjzXP9P\n+o/OU0zFO7XFtNlcAC7gLQoY2o1ELpN7/Uuax6Q4Eyl4QumgFGXSKJ14XQni\n2I1dFu0g4HhLuSBJVc4ZzZrFZgwKXqyk5L9HtkMVkGpAs7nBxK8VrpNV0D9V\nRQoK2YZ2P8ahucFRMZ1lN122FnRbg2LQytyqkAdShDXxNoP0fwfvPIfJgO7e\n7bJd9Q01l6mwdPAexTfxdhNnqm/m0QRy6mKnXNTHQDNSdqzq0QrztfppzrAJ\nWuax\r\n=zDUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/density":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/touch-target":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.72258f898.0_1596503842851_0.6935640659071605","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/radio","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3539a3a5f2670d9ef3c3e8bb51b9bac00d643025","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.1b44b43c8.0.tgz","fileCount":42,"integrity":"sha512-3P3F3TIJ1AqJDH+cRbv+4yUIT6Evq+Q7JiPD+g8ZE54/VK8/QBgQ4pqHTMHqAejx9fui/RgIWVTOos5qlElFng==","signatures":[{"sig":"MEQCIArxtlqpUJszYeaGV6FYU43EQH1QQtOfqbLD0m6sJ0pKAiALug/qKgek+orOKtmm0vHr9GUJeEIdWv3oVs69OSWHGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFQCRA9TVsSAnZWagAAtYkP/iVjyddfBN0GAaDEtUMT\ngJMnAgLPr5O8jf806P5jWkZEETgVq+lVjwRNFI5GXt971GHpV471ecIwA/xy\nSomDlEwTRBuBPOjlW97xNgS/lL3xC4qhnZMj4FN0OAZnoguk0vSN0G3eQH0R\ngOShL8KrgW3T0qdrvdeP4fq6P2xvk/SZKjVCEctcFMXHpQ+q2PvQZ1Dp8l6w\nzN+rJJEi09jQ9470ZCeSBSqqBQD6nRK2zdEqZoy3VnMM0ouAlKSPjUHcvXP0\nT8H4D+hVr1v5ZS3GbxjSN0m3aB8wbpyaAbKi8rb1Eeah2xlVCaU5tLsj63mE\n6AISn8WLutaEp5u9+hnOyu6eNpYgvCssS+tlWj0idiBd2uykeprMnhavsfol\nrm5/obt+WmzanIjbkA6Da23Z3HllpeEQ3CEcrLnG9b+2gdORgGfkdUSjX7yj\nQL+L98Yc3aIwI90ZMxs3fcb4lL4ypCvoWxsqzh54ubIE92ss+V2hsx459LtQ\ns8eC0UE7hG5yK+gxwD1pfdrDBIVCNyshvFLITW1qm7+XqgR1KBLHZC960ewj\nfbJGz71KITLe4OvoeQxD6HOJpY0/CS8qoyEyDMnvz6YDIkmnJH1MNkbSJC+m\nf2ykn8f7taP/0lyFqppP5RtnI8qp+EEL5KVmp+B9NhpyGVV6ERyoyavw42Lg\nHiqS\r\n=XX+v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/density":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/touch-target":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.1b44b43c8.0_1596559695495_0.4080260155634441","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/radio","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3fbf779f6dd178562f6bdb5c233f35fe33f935e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":42,"integrity":"sha512-PvLRHOQALrpqv+OofPTwTX1Ibj8OtIHSQsdl8U3nwwmTJOea9Pmv5oP5GhXiUlObuDUIhhvYAVfMQGzV9Q5+6Q==","signatures":[{"sig":"MEUCIQCxBAnr4YzUE92yVeFer4AG1aBF5RkgfVvfuweJtA/OWwIgBnKUPjotBteQyMO6a95d4IDRa8SCspvqRDwN6wQ1DKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPwCRA9TVsSAnZWagAAL6sP/jScI8ybXwjEnT15o9J6\nlbYUwXxt+T40U9qYWlDW4Em8WMv6bTvYEKTopFL2lBznlBrFSbzJZgjx9uA+\nAKDFOFcKNBsNf99qKL/Ryk2ZZqGw8ZNbmjmHrxr6elTbxodAHucKn/h5MrMs\nbGVl+AWzMv0/Q2NsGySRpa2NPAuRJ6OGhkK0dnHObwWqKpIEOj2tLWX06h2w\ny2n3fF6Y73KqGGXQJVbYHRbfDmd95Drxbr+FCUu6zgVDYCwDDDIMGuMH9MMo\nnTjOYmp7yQESzxW+OnpV9CHH4IXay8QYfUA2EgrRut7MF8P5TFQhV+FSonAz\nTReJYP+OjT34GbU6gJDyoHpPh1XWViowOVgmz6ByXEuC24mm/nZssVXkSiJO\nnjWo86OP5FeRKBnWflGPHgfCR+4qIjSz6rxcQXOj5FhVO5sTB0Gj9JqZSOND\nXCT9jXp0nwdkcxFcyssAQiwl7fvQ1x3XobE+7WNAhFbiSTZIRtNVBHnaCwC1\nv2RucWl35UpEkfe9nEqlYcTrEq5MP6+sWCNlUFxXCIj8r7UZjYEN6SD5O9Gi\nMojh2Cr0j2TxIhhBtTZkSYQvInTf6npnh0GLTssjFINkzbyO1fFI2uYEGuoi\nJVT9wlGPG9sw7Gaefnd5I74OA3t/iWx0DQHBLijstf/NGkv5RbjKcaRs8SvP\nJB5Y\r\n=DghU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/density":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/touch-target":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e9d2e2f96.0_1596572656423_0.1447836668923228","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/radio","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1179800efe73ea5c112ccb632ecb52c02a0d8950","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b9dff0a19.0.tgz","fileCount":42,"integrity":"sha512-91kTAvNeUVFC2/cq0YtXQa2u+afVK8CU1cYKKOTOC6RPS4v9guNLIHO5ixBGXUpemiHnivEUp7eCbfObIs7I0A==","signatures":[{"sig":"MEUCIQCVKGtFN/HpMYx/4X7SnTwY2GHlQjgiK//EZ9xfPQAdogIgcLA049WEqDbWcd55CxS3n7U7Q6WVbVh4W4LJuH/99qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwlCRA9TVsSAnZWagAAN+0P/RA0TwDLIYuaCCNnr7Uo\nUfziIfS1qZT8yT+mUwsqoQoVR19afGHEWepIPN3GvzlDFWmlNb6xQFstBfU7\n0ot2ba+gkKPyijDuwrEJv+K6zNiE/Deo09wfHGc3DnS4vPQBD0sdiR4FvRcd\n87nDtVyoGgwtXfk/xMJwsvq3mK9YN5jO48cctnnAe4oefUwyLgrjsmInMQYc\neweotCLcBvX0zadgDKopoROvqxIpoQpr3J12nxiUk69K4IOqxdkFPStyHkA8\nb0dGLYVQcJqVTYBlCqLHK6jFGhXy0/AsM3r0B8nFYZo17gw3GZHfWrebUOOl\naB8cQMp0jF52SAgcZDiS1TGMBuStSFep6z3q0KoKpumbLsVL2Zg4/FUCREEI\n2oxzAClfBB5SFv5DZrjBeVY/WBk+yZo7msyRjmfKyVyOgeXdRrxx7eVIaapj\nMvVr1acYVOPz2q6ruWSa43JzGMzltLvHY2xG3eDSkMTl70+eT6sjMjoO1+BM\nmsScI3ian42NmelLTM/5DhqFK1B7YS8EtKh9+ejcb8scNGouQStQLyseSTxT\naKm0I6H5KTP9Ag0HdjfE38wlyUfPpH0/Zv/YxEPszWZVs2P8f6nkwl1xZRaK\nlNg/VgH56/DdKXMdjWr+SDBCwU+WqMh6eIuH2JQ8gKE6nEhXqZOCWqpgc+MD\nGLlB\r\n=xpdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/density":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/touch-target":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b9dff0a19.0_1596599333280_0.8918577029822161","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/radio","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ece88b1af889411b69d9e650ed3c20561406b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2bd09a706.0.tgz","fileCount":42,"integrity":"sha512-v8PFUw+9EFeeFGHpMNtFwm5yUJxjngfYigHCCvolcYfxyh46bVKx6R74RWiQTXDrsHE+Ewtz1heIsQErGlTgCQ==","signatures":[{"sig":"MEYCIQCfkQZzIAXYJj2tDvKLxEvIEOhHVLwSBMX8nq4TTJr0pQIhAJ3iqtMQP/jHdu5j4WtITBXKytQtk/A/tTEBTGilHzjZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1YCRA9TVsSAnZWagAAj9cP/jYAc8Y+okggbHok6xHd\nzuuI3vGbfCYLjtnNnViHHYBaZao5sf1QIG9eJ4UYymp7J9lDEf7goNscv4uo\nnaNndkrzQGeAgvfd0MFGbADsPgxyq52bxUfX9KD0Mej75X1+OQkHA8gEs0mH\nZQvf3rz8H6jgXqlTr26IUcFbps4BgBdrfVK8BRndkciRgaCCBhp8Ik6681Lu\n2H2xPQ8vOZioHv2VquAaA3LQqZlC3SiNDSalcReoxz+80pDkkVQ/Oyq75sGx\nkBb5FQzjoc5R4G/LRA0IatufhU4KHo9Ru7+LNeLWvRxe9nsa0KdMkcJI/HAc\nbMZ5RsyrUgowdfaSX96aqzRIaPZnMaCusPdl/BH478lZDCgnYoX2r1Ld5Dwt\ngl7Lb1jRatH72LK708H+tzAySRxzXioK5+ovOLveiBu8hQ2Bk9JpZtRgHAnv\nnrcINGS4/xLx2ZZiz5coG4IUxfk2g7j/bbfHVL92ZYFmC2DRrJZW4psxwHjn\nrliq8DYkvPFzI/ZQ47vdE8PnqLb/fE2IQl6DPFcE+EiLXANNNEEHR1GkmVwa\nAkZrl+fwFMi9s60vYTI7rzuL63LACdLti02DqTwvhiuKms+4YgtYx2bUcsCn\nKxhjrIDVH3X8skxzz/1FTYvhDHOKwQTAyrMtuI4WHgo+MZsJNXgsEkaQbiOx\ns7t1\r\n=4/0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/density":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/touch-target":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2bd09a706.0_1596599640041_0.5646058930608888","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/radio","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744559b0c2cf5462792426a52cbad5cb2cac0544","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e0560522f.0.tgz","fileCount":42,"integrity":"sha512-53zKPtIGDhoYbiHviVEsxoOI5KFAyxvwGMXfJYcwSKi5yqELW5JTxTDVtgmj3u7vxhTJ2uOY+D1LmNrYVLcvQA==","signatures":[{"sig":"MEYCIQDcFessrQ60udtEGM7aa0Q/iaW8cNugu7plg/tggpqD0gIhAJ0qITseUnEfm1fOG0ZWJYi2RGIsh4IDyx1eKkd3UgD1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuosCRA9TVsSAnZWagAASUIP/0gKgkvd9uYUXIfm9iu9\nKwXd7fNSaem81cEwgEc6qH9cvLbXY6DP7u677WTIfrhK0jyA7bFeLMfnFPku\nu3q5zbGGHWqLfpnuIoIMst//6QqCJ5rC8gSL2aYMd8a+gN/9/kBRgwvLq2+R\nN9igVDhGyQ14z1NzCS6K80r8F5HrwgVx6icAu3IOybCAHzWYVr9Dd6OkpuPV\nO6SHFXzxaBM1FrjLklmuoWGXOpa9re7axIfciSijRj7yaU3M9dy5ftZ/VZc4\nRcq1R2fVClVM7j0WBuc1CrFjicGLcB6nec0UssUwjVa8rlwQySkN/DzJcCUy\nX0iIYONmV0bnV9kpuSRlD4BSIR7VdBInXGzlmvqSRw5iKMy6/RxF4zPvqjbb\n4GoPAJUpw9wxDtMUIlt/RG2ng7lao70/f2wqg5VE2zAPYH1J9GBp40ogrzrP\nzgA5vzDK5L97cjTPQDPXCzgSv6WewPHiFfqmuTgRMY1ZysHVI9ZUUBWuPoRp\n1vUVwpklhGWiuEvpmp6/mmI9U8IYPCW7IvUY0XUQ8jk2UCoWH8yl83+v5AQr\nQdju8ImExqiks+ZB/nAZZkMyoJH/RJwN78I6NjAy3ZozoDP81ViN05zF1NgF\nyLuu2T2vx5+pDzyOQDE/DNNa+yy8QW8xO2FrNoMBge7fnHwPsgNaR4rSraP6\n+Buq\r\n=BEmb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/density":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/touch-target":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e0560522f.0_1596647979742_0.685874830108713","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/radio","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e464fdc5ae7e2f674a835b125902ad343dea1da","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":42,"integrity":"sha512-FGGYDz7NH/R72LjWjM5q4gWSiO/Ca7AZXkQK36PrlEn2i+tQPurQpZxjR7+2xDuu9IJqoBbDGjx/wJLzt3IO4A==","signatures":[{"sig":"MEUCIQCsrpQWVYgCKUapi7jrEZxQainoobaFMczKPc1okE+exAIgSYX2yvaB8BWteFVMaj1CsDfrlO3ZFlq1TcoZjeI0QJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7RCRA9TVsSAnZWagAAs4UP/3n8kuq9WZ+UCyn/eUOd\nnnHIW7K++XfzUB4PUK2HU8NVvKnKGv+0ZwXN1UVipi810+b4FyQo1GwURd7o\nhhCRFA20sZTn6VelmY/3xk8Xu6nke3FSmuTy6Kbgb1iq3TJFQXtMWLFSgRLu\nKTU5sG6+nuIUAuMliJnsPn1Ju3q/Y9W9kzVBq5NAl6bWE08jk4G9oFFkyQZE\nuRrd9BS4YzUKQsKWR3adP3oPOV5eUAaCi0VTg484kusfCqB2TP2TRYBYeS6G\nMl1pcN/70iGpdwXowY+bNVhsa3NUMYF1ot9fCvQjQaj6DVm60hbpjhfQ0tu5\nnGWr7HSvSXt+3pgWeRqJHMNGYpmMZ81WD5tuZ7kSDnkds+JrkehVreOde2Xi\n0dvncyH0FnGny00UjQ+dmMzqTkKIHVomvRYQ+BejJjywbq2Ydg7RplFYKbKb\nGdy+j2+gLWWiRQojRHJa8LyJpYfkM6jOt1FQqKKKw34BEHdu/UlOY61aPAm/\n+t/6XqdnvkkAq7kNa1rJYjQztudFMZZyHH1wGsvBeuVSMKA5LVuJ5SRXcbFR\nNJKeY8u19g/2jN83yc/jg4k48NPJJRjxSZ5eFe6dlUMcL6gp6lhSzcyZJTa/\n5XSbBDSdeoacyvVwzmaV/zmSe+TUQPd4rfoYmEqjwVrhuzHoDnOCqf9hipzK\nY14B\r\n=tXcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/density":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/touch-target":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.08ca4d0ec.0_1596649169293_0.7160802054307558","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/radio","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a40a7c3b8e559e9a055795b7f10c9807df72fa0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.08090126b.0.tgz","fileCount":42,"integrity":"sha512-MOcv2Q1hjqeq768+aQySV+pBMvkwKKNoJ3Zml6/YI3YdJKrK5LulV1wabWKgAw8wkNjkgzeg9ZO5NUEYXh9mKw==","signatures":[{"sig":"MEYCIQClaqe5Fewa+iex14wUgzOjaIkf2a8bK2tJqxrJJGW1LQIhANFtHcH3ybP9wRW2+NcnFwRWU54xI92yyJm0xhwZch0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrbCRA9TVsSAnZWagAA/foP/31Wnvk2snhhM3UG98xx\ntdGKlKynpAecSCIzYXa0dyCgQ2cOUvJhVaYRqpe3ceHOwVqBWHNXcR6k1XKC\nypT3yDqgxpKEF21QuwgDfSjZoz1lAtQfSEl8FDJc8fuGcoec3AFgwL/Mrycu\npu2V202mqtS7IEfAp5B4vVECYs2QouqwsKLF6di45and5WExasel7bl8J/UZ\nBqaRXdhW7+BVREO3/9VcCHk+P/IuZLOScDcs/y5Z0+9L5TsiJob5smdReM1q\nVFQi3Aca6THcym5o/5HZwJ4AXo2eawEbdiXvbjKpjgOmqgX+yIiQ/lHP65uK\ni6FHtGFRHu5Ow0gKVbbnqoPF5ijQ5Cny2LBckeVWECovcvNp6Eh2E4yYXMrH\nxOMxqo+oP2DEMtaxwt8FW/2vd0OeOLRTa69j617QBFB4E2EppeFyWIAHJM1Y\nhP1Vw6Hmw3Kl+DXMgvx8KrxUzHuSfEhdcxA2eKy8+76N9uS2RjHFBccaJH7Q\nbnv8zWomX0uNO025klW4JNkQoieOUGh5/MNL7xkGs4TWZl/5u2Fg2ARArlxW\nWBpdqUsiWgn98Fx5y1PtrDvMFd0tqR9sqi8basXWrIFnEkWOt2N3BuYhyknv\n2/er+6VKTLCaF2HyH6Ziop/fxIyMhIfcNg6yt2hPDLzZiferrThuj8aKlUwl\nkUHA\r\n=bweB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/density":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/touch-target":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.08090126b.0_1596742362555_0.6786753102260579","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/radio","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd6a993ae51cbc583e2d5decbdd908385d675978","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":42,"integrity":"sha512-OXLxeWq/LKP4HMyX/B0ccXYfV4/J+iPT5NtdXWsyvNEEceVpkVgMXxy5zpmcj0WhodU960zcYtogW7s2Ys3IVw==","signatures":[{"sig":"MEUCIQDXtjXCWZZ1WTsyxzDAtOVg++HVb4FXgLYnOd0Lf903KgIgej5IWkyrAZ7RO8UlwvnLq/Z6BRjPxCxvaFjFuKYyBvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsBCRA9TVsSAnZWagAAKCYP/3iMRIEF/E9pj1Kd48DP\nEgYcgXNVEnZ9dhHTtqsqe1+qjP2KTNRZraaHfWrTaX2GnJu5o/jIgHa38hmu\nbTJoS7JpPvjPRSvjRYWlVCaM+E3lZQDY5VZv7RqYkHQIgsle1sWzzSwW8GG7\n/2phbBv2AyXk/g/0PuuBBTrUiuAEgOUs4VagK170ubcOoY2lj8necmQSOSDt\nwpeopERiT6MmJSf7QXEAh9EnAyIdP2XxGa1pwp1RlBl14nHinKfWlsqbPmNa\nvHJ0Cn72w2XLZx1ab5igy47qp0XhOkMAB7Vn6S6g6unFXm1HoFdhyOyPTB8e\nvhihHUt8jkY2x/oWe3mYoMyFS1zBy+R6qi4hJEl9TSpYsjaFd1a1hwxwuUOc\n3t9Re5LIHUix9NKiK2SABFbUBEX+dJTmXgPO6CbiBIIeNuMgktjCtDa8Vy8M\nCneiofGpbe45Tn+8PTn1xA5Ci7zHTJD0FGKHGhRd3xIrUOfENPdcXOj+WYHb\nwyk+hEU9IdA/XjCRLT2eIJO/QCNunO/rmGn/XcHIZ6eOO+QyiBMpaLVxrkHL\nLjp/Zj+0IYT7XnL1U8mdefwJGFYnydPKkQNpVl4+x1z9Cy6yLdKKTEsxhC05\nNU50RKIBxve4BhWm7VpQrdEYSdd8Rbt8Ku1NAC92HHfHNTUgUeqb0CJiXeoO\nGjGf\r\n=HM4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/density":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/touch-target":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e8bf5b2ac.0_1596750592633_0.9245871208510212","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/radio","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af579e939df0e4060fa9800a27f0b82b3aa09cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e3b746208.0.tgz","fileCount":42,"integrity":"sha512-abe9N5TiaHkogg3d99VWhVY97O5R44N9RLUrumILSQ7Q//umNS0/J2nmF6rEw/A35ewR9iArlRDiEBHRmS19Mw==","signatures":[{"sig":"MEUCIQDAy0nJd/URJ9CftVeloxEb/d6z1KePGapbi0unje2CZwIgRB0bG+kT3gGClOasA/omC8VPeWb4nWutR47x/kdTan0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOmCRA9TVsSAnZWagAAZfEP/0lNhq+AFwwZHwRxidfs\ntdOBKEdvY17bmFgPP2OgWyy6V9LT/MQh/nrrhbXf7T9JC96415t6pWMTntOr\ndt0h5AXb05NdOESSQfxH0NSbOtcwTHo0hgQckdPMHgvcoS1MDb6+kR32ng/b\n3g76t2jDBvdNzCs6+NWyCx2YeoABN9bRSJ05FwwbUOGBCrpHy08AbYeiFfu3\nBlT/PXG0I5m4rFUnjEMZpGGtZzIvjJjv2l5qXkowDDBNd52jHHX2dhsPVnSH\nN13jYMLNxPKQ+w4MB0wpdK+LYD4Zqkk/A24jTum404IjIFh2ne0MWGssB+vk\nUVFZ5CPD2JUy6xXsbNRu9TrYnsgV7LcdmmwnKQagKyJhLRiu0vWtgr6M9cA1\noQXmZM61oXpMg4gs5uOn6zVpOBdN44or2/okDsb/hO0f3Rmp+aS1wwySvkIA\nZsm5qiLLYzoV2L3vwDVYiOJzxa7m7kOugXAzjZmBOnwgdi8tkukp8SLTXGgK\n1JW9j1p7go5+l3D5V0BCJ21RZWBU3OQNK3ydwro8yUPCXp7mnwAnr0b+991d\nesavZknlbNYxBDPWvrdTxHENP6bBw+2OCsw/xkYj4aQm8Y+wLY5OsD3LjWAK\nPNeF0KHdfov5nso3fPKfrN0JeeYW0cF1Ur2cvpA3zD5mOj7jnALoLuaHOdaE\nw3K7\r\n=TMyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/density":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/touch-target":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e3b746208.0_1596752805484_0.07398733725106954","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/radio","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af54c33a95a4af02f31e1680088b8e4c6a6e2421","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.96a640534.0.tgz","fileCount":42,"integrity":"sha512-a5Cz/p30PzcEFPWz5lJlTiFUPnSf7h3R1T7TJ8904MHLpG+oyVjD20SdWvO+jClv/IiRCMiaAlSog9RdPKTA2A==","signatures":[{"sig":"MEQCICgCVd8qBOICfHvaOBhzRFDMwEBXBWRtgO/7ADbmn02lAiB3Ko+wIr9tBza5B4jI6UBWQpgDs57ArDkocdMDD+NiBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcUCRA9TVsSAnZWagAAkXoP/At3fqyRq9gSikHHU4cv\np5pNTb/HF0ItV13PP/46pHN342XXKPUEYJrsYX/THkRhfbQJ41kuY+ygU4y/\nT77aVqhoi/sgWRR4x0d353rmV1GaXrHLzM3FpGWtGqF+taZST6dUCvhhHyI6\nP+HhhBWoA8iJao7LKA0qxBtebKBzibbCIK6DDfFY/w6W0/26AnV5QHdszgdy\nhpFEMbS/gLnkpokJrRkdRSEQiJckfavwbF8asutG4Rr+CxC2Usy35xIfOpnA\nY9rFORvgHzzKtNlvhy65/HEglogokpsAyTD3Bv9QagLIdmfL0R5ufs7K/AOT\njYufXUR69uEO3YpYMnaRPI4C4xmjvfjRTu4YIQam8G+x//PR1H0/J42RMOmC\nouRoAR/ACdyHntZjP0vvpjLtf2Y+JYX5EDvJjU7ZxsRgNvpQosUPVk9znwFO\nacpVF/OZ8/RM44bTyBK6t7+uMBn8JK4wFwPHsC4htIc4nB9JdwtYGosgE6wY\nR8cVpx/TwwJoZG8J/uscoQarF02xkCOGg1Qcm34CJplWlVSzAkN9ve0etrYb\nkSswC9yp6d4PtIn86FS5M0QmaOhEDRm72ZNwspan0TF/cmk9IuLo0RKkvNVJ\n1YznnYYpY2CBfPRgK3l4LTKauOG4v9almPXLSLBbHyUqPCv3ct2e0kdfcIOv\noqZ1\r\n=hoqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/density":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/touch-target":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.96a640534.0_1596753683941_0.6883175912357824","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/radio","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f155c82ac0bf21d07d3274cd09993da3c4c53800","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.9f9aac825.0.tgz","fileCount":42,"integrity":"sha512-bRlAZ6MmFaiHNzydqXDoXl9WI3+q+3G581E2/b1YvtMGwzwlTDYXD0gx+24P5ADq+PpM0zUINB8IwUOAIpG1Tw==","signatures":[{"sig":"MEYCIQD3bMWAKUslHZYL3BhCWsW6MQNSCMV/+S77TSAuIsVK1gIhAKk7mVETPssU3VIg8XJKhXGWApVbhP2HDogLeTGvaNTi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7OCRA9TVsSAnZWagAAksoP/2PXB7Y4flcwTUu91jhO\nUD55rqqsNWf6M4ID/tRxZwHPgeskYoaUhTC+VQxLpKanE1Eh52nSMGBf5QrQ\nGYHTCXLFHp6Iw1kOsYYxHtgy1pbXSegHTfr8VvipgR5jpz2aNr/IJpbJOfo4\nf3BfzgWyQ/XotN9HEOnENNjlpmAcMMrVS/I01LB8iNBGpjp16LVtjEquwWdk\ncawoVD86m6znYGtQXLgJpyOk85mi6pynOYhqXXg9Wrf5yeLZQ7SOyXv8ffHV\nIkl6TFLCkX+1K5NXpqoAN3QnJ2WeBpztXlIAU4XJO0DaE7tByCVZIb0typdc\nAGyHfHgA6l1+q2exE7v7SQUqep8ihmR4MbjHY5mgMrbcdNAcGNl3mokKS/EI\nyTZV1vsCmPvAxvIVvotJYBrGvaT9i1G8oHKkoK2PoFHxEWg6B9iH4hTK56Yp\nal1wTlSdglbBPa4dya+9w1U/fN9qD27xPdbwQT/pWRcWoXQONZRFdoLoyw2P\nykTM6r318FsGpChLAK110h2ZSa19U0797D8eF3APUu8njFVZSTridgYE0p5A\nXg7e9BIepdwziLZ6TqWoOKrkxKRKcCV7vDV3SQuSHWOFobj+p/N625Omyphw\nyDoK08iVSNJo9L2Nsx3S7bNYfxWN1r4LOTpLMsqK5C5DR5K0xMxrekGkHhb5\nwhZ9\r\n=PeMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/density":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/touch-target":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.9f9aac825.0_1596833485045_0.46579019321550597","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/radio","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ecfc554144ffbca7ea4883a9723dfb9adc2d4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fc65fd00b.0.tgz","fileCount":42,"integrity":"sha512-kXUKQIVPaGUggobqAsy1hK16gx0xz3Qp/Hfm8JCKt8R9ywGlhLbhZPX+6HMjL48G50iELrQh/KQWvD5ori9uVg==","signatures":[{"sig":"MEQCIHcldkUUss6puW6nosi/EUqedvUwCR/0iwVhhS5d2YBEAiAVyK47fJXEhB0QI+Z6iCpVC3Se0Jpcc9VbJL7/1rsoIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWW7CRA9TVsSAnZWagAAEa0P/0XVTWU2B2VqsXpnJyeS\naFgc/xGEFJQH7mdgZ4qo0x0u9Wh9dQK2maezHy89yggXywUkzuzDJrlmFzS7\nouJHI9TZtKO3FxBFp3HYgnzXPRry8oSs0IIm8+eaw3Z/aikTWB8OP/9lqsNN\n7PL1glkDS70FI+dwv8Zrzt6PEMRAQZOPiFzUe6jeBzD/hECummXQOimwF27C\nP1CFRbvjsCOMyM39vthSZ03EnWKw5An7cDo77yY90CQRKIMJLBuVXRVtALTQ\nwey5qUNtOGgLDm64lvTtDgh1ukiIBMViqL6ESLoG4JQP0jHyGEbwEOfhqiR6\nIXO8O1l1W3sTfekrw8+a9m0zNmskhy14zEKafC26AWd2BugIJnAT55CkawW6\n3bPzPb1c43KtXnWLXRJv/o4U5QKgxu5aTQ2VCTwykNrQTwZ5B7EO1FXwVB2Q\n/qfmA6UA6gngsdrfwifqEYfr6zrnyvh7T5uIGgyb96+aD56LY/hjl/3ug/xm\n/fXw1jqrwcMueeZCdKSyi5pfmqGv3FA7L1b0jKyRUM4Lmw7DzJ2fLkYZTR2x\nBVV8ECjHwaCPdI5u8lGReZanWxxZ4YQWEB+R3vligy/VofrhqBjlMcWEWgCu\nYCR8eEcSogQBMzRcSxxzHFnKx57rOL6BAFnxj1rRMwLSQaPE8xG4QhlmCWgD\n/NB4\r\n=al0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/density":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/touch-target":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fc65fd00b.0_1597072827184_0.972850019801601","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/radio","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16e9a0077650709da840c6d3fe2c497777be1b96","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.02e372c5f.0.tgz","fileCount":42,"integrity":"sha512-07LtQvwL0XZUdBJAKJdEywAd0LBEIse8fdyzLtkI4PSuGEAGgW8ppmrRa3wKIz9T5Vuey4q1XjRIwqoVk6n9Kw==","signatures":[{"sig":"MEUCIFYhIqTzi1RWXNTkoZyTUnsIMGA+zy4/GRb2dIKj8QekAiEAmhSbMbvn5c1tc1wsBXOkvF4o3XMtv9pAUvdifK8Wv9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxUCRA9TVsSAnZWagAA0AkQAJtXapjDkXUSS3n+7HMV\nkX1ktDUIeoxQw+u3/NpjtXCxB/KtCwLvzQuBqk0/y26ZEOmZuUoZS5zYR+qJ\nGZNQ7Sz53w2b7Kpnu2toMb1PEVfR1zxzNJziDY+vcCEgHouh8GU8hRn9izS8\notXoInzSiZIauirKnCe1fOhxYHjEgU4GDkxEPutdnAqL3Kj9qCanLHosZknH\nZUezeoUOuM5ulYeoN/OFmGD1vkHZfmLso/JcdfNlhSXq/YLLdHb9E8+ZpBT2\nSR+FGn+LMGFsXih5CCsEJ/9rAewEA9BxjKa4KxfNQRBJWcNoQrVJv0J3hQJA\n7ajC59PnghCGk6ojNiazcO+sBde3HGBlui7hFC+xFuxrX9EkpmGZEpePB3D/\nhqALM70R1DDJnFxjOXV/I1rlS3x/cR7Ioha2KR0qRVTHo39tdUKU6PGwzndA\njUBRyKoEe3gnAFpw67A+qdYvY9Kugp/JzuI25civuL8eJH8C/2udVRLi+E0H\n1UeFgtKGZ98vGffDZ78G4vMCM0IUaIwck97SQBwukEjULtcQ9Pqn0aJNLp9n\nNSG0cvnVkBeUFjpTUQ+o4LOlbwzxiWlzmMYfOcJcb/KfFazK1AXkMoflSbmJ\nlNsJHgEJICHicBUgp50JguBgYOkgXuiub787HFAaTvGKiviZY+22bLUNOCku\n7wkq\r\n=vBNr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/density":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/touch-target":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.02e372c5f.0_1597074516159_0.2424551325968094","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/radio","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beaf2f7278635d66138c80b430a06f465eb9d40c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.66669e3b6.0.tgz","fileCount":42,"integrity":"sha512-PDmZxqsZSohcj6tK7vFyNB8ND6ytTZNlgUNzwszHebX9VG5JhUZDcs+P7pvzaQkhWphP4bzqvCmeUdgihXE7iw==","signatures":[{"sig":"MEQCIDn09gqGuLjN2RB7T+Vr3ASWBAs/iHs6cixzTP+PkFDjAiBxR8oJQPW4VZEltQEm/oUaE9ZLtPFKVdDwUNM2n9nGVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1HCRA9TVsSAnZWagAAKXMQAIq/tUkgPwqgufYMlmSd\nNl/+bifpK3p4ZGpbA82LYOKevqzdrYE0WFG0PR5HumWVWbN7/k9MBbWSo+j0\nbij57eR7J+hryDsc8YMVb86uileFlNqbWV0GG3bDfNVWftsN+ioZC1R6mSbY\nxNr875x3x/yMbMgCXiPDBbR9W2H9Xr1C34au37ru0DYqkkCCnwVylCicQ67F\nWwarMZtjdAObsKak/cHSbRFSgwqiWktgkZdz93Uk2JnDv46M0fplJLHpbTKl\n2cqvFHxuB1OYkaCCDQk1z+AMJSxTNxPBTO+q+DNiQ37SlKzDGzBDjj6AgqgS\nn9SgDJj5eZYSMurRev8FeAFIiCsCDMjbqEtHvVlt7kV8bnFHPqpilFL/LAEW\n0Lgc5gMbYovBVCtGpsYPgra7YPwJNiLQhkr2OFDIk+a5PDKHdgnTzD3VzbH9\nSB/1JaERv6JBImYSD43DsEpStwwHGT6YY7Syavn4mhG5kSg3PlaEiHVpTyFc\nlFEMIcFaVyLsNRKlbccxpNSQFuakon5zLVarkiRwlNYaeTTgVAR72yoVu35L\nPdgmbiIOSeQh4UwJD+rxgvRfV7PJlzUKtrJXYfYyyOVoiiPQ7aZYMqfU6Wjb\nfYkOjpAHRxNlM3B9/+r/fbpP1QIvzY5JEdjjJBCNyWpEtlQreoP2FUjjfqbV\np5bT\r\n=/USd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/density":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/touch-target":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.66669e3b6.0_1597074759355_0.30675448687467477","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/radio","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3c45cb6815bbe0d5e3d0e6bce9f11cfe3fd807a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.6d1ea9761.0.tgz","fileCount":42,"integrity":"sha512-Nr2fo2yULWjL6pnNqy/r4wcB3vpTRe+Se0eOoFpsfr7p19yiBBzwBgNjg/nxaCJWEPHGLl1LFzyounG3gJhnHA==","signatures":[{"sig":"MEQCIB87t1BWx5Dgr6e9UFfBrqq3euWfyjMg3S/1UA9b4EfcAiBXT9A4P/4qYVwpWzjq/U7SnNsg477/UPTrVi8Q2b7yDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquVCRA9TVsSAnZWagAAoKkP/jSExAPwkp7e44CsXrDi\n9kRD53AX7UBPHh1biYpkQnZt9RsY5tkCyIIEJZizj1XH3HZBsdIrkB5zAmto\nClkS1SO5Vufhf3+U96PqgCXzCKnbSqApDp939XTxUYbgZGDobldg57soJKWh\nfHKCJ5h2YkVOPS/kp8nfHL5qoMa3QRL3kDzlGreN1HlClr96g5ZxEWRpWgsB\nCZLWgCnwZpGmzEMwdHNzpvrScNTbEbHPthBcBnutvyOdPLoSeEaObArYBn8t\nL0wBHFoI0RfwUBe1UhIGps02JWFv9iCr4cWHj4UDwrH+onOf6V5jHthKxDkq\nIJxXYbgQgDyUYBRBEwWrqpKJovy1kQrJpq+kRt7Epyq9vXfYsQSbzYQQY2nL\nvfe3/A23eZAoZSYeYHcrBiSPtfih9zkxAdvk9wWB4+jZxnLVTTi2mNnDzAc7\nbxiJw+OJt7ioJz83YjknAhAf5S5Ew92NnOeL1XSGwges+8cLkh6mi4sMGNzE\n0RIDkevkH3W/3j0zn5xF0cMhKxMQ+uckVEtfmfwsrICS5qcjGjznzy9Idcdy\nxdH1kSCMNfU9/UD72asYVDZKOpAFAOdnl5cS/X4Ki71bw57LnyH57KL8N++g\nf2tUQGq6kViumLv3yp60y18WuhS0XxSR8WPLHmRV9I03qTmrsQTzkZFNcfuR\nraC6\r\n=Si6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/density":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/touch-target":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.6d1ea9761.0_1597156244719_0.6308845270233123","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/radio","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3314a9e74401c8929066d8fe97d2937ad01ee8bc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.79414bf9f.0.tgz","fileCount":42,"integrity":"sha512-d7Jvlvvri9+SAhOFEWWwZp3ipj6jhL2Ao0Pd7gKTRF+ZZIC04naXR9n+9TcSYEGRJK6fb3PEGZ1Fxn1Jc0WU1A==","signatures":[{"sig":"MEQCIGEAJKPUFIm+9V+iiPTRv3wPsMa1Em9ncJ+ybTYcm/mzAiBf0iNmbgYNBtxvPfsGxPLqHUGI4wwX0LHbqNhStMSMJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusZCRA9TVsSAnZWagAATikQAIkG86UbUKmO+gr/Y7cP\neQGosuh8g0fNK+bUaTz8IYwDA5VQcTu5dJL63VMNiREr3kvUCpWiz0VA6+rK\nUMmplSxXYWkZ6k9C57829LxeNzizOjMt+bc2XSVV0Fi+SXmi0imYubWzzDwr\nkpPh57XIwNmRf1uky2z7xTe1RPxlgR7RQelHIIIXsQ4owdCv8UnZgrsxQGTX\n19gFbgBqYHpC1dUlUOOPLSpbMYYi7Zu+4HdbEh0Iz4gYkOF+ybD3JaVTQogX\n7BkPs0SHzXFHE5yDjYXFXib5xpVtzZPZlRVd0ckBYfgkVc8moAA5crszSsaw\nYEWWGt2zyUekP9hRWdG9pEs6K22VupprJhsjghztsO1o4as7MdYSVS9pO4nC\nX9d2dBKVmpKYMVWIuyuGR0VCyTiNSZUlmZ/DmTSmhEGubXvTzuo0ni2QltwQ\nkj/1hOHdYvwtfeV0VG+qHqvN8Q7anfiNFFGkZJX8K754amI5fvoh8HIu0GzV\nF2NXWmh/jN1fgCJtm71LUceqF9PfUoUR4KbavVt11PbsgpFl0ZFVfe0Ydz7r\nJh7K8QAy5j2suD4ouMAk19suZApxA/eFBClQCq3avG5U6zMWA5pfVJ5dutu0\nETHZLK5lcVYVhZW4N2fqxwxonNLlY0LMLwfuUpWk7y42b6JryQ6N/uc1eaqZ\npi1O\r\n=jE7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/density":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/touch-target":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.79414bf9f.0_1597172504562_0.5981428349688096","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/radio","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b079904517dc943ecf474b89e0d26b4a7d78877","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.85a5272df.0.tgz","fileCount":42,"integrity":"sha512-lVX/OLLMUGloU/uLGFY8xJDl5uvcFhkEuBArbkYUw1VXwv3AcZpJVttV2g9Q6BnZcnOf953RXVNUW7oE8rJmIQ==","signatures":[{"sig":"MEYCIQC1IIk3ohE+XoCvu0C73ZNHUORDw2SNYTihoM3q/cKb1AIhAIKwFg3N02naBubnBKfddCCzygeIELVqA8GcQ+m3rY1E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqtCRA9TVsSAnZWagAAh5QQAJBoNksLU22sDD51xf+F\nvpPIOtx2L9UH+0tt0H+5+bgXmVi0Fol+jxfwTZPjTY+kVXumdczMJYKYw9d5\nCYOE4zaSj3C1rBg+v6LoUCeRyZ6Br9uA62pN1AWQ3NHiCko5LtzX8yZ3U5ka\n5F43PjLq+qVeFYZ06kawqq8Qwyz9stQKl9D8OAr7skVXgmAkQqd6HDxrDUS8\nuwsM460cpJ9oWCbX94UWJRE3YtwZl0gkqgs0FBRKTdPEfUlIE/Bi7uITa+bC\nESXGeqi7NrWz+GKgf7ZMWE9xoruzjDzq8VTZPLVVic5z4H9VSuR4VEapmZfR\n7EAodCEeVTaxs/ar7LD+muH2kqes898ytIZPHxAFEduqIk7++3iAEXOmAzra\ncZbDQnbIs0uOYMjVi6DYQFCnD+6B6bLj9uxYC9eSUa0CsyVPTsxHqai57GAS\ntNLk8IsDGPoV6KP8qu5IJdBV3bNkyAGbjg87ybtNHAlpKcFhYcTY5AbVT3mn\nq8jILiux8pGRbBNlg78xXjmnwcZTElu3yCpCyftQWdWtpt4VRfjty64Wa02C\nneTSB/AsqumWGBCodkZPmpxzL+ehBl9T+iNuxmcI84etsRs4m8dlOsik3kYh\nL8LMobWq6ahF9Ot9vr/stkRhkwJpNJ+9fOvAm1Blnk8favvgefjO/Iavue40\nFWCb\r\n=Bb7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/density":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/touch-target":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.85a5272df.0_1597176492769_0.04509728454851181","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/radio","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98b818f28dfe6dd89ea228864d2584cee53e3eb8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fda053eb8.0.tgz","fileCount":42,"integrity":"sha512-JYmH/7PMeKrYLAPbJdC/5Ocsl8EKl4I13vw+ArM0lhUCihhmDnpsZj9ziACCmH/h+FmqtDgm4derDzOUGx1hwg==","signatures":[{"sig":"MEQCIHLF9L78+i5OrGNBsi48fhNtno/OgLrSnVg2An/i8ia2AiBQ2KIzry9ci+2AEw2bxqHE/PvwoR1fxC9i0b62cXKGCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEs9CRA9TVsSAnZWagAAB5oP/iYP+yDP4QuVQhmIebAH\nOrvM4yJpLNg7doPRbzWW/sZC3zltQxvW859mSSnvRmGRdbTHZZQcq9oyiIDt\n++Vu1O3/zNERMzuGUvy8KwIEBrG8x3X3E4VGwusthHxYQ3/KmVuVYWiyToB9\n6INl4efvTf4Fn84xbHQbp206f8yipp+RorcwZOMfNE8+2ehM7N9sw2dZkKw9\nk4zc/nbql+cYX4r6AZ0OuYeLHIZe6fSu+Q/0wVHVW9qFSJdoHC6FNZRuEpzN\n8czo+wv31QCyV9TyyJ5O2jPwen93Cci/FvOhgCeUKvBkqpjy1Qd+plwEi9HB\nwBNT1UW9GFN+fYj1p7BRor9H+MPvPcZZh3EvmxDtbgcDJyDy3mnWbVNGbU+M\nPVbc+I5JhTiaE19CALuOUWcfifeodKtuv/wllQF3lqDUbqBzdU9iG+uGAgC4\ni1s72NQU0RLOEOFfPBjai9EbSZyD1mIzoMLIHgbnRNm9J7TjxLW1VKMzbBk6\na9IyPMoGYCgahh2n9FGoY7QrhLrfGKSDddPezh5MgOJVSgk9/W5qwhM3pDzu\nujXGWiMC/I27KAshuX+rQPyI3W4TgtEowvb8vPJ7eX6nY00frSbJU+2IhFtY\n9aPYXKxaTWplAXA7gge2WDaEM101FhJWVIQGowHTG7dfpeqB5FUpSkiaQ5Sy\nZ3bB\r\n=Weru\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/density":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/touch-target":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fda053eb8.0_1597262652896_0.03671280356351625","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/radio","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c98d104cde5bd275a796bf43eee5a7936f02530d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.760873445.0.tgz","fileCount":42,"integrity":"sha512-EuKSTN9rmA0jTkE1mKHEPWqDyIomOdHGAyrkdZDg7Zzivtjo4k34AQ8Q3bj0t9KdpiTiE7mRvM+cb9yOJXxaHg==","signatures":[{"sig":"MEUCIHQnRuc5EmPH7Xq28Cm+OhrSDp+fp4Br4dajBGJeQYGiAiEA/6FPw+MxiJbEka6wpbhIOl41Mq9fgBwDTIotoOGn5wM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJ2CRA9TVsSAnZWagAAdxQP/RumVHnHZ/ksgJWFK5PM\nAsyFjisGJlkz6XomvwBfxXgvyxUpRwUoiMMxTw+kYaQHOMzK9Zjazg9y1sR6\nGM0g6ErbL1Lul8oGB6LW5zvugGD2xEa53NAk8ZhziXp6rNka7uLw0uq5DdjH\n17ktO/XGfF5WtGv55lmUQOm6qGlQt3iDQ4B+X1/tV0OD56WnhvdSp9Zhx0cR\nY/gaVKAIeyfCe5gThbj1Sp8ADpaLmkQMJ9XLEqxi89bM8Ddqrae4NnRERU22\nPu8b3WAswzR7KF2sFBb78ROUJ+UPn7edpheB0M53O3j+30ZB+YXYbsKT70Tm\nXlKjUktMipCfxssGtQ1+ncgsj6ZBoqk1yTwqMbYcowYt0vYQ6D23OjOJHD3z\nozEnr6Xta6nNIiamDwi2Crb75AC5drNccHaUDPUB9qdqLUxSZ3+qnViunPJO\n/BYQu/PKQ29upPPeyuGVIZKSfZ1D8wAKk8ykmPk1JS2T2BmJUxfU1sUrOMP+\ndHw3Fg45uGtCjNFoMoTQB+JnhBjJ8EVxteOxKPt42mKIG39x2ZnvRb9zXyrS\n0FE38DBG6cakQWsZXp7QFaPcEeldKS1sr2DZk9zBjucpb9/fhbiFgy7GFkcn\nCj3j4zRKCWCNG6KrAB19zVRtm11vEVjawjWjBG6rdqImdavkQE0C2OosueHm\nY3qD\r\n=dr2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/density":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/touch-target":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.760873445.0_1597268597729_0.8505642408568221","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/radio","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970f3d87d79f6ddf7196ba87a01f5bca1e5ed007","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2f4711a30.0.tgz","fileCount":42,"integrity":"sha512-KnY2aqbwnOstvS5SYxTjrTTNa6s0q40WNnEk4KNKqKUuC5LU63XD73TjZwLCpvVS0gX4P7Y+HBxzakEdyoa2Ag==","signatures":[{"sig":"MEQCIAVSyzrE2cu1cC35pXEOtWXOorgPHsp5xZgByJxlXGgOAiBvwhATKlJfUJhVwjFAyY1IUhWaUnYuogqS9JPMf95BTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTLCRA9TVsSAnZWagAAZ3IP/jJ43CHoKp4ocYVpRBrw\n/IgWyG5elyhNLhnBRmYQGQf1vNJG7dljjo1ED6TFVff8chKKlmZiv03NVYXm\nld19DYMiNvhWs+tnubK3WRzE6tLD1Jd1sGCQwwdlbINcNTrHGajGvWeL4/nv\nr2Iwb7A2XMXOpfNqGt5/xdrXk/iaD5pRABS7kAFGnqJ7GnGkUTTbGiAbv4Ay\nXcv9cGLbr1TCGByMrOKk9FW3tiacy3o/yP2AXqpm6fVyTxsFn84MIdHgAssW\n/18KwuwMcqJ4eRhsKBFHAfAw5ShNbvhhEtpXomaFEVkmpcs1ZwYFhnZoqEJc\nKPMJpvuQ5MRSGarlur8uv1Ys9tISLD6xonOw4991UG6nNT0jnUdfLHIcJwgX\nN3phMQFRbk8AYWrG3zYVthRxHWqmwahtO1Ima2czeUjmW9CFzOOjroN62huH\nllXoFeQDILuuBa1EjG9BLlpknC8blXumSJFYwLinREPSi5ZTYvZO+0E5axBY\nW16rPOCvl/cusFBUuxfM7hVNbYFVJ/0Bxek4ISdYBq4yvhB3/xVO0dEZyfFQ\nNgO4OpjJ88k/gJiQKBJStli4nIQDfwKgHltmXO0ITWu9VwSZrXPVlgzGCpV4\nYDU/ja23cYwIk+cIxISUfswN7/fdHc/XHyJUQd1PP8cBBkYeXrt3JDjRlFkh\nvkdX\r\n=jNSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/density":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/touch-target":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2f4711a30.0_1597269194583_0.5120594160670762","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/radio","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b63a01ab18553fb3a47214c84b57ba84e652b652","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2d72f3659.0.tgz","fileCount":42,"integrity":"sha512-1JnEzeos99jYYf+HqbCGdcZd4DEbk5BbBtv5Xqe0yoYO+brrImPqHkfbQ5p+p+oijJ5AF8NPYgU1BTdY16IfFQ==","signatures":[{"sig":"MEUCIQCBNSJJ0atC7JmC1Ii3El1sMPy111NVamYu0nfqmhj06gIgTfroQ1JkNd+1vHEEMigk29w2DH3WCnfrVYiRAmGFoXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaICRA9TVsSAnZWagAA2U4P/A+QfffiXo5pxc4JTuZ8\nDKA6SBS3WxF/IlkvLnEuvYfSVwaZ7i/9zVYUr++25DK7d90Gg2hGIlsnOY0N\noMhu/Gao0+advPI5aDoX2aq4T0FdZfy2DufeNfCJH/oXxiuiPVLtCJarOrwq\nzQdg7UOZUeIDzIBlzlPe1bxde1swM7kdxLQdAy5wTAf1xJBpRSbCK5zGCp49\n2tgtrfx4ZI3YhUDJnxKR355VaKsDZEHjyplleEcgfT/Jy6w5hWYxYDd1cJcA\nD5XxSX7/nBNKLh6Ym0Uneel//tslONDiQXbUN31U2f7Yrqkh88hoEvBhZIXx\nI4WsPwRvQBVxXEiMegzIvpuiSptJXM/FXlmHXBx778Q0+ewEegeCkY8zCGcZ\n1WICSkvmLq0UYSawFFx2Z1YF9Wzr2BjVL6eqX00MiKpbg61jIkq073cBWHtS\nmWuwjq1TT5EYCf8MHlxiJCr5I92ahie99C7uLDTGgIEp4xeUQ01ETy0tyd40\nied+RVhYOyX8qU7MMfrz0HMIVhNjL4YXyopQXh5vzyPXNAx0vo6+42yaNHH3\nPTMl2OBW72QwY9XnkkGv5HXSvi5QfiGODcyypa+qik2N5Afw2prioxazR/xB\nxqD8EYmnUsNytful6BE+i00PVoDkJBBjWTBvkSbue8ok9vE7pA8i0YRpxhqT\nDKiZ\r\n=M2XD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/density":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/touch-target":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2d72f3659.0_1597269640134_0.5946511705670361","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/radio","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c336c37b6b97b778edde12a2c833805b9aec0787","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.1fee70a5e.0.tgz","fileCount":42,"integrity":"sha512-1Tfl5qaTx5kApmfIi3w+e/s6kfC4Ba+bW/1FxHWV/u6ZFFwpkq4L6n8iCU9t1PmirzSDvS8JPk7PpKU7nm0NUA==","signatures":[{"sig":"MEQCICoV30giOssv8s+i46529nseV5b+aicnc6zvLCLeXGE+AiBy0qqNskVRByqtmaYKZylC09VkyZpw0DFVlELbscLHKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsrCRA9TVsSAnZWagAAqZkQAIAT/ilIjQIhAsWfaeZ/\ncTwHsz3C9CyaFZhBlL+chaQ4yb4ulqORTFZBIl7fgDWyXpQhRlIxyBfZZ7w6\noahKsud20jlqABD23Wwz7HQZMsPaB/9qw2ciWtw7ZYyggpmy/UsKy5a3Xf9T\nGQG+7AoGVo2shQ6LO47avqFUbLAowUqn5NdIEXq0JcXecHcQZgy0nrrKMCmw\n7laAavIcMUJZrQaEIyQJfclCQqqQX2hIpcb/xsiwQuIiPkqgelUxaY1CjuSC\n996ng8pITeQbFskQKJRPRUG8oavOy6/84JtigYAG92cIZkXAAce2kpoljPgq\nAbMKLke14N4wwbRLGJq/GLWtvu2yKFjkGvEcxNkEzphE7PwOT5IZYWIH9STE\nDY0QzLxaZ/89F8Dlnt6J5qT0Y0vJGQL1DCVAJVV84OL0k2F2Tdorc4vfh8O7\n/OFymERBQm0IXjiXjqSSmGoaJc8sEey67+O4iJL5eymNfc/Z1q5skn9CjQPd\n2HNoR/WXKQ+NK1FDnPm2nUOEBsWJb49N6YTihvNffO3yKHV4ISQpAIhdPkAi\nvL60EqebywtNpAXkx6i69GJBflVpq7BZeIOxwV/8nEXamwrCNdGpvqF2DkSP\n1oH3byvturTCtupAUfsfrSjwPDgZm8ZEucFv2EBYuMGVMXTRQcPY+CvlrQxi\nWxuq\r\n=TmK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/density":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/touch-target":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.1fee70a5e.0_1597274922678_0.38796774671744894","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/radio","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f830ee334aebf1127d5aa5cb738b81af9988fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.023f3fa34.0.tgz","fileCount":42,"integrity":"sha512-eIBHbTA3aPZFkjG3NSKNpJSWhUz+dQVyO7tC/W4tLSW4acNWRUx5QJbZAXHOoa+JdhXaHD6aO7ToV/SYYaqMnA==","signatures":[{"sig":"MEUCIFK69c8/6p5KKToVWwMS2vF806cko0dBOimdvbimj8/5AiEA+f235AZ62Z0vuMJPJqg7EQfSmgpaxEjDsuXokDpXuaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJN6CRA9TVsSAnZWagAAPd0P/j/xHLoE6VRVgaRBsz6W\ny1EeFYOEcHDUbv/PdTmxLJBFEOuDErLCXlb72i2IlV3rjEKeCCcBgWuOTFJF\nHGDlmT5VOjbK0nh8WiiS0g3PvQAcW8uSD9baWw8jftz2Ep1ZAS/wFNfyDUD3\nI0Ii5585mza55pUXJKFZxSvKXt1SR5zjL7Mqwh4btxoqVoqYDAfGSZADJEeb\nvX06/Bf7GnXa4MuZOeGu2kKTgn9um7kIGOhgB2xk1G2cBCSpbX8evQfnYiqW\nQJDdQxa/H4bzOLGv0NsuQS/JrzO2DVBd20HMgJo7mINscBAEoagkJ4rGr9ry\n+tq+i8Gv46Hllv0ndjnNutpTGPcML45h+xWyisRkKN77ZzmLR6sBd1BmIOwO\n+WkoBI2NrY4TOMWBtnScC7J+RLUL+YK/e4h2fMEBkXPzyxw18cYkEoaPDvjO\n8ddSsNiy9OBy07mcr5jtNIpbjzTNi3j5a0CeRn0Y/JJclGKlurhvT+QZw5SR\noyJLJdM2RGWKuLWFZ84o8OsoCR5unqz6SeJNSn6GIOTJpOiyWnxhTZ62tMv3\nflE+/LQ3mNbVSOkV46z8fRRXGmHWe/zEFpYYOm2NE+dxmdG0Kig4Rf7cv54S\ntrFjErZ9p5ps5VQEfgq1pkbRfHt4oNFf2B7p4asef5NKqW/uqMZgHL+FCdxB\nby3q\r\n=pV23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/density":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/touch-target":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.023f3fa34.0_1597281146126_0.6202375773969142","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/radio","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4300bde914b1edadac7d9493da24a57d84a23d5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":42,"integrity":"sha512-ZHmwk6mmNA+GzGSgTfgHz+1rg9D7xtKlhRrNLZ43mf7PSx/QGK2vWKI9h1JwUj+wUBKe1yP8ludoMrPruKktzw==","signatures":[{"sig":"MEUCIQDFeKmdwhHrzqbvzIGvty35PscD7TSy5oKzAY6YRApsFAIgDjwQ0pBMc20R6grcQt6KglbFoDRg7PIoQwdQLVYdViU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdZCRA9TVsSAnZWagAAlcAP/RQwhf8fB/sXg881YcEk\nOxT3IyTrpKdhlf9ewOvlFiGGlEusFEKcuH84RnAYnPwZOkm4S7qexdb/wj/o\n6NaOdn1/ZoIygKnVyINZmxNcatjcegNMVGiJmTQwwg1nX1tsHDP7ps7KuTvJ\nWjhJkwM/x6UOLFzKGIy+x4KFDRhWZbBfhGeGq0WMPpXQNvLwjxnC8qB8e+C0\nlICL6jEt61m+bTVPfHLOB9lyc/FQbyyW1SSjY8M5KLYJkBZRxzWIJg/x9x6G\nh4+DCVc9dsj6HeTqs7WkMjchg+Ef4RcBddrIeTGTiYheXbgB0c/GOf/1VOpK\n6/QIwDm+JS5RWMo94Dz9KLKdj1nvNKbKo9LSxKrGuVz6C6ds1q7vpaOdpkMP\nY9i4lX3YH6L6f/G9KMjFZ/VIOFgZJN9aNBFxgLnBjR8G0rZGCK+nBvW2wcfH\nG5+diaj+WGVXH6mmOhF59w+aHOXVbCzQcywsp78JCAEKnbdHhFatt/d5H1po\nDiEORvU4mqODO7MoZTLEaFuyq839fZDoFGqC/f2CSGRVvTCzix9Gr0UbHpEt\nB/v++b/PIC13Lt0aPBqTxosWIoC6q+93cUgUAa3H+/tbEmaBo2r29C1la0qs\nmZQzNt4qiTfvyLRobmV56d+Vxvw1Y2oC+SKxRPvkZnO7pI8KWBZNXJrOEEuc\naEPS\r\n=5lbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/density":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/touch-target":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.80f3a9e5d.0_1597282136406_0.20185652752940975","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/radio","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb4938dc5791634325c60ba7ecc7d57ffd24d31","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":42,"integrity":"sha512-pjvJxDJ534tekijHiBXasPqcIvcA+vtlIgO9l//9RLG+lDLY1NJDqEWzyUyV94ooLiFIY9gQAzCa6wvJsPPVZg==","signatures":[{"sig":"MEUCIQDbROkTpC4umEm58i1ycD7+QhXnFvNToDut33hgnfVPSQIgaN8xkrFUSAJYUSWfUOn+W4FUVZ2XAAG8TBQi02d3HGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6oCRA9TVsSAnZWagAAzh8QAKOz4u9HuawxKqf3613x\nJHViKmZb58WEdLnMORfNeopLpJEjc6rPKDOXHszVms/qGN95p5z0IijqPZJi\nmVBSvzso9AGajBIZ2D+HlxEywkuDFxm9dm56lyT0gscaRBjUAqqB7bZID3sk\nspUDQF9OQ3vL50AZbP+P04ul/qzrk0ZCnNxT0zmrXSJVzR3w2czPtVmyMbSe\nET365AxNONNlx5qc201AyQ96a649hPamOwCwozWAg3oBxT4IjO929g1NWouw\nhN2uKCET32gcBBL7Bd9Km+WasIz39NL/hfshK1cbecxeueTeqaD2TfZRuld3\nvFXKAXI205yz6BUVvBU9zXno246aHHHDOVNaI5Mqlsyfsg6qc5mDTvEBUjEm\ndhQqEVIR72PxqOvvk0C5EnLXeXmAHhr/36A6LoD8FLcyBttnFpPS9CCx2HCe\n2t7za86E6qNiwmUXBxo94QZdvssZMWDegNJY25inDYmHv6L58dgI7PzJZAA+\nA5twduB9fkolrADo9QdNplXbQw8e1v5kcfb4o5E6txxIg/4yY8/Zsqz6k09L\nmL0DDHK1NAO5SUndWaoKsWwQopcqlEP/wPUa4tiBt56R4QueGv8LEyK1XDic\nkofEaWWhPoMRMyekLy8fZpjEXrBOMDi5kB/75px9S8chGCpJG+3+EyR0wR3G\nZrBI\r\n=j7uU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/density":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/touch-target":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a1dcfe97c.0_1597308584083_0.5427225736563703","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/radio","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1afe1efbb612b0e6a4aa09522a4eb1a5fa99a651","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.af332d5be.0.tgz","fileCount":42,"integrity":"sha512-auvse0Mu7IIATDbLTU6KInSXbWMoIWoS6f2Qc47X9zIRme8RjEcP915jqUR4oLmqpKeVrUqaKAgin6HrPRxvyw==","signatures":[{"sig":"MEQCIGfMBbss7XJaLHEbGm9EhDvgrsyVgc3QtxiM2o0CuJ6bAiAiq8ziZE30292jid9CLJpW22A4ZTuuuSyDB1gqLsm78w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3oCRA9TVsSAnZWagAA8AYP/j+1MHIzZh2iUuBY37TZ\nFBxi3GcsZC5jPyl80mK1vaozdnLXteM8YT77+YiBVQR5hi1i65/LJEWgh+pM\nlRPbANTE0vBKTweJ7zJE8t61M2h56fsR1OCaFLBAozCV4fpGoPIPatpk1PI8\nBtVY0omh1tIgy4idxxaJr6iwFrZTACQifgBgLQ4KQFDh8v6x85y1D5IgQPDU\nygV0iQv0mucEBCyd4ncNX4T8YraNi2cBGJ4hTU3UipK+6S0fbqmktZN3i/Jk\nYr/ckEyii+y72kd2ZNbZkGvkFMfCiS2XnuFM7NqvMUzehqHIKAEye/JevFzG\nyogmasriPBUAhkjMcaRu0FSCdKt8oYqchwSIFq2LYxhiw9L/3Ou9hN3PVarl\nRqnTEuBs0JFoPGXJzIv5bHlygAmTxeCH6sxoyBFBDdcG7DRhFVLX6g1TlsTk\nU8wDZ/ux0/V8pb49GiWZso3DueYqIkpGHSUHeUg9MzmwamLXmJMPMqITROy7\n6v3xkaQxinefqdQ5hzFRWnpuwAQv1T6+XQooNxNtpxPJgPISSFDVybFzukLI\naIP6rpxywypjTIi5jIHUJjCEilqheEUCMSg5FAweZ+IzP3x9ArQIVhrj3reS\nqTbByArxBanbPuSagx3W7tp5TjwD9iOaNfFqF/5Ve2Ff0DCcu/suJe4pvv17\nvs3b\r\n=PjBy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/density":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/touch-target":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.af332d5be.0_1597353447270_0.18467513600149066","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/radio","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e312ef1094d0779d28f1bc3940e261d4919e0f22","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.7dd4567c4.0.tgz","fileCount":42,"integrity":"sha512-9k+j7GnWqKVqetzTDdu5fxggagy61nBn/I3VdCEWMeA/vq6Am/nyqA98KLjNOq5Ii4xHOC95jNiFAGVKYT0UzQ==","signatures":[{"sig":"MEUCIQDoULUpUCLqql+egMOCItr3XzbdxaHMZjdOiMi/37DtCAIgE8vcFgq17uWOwcdxmxWbCPzDxo8MqCoC1MFOGUUGMQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/4CRA9TVsSAnZWagAAcMkP/0rsWwGoqJhSe/9J/cRk\nrpYhRsw06fGUrz55w1vPrVrQ2uVksKEmpXltDcuYGg5HT4W6LtCpQS9o/w/d\nKxK04YPo24PAPfMtDzuWifSH3II1KZzBZdA1ourm0KABt6pPWgcgZDckvvoo\n5751iRNjA3EbNlzE/h95lZN2c8fKdS+7jSoWd3EkqYKTySO4Jok0lxJxuMFn\nFkvXRP0QAmexq4lHMdXzFyK5z02lCizxXKHaj1S/Qs+I2fj3bFKGxuHkvcWD\nC8oB3ndfxLLnIUEj3uUiZu6M2/Xn5+PxJ5t1YgMvdRx6vTVpARqQQd8hu2Nq\nEQ6+CoZcqEb0MizBB1iqQjlrCw8el6uhXQVanMrSvMWHrXmPVKwd81DQkGmV\ndC7/MIkSITLR1UKo+ivrUlHzknxEWDDTw111NRzhF2PNWfD84SK/XNWujnMJ\nULlQ2Y+JYVxAtCShQYbMV1TX3B7BG3D8gk203FUAez1fvi7CgpgyVDlRgs1Z\ndfidc9R3dboIpV/a5ITMKMwIVY3q2ApOh31m5N2ev6UxhM0l900G+9F9XItM\ncZlJcHA1T2fOME7jY++QwGEufDW8/b51lVLNfvbRngkayRwFHXq9NYrI8Nrj\nIJeemVD5mvgbkgwjCwx5qwNbS1jn1hr9beTrM7aIkuwbkMNi8/SRAQt8alRZ\nhLGV\r\n=ZZCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/density":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/touch-target":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.7dd4567c4.0_1597366263471_0.4017003010753657","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/radio","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44d57512a728aa0eae4990944f322411291183ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ff870005a.0.tgz","fileCount":42,"integrity":"sha512-ewaT/l58KGq64R3OXq1z8QF//xj1L7cMT2/1MtsErCE/xUnd9ooPA3t6bnSaL7iOWrTq+GmmoVRYett0So2GLg==","signatures":[{"sig":"MEYCIQCnV/FPd5Pbs5mofkt166MLRSYcbh6sAEvlm5t9jW1sugIhAOVDmLH3vmMz/brJB18SdL0KwPp+RXBxvQlKFbJytrp8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXgCRA9TVsSAnZWagAA1iAP/3gPkJca7Mf0yxCzClU4\nVEUL1bL+poWlFlw/5Ka6tVcwExX6HqHOYEBHD0Bi46T2vhsJ0cS/6F/NdLMf\n7/yPhpXDnBFMUbTWvA7jTNUv+Z5motLxUvSdgU2AOO5hMHnP2Xh3L8gWTmKE\nSv/IERJ0KIs9ilLKO0anWf0FED4vMLeeTRxoFEo0pOX0JptuStknuWP+ExKA\n318dGrr3+Wmv6cbuDZq+49iHjg28YvEAXvZtK6dEa586VIuimQRJPh1NCrmz\nM2iYgl5qgpcdtE3DZCbyWA6BcVVofJ8LgCCf3APwpGjCVVsS9Tf1AI7Gr5sY\nynOvon3KypeP9CcYFDIkGN/i4r+5swQ2B5iGJwNg+UiNXedXRyIcu8FCwpkI\ndedqj+nJPqSMm1UFkpcXeToyagAVxdmzxjntmLbnlyuxI8o6obqkywZCfzy/\nGrgLMq4TT9caGcyvPkAAovkn1jAFz3aRxT8dXV0c30dlE8AQg5HzJQcw7Tad\ncWaSKy3oeYW0IJGaaH/XLodJ5vO8ej4qUKWhAR4Vv3s7tzE4lVczqOyz8vxE\n+UpyFFRdj27L8ITgEkUyRa8AfDpwvZ7Zzw8JyZVa0ChOm/N0VAtBNijAv5iH\n2p9rr78vNHweN+5M0YjAofKHfrpnjUSfpwoeDOwNb0pEI3s7yFe97fR0gdnq\neh0f\r\n=G8S1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/density":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/touch-target":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ff870005a.0_1597367775177_0.5408668914675019","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/radio","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"413f2331f34a677abc686403d7fb641846c5c07c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.150f427a0.0.tgz","fileCount":42,"integrity":"sha512-AiDfuu8g+WGwj0Ujjtg6GKutDiObUtYzBE3aeSmlVFYViKbhV7qVJ878bEEAY4S5YdcFHm9FCUic/HeYchgAUA==","signatures":[{"sig":"MEUCIQCcyYEZbhQFmZOe8dXTDLeyp5AZzT4JDhIUvTxazTLNpgIgbiPPbL6tkBkqY97hpsKmgs6xN/dTwX9iFipaV7zKXr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpG9CRA9TVsSAnZWagAAQjwP/jCXDbCGOLdmCVxy1wyQ\n8YySQI49CTtm5ldHQpElegT4D24rVDDi8CEV5JVUWrPtNp2zml3L8IDCOO3b\nTNvzCQvWxrkKV5fTRBf/leJ+PlgDpULMIcM65S8Y8T7t7X1CqRHVvpC6qkUu\nWBxPyqHVCeNilnWoN8TlV9z5++m0psmfwTVlT3UYXncUkoBVPnpoZyiE0vzo\nHFFOZrwzM3xTnW2pqgOE2tf39xmIXnXWJeK8JzSTg0WH/bhrvhCfqfHMCHRY\nvTYvcQbRAFwKUm0lIm+tV2cQ7pYYDSUXH1FmMJ3tYZTExEXsndDEn6tdnwwt\nXgVzyX3gm0TOI4NY0YQRe3eDJwZZOEMuJ22UoD0eA1mh9stZG4AGVS/UTwmz\nOAAEz6tbxPZgahZRQGSVF4iEc5kOlGE5Zo8xxFQbmr1/Iw2Dah/uuZBR3q6s\nSaCzoIk+jGv9xqiav0xYPaoKswkpMtsVxnRCN4opvPJlzvjU77+tacuhghUc\nRCeXf2iVjZGRqG2FnoW06QKsswTluQ44bSManaq8mg5rFF5jCn7LktcdT3Iu\nwaPpEKIf1agZezqTSVWWBNeEWWENYvjovtPr5Ctdf/Ykknx9Z40HvL873AI2\ns8Dxof2uDVperWQAcl4W3S6sijCtMg57eltXAnsp/J7wXs9oZpRbuEJqbndg\nHFk7\r\n=nIkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/density":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/touch-target":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.150f427a0.0_1597411772430_0.3215083121596076","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/radio","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00a7442b6e30ec0992e9065d317a70bbfba29c5b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.bcc58290a.0.tgz","fileCount":42,"integrity":"sha512-2tzSOuPTCHTyXEixTxlz/q2hslKnkR5dlDpQKGHEmawAURYAUwZ+iyq3MObfLz0BUnT8fDeCeAOO374OvHmrgg==","signatures":[{"sig":"MEUCIEMjdTgL4EFQ1AZ1anDwJ1jml+0UAH+5Lb+ebrNzgSNiAiEAwZkFvUzSdY7QFGS4pfWhyiuvtkf5klb8k8ROloDBns4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxy5CRA9TVsSAnZWagAAqz0P/RzDG40jhHUKAI3fCrXB\naM5tAqI3mNRropWV+4YRi5BR+zbq13Nz4jDu089z6WpLzmRfuneLuSK9lT5D\npvbhkpIi95jRQOmsYCwTaYjwUoWIR3tLl+uuaxQKhOlAf6Oyxrpg7d8QWuJk\n/5S64aljnVfX9EKOXrPvEBpkPxj2znMk+9WrwgSol/6h2C6gojxfk7FcFGmj\nUSwuMk56pPZSrepkTzchx1VPAZcShVdILX0EqAnovJTdwhVb7WVRRL0Gda0K\ndGx7SPmYDj0eGMnphDn52l3zvDM3hjrsfeoH05pHahQiZc4r2VOvoB459dXs\nD/Hqk+u07487R3tHFuWyldNHtTEayjJtrK2k5RxdImBCoN2W+Z2oHoD38wR7\niXnfduA3Dz8AMlfoqMwz8cz1O8INhlKGBcdQMPZyUHjeU0pZPHAMARWZ0qyR\nGyFoIBMsZ1BgFUczfBp+a+JCCui0m/LvUsyby+9SDsR39q1W1BGIYyEQryzF\nuEEhk0rhxSURA//MpuA6KtuvDCLAvY4QLUDjxh+doiK3C2wlDLO1hK2q/MoA\nnN7q0A9Qux1c13Qa+qsecsf6j3zy76S6cGnHIHP5xJPK7MKyEauqONeQx+3S\nrfxJQsJr4/BQEaZkHuAOSlKqwr3kmKwPH5wr0TTAKFp70ooFIwxRn4ddgBHk\nsR8+\r\n=A4wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/density":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/touch-target":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.bcc58290a.0_1597447352794_0.9130447647729327","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/radio","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f40b4ad99dfac5a08da0a52a5276e8176c8b5632","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4f55400bb.0.tgz","fileCount":42,"integrity":"sha512-0dbMvKUojCdETAyVD9bXr/V9ge8daI9Wz0EWgpwy4vKiD6nnjn7muN7AZ54uW3sqWcpMz8eSZmoyY6PC5fUqgw==","signatures":[{"sig":"MEUCIGTDherEOKowq1M4uwti2cd3gKzZpiOrR0zCf/3y8N2iAiEAtu4P0yFcNVCo/uJ8F4v3eBFgvbDM05tn9nQ/wvmzl7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJ+CRA9TVsSAnZWagAAXAIP/0tpRPC48cwgPTiWJtiz\n5htN0s0ujivy/OuomBIgR2r/TlVG+PIlkagmbMnR5NRSWLxdHTJJdL7YQ82v\nWnGST/d3miYvG0yUX5+EG7OZWdfGIran4tVzz/KlmHd9YsbQUWHUcRRIkZu7\n3omBkMziuQq99E4+sThNTxl3UHmyle0LOl3kESkigD390MKvN9TAeFDBbMpU\n6Cl27abmqZsQ6Yhsre8OwGzJ//57bP6CSpB/moPm0/andF/TaywCYGqNBNv9\nLxtNYo7ssHK6Z4ZyyrCTkxGZoHvoeD5ebxnfAQmtAQiaIRoD8HaGUSkKS4mv\nFk7gR+JX84sz4Gm3fdyxsr/6ZuEN/EmIQFQMEpIpQNzhQVqKTko6x2g5CgxL\nPo26t+CpatJyl4HkugT7pfd27iKhORkFKDqJGzJcvnKbQI1EF6T6Li3CArUW\nWvATJkXxOUR0IrDCYFu8jebPu4aJJsK37vFpvokxilKIV1uyoTAym+C9le11\nA5wRoCN04mpEoF0tDuS0V2mpgcdKT1sfMekfClOVI5p4s+tP0mfxYxYM9QN0\ncYCthsJF4ESk3Eec/+HfxB/FcrEX8hTK+tijDp7Dm5bYf/X3iSCbwM8+ZGUR\n7rqGOrKF9HixRaP1uYiGWpJhM+9nTP95Xgtwi+IKS5NMC0ekg9WApdWz9fms\n7mK1\r\n=LP5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/density":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/touch-target":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4f55400bb.0_1597682301921_0.4878918573186668","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/radio","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aba6aa6b4cb6cf045fc041c1f007acf84d569da","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.000d64815.0.tgz","fileCount":42,"integrity":"sha512-zLxfoqhENsvF7SUHGNfiqbY04cE3b+SNdp0VZ8/axdTQlalpLJNMxCidHA0UJfW+ZOCXdJ57tU7GA05/Z+92UQ==","signatures":[{"sig":"MEQCIAjh5VcQsKEmkCSZUGsBRRzWmWb+vT+QHMNNpOSnVIutAiACq1lCPq/yf7/wuLxlznwC3b2ZRJbawjTAEhd3ZlaS5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriTCRA9TVsSAnZWagAARLQP+wXsIAwPpQjJWIqpMeRG\nHcfDdQ2YuCxjlFM2vKyLlFcgdVhu+BECvTOAmZC5eB3mg8ztz/mFmLp2mWqq\ngMoBZCQ0G4g/W00l+zQW3tkQ74dbTcRorex1H2fGzp24ndgEgvAfbk9BLP/O\nn390p9lSmX3tjG5XLwA97P197nvbDy5OZhMLXACSDz50RGTu890YGNZrRCkn\nw9h6s1dovyY/7aYhrjFaI1R/0xPGJt6XOEbf4SsE/1Lpp0J3gMVeURrOvBbu\n9hMYfj/7JwEteaC9LYX411dbt75oSUbnKOwc+QRMD0IvCVPgDv1bTCHEBExz\n4HNqD33cGJx9gdeL2kMZLZT4FdsdarAsi1m85tIar0O+OGX+kjHb8/Vss/mj\nCanlfvJFvNHbM4LRdR18f8MnLzPeotZaVC1Zu7qTd/b79rK1Kil8u3wU1vk5\n4/1XrAe2M5t8OxklfHOoMeFTCl9nMO/giLF0//WdiorhHKrVNhUhWZ5EAIhA\npUeYogAuXfxKXr4T5LqvWVxdMTCwddj1h+R7l4YyHCNXadzwE5+S1n7YXuK1\nhrK4xdzADIHb1a+Cr/SawbHSDuP/RjfDPg15ge/6sgp2oW/pmQwZxxMq2QFm\nmAyi/ftcTWXS+6KOpgeLN0hQnFP3D6YzYVxaveEBLZeY7jyXtUALAm37udZQ\n5DXo\r\n=1s+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/density":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/touch-target":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.000d64815.0_1597683859349_0.08107808472835831","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/radio","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a306807dc7c9dbdf38cead042bc674c1dc0c2434","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.defa599a8.0.tgz","fileCount":42,"integrity":"sha512-0+q1KWPff3DKhmb41cgPs1K64BHpR0k2Pwm2RD/t8a6Htuz9tJXLh926nNZn+NXKwwoqKqvlaWiqEP9/EEF5lQ==","signatures":[{"sig":"MEUCID9iVetG2h+emRi2QlafG/VPvMCbjJNyBFfOfs3I9GfbAiEAi3K47zaDoJhy/pNmAPMmzhgmuFTChr3a5kaCLXIRI0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOuk6CRA9TVsSAnZWagAA0FYQAKDr+iQ6ZZAedTuKh4ni\nW4ihp37aOBlieOY4N6No4Z9MMqvZ2/TGiT088AdbQKyfgcOTfs45H25gMo/X\nXpLJFoHUu4nqz2YkpVTQSUuK/hsPaTqeUAbmp2xdEQYhBJZ73ejltiRPy+88\nbgcjaPwEJMZ9Fas9s4R72Aoq3ksd4Vh7/AZ5Chtoo2FKZqmZWCVMblQrZ86n\nApjyVnPoV96flqAvpyLFszmcLG/4O2ShbemEZWXz/nwZLosiqDEh90HWECsW\nK0dY+g4O/ZLm3ict3YF7gLkthKe/BiSVcxgPgaf791THJPBZ8ZduvqZmOrG0\n8VYG+XL5sK2s5AJnX3Tc9aeu4G6nNdxJdJu7CAxR0C60EDMXfUxByJn97Jb+\nH+kUTI1JtMHOQWYk0cjIWq7tSNNJGGfMcBIPo4bneOXQA1wcObH1pDFRilCr\nvOjtMKNWghuzHDwZ+0t/ltrGy7SioeFpNEUNrOgz1YvvN8uvdhH2bZHJHAKo\nZ2jPdDIbQpHGldK/5Kd0NA1pQUXA+J6t82c7pWz1bb1S6ybv4r8CIpBZefRg\nWcqA5Wl13ye067pZZl6jB8KzeGP4DzYAJyiY7JBG79/jwzic1i3ufS6MyU9/\nBQVGsogoTtSZJMtUDphHoUTwW/85/klLJQIQu1TEU1PaTJkuqYaIziPL7kVl\nt25j\r\n=nMgM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/density":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/touch-target":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.defa599a8.0_1597696313666_0.6979786131892891","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/radio","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171f82bf1277d7d85f411ee56d5d71188ae3da55","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":42,"integrity":"sha512-6gHHWv1o54nEqIJAa56hWBXfb/ALXs+6iKcdcSsC+koFZf6rqQeqlsCP21bmWcG1tHDadwImSEQA3ruaceK1xg==","signatures":[{"sig":"MEUCIDwubnnBRoMPjGQvliWYrJ/LMFS/9v0m/7mNhlsfuuvRAiEAu5ECyWKi8DXfWz95nZI88eWJ/2AhA3eACstNhtzWKlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/CCRA9TVsSAnZWagAAWz4P/30Q7FKnEDpy7YeF9JUz\nDhQuc2V3NWZsvG7Q0ab4Vyrrx1xfvnAawuMcWklqz/bdEce0S8hiB0VNBc9Y\nsPe1CBHs6g8NJWwK+J1RxwisnfJNaDPQZal5+NXJ1MGtTK0eHqmoSgJ/qP4j\n/FWdJITxhE2pjFw09UD1LRc9K5E3d4DvGT9dEXIzrTfJpHhuMMKCLnIQgqDf\nRhOpSVgygf5Us8D9zPwqD0wkOFAQ99MgxrYPbtnL4ofoxts35BPIzTQiyHNw\n1V3ivUKJG+5lw5nXHvdDC4Sk4AgLCIQ3apRgDFvJFMBNjsizDq2PY54G4a9v\niUbqUfd+1fHattsOCLjTxL8HFEHvdgqIqHrqIMrj9M7xwCOqWTTH9gzOarEK\nTWsxriwjdN3ilHod+O4a192PWWLjk5ikKYRiWQiL26sc75MQnqyBjcf307Si\n+SZSQ4TZplqmV45YYTggc2KFKCQvMaD1U+ui3N8qZBsm4ySJGtTdcZheghv1\nG66pSuEMAx2jfJ7LcfnX30D0lgm0EgWjB2JUemhqCL1rGJQdGuNfonRjRGbx\nVe43PgAzqbJ7zk3ofFtPLmtCFIL31D+8Xe02zGjQIHAzeKpq8BVrHYvbkJME\nuJCBxRtv0J1GdL+VMstUzt8kT44NCXsMIoLq4kDFxD8UoCqy1A6isXJN3XRH\nrhqE\r\n=VQbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/density":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/touch-target":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.66b8ed7e6.0_1597775809838_0.7250859222959742","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/radio","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba6a194398482410515927e8b5f5b639fa3ff40a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e2b1033df.0.tgz","fileCount":42,"integrity":"sha512-vLjBfnLGhekp7A7P5P3D4sh11cdReqC36k2irAg9bmW+TXOw+uew3sA/5OUWPI9Wfj+De4lQfPDU83xH9GIqPw==","signatures":[{"sig":"MEYCIQDW5odeZ4ZOWhIdafyj7A7PSa4j+DfIOZVnj1q5GZShoAIhAPD0c8K0wg/7IV+qOnKtwcZ9ahmArjMWQ29h9Z7GeVJ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJzCRA9TVsSAnZWagAA9WsP/iJl2tUCZ8jdKLVBeru8\nsuF1U1H+Zmv8F31z4H6FhKfk8DDxGqJLG5bvjYMLm9Nciib+kxRlLGuR9emO\nyDgdUxusvtWUKsBLXN+PPRKXWf1ufjP1JdsbLqgGDVyp11yuZrZse6+hiXIC\n9WlrrubGKvnpGWgtXQAkyMkvCh2cXbVn/4GJl0IA+b8md62yDBM8Y/z1dcMJ\nKK6/lN5ZTsT4cU8opuSGxskiL838/JAfNjv8p6tu6uOrZbIQ5nS0D+0yV4x2\nTc/c/Umd2bh7bubwBfhTxQyHBnhnaXmBf5ea/Rp8HOsjmjjdP75TV6pxKgre\nrdAOudXaswuXai4qXIwSwY1Y5u3p1sGZYVWF1mqdGJMT4K5055LDYQYNZ4Aq\nuGo46NJLo5Krn7C9nHqQgDcJAkSpZN0kCX4hK+e1Vv/7rP6frnk65b1SjXSX\npF9okjlkPmjaNBROuNVsMrjVbS5hA388Y1jONeba7HPLJzF0GItIGEUPv7FK\nEVHbn+JLq1p1a/VOroZUHIKH0e0BgXq0gWp2e8TdtDA2zHihCYfR55LTl+HG\nLVmCmFu2rZzpkpqvn7scJ3e+vywPXBgha1Yy24D1opV+J4C5cJ1/m+uawXI5\nQ1vnZoyLLBfevbCVT1VRsPfzbt+SXvqOdAuEt0eo+CHs2811+EQEI+tA6qhc\nLP1i\r\n=l0H0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/density":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/touch-target":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e2b1033df.0_1597862514657_0.10504832408774556","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/radio","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d7f17680a6746b2b814e8b50eeb19cf0385c87a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":42,"integrity":"sha512-zMowdUQKYGhEc75kB7BqkYoGobGMZNENCtkSugSJMwJI1DoQg3Dpv59KKiM2JjCIL1iIytWG5xKInHUcj5EQbg==","signatures":[{"sig":"MEQCIC31JikrWIb37hO6jOunv2Ddu8W2ucqDJoX4zE2zM3HRAiA7LdbgQE+8D/+oMwC45QXA1qaJsYMaeN8EPJJxEUBwUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxNCRA9TVsSAnZWagAAh/4P/1s+hQullEaEm8kQHFjy\n6LObUFWFqoSSFHE216MOg6Qlu/ugdVc86maK4A9LY1fmZTCrQMSoikqTGtco\n1voWXcZ/scU+3byHH8bJOdJnEFU+6k7Wpu+HvOiDSVmNsSJZ10sHlDqUDaNA\npEDdRDDsMlKNUOeQZytoEoT3ExsRbgJUObje9wmqbnzamV+ldb3/iW4fzuwx\ntefNqwEApwwy77SgRZINElU44O6TymvEci7AqqTzi+A6A7v9i+TOQRxRQDEt\nX1xsg7/aFOJXICqUUU1TOGqK1dGne6QmWl5TUrwrgiCKg/xykOfM1jGqDh+C\nFWnFvogAZFob2piGqEbbbAmBZABkSLQn9wqNxSWzCRPklhtx1tHFnwWU2FPD\nZUzW8lIXweOjNhy9sCzJQ/RscIrQX8afsMXMtuHnYRNy2KyvHUhxK889K2J8\nJ25Xaq3o7PhJ6taA/NV8/YVX9IzJeS4y1i5wgTw2n5suK1GveWRcatXCgoXB\naF6m96m21B2oT7pxKEhdHuS4SUoadulQojehPL6Q6GB2iO1tSe/1aeEVUhD4\nHMEQD5apq1MUa6zAycLC48KDpWbYBRWIeTpCBDM4UTEul9n4NR/ix4p6LA+L\nydS3wRZEM3nQq9+EgoAy0JzOjfaWW+YAS6jXXne7SULH/T1W/6S0IUKAK+Do\ncGkt\r\n=NWNZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/density":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/touch-target":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2e8c3dd2e.0_1597865036599_0.8053662758508158","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/radio","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d28fc7299640d8d6ae394551ef67b521648fd93","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":42,"integrity":"sha512-w6rwUKenicj9FVTFjdQ4lWQjKU8Oi1fygJpJgPAXAjAkS2U+z5Hez/mAUrfqoHbgEBTZvIodYLwY/UYXtLtLEA==","signatures":[{"sig":"MEYCIQCOFQvn96dmMWu6hg4jYWkUl7XvQzv2oQwLhiLBCEfqWwIhAMGugJiDztaF2H7V6d1TBooxXrVkspMJdrdmxB/43Ho3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXOCRA9TVsSAnZWagAA5o0P/2IVNKEX8b5tgwfBEjjI\n3230pr9KYubo84xaMD8w7tU2fH8vvhMQ7cZdIsBSqoy36dnTzcEFhFP0LPQE\nDdtEtU0EUyBt5bMNnwnyO04NuGelYTvE8CH+7tCzn1CAqynDaNSuTKDptI0M\nsn48N/J4DSwgoIVi+1ZdV1PzONGaZXwGvM+hU5AhNzgv7sxL+xRHAVeYQEoJ\nUS0kwxAdJ9jxZjr9nu2rNDJSKLScr2lHmTFb9+XTffYhE2KAgIuYK94PqP7l\nG7+w0+Y637GQsHUUCE65VIBmb/790ki79nfQnkj0l/WTZZjoHGWf/tNkhBwk\n4IvHTLkaUrk8NHCyBlH5j/2XAq7mJbmNiz53CBXXgTi1PAJRsiCmsFPYJ/11\nGylufsSwT1sxgvIdJmB9O3OkZkPWDBOd4D+FPwy92+MYlnVFfhXq8SD4opCW\n/urShS0eZKRjdAiPvUYLTWXA573jdv0pU3lAjDbU6LfnisX9yPYH9FOy2yTJ\naPL6vgYYU5eLyJb/aMfM0Ye2q5EFXAk/idRQJ15q5iJ8zCVayiKTBEi+pNlx\nToC6HN1piHLaLuHU3xNvQmZ7ADWcvFRxL4tFphB/Q0DM38wL4Ljb7ONLOFS1\nphWcfpseEa9ctLAu5av8/Z+hJKvfiwX/Yg0lHs/qGvDLujA29oT2JeYNQGA8\nR6b2\r\n=bGca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/density":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/touch-target":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b2e80a5d9.0_1597875662238_0.38442801270337834","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/radio","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49624749071d261681aa48455c2cb7f7fc02ab3a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ff88df637.0.tgz","fileCount":42,"integrity":"sha512-CBGlL7FInuLFncjMbaFdj3DRF0sWEroBVGGobZqIgruWz7n3m1QfDWu72wKFzYLMPv2SHDnb5338dOybzOK+Gw==","signatures":[{"sig":"MEUCIQDG/7teGt1Z7IL9C/zQtAYpD2MEQGwwRCbmMcmV0gjtYQIgF8AmRlOm2Q96hsXbyL/sF7lAboydap002dhQteSPnW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiaCRA9TVsSAnZWagAAt3sQAIbxX3yeO/ltrRH5zW64\n/+kZPhL+/ylqD1h/NV+71aX0g6l6oN+FE3VBqryb1sH3DPhDDsepQmtL/GJY\nhekgO8GtE4HRHm362fFM0CD2DwRw4Fw2OY16DBrga/Sz7N7yMD0qqYGQ+TJH\nXf62CHEfyfxFkQlCSehMR78FEPV2po2vc7cF4h9u3Bf6DZ7GWo/X0N8SwnEo\n9Sp0ADi1ufhah9bDMxg3XjzBotlxWByPaD7n+aYJsPc9Wx1hZRp17D9lNI2P\nhRpzjElvb6oM6IThQIx4Jw/l1tqP3R0ds3pD4A0njQxBeCPyNfE7DF3t5bXq\nLVDF2/kJPP5PZRsZIIPn3UAMOftEii5FloFoELDGdkDocMe9VrgV4wuBkwKZ\nMW2Gpr/RQXLFtIEjtUrl5/xcMNL/bt8hHzJTvjMSTRxDtMFQ4SJuejM/2qVM\n8uyQlg0CsSGC98GtscGuORHEo8PNRl7H00yIsLbTzqqM3XQVo3ecq/USbLsN\nQtXGMVIRVv4FoYAn+W1wN8rw5x00FwcGHY3mIikQj3feJwtYENtLboqXRVjz\n5oAmlfDTbuTtwyYtZ7iZimfXPQ+16wbxXaG3FelXFzFRhp2LLFYu2L4SuNTy\nB3kPny3AJDY4Qv6OlbPSgLJiDIRPaLlnY3z9eb9mIgXZ5Q/ETjkCcITuz6NN\nVsdg\r\n=pL2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/density":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/touch-target":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ff88df637.0_1597876378508_0.0952192472170088","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/radio","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4bcd88c95ed0a9f38e69979cb50408381653581","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.32fb314cd.0.tgz","fileCount":42,"integrity":"sha512-CnKHZ/0T2NHSponzmyqLisPMH3cQ2TntQVTt8fz9smXF7LPgEmNGwexoLuKKki0JCEQ0yeKkfS68365wFQPy1A==","signatures":[{"sig":"MEQCIDXxLadF/M3cKlmCl2tD4s/6Jflwr0KP0qzFFPde92ucAiAY18VxmT4sU/hsmEIaHr0F+FFwjEcHBNFa8s9s8JOkvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJ0CRA9TVsSAnZWagAAdMQP/31PrDmYfNQzaOeRtuUt\n+YGbhNo1KJ3woeBZyWg0P0uZ3oCB6Fmx3b94FYmgC6rCG8h3ZIdpmU2SVCE9\nk5JFAgtkSSOeQ3wR4Uike/6RAs39D8tzVzFjg7jYVpm5rodnuR7+Nj9XXbq6\njqn8AJEbLmiSSYZTtAM76Y3C5Nn5zPyac/VkkxCC1/eTjUdOSx7pAUa8l/HL\niETTBzZd5d+tfHypcktXz8t7e2CN9kRfffvDBWWScek2HpSC9kc2bJpWNwBN\nphWrglw9s0mIU5yCm+Ypy2iINKNPIj3TLeIR1hjYIbp79i03VWFUWvpTgjbt\nO0Td48uaC+A4R+IipxmRmw97MI+tUv3diQ8OtArS6O9+fpZrE5QYhL7pfdoq\nqJznCqJ0dgBWNY/8VgGj8j8F1NMgMnDl7loiiRmgKWeO9v04Vm6ZdHPAq6Xl\nmBbB+CQfdezdPPNpbnfb1mZWB0sUi4qzRMD2BQdQ8vYtjKBsFDHrd0vEFeds\nllD2O2M4Wqhmh/G5tGLOMuJvTg5O+IOmelaAx2TEMyFPeowQnyZEPHVipcX8\nZjAz6rNwyR4hxF0e8Rk+iQBcVzVCACCSeIW7LdisRqtzEAQevXqBFKWPC46h\nC8fWGExGxHprfVcKr/NGcXI0KvCcj2WJPCPFgmVbk1zeCxJjFSMANZlG4UrL\nds0C\r\n=xCf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/density":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/touch-target":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.32fb314cd.0_1597919859807_0.8035598351323678","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/radio","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c881f225d4f239323bdf90550953ba573a5cced","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.546277d32.0.tgz","fileCount":42,"integrity":"sha512-9RORn7KxlnNqQn72hAa/m/O7aQB1Bdu6doeRWaCWph2Pm+cED2UKccx1JN3tXH7LAnpjX1quzVcc/A2N0XiARA==","signatures":[{"sig":"MEYCIQDYwFeHJlkh5Ad8ZCsil7RoY4qEQtk3j+nemQDMgbR53wIhAILyNM6EmF3EgwGEI8wukuzrxRaZLiG/5uLqH4+me7pk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgfCRA9TVsSAnZWagAAteEP/3gpKPG6md44HH4RVWic\nOmdzqcBZybtMSifp5uXGDy5sb99mXZf3CkTShD7gSzUYzGYyvs4F4XVXc5Q1\nUKQUhN8dqUTbu8yddu4fmJ9+WjoNje3I+xMQuKbGBAhHRROJl0g2dORNICZh\nmuvy4e1II/RctDV33GONQooiS3SknVb/ABJQxkM4E0iPTLaUQpjQ4Me180dr\nGfIRqRpWQTaD/Xfh68XhtYNxbz5mQlqpT+icLfTfiDtH9Z+yVCvmL0T6VZo1\n0CXDccAi1k3ti/5/fLHxCD04QYEubtflWVW7rBLZaUZ249GTlou3FfDSkUmY\nvqkkIfVNsUTeu2dgsoaJMwnDXLL8IH/rmgXo6J5qQ1ol2hpLzmdFKwxA0iaA\nln0AolqMiDcDJKY/gZwms4SMli/G2o5e3KPKOZ6qy6LBLjuSMO2Y4tMVQUsQ\nRobvkm6Ml/5DEssoQWHjEUGpnOq5QN0ekRK/HtG5p/gGbTOQbKb7Zpofk5IC\nBjp5McOdfjIunargZQlDq1aMjQb+L3YXoyTJxmAJ0n7IWMl1kThf1z81k36E\nDgOGJ64FfjMBt4HA8rL7ZYReOrRM/+LYtDhv2Gfwteea36wNtNFUoYj6UqVo\nDdy2HYBTklorMERGlsviXUXn2/WpMSuaUJ4QmX+xGYO867ftLYqEl60ZVNhX\nRKyt\r\n=c5O4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/density":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/touch-target":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.546277d32.0_1597941791213_0.8305238282374232","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/radio","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ca3470b0dcf241dcf7d1d7599df28a92e5ab1d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.da72839f4.0.tgz","fileCount":42,"integrity":"sha512-hgBXfryfQfQ8J70tZymjk+/eJ+o3iKHEHpv9J7tBfWzqnXxPN9xNfpJCQR0aVgInbbPrByS3R3YsQ/vpbY3GJA==","signatures":[{"sig":"MEYCIQDeLlxrEe19jJjtd6/P1AErEnZil6j2SEyl3rokRLA5XQIhAMTgkyL1w2kU8mmB/bLB4Rgd1wsJybnS2i3IMMU+1HFf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProbCRA9TVsSAnZWagAA7RYP/0QrTmno6HnivO1w90Ij\nFClIXGcDhBENQQuYc2vMo4hacE3y0+RV+bnW1Cv025/3oEEcDtjftwYoucDQ\n/ISnqM+UxUH0jIPT6WtvLjjq5yJTOGrmo6Fzq8II70Za/G3xg+1C3YXZHbup\nYE/CeSTqsDRMgRZW8hQhfs0qlNxuAiy2GhW1mY7L3OkBXLSLB78Mp37RZIm7\nWMOL0yigNdsMzzhhObpCfc6mid/Rh+d7UVR2Zeg2r8Ha8M2ik2zaiIYnTGxI\ntD1mk4g3B7hhifDBord/qV5avedlg3ZVeM6YrJJtyujbBodclg8fMFlLE1B9\n3WA5NBHEGNhfBpvYhq/WxZMdfdAN9VItbol5PWuM6qZFsVnHF742e3J7RuzS\nGKVLu/6Ta3TBv7i4LXErbuDJ8a+DNzZcHLv9q36p4aWFFRnqpTbzz6oJWJUG\nIe1L618t4E3gFFynh7L0Rz1FUEde5bIsckj84MNQjySniRzUTjfBS9xchtE1\nbYvmMHGrVOZO/2DaUiqb1K87/AbCWMWmlNLdSoJG4r8p3LXwORlKF3+Y8CnL\nrAIB4706SF8nsCDYbhtAGgj/v/BTeMxPLmfwjbEYNXs6/oByXA5xCVQ7rggv\nXp9/K8cxxr3ChlAyUXfGAThS8CogjMLeS51ooYZFtlNtdV7P3LEI7yo3RjSA\nZVrB\r\n=Ni2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/density":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/touch-target":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.da72839f4.0_1597946394932_0.6397093536227634","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/radio","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f772b7a2c4238cb5e43d420d02a610a7901102de","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.346069ccb.0.tgz","fileCount":42,"integrity":"sha512-ZS33AI1UduPcHkGUg3MvFIo6Z0Rmf2lov9HIf2j2qMLHMss3Y1LLwLQSA3gcVExoMS6viqxHe+d8vFB+6jgdOA==","signatures":[{"sig":"MEUCIFf60uKMKDDvk94ex0+ayGTYz5HHbEhGw8atgMWJjNoAAiEAgm8ZG6nNIeFBr+xtRRMdzN8kchszHflBLwsl749tRPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5sCRA9TVsSAnZWagAAoAMP/RcHfk1GpCw+T+iSSwdp\nIs/u0JKIVU0UpdCDHBol+c5aQujfQGYdk9JPmPbsyhfx7YIUPeE8N01TyNB8\n0k2+zkTXhabJsMci0O1vcoVEKyNBw5SS4VF5QZpW+h9Q3xL3gCpixaf4wPjo\nZfIIq2jKJbPsCZzEWRyIWUZpZNEU7B8nrOtadfqv8PmFPfh3zzI0TBbrbGGC\nTMRUlwKca1iUoPXiYh9ZrsT4eGGMaJfm2SQqEU98EFYipfveG0qTq2XKGvyC\nMiB3vrXECrdIsy5xyxEJ0LZIcphu9Eu3Odj7PoGOsDgaW8/cVNSjr2Eil/Zg\nxpu6Fo08/vsrzXVoXCfYpJpXPq+HVT/ZuA4+d9SsvP7T8Cdz4PmPEKaR85dK\nYVjVgJE21pNso8Rt6quis9DYy10n5x4MqQLYG7Fh1VISeoOP/XPDfHU1hAxx\noq8d+K5DogPKpupuzCOBf8+pqQ0VQhxO/HRkSCCW2SDRR0Z3DtHeunMW/gY0\ngA5qhXOwFLnPAFidZazgEh1QMg/YzuperQvdiZJxplnMD1SlOl9lGjNBwRx2\n3hKmdHOEokjAw+uC1sTNk3QDf2ndJCr03Fvz8zmTzXbvQDQhl15UX874n0R/\nyI8sZzl4XcM2m1InC5kYC/r3C+nXfZ9mfe4DRPr2vj5LRUp6Eg5vjyeA0+H0\n+FMU\r\n=gT8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/density":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/touch-target":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.346069ccb.0_1597947500077_0.5468299528068308","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/radio","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3973d767e17a64048a75b95b009d46ef259d5fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e27c5802f.0.tgz","fileCount":42,"integrity":"sha512-WG9skaW8JjRXnA7s67QeFcgojxXPQe3iUPnJNG0sb4WaFpk3QC9BGoJ4N+EvN7eGYW7uAhK3uecVPVZhZU+xIA==","signatures":[{"sig":"MEUCICPNV1MQBDi0hmiLLShZyoJnIjtwntRXAXhlDODevrzuAiEA88xoig+Dxi2vjh0LiLXXzHY3q5elT2tWXpBgZffvDs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvBCRA9TVsSAnZWagAAVTcQAIcYcFR1EqS8qNcVCTLF\n9R5w0i1c2FbGXPh8tWQ3crneOUtgRSDte218JEI+F2HN9f0fK899WpUmBDVI\nuLNKHVjFvCoEx8Mvy7gzlWKMezA9DCA2RC62/TAMugdyQc/MDUSJKv1dlC0F\nLGOnpv9FGGvPS7iXzVksKQC5TZYZwwY66YpDhEMfvWdBTf1Xh+yMBNHGENl0\nBa5FOmKlH+HA3kZPdOyA2SbMBm1SGx2bjnZbQhX8alEncZV2KdMydWU3ZwuY\noXSiMQA6523Sl0O2PreC1oRk+9znpOYb/tK2cO66NUCceVTwqg0pyNLZjlVW\nkCeimfcSyxKbkKpYyfs9O62B66B0ziwr5Cml4K91rh4zGK2RdlB/eEHV/n28\nZRQJjQJe/Y0MQkNITU9R2U2jvvD0oQtj0yowJST1xB/Pg+OEkFx5t3a3R1ex\nU6TVmEJ4yr4+SBVfwkeL46+vSiNwNdCcRvbXWvz7q4t/7kGGU0dm6v+XBjQZ\nn3d9FQAmm6OKYpSmSNl4GXGvWNQTCULjxr/bcAURi4B85eQPxF7/h2zJwWld\nfQn8H9tMJWhnVeQcY3OR+jaVGEGqfLvszrW1mPc0NVueuFa/naDgi7jPn7BZ\nhqBcgOzqHmW9yruw8wSdyq1XySxZqKkteBuFnyPrtx2UPEKZwhyXDxflTqRs\nhMrE\r\n=CwmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/density":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/touch-target":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e27c5802f.0_1597950912590_0.4551212338567643","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/radio","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2599513f99b99eefce516676e50e79910c1cb4a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.f4532b9c8.0.tgz","fileCount":42,"integrity":"sha512-zVvIWcOXa8SU3ghIdOiDhixykZomj1CzsYDv/1E7YI6YX8dBOH0HbkR9+6IqpOPhqA4EZIH0QmFehDQzQsMqmw==","signatures":[{"sig":"MEUCIQDVmDZSzLcBrpCj5YDaZzGPnFj5gNDJui64S+xf3zGKuAIgeL1Ma9I2ag0dt2JUClBx1EOlIas0G05Jb1iDQQQRjSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtW8CRA9TVsSAnZWagAAifYQAKUWr7Te0skVOZRVzRoH\nTn6aEx9j/VqjrbD/gGNJsm1lS3tgb3i1zd/DSmvLBawvUnczHIZQ4bYJebFn\nnzW9l8cyRiwMEwo6NFyskqn/O8peXLRMgO3EUOaCz/BE7BqMTQeOsfmUQtVM\n7ddt5YCEzB+CD8u7FlgO+hA7l7CNzN3HW0/0wtqi2OT+HnofFAl8srVu52f7\nxykU5e6sqeXlPyg+xQZPltWgd3eC0cJ1QktyJ0aeDSx9C00XmwCdniuHzcBs\nHzf+TmzrrWTvjrcGkeclvShR516uCByjN7fr7E787m5oYJnX3nGf0YAyuscB\nhHeyUFzE3E0qvduuAgV/9YGgAqVVFGG/2vQSlh36PQtlm9VkopbihYQ4v8u/\nD5DI6ZGq2yUHVMH7ZU+XYW+0wqA+2HQ2ShfuF7nV6vnBLfukSFUQXOdP4xDq\n4h/d4Ts3P3xUeci73jZNOsjTOwFe65Ru93O15zyE9W7Pvk45uY2+gVsuznci\nF7wvgQ5362UZvJvaRoXD7KtYXlCbPjGcNI2y0Q2ThSZQ6LWRfyFXJ5jupkV9\nrRioI6tqyvg9QWEJeo4Avy7WhSNwJOWujj9dkGfr/xIXodHeaTDRiU2+LmNF\nKOIsBflLrrK7oLRIm+AJ2zd3YexOlUcQfLrf1AAwly1CsjkzQncf4vz1pezh\nj7Uq\r\n=JQQp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/density":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/touch-target":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.f4532b9c8.0_1597953467441_0.2782073916539549","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/radio","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ece4e9f497fea7fd372900800dd070e518d396","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":42,"integrity":"sha512-gnGsIn2iWAW5fNOdDEX5a2I/aZipKziqCFnMPFpYJVPjKZy2XvRcpgROzuHLZm8wIlc9SJryVHn8oIFYqysbZQ==","signatures":[{"sig":"MEUCICoSS9gOOv0ZvFVko0PkyqK0xtxl62U+uKoJBm+1lByIAiEA29mpv1Tw/EFcuemQrETta4XriuePRfaI0wkQgoyGUWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXTCRA9TVsSAnZWagAAZecQAJuoFgIfRMHUfCz3v1Ru\n7PxVyW9f4BYTsNTRysK9RMBUzBwvrC/sL//XgRnM3sl2r0JGUP2w9Vccy5ZO\nCqXyC3uk/BSy8EcJotdfnwLNyTrLQ8xVFVOXuiwsDx+pfpaLvHgXdhtygeFa\nu4e3vKo6VBak8aPJMMuCKLK9bPyEGEe17FhYw52wePjpvtDg3kVh/JMgdmCc\nX2ghzNYExYZPZr7WH5lzTlkKdLLEfcrwGO7hg+Yn7g1KyJkJKKqrK0xJ2je8\nM2ZGdOIcV47QbPmNtL927d5BoTJydlh3KvI7YD4cTHnl2BBoRzZz+zaIgfb7\nnN1T/Os0hjx4z13wqyKwtcG7RYqaFpGv9UYIG+vJPBlVuAphtZRFSIKxIAQU\nc70NMsR+NkfFnBhhBYPoOd+nTLw78YzpqKEgSvoCPdTrLdwXj1h9Ehir8exa\nOfbDLWC5A92ISHQYXLimtpV9572CZTeoklKVjP1svc04YBaYgdHAoRW1RPFD\nZhUp1GnwHO/vauirAQb/6QlMqhQL0Is3K9+W9HwHVOyzgnF9wxqB3I9q2hNk\n5n2S06neJUKALU4cK9uUTrg+ZvxA1KBZC1aB6ufGPOTNsSb33OF3EkCMF//+\ncSu5GuUQziTfh96VsJknVw950oi34IWLTazc2SPdo5tlC5YG4v9ub1Yw3laE\nfPnP\r\n=dzCv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/density":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/touch-target":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fbf73c2a6.0_1597957586713_0.8669382718635572","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/radio","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02598797fef580fda0355e09914ae5d754b1564a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.cf800124f.0.tgz","fileCount":42,"integrity":"sha512-hq6/V09EoJ+UjXSzhrl8TM360cukEVwMIMW3My+Rhqfv1q40blUKWRl/giSr+g5WhOK5e72fk/Q4ccG1i14GfA==","signatures":[{"sig":"MEQCIGobtx+jYz5kfTTJ6kFm8hCWX+LrjFmJiUKECOQEa2LxAiArAw0otmrnGQF/4wVsQGzisG7oiXVBjpC6OGrQh647iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCnCRA9TVsSAnZWagAAc3UQAJXK+Bp6UyCARYtcvWwh\nX5iTraFRVeHITob39u2d05/AsvzY7Rtzd6/9zM9OOrS8yP2ptJkZNmJaS9xF\nOaN7KPbwmWcWY7tsNGldao0BGOdRA2ss0QL5EZ88h4xtH726QCrX/rS8JxCK\n3QcbupPdt6uSF0bAyXYO9OlFD2W1/uOP25D9HonIjsZKOKmjQH9uZbo53zan\nXgp4UEbBYteEUIr73TswZwj9b4cDyRglHkmqibaOL9KGAMchVkO0x7ROBRTb\nQOh+55D8BlZv7mjkig2GigJu6G5wAuiHs0HiDWBXFI7iyjera77mhzXTEKii\n98q7l1jMPRNa89DmQU6QkXIJvNYLPB48+KWzz8TKafu3seTks7Tnu4y14bfK\nic5dcFillgE1+h1OUn/K5Wb/nVNN4iF240tQvbhiHyB1HAK2zQPC/73uXS5e\nrWnxQz9/aX4gobR9FMSLV1ORrrJO6le6ecUPISttb9bleSvlWx/LhTe7681w\nE9iLEaK+otxuPsGjiYwQM8n1ulkPwXj5sC2A5M33mmBeWit6FfPHSGd0152b\nshO8b/vZGr3tG1SbYXCkeQBegrT3dpk/33Fb7emExSg03eYdASY7w56K/Zql\nASVwoMeRrODlT1gFw95y6kyJWbsd7zLsqXg3WxK8i9moHpPED08b1B+vXne6\navv+\r\n=W59q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/density":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/touch-target":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.cf800124f.0_1597960358926_0.36558109881945033","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/radio","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4816ca70c747fd30f4c92952bfe59c251709dbb5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.95e4eeea7.0.tgz","fileCount":42,"integrity":"sha512-pS+sOUVcOGipoke/U8bYQikq/kbfdWbfwKDLdbUWamjqfoGxjliAosugJbjAcZ+w70MiJsOcF2R4IIznGQEDLA==","signatures":[{"sig":"MEQCIAC1xQWYi30GZoAUZqsITdT76T06NDPw/g8cXYV33QKLAiAN2rSUwHAUDfdDMm75A39yMBjqg6JDfCzlPcNWWtzpGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwc3CRA9TVsSAnZWagAApdwQAIeNRSDLffvECZ6rDcX9\n3hSZkw3XAhoAjNzz1zZJUeyCdk2iqJROUtvhITlz4vBs6zyLiNyuANSa8Lyt\nOObmJpG1b2DD26FkvrxtgLLfVUTfmO3KUcx6HMF+RhoXBJ8GVbWYf/Qy9xTJ\nqAxk7qvyV5KXQvPuVT+2bsofWM5+Ca3/9B7akyLJRSXZO24IFhn9XKba6y9j\nz/1lppiU6pz9S0KRJ/09VdxP7zoQfQN5MBrcl70s5H1vzqPVJcfDSgHp3PQy\nduzVESlgSq/492rfN23zt8Pw6RGcq1vGblKPMAzGbGrAin0dCj4eZ8bz4NC2\n/gq6ZdzUUN1cs/1Qg9Ds0XeKXiQOv5q6xrYSU8f5f5lbrVS4WnwvIArCIwu2\nB69YtjZeIfzmAiYCEaxzJZpDafye+f+JQCNCv26q6JT07Ilu3Ox1bQ3n5MGn\nvAeptyopRTQ7b+EaKSTVrkbMaULqJLPQxQl1Dl03u2b2HliVlqlVQ5vpdDz2\nw5xSoWsoNBAVe7SkSK2LM09a3aqUcQh5vwGuNWk+GiPoYwPVaBlhPQZTq6QM\naFuGIfsPO9+5MUUjaroGyNm/u4Ov8k5Nj3AAoS1aOlRwyOO1iDz9lklAqVKV\n9NH4oW2mxPMBupqDwLgogXcFDAYZjjLukavnXs20Y9hyAW8GGOqlDNfMbKRK\nbINK\r\n=djOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/density":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/touch-target":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.95e4eeea7.0_1597966135425_0.4726724315456139","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/radio","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61b5cbdc3e0f4dd0b655a1bb64d20d682e0d768b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.91ab1c62a.0.tgz","fileCount":42,"integrity":"sha512-K1qcF60C8FD8bi4RQJdaFr7iUfesmYiq972BDKHcE/MbJWoSs9oeJ7+BbakfpNPTetF4gih1K86gcYB4wyViIw==","signatures":[{"sig":"MEUCIAGcw2pnvt71ASe1M9onN4vZXDGX1MTiyg9oQ6EpzyoOAiEAuWh9IvvZL2IrE0LyvzzveZtX2AL2YZHQz+lYm7ozxtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+Q1CRA9TVsSAnZWagAA4rUP/1bJrLZnRJSSzKYukSwd\nQSoT770wHDZF4/uVjX1Ue0RceHbVj2iDcY/agG4DvKkHUvBLlCXmpNILDQCb\nO9cCbJpJuIj9TT0+7Pvhg6tJdsK4YDpC1jxYZMpAVgbzzMcrd19iPBP13p8P\nqDzxUG6CrTFZRXCwcULESENNmfOM5jVBURn0KjGiM6YKX+VBZJn2v0fZClI3\ntPaPBrJ2rJlrGzb1q6NQVNiE2t/0XIGjEQmtUGUrtTwiyf5gOAP1K6mHcuxb\nzRAj9nO7cmkpXyfvUiLJI5Z66ikgcehtaKXynQe2r+ueB0ff+adlZuuSDQqw\nXSK/YEQWuSQQvjcnoG4c3fHYr6+AYch12LqCjPhMMjpo8d96C/ec1yEORiUc\nqBURWL+Ao0bHA17Om2i6kizyImR4fWk4I7aZ5w+tN/OF9SOz7PpwmiNJ6F4e\nLVcUYUgLdhtj1YvKCKEuASQYnrP+9T7CNtgeu8cqmCh9Vw9N8OmuWN2RCyeP\nJwCoVPPxr6MRru9vWXeIxEQt0PJUx4DBqi9Qvxb49HUuyJLmSQ1OSND8vP6I\nqigDQmKQQEKhucqcw4ZY4KLv8w9i+2CEoo5rIw5IvPjkO0chomH9dZQGr6tx\nVxd79c4gUg43KQdTCAKYUacdJIgvQEIhHNWTlDyhdHfv6HhdSDz2rtVdu773\n5MGT\r\n=wXIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/density":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/touch-target":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.91ab1c62a.0_1598022709079_0.4119999223139794","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/radio","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa47772a93c1212175c92e8a812ec24944be5667","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.58eaa9f02.0.tgz","fileCount":42,"integrity":"sha512-KoZ6IDmcOpDLotodXCSLrVJffINuc0JsugTbwpZkR8pYa+8Abl5JqjTWszrQ5ILkJYeytXq6bTr2pVGIlKqiDw==","signatures":[{"sig":"MEQCIFqBjaXGVPWVTilB7pzcido3123f8HuED3EKsHOCBHijAiAaqUcfoHKNkuQsMtC3PZ6u0B6C7ttTzxpkgrll9QtRZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfZCRA9TVsSAnZWagAA1LYP/A4ZCepGQ6ePRuZnTe9Y\nfVDo3zy8ZefOqj9Oo2lNob2rVqMAyrP+TepJnZMqOX+ov+3Lv+9/UxZsVGq0\nB8WozVjRGIcsUDI7dytA8koF3CF8sF3/sisn0oy0q8MxEEkLhgb+C1Sg2q+D\n8usQi3NCjc/e6ND7d57rGtNe3EqHbOfj2c0efbojCyny4nOJz2iiJ05idQt8\nhSj8CCdOBZgT3TZeuifOyCp7Fo2SwdowdcGbc8j7NN2zoqzmqXfrTPxMQm/d\n9MSeA6onc271gCmJhujZV3qQDs/oooj4SuMlHUBOUmBhRGf+5PgEHHv3T5S0\ncVe05mHGAqymnjA0znniRMo2So0P02CglwpLH/X+bbr/bJNXhlrCt+OqN0k/\nuREOuv7MEQmt9LmLEfGfqZaUPRF0Z6nwoTEmeZrsIyNlh2ltf9He+ZOOFLhU\nIWckBtVWLMdwjKlSPEriEQ5APcE65juLLZs3hU5VwgmD44r6pLwVplMT1fQl\nf4F8eigUGv9JzOCj9fdKlY3CYPXfHvmWmTSDgLxtN2X3qfW/ScthjmaBAGpO\ngvxzPpgd2kEof+Crr3HBgd4Kw+4uyKo4Ki1l5Cmq4Ai8rkwOxq3hknFYtnTj\nlQmkVFetfcHAzUxTIVjRsbbBJEazsdAAOEYi2eG74sZEKszDwdP72LcJ/rTA\nZ98r\r\n=ZcLI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/density":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/touch-target":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.58eaa9f02.0_1598040023367_0.15978437605532037","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/radio","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e22dcf399dc9085fb42f923de11f322fdebb99","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.238216fc4.0.tgz","fileCount":42,"integrity":"sha512-rTVF02KBufj/I/sgAO8JFKzfUexDXIn3it+P/xEIDDdZT355c4Us65YnZ3H7qxYVPaeaKOdWU+Cu6Cq+xMm5Cg==","signatures":[{"sig":"MEYCIQDhJXHNjWuqfkVO+WGcdcufE+SXYOiDtlM5GOwC+MHLlwIhAIffBQXOSCyMx050mnkL/oLS+BCol4DrImVSiiLUEUAF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+ECRA9TVsSAnZWagAA3c4P/29nYh3+veE2pONa69n3\ny+WVSV6H1OF1dXTatYD96pg3yq9wCdq490dizfx22o6mpcqIjr+vumPxmkrI\nJnJIErBTS0wMxonDrMGY3oDEoMKNEEwHoHeCSqRwZApAu9Lr4mYIFrFeKL+R\nO3ne+qGVyfbQyuAAarumG89X2I9F73YJFbBLPWVtZiCIXkyZ74Bzg4hLfvuS\nAdtAuCHqyqyRL+Y3rhG1Q0U6W8F7/dzJ0DNcC22eHsvr9FaMnKjPUxsgg4sZ\n5g1ByvpD+nCVFrx7JupJQeoom9Lx+xvGgIXUhZDtFLCRUre3xoURAdxITZ9M\nGyXy17xepceahIwOU4wzQuYjVJE8gHXipKamfamx1MsSpUhVQXRS1FyqfwY/\nB1iOCZAZlfRxHWkDHtp0AubAa8ZRWxqphkB/eygppVAd0zXRCq2HmkIa+rx7\nHLj7fuYkLQkY/JAkXIyF40NohOSc2YhKC4VbUpTzl+sgP50TSj3ePQ6XG5uo\nZSp06l5QIBTNWPcbl2OCyqUcS7t3Ck95uj+mW1FtbjWZw11raE232ERDqSc/\nQXs8bl+xQMLOu0670fqPTqXBtSfx4N4yK7EsurzoHMjDKscmPRJEEgfmMfsI\noyBnNni4rSPJWN7SIRdvVdm1NJaCjO4qaoE777EhoxoHkAd/0u8dnL4z2DzV\n9X2X\r\n=Jibu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/density":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/touch-target":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.238216fc4.0_1598283651549_0.44762807086337864","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/radio","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"016bfd54f4d43dc39f903e65825c9cdd6c92be4b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a1c65593d.0.tgz","fileCount":42,"integrity":"sha512-ghY0oXWGn6YCzuKodmeAMiEDdOCBBu63IbHERJQbNfxGpSUDvs/jchQm7CjX1oSiSZqREhlyQNzCmMQv0sUGzQ==","signatures":[{"sig":"MEQCIAsDInniGPDPjtVh2KSTDK19e9V+K6Agny8puxR2bWqrAiBUkyahgz+Uq6VsPnxsnaSJfEx1ftfFIntvwAeeF2xrAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+ZCRA9TVsSAnZWagAApbAP/37JF2edPsJws2D5uwMd\nofg5bD5+EPM4bjjyguyBxN+VaIbVs/ZTj1eAYhTGvagvZoaqpJi94V55+8R9\n0LmD1lRA1JQaju5mZucnf+Bk2dNL8OfyCUuIZB5c8EWOoIv7DVnfRmsjC39T\nis6BaEeUERzaFURSRcyOlvAmvyEhXoI0wBEjoTwW5Vxf0vQwJsXph3WDA30I\nd6ejT7AOQrurmAKzIWWNm47Xv87johcKPrW8PCOWjPHzxsMAZevF9Lb838PK\nw2PZz3Runor5wEwcXmWwafkmrDRDm2QwMYhlAu29oLfjpEjFvJa8cKHsHw5i\nKpP1eJ3yxThuRdXGSA48PPLCSZbBAiAOcIUM066VYl0l7r3Y5t6hfBrEULgv\nhf3A/SKTrLuuNObj6Fzke7neq50eVdjyUl3Vl/mMNmlhwLDotUKHQ4gJSLLp\n+zA/gw8UlMnLSztGjKTDetXoQqkNH3tqHdtBSq1yLxbfLMkCempm/QUv6wSm\n+Yp6eO8zEhlL5UCzFPCN9q9Cf+rYK3BPw9znikbzXYk5r3LNSLaiq8hiL2Ty\nZ5YFUY96ifOuK0+kg+XJZAmS2OrRprB9tUCW3LJNxTb4uoGkNAIrHz7G4QAj\n+u1c8OMPMQOHR1j+2st+0UGv/vnBslsFL/PSafkmg9sfK1wmJei+yMsAiFqL\nklcE\r\n=5qOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/density":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/touch-target":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a1c65593d.0_1598324633104_0.9174181439332996","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/radio","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b68d9893ff187de20531d8cb874deb306673698","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.708cc09c4.0.tgz","fileCount":42,"integrity":"sha512-gy9nc3OMxsPFzz/FLBTimmewvJKLaECftVBej1+yRDTzxKlVlUJhfXsXS8DHPNojBpNMnmG8jWeN32msy6YoiQ==","signatures":[{"sig":"MEQCIGepC6zFDBJHhLEoStjDddDbNV1OKq4t2qot7hWl4o6dAiBZI2vXb6vPpRyt6hdc8CZh1IUikLjWI14SOTW0o6dDIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSqCRA9TVsSAnZWagAAj10QAJA9U02zcZlhbb3uHONI\ntjsqr8MEFcNjk9BCfyfMu0fAnfsJdLOv2N/y+XdEVaPUjLsuMQAAIK+mUFDd\nBDh8A/Qb6Gck4kh2OWtI4/ba6GnFgybkWWDUWFRuupegx82TNNolukxUPjds\neBnq2L4iGd954YLeym1SXfXXBo2bfLeqNrzPXqqKgH8JO1Z2VPWK3+dTQvGV\n9HKZghZtlGIbjWb9EN9lygnl3yZsUzCmL2sI9wJwFYqQCVmQfGFqqYIFDfzy\ncn7f41aqXxOY8zwceneCcQhI15N8LgTtDtMDjRHS2Em51zTBZY/I8U92vOHu\nuCZztSgGpD1Vc3GYjyIXEnYiqorsrdsXZvdQMI24pn7J/3mA74ytC7KLyFJC\nQvojuc+qxql5UNpuBhlklwzK9E5MoU104P4vSfBsB7DolXB9iZgIbvnKo7Hu\nQrk2gdCz536pBnIHHlmtwR2J2apDcM/JDEg2MwpPctj+5n58OU3+aEuoB27s\nXWMHPJRMDxf2odDdKAPqg0PCSVaMKriUX+RZkdENgUWsIuT9kX46QdLR0RkC\nSBOdlmqse8RAoUTwsBslsbpjOcgdPjsPqiqSChPsoTftHJ+Zloxo4PDImmTs\nCS5amPUN9ERUYGNPyQNqVuWanVtWLjyhRKrBr3iY87b+i+xQS+kuWaIGpBKX\niQBF\r\n=YWV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/density":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/touch-target":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.708cc09c4.0_1598370986471_0.9640541282725776","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/radio","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3e5810aedb71d3658c688ee626fe074586154d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.19bea2ad3.0.tgz","fileCount":42,"integrity":"sha512-dfYimNEbw7qR4d1jOasDHvJRdEQ5NgIDYM0IzWDipkj7rEA6bZha7WCDW8w7ZS9+gWUDYky0MYzibWPLHYk2cA==","signatures":[{"sig":"MEUCIQDF9+8yzyjyRf/07FfQeEEtMa/NvFvxhJniTTihICbpjgIgU2wblIrXffD5DOQsehaoyetV/JVBTcxFlb1Lem5N7jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq62CRA9TVsSAnZWagAAmsYP/0vZ2Hz/2Rzd9cNm+u+A\nd0cSpYmzBuY83SXBQ+JDa2reSuIc+l58tO35MrrXUnHO2ddAJLDYnI2CrTe9\nQQSVB+359DFWl7eJsbN1TZPayTiVHq8v4o01n5EbHP90QxeLAEe2KI6P5F+5\nGTJROuVvLI1V2E1fjJlsmXnEcgWa/USL0CRRJx+LoBhcVDxwewsd31++H0MA\n7wC7RNcT18FAxKMI0kKdewViULfLvwYAnDHAZ2l/5Q3BCJoSvbdt98ZRvoRD\nG1jVg04Sv9Lr1/1ibV3ipzAUBSGJt9QhP4pMPqx1ikVDj0iYfqI3NelFktAt\nCqiqLovz7ZhY1sdejOVoPQVRZejXIJ7jtkeqKtGFO1/1XF9aioWB7bN7oSkP\nizG9voEoCKx/sHfNofk5ATrNQd15ny71gtf9snSQhfrrNknzjqWBMS8/4O95\nPM4zdfFRZIxSkqrtYKS9hq2KTR4ebsMV+9/rPy+5YfieXiQHK+gDC/uUZG5M\nIcHn/zSjAfIDMgGCw6lxiQfYgSCDqwHDLjWM+sWCr460TTbrz4o5Y2pH38Mx\nGWqEEiETD7KG23+Fdyuq4PWJmwlrLv5pSoRUqzRI8srCv3J/lUKhUy98aB5W\nmETqd0A1VlAKR0dVeE7+ijnPxh9zWXZ4LewahjT4bcmOh5U28Qij0zmCneJ8\nx1IL\r\n=1Eto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/density":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/touch-target":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.19bea2ad3.0_1598467765590_0.2667111202860748","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/radio","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0fd3f5e62331219a8e5efbcb90ba2db70a11c29","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.911014711.0.tgz","fileCount":42,"integrity":"sha512-ajlvKnYNPBChWvFasJ7FurV0/laHx7VAQI3I7fS96rhOZO6hP2TGZWEv+cz3mu/m0k4FudC1SFJjwaoNWBpk0A==","signatures":[{"sig":"MEQCICXMuBAt3cSZmAS34pgbxbwfiQBsIRcGu+PijMm6bPj4AiB881UeehTjDWpYYa8krAH2q6FlMxmk79NUxryCtDv6pA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pkCRA9TVsSAnZWagAAdBEP/0HkuD2sTzJU4j2UaOBy\nQT5IqyBZ9Y6aWVGztWk2cf0XxxQvv1FjU2zbI0HsavSO0hGc3dnNor8XTSuj\n3cJdXEbygcyW6y9JAdl5pmsugJR8ri4ux8UhMSd3iU+oDwOUsDdlM0muvMPv\nCe5OmBZGpX1SUk+CHQgsem28ZQ1n/lzO1gwnAhxu8piyVTItrs8aLqMCLblf\nK23zlQwim7rT/NinYqPsPu7g/GlXIs6rumQdDEIZad9BskF6/PfHhM/98wXF\nUtcFwf735ctljxc2qafQDLPRvla+ovzFt6Dn3GVXvFhWOyoivkGM/GgNnhUD\npSB17ztJWtL5onSWGON9KPn4IzQEO6XMKdFgSPuHQewUZ8FRRLo0pg4Z5EEv\nYPFMIi57h8nq2W3IMllcZsU0nk9swTvU9UUJX4K+Cyajkhqy00tieiCfT0yX\ntIyTM4Ubzje8vjVxrmQLcf+op/UaERLkXZUG70VytImaRJYRrxO3eTaV6w1C\noeRGq2rzEjcex1B+H6qHY+07pYIobXVVEPip25kKoA/t2cjDk96xWNzMUzsL\nE6EkGTWoAT2UzF6VhFYKk2zAe9c0F1opxwCHjPiSieH09WnX7mSx/MUP4eDF\nxnhVz4ffsM35ZZbeNBx9bFBWGzybPfvM9VSysEbhm8b65ujHP89N8EGINxod\nRqtx\r\n=kHmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/density":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/touch-target":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.911014711.0_1598544483833_0.701093130316508","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/radio","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7fa909032e5ea80d51ae4c6a97eb3e1b1ba2d20","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d3387f54c.0.tgz","fileCount":42,"integrity":"sha512-E34VVX60NwDYAZCJeUg37EwHBk8rMvhIX8uBvL4PwRO52uBCtu6ujTcz6N5/8z9MszvNLCeq5noJPdLgsG5xGA==","signatures":[{"sig":"MEYCIQCCeccw+bzvjVbzqtctZScQf0JQSB5dlkcve24GfKCA9QIhALsgErpPj4CtxqfDCBuiCLTFet20T7rKdi7qr/L5u4VF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgoCRA9TVsSAnZWagAApgcQAIqgI394mRw4beTk3a0r\nSdKCHxBn4AiEwJeVRnktklW8lsC6GUIpq1m1VqwiWNkXh3zLDpQ760HZUxkg\nSUSWkIOPPn51OxB9fkX9oKhHtrulhUi7C28JO8+AIALFrUGMh/fSoZV5MfKW\nh9tf4IabGmoBHW3sD0L9j5OQsKYFXRTuQYN6FETqphcs78sPgpOvvbsaEyF2\nl1QWjvv3I3yvJLJqT1wDd5cY5ExnkoXLRFQcvCpf9wZvsiUdMbEYy4d/TZFK\nUH8tkYwDdv/z/b3XSS0Vv9RRofT4a6x6hCMK8qz2QvrY3VJIQLfgcEnM8+fF\nOvVa+LxCL16lJT2FDU8GRTt1cHRSBDTdl4tNDP2GgXN3/6L/+/9a/55CxWXA\n5l4+OMh74MFbOe85KLp0YFQdY7Ye7F5LU26XTaXU7Ie6oqZUEtbbj072iy5I\n/EDJ26htRWARq0I+Q9Y54TU0apUe4BDyG+MsRXDO0GxNsW01iWoOPd173fLl\ngVZDmFdrM3vlssP5vMCPPYDDS9D80KaEojlItqMmr8/bjYdg50sNJ4+YpaeC\nWrEmHnQp8Mp4LqQ7atzG4W7rWzipevXSCfrenZw5ZxHAJbNu8T8s3K8fcSXB\npDxN/KHudcizhJqQMw2Q94y/SkW2lx2aHnK06LQb16rX58kvragPZ460A1cj\neSs8\r\n=qiS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/density":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/touch-target":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d3387f54c.0_1599166504110_0.3565860163756911","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/radio","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4658712da0c4b1e7ffb6b824fca24771ed01a4a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2ccf996cc.0.tgz","fileCount":42,"integrity":"sha512-RhrxYSlq/MwTgEtmLMB3/q65ZA/foTKa7F4uYveTW/dBDkyWgh83+t7QU+CZeJPVew2mgi4rqD+7tZh6VlMTxA==","signatures":[{"sig":"MEUCIQDLfD2syYZUOqf/ubBhNOxDGq+wdEEDtDEo78WQJsLx9gIgbohlN6hcjvnRZKK3aXl9vP4jHrqnqYXDor5mzGzPzXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVg4CRA9TVsSAnZWagAAnRMQAI3/ImWMH7jZJIAeHfsm\n/pVnvfm7+srlaD6vobqcG3pgeM5XBKObmj0XliWN+JWCPDyCVxMfgm5iBK2H\nvEy2w4Pg4w8NI9EnCOmEZmwoSxbmCzk7MB63X2apxjHJCSKLXPEGu2m81PRP\ncCbVVv3GwtvF0rAOebBT4yfTbiECmGaE1X43P+yBDXmQH2TVT4BvSSXPOikO\nP1bx5oRrT+nkxn6sb25Lg6ct793sQYeTPrxPO2m9YQCT1du0f+mm4MUhOF9Y\nZFMj+bdNN1kYBR9IqCZ2T8XGeB17tTAbzyTwYjoTSyNcDD+EmG6EIHKJRiFP\nWddIXTIJqVHQA5SeMohQ0sRcXb5yOvKzT4yXUZ6Fyncu75Z836GZUf1VjbAj\nmjacrCDYQChBB3m5qQxQpFyjtsowwTohmDix4wJjX0GvX5kTph5o+fn3mMEz\nRoFJQKURFfn4z9spRXqy+kx318SYlI8GSmMoSnkfYiGUiOugp6wa5bKqGQfY\nv9i/nZocFkHunry+o77Z3Mub0l9eGLUHQ+kzSNoYYb6SoXUqJi8TYfu3hwRy\nzSKC++J+/i0IKhJCcf2RWczwhCTOlTAWPq8a/08XHesWYRQiSyTYcmG9+4PO\nzN3Fdu4j7MesuDevj91Rd0PhWqsmX+XxBSUfXrSlLOnTezTtJ3bD0QGegwED\nxTnW\r\n=8hY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/density":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/touch-target":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2ccf996cc.0_1599166519811_0.6218543120318945","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/radio","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e752826c72fad917ad109c89295cc322ece2da80","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.744bfe5d8.0.tgz","fileCount":42,"integrity":"sha512-/XZX+g9eEqYfOaE7N2WHhoIKnehBva68tCUx8qIDQ1VoFE7Zgw0chUCQ/w4KbE5giBE1XPurmRHH909W1vqLLQ==","signatures":[{"sig":"MEYCIQDaAqkX55dtoqlXRc/99tu0pR5BvMZCC5JanLTthLEEXwIhAOHrsIUHILawuLY3z6kcg3mhnA/NDuFXofW3miECCYNO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVh0CRA9TVsSAnZWagAAlugQAJbV32CYIy3miE3gebsI\ncbSdHkJXrXdM0UTN2c6mCgH96s+kWS37VBxsXPN1gML5sqhnSjMzYNMnXNku\ntCA+51NRWtDkn+1Pi8jx40LYeTeERa0WgwjU+UGLCeS+OXnLYPf19KF5wJCE\nnFCzUYDu+mi41g3gknyvRXIqKvKFcRmwF+KcslczYZ9Pu82aJpn6A19rqx/k\nWisrbs8fDiB6wGrBrnlkXMVVglODSyKwal5Ox0diA/OLQj0m7jBKBrDjmCyF\nLBrZh/pPmvxILXY5MUpuSwHdk29br0AYK0SX7BKRLrORmHSUqJHs6YnfvYrQ\nB9xeXXBjIjKw7l0O6PaMoCBMvr7p2utcJbpOnOuHAtDf7SGqPq/VdWutDNCX\nl4XjmvI1rQSRVhttV5zD2zzuAyujTrGLSoA3vHZh1QTAGsvGp98zi4DpTIuR\nrTDKpohGI05rgTMMJKs7pUs+pD6+wD9UnjDutDsyNfrtkNPn+57To9cecjG9\n4FuvufsBU5VgbHuWJ1og1S77e+RzCbitzVjo1CsRPhpoU/UXGzizFBx7wQev\n7SLXnK3DOEc7GfXTO2CgeGWH5GlwV3XZhWDFJBrRVx47mAILIVVcJC4k9Eh+\nK0Eu4GJJWSVg3y7CJnJSkyMiAMPFZeprlSB+4SPZ1mtqywTQnrkbHu54Ii1X\n/CMA\r\n=ksWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/density":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/touch-target":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.744bfe5d8.0_1599166580100_0.24742698033853117","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/radio","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9099921fe5d6331fc52cca544db7ab4b8b0e971","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.78da96eaf.0.tgz","fileCount":42,"integrity":"sha512-0sV5LwiWEpw52gZBEv1yWEavXudYyFig/xK9RA/lL0Owf/t/akVr1j6m+pKmHKmmqNhFyCCbvZAOCbKaQnVi/Q==","signatures":[{"sig":"MEQCIC1iE+qWs5eJ0mShG3yVWAvA5hoEiNNzk6fN01PMVeIBAiAmzzrT+4fm7dJo+Yv2raMcoCXJnmPLBoe9qtomRrbR4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9e0CRA9TVsSAnZWagAA1SAP/0sX9pxuCZ1o784T7pLQ\nMTThO5zu0D9qQ7MfyhkKEJnxM2tcRtKUVKPxC+B3rFgKeS9S6744Fr97/TcG\nDqCZ/snh1WXuQGASzmvPlAoSvMbtaIGaU491HGcHo1i4JEMOJq+C2tWW24ar\nGz6l1uCAUSkHXBGmNBXvmp8RTRUAgWaKJJA7XdLQUlWTP2W1Q+K4NdGEbHol\nwZvYZsk0WhB+Y/IRub04cOpfUPdhnzUmgAmm9kIQ9+D+1fixg2bw7HrxNNEa\nv1UVAFe/8JrzxLTB7h71gmQwHSjDHqqzUPKSRkFDL8xzvtvSKLHEOLV45g4Y\ncA1avgA7IZRjPVyjrYFB+ASkClf+ycF3Girnv+MKFOlnJaimMMrbwDrTlkxG\neT6F/dsfdiEsmSGhY9N3vlBH94GK78IzUuiAjjPhAKuH595GzMIjs7KFBZdC\nNU+nwGBRGFRY7TRvQUU/kx0xBhPbbc00SGeV+Oi5/YLEBt5ttuPiVr7fETJ1\nysHU8NN5AJFF9fOHlPVGMkM2/8xTAH9NnSz/Teb1WLwu9Tl9F7cNalCe9xFd\nHQ182f+OeqLBG8eb9cOLFpLpdVO2L87ypfEvmPqhiIJgsZB5mzXO2rid5bVw\n2PMe36alsjIFrcPyPeQiSHe0a/2H7ZCt6p6M/fzOScdoIBqonOFeJof+QPfb\nHVTL\r\n=tUGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/density":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/touch-target":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.78da96eaf.0_1599592371846_0.2597434535493497","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/radio","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d9d5b4c50f3523dd32839ad667f82084f86c19c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.b0ed593cc.0.tgz","fileCount":42,"integrity":"sha512-WyoHTE5AE6ovaCFDnJKo3b6O/VSqVxIW4sz5fmAG4efGYAu9/cWakauXJCdJcXY7LFcb5aPtVq+c0knfYQWQhQ==","signatures":[{"sig":"MEUCIDiKSO/jQ6TSrWzAnmsY8ZbWDJrtHQq1gTtfnD538FYMAiEAlvrKtXtJ389cJGnAEThhXumkZKtm1W91ykMdf+4f+6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMlCRA9TVsSAnZWagAA5ekP/2KbQWuQr7/HT9sx0r3v\nuv1e5PGlBGo/QLdHD1o4yJle+WUSMi6YCHKW6xsELGLAtGNfRRZPgOIEuO7S\nYQZz7OdTqsb620Y6GzpDpUOs8SFw4QRRmkLnjd+Xp8NtTGGMiUT0HIwjnla6\npqsn1hE3aLIz5IM0V8fcOkaAx0MSpv559k8gdi+tz1ChJqh/pkeMC1v+qFte\nQNKxGI17f+H8Wp0DHJf9kwEyUL7/eaNljzn2uUMkZAkLKk6LIdhdQAF1ud1x\nCJl9sXQYXPw3aYAy1WKpG+MpgjpVFIOEZPHJyT3mfp1gOnhyRq9iOkSBxbRr\nCtCj7fE1ocyACV97MMrULKaPyeWXoDlVFB42+7wEq5u7afNePU7BZiKiQ6wF\nXdFQiTItLcph51z7YfYctG1d7EPpCA4+sMgRwhsz6OLT7efLp8BIl8zWyEz1\nycs7H1pLNRsdw+XzP91uVIGOEaHfb29kxm6wBsp55/RQ7tJaYdU0sDEIFe5O\nRkqAaWk1h2iA2LQ54IdITTG5goHlGflhhzN8c/eDE6OMbhJEXj+DGpNFj+8O\n2UMY9VLu4+PCWCt1h0wMKLweMSyjKPLKqt9Q2ADrRt5NrknAVwLxyeCGWDt1\nMzriKXYYbuPSq8e0Sps/XwOjaZ8HGflWG+R4LT7IYNRWOGVYu0dCK0Qb3Qxr\nEOBv\r\n=U9QP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/density":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/touch-target":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.b0ed593cc.0_1599632164910_0.6916147657043727","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/radio","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7885d8c09886d42f655dde26ebee21d8d0e20333","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":42,"integrity":"sha512-D0SeYO3RmmpGVmUZf8NXnxLe9kZQ9hfvtMmXozci8hEA+ig+CowG7oYA/y6sf4ZXdUvaOvMQEjHjlG6JqTrOsA==","signatures":[{"sig":"MEQCIAh2fNsfFWGb8DSQcVVsxrk7lTGQPCgAfqVYnqUvqRjXAiANWWyOmu591/hC533exdgZqAM7lp4/iXJDYpUeFalqgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZACRA9TVsSAnZWagAAVHwP/0KKpjQXKg2ukRCgYd7i\nssnTGbfOUa1oLk5bH7a7iOACEGeBQ6ardcgcOZaA/BUOqcND2sB06uxEnCet\neJ1tKcDJl05merQziiDHttEaY+/OLy/0NfqS8qOtoFOLZW4ZJjjXYKFbC4+j\njz6VZfjRSwdJD7zvwbZuRtZ10ZVq7flYg1jvAFkcMW+vRiMvSLjeiIFnJCdf\nxrrztneSNHofz2egc6/ICMNvGWAFibHTerBHkAlNaNV71n0ilqFhscAIYOgN\n+6L2OGnkxqfDeebYLXvPz168Rdj8XYEVv0ONLvPkeX518zEXEo5Xl7AhA3kO\nidIi6NlgNRw8dhOwBiq/vDGkJiejNvcqcICM0MHOjEm637IzZDRnPsxf0tcW\nUvUuLocztBIqj5GJlUvAvYCMwfhTrKcL+T81N20cSsaNAVB5rQ9WFjHl6tlt\nruzG+RC7P6ic7Scc3z5kujKDGVI62ipzc0OMVtP0hAxRg7KW0fgJHR7w+5W4\neqlcLA6bcWY6tq6sraTdiGtBp/0Li3x5IhA9Gj75X+Ifuv6b4231MHOXkBbY\nrpJLjxPJn0NEC5WOGJf7FeQw4+7YDOJOfXQQPiTyqk275ScqvGULDRy//8as\n0Dz6Dfkxs2yz7fiadva+d5xrXdXVgcQZO00Laf+ld+f9b3PSCpnhGL+imw2u\nAg2o\r\n=wlEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/density":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/touch-target":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.85a1fa9ea.0_1599772223735_0.7581448461974183","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/radio","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e17a7ebc377e51af937e510a89d5474bdcef97f6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":42,"integrity":"sha512-mzzb+b/dcQQ0UiJyh0Rj8LHYrmVytbK9eYxhk70Axa8HWQBfv5gK9W7jbmNCkmBlcfb3CSkOMhsOMzQS6WSQMw==","signatures":[{"sig":"MEUCIBoxKBRDfYSUwOg74tXONwDwbyiPvjUK7wd3wZxk7iGlAiEAvLwO7DJUoTXgprLYIkrBkKdmILKl5TnVg8tGltIi9u4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7i/CRA9TVsSAnZWagAAxX4P/32PjVH0JuJbL/f8f20f\n1I9qymvzVgRgdYSRc0f+eOXB6B99udB40HK6ZOpRgry/rdFUsI+kd8MRxeUT\nOmbcYK6xdxmk9aiSu5Ab5RPiXyTJfLyLHL7RsoOtuiMsREkVfwDBl8rvJ7Uj\nQvCDpEzRTnIhiL551ap9xxxb1lyupAbZtL6WfvF8wc5rbLG35axWEKjn8rya\nfwf7vgOAC90Br5c//Z0GSmrYdQIhBSC/nYy08dzuzE2cSq7WS3sF+xx5uGNT\n93CRlVQmkuHQnlIM3Y9UMz+9tSzcw6ew69IxVHqyzwsXgfPlydAcConiD0+E\n38SIHCg/MHww6ZBcn5YbnZsXKSZ6RjBfgIYqi33HcKkm/3xU2f3E2kQ6DJ9e\nPXXb1cz7mFWlyTNDB0/Dgu251b1fE8TFQSIv4yb4hdudvFgid1DrZpSEkVJ1\ncAuUmAoOGTqkzEGli6YWIEymyG+lAan8eC2CvggPD7yMguJCxT8t0T9wO6DL\nr2wvTlH8fOg2G4KcPjWpu6ZaSi4rCH5FK8act7RzHWXG8C/Yq+m0kyZTjsPK\nAoP5IJ7Yut8l6KMrB7V+rh9m/I+S6n+krplt4zb6on/yP6OnmzQnNSYAjIrV\nHwJ41REHYeQavzqV4TftnsU65xyG79oDRHulyoSZ/t9Bs/aJKZNsq5JhPsg/\nCG1C\r\n=jNPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/density":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/touch-target":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.0bc41a9c7.0_1599846590679_0.2753551997111541","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/radio","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd7d5b4a538f8d622c568b45af43a886c3c30a2f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fc0eb5013.0.tgz","fileCount":42,"integrity":"sha512-0KaPLIapwhO6j9MlKGO2FUJ78Rad88q1EIdS6eDl9JWzc7of3mzESYCw/CLaEtMydpmw/dRZdEsCq18lTbb5UQ==","signatures":[{"sig":"MEUCIQCr40f8gVUpVzLk57JRTDC0BhBhfkmFgtxhs+Z6byfSqAIgOISi4OW8Zy+1iJRSI+KUkyiiphAGbO94huQX/eVqr9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YvCRA9TVsSAnZWagAA8BMQAJzYNFJ/8mA3VHQpHf2s\nFc5UaHETvyrTqN0CVpws08OXazIJ6YyQl8FDU9AE5IwDUTsdpTn0v6eBphKY\n0kbdEdb0FaZbPaLXD0D8yX4RgNmpBCgeS4SEcFRQYRBeeUfuN4tz8dazX6NW\nXO7VikACGFaLjSYBkpp5q+VYbvFCunG19QVfolAAOzbNNxdUvyf3Wef9IDrn\ntKSmIah34u0x3GaN1qpnaUA3JnZdjU4wPRUHOUPiUNauRFcX9iVDBztXUUBf\nmQREkWqllsmcZ88O+/vhYh0QluhJYat3+vD126Jqed6wUzgXLLc7QZYB2lFQ\nxrBMaoJ3A5g3U2fFhWjXQJ9nRXJNDc5IJJhxBtan/WUW84sNZu1H7eP4hlww\nz+iIgoR4sE7oi9j6jOzFQvSWIsZfXzgVyUsOf8S/KCs5J1aVl3FqdOFpdmUN\nCClIDelCJyEai1VlvlWZTMeJsK/j2p+4lDNotNshtl6j59pp2qDthO5RCA+7\nJhNRx1E+a6OrKzhxke0i5NA0OrHTuemNpSfhcl6o03OLPmZnT8pC8KrIXMll\noCiqvJv7vwPdKuvHI2Gd8gqjIdVkxhzyJSvZkZEGhpag7/x3Xgx0wv8SvYDI\n/BfVq8Y9gGG4xWY913IoVF1fGuBCBXV+Z4SA8fetT+E9zOAST7Qhgzh3asr7\n12ZR\r\n=9NC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/density":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/touch-target":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fc0eb5013.0_1599854126733_0.9577179514220686","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/radio","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7acb11d6cdd54ccd2eb5075a50523653046bd2c1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.319bf66de.0.tgz","fileCount":42,"integrity":"sha512-NxFRmEl7hQDo4JHvrgoS2qZ4WiQ1o720CnzWqWCqwPyGqIgXDz6dWoje7iv6BWoWbQvu7gllwvzky+irRjtZZQ==","signatures":[{"sig":"MEQCIEOTS6FZSaSx+TIQCHOdpCHrQJuAnDSz6/fRpprVJgj3AiASER4Rd8+CN3pmwtVwG6z2+y0dCiiBz7pQAY975A3qlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPYCRA9TVsSAnZWagAAmNAP/RqLBy/t4RLEfgBLZ2/L\nCflQ7KBJ5Jt5H9muZWdRIAeXkEeGaFlxn4pKPPtqfRTK4zKxw32xNz/p8/Qj\nObpRZ2Rk8NEsL+9UIF5M0A2wIhIMJneX+MnchPxdFeU9fBXi+/iizYpVzfVe\nt6Aee1HeKoKHdxkx04aIr2bce0k5cqwQuE8w16+fz1wIwtsN9ueB4lMTq7c7\nQfXyU4c9Dqc3pTkVLp5PlpLCHwnTYXd2MHdtLnezWsH7LEOu3pRIA4KsmzPC\n3/c8483puR7gY10v8vdRL7Zgxs2SvNj+GLttc9j9/O60W+a/QmLxbVB12fDp\nGesQeyN6cMa/qFBWKq3S0YOUQrHTPLYVTckUwO9pf+LWbbC5XQx1EK9krMWw\ntCrNAGjxQXAPwNbfxPW0KwoGJJTCdC3oa6ZOTj/w37zxb1QA1mCytW6jlC68\nyOxt/1VyhEhzcOsWSbLiiaK1KwGUNSsOk8OUZehTcXhJDZVn2GlpTBlIaHtf\nbzPYWYjfVT/zb6BApQkZTfBhXw5GTvTNUFZasGDVogGRr33l8EI6g6RDbJ69\nbFs5IHwVG83n7+vJWBFNx1G1TH6boAJvizS2p8wihR26sXRZoI3IUh+fgvAL\nUOr+fZ7+uGAXPjEp8iRP7nb0lNA+5CNnG8vVaSB8e4CMwfoD2ymgExjmhBq5\nGwFU\r\n=eVEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/density":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/touch-target":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.319bf66de.0_1599865816341_0.49935486660993944","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/radio","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157baae0a932a25855e27340fd5a69d8dfbe4f61","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5bfc305ec.0.tgz","fileCount":42,"integrity":"sha512-AG22OWFxNKZ+4bqcRqCxR1z4lhFXkNM1sAMHar/agD5/+ZHjWk+3hQxoXANgJCRs3K1Caye+IdPJCRvfgB2K1g==","signatures":[{"sig":"MEUCIQCXpwpDSaImF025s8icHBZnfId4yN21BpwGp7dbSgosegIgbryGuMMytmpHkkkLIKRFzwA0ssVRCBLSFQ0G2MlCN6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSCCRA9TVsSAnZWagAAqq4P/R2c1enDWjR7vG+hIhbE\nWjqyjQLux0FGc913/R3XkX7FdpM+TCmOJGHxmck71ChanxlHmy0meAChGPYL\nzNad3HaCCQ3+GK5ABOwPo4AdH/v48R6VwxN6/e1/UNmMwrDWKtxcF1DPcy+2\nD3tbSQGRdWVxoRKg0EA65YCP1n77i6m4ouHLQ0C937j9u1s9UJD2YcN60/iw\nsfQF3GIfrbuwGtn5VvBQtelHvi/xnvCSUqBTd92PBJnX4APlxkD0L5b8389/\nLhUeN5NTOJdwEu1Mn5s1vqnlbe5L9xZTMW39HyuuPVzf1VDP/p6nZ4BN2VZq\ntPq8iWYENeaxh4cB1wEZx+G9dFH6kr3xl44GLNoLCfQKm9lNbd76F9ovCDF8\npxhRMm+Rvl+v1MjW97hsDoC3fBYK69J2HQbcMFbLIGoDgHfEl6Xof8fSh3iD\nUlS5an4q/dLsVn/uXbBR8l50hd58aX0eCVtRL9WhvlH8zkRY8ej0eUVCNMx5\n4x2wzFebE+RwvsK78344r4rOFoCRdQEQKzetPjdbzEDgoprQ1I0ASS9o9nn9\njvlJqz+aKjtf3Qq/BnKWhNtGFKCpZ3iMxee0gj7V8Ka5CWRqLfawDJRWkTQN\nyLDmckYGc8xdh8nQemQ4LRCYEoFGHk03DiEJ6GJf2HyOYw+CXuvGHJm6e4+0\nrZJ9\r\n=tMG+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/density":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/touch-target":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5bfc305ec.0_1600038017545_0.24125699190323013","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/radio","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ce5e4d4d1949dd1a38421c755f3ee3ae277890","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.83d83f131.0.tgz","fileCount":42,"integrity":"sha512-HxU0Q+/vJmggpZXjmgC6+sra9yJyVmJH6ZO/TtulAJxyV5wfdgx3hI5sYblnTZayi//O69Mqk0ey2fr3jQuBqg==","signatures":[{"sig":"MEYCIQDEomCi7BBddTzAx2LE4dojTtWcaXeASgzf+pNFChzzwAIhAMLCVfLfQI56zC8JJ4o4wuYwylYyWlE4O6nmdNPNdD39","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrovCRA9TVsSAnZWagAAUa4QAJQC1iAjGK2Gup3wf8In\nGxK/AdAFUhJRPYPqI8gtQ7LH4uzSQGsmi5jgk6HAr5r5cUEMDuV6VfrCGc/r\n/Lyq6F0iF/WAsHOH8PyHaPum+rsKsSleiECfATEQz3/fwixh8y8Xm3ogwIFt\nu580F2+F9CjOwDlHDlQveF/MQ69AbOTc97UVB73NwnVW8vlrsnhhfGWydd9e\nHD5xemG0D4OjBRjTrkrwp/1c4ZwRwa9OVcOKhhQIBtyh526EAcRoy6E4BY5J\nehDomX8pVvZX6D5DG2GEOeHwNgj9XUt68tLJRQK9DN46MS8manO9HXwGYFTt\n38ObMunk3eNhWw4YacgFyG6TJ2puTXa5Oe8VIjuMwbIkuo8P59gOL+M2wiAb\nw5/7uGbGYftGAflqlxdztL4cKIdDBrkDyXLxmg5JJ4D7xtcTNNKmDb5JTSuo\nfBm2iwHroMQ6L+SECD1y/ZKJeWYwY1uH67ADkM4Mm7XkvPZZvOywVsOcJSvY\noJn/bJ2dK6OH/nmqFKbnVludjQ7/GwLYxOUp/Hj2icf0BQp+vuwDvKVVAING\nljBsjZCwK3M2CeGyFScRSgTmX7h5EnOjb8f2mV5gnml9FjfLo+WV7alSKOSh\nvo3i9PzkF5vs4mfShywQ1IlvnmJ6HaEYTMa/mkrVFWjR05IminZncqfYRhEO\ncgwZ\r\n=JhvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/density":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/touch-target":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.83d83f131.0_1600043566463_0.1451109781290265","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/radio","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df1f2902f0b9eceb0bcfe2a069a3c251b3b6fff2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.40d8e4726.0.tgz","fileCount":42,"integrity":"sha512-vk35UsPMsDw6C29ztVgIvotGi6dOCE+pFh74HYLH7q2730a2c++tQXouxPjSCwEz6BpmESg+yQdwEeBZHlXcSg==","signatures":[{"sig":"MEQCIFN5/ZTZ0ATPBQvQHlASD5vfbUuXMQEzgt70Pahqi9M+AiBbrCGBhbghD+xUSGldMz5xNWjPfgVWiOLZhqq8SWXmTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/zuCRA9TVsSAnZWagAAc+sP/jR5UZLewk5AMBsiO872\nrtCVc1HDILjRsajXWKykr62ejha4a4CizSSpUXn0b0uY0UAaEPVa7tEsvc7I\niVmOwMSOaAWR1OCAg5BBL5b5Lb0Wqp/fmEkW0f90SkGY1ooaTMgFRsUatHMg\nys7eCosRqwCj/39nMNVlvBLIXGMMlylBOwy2RBSWm9xN3DlNwDe+XhRrCCz0\nX9GUMdWR/uTqfLCw/ayjyTZkdENhnegURoYduila/QpN33W6P1L9A4IeE6bk\nHLjl5bkVWU/wX/QS7bI7ha/z2bVfXbVw39jflI9M7nQlUHLZ9qHX5ZNmK5Vx\nBgLC8jQuGqxXib4ST1sKRrZZNkgmLw6ZvxGNjL7kU2DmSqdiZV+pfhVruDFq\neMNBuorpMlNaKdn2hh3MBNVzLJP1yBl+0fqi5Gj/IWn74m2L+TGNB7hvZVyL\nH+n4G/mUGmkhyZ2KyT6/VtWKIfutA7Ybjodxhaa8SbqE2P5m6gCx/3C8DONi\nNFKLoQTps+GKDfC5aExvR5bQqQR9UeAfH5/bDgsGmZ6LF7Gf6JP4IjNSRMai\nAMqFb18k9FRfTHdLzwCRLVo0eCTMoUPqqO2H9hvpmeGbXAxSsAoPPAySbJCH\nd1MErpUtng2/gl/GiIrJqlswzaaPztRSVQXMlIw645GCSizKa6q8uSmSP4rY\nGwBA\r\n=TwF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.40d8e4726.0","@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/ripple":"8.0.0-canary.40d8e4726.0","@material/density":"8.0.0-canary.40d8e4726.0","@material/animation":"8.0.0-canary.40d8e4726.0","@material/touch-target":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.40d8e4726.0_1600126190118_0.24041511087741108","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/radio","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f591437adb817568d2f0bbab1433a7f69aedc6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c25d70a31.0.tgz","fileCount":42,"integrity":"sha512-80S2+H94M2qcH3+qRY3FNBCSDTuVT9WbBZjdCwg5bRaqXa8kcuIQIV4SrEPx7iP9HVcWj34071OnSVQvllrheQ==","signatures":[{"sig":"MEYCIQD54VoBelFVxqC+AuTCuaoXKgMIn0kKJGv6J0X/MLeAaQIhAJprP7HVonmKEvuWkPJPO6cEsPd6XNzmPQNymeU3ASEg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbqCRA9TVsSAnZWagAAffAP/2lqedb9FPehFkC/j7SA\n6lq9KiJ1djimXr92Dv3Xc/ZzDSFXeZ6yStzk5PGNOvo3XGjz2dtJktyrzv5M\np9vE3q3wyX5pp0ggCo/adnKluJBQ5DSR4Iv2sjSwb5RhLQK9KqFM//6PBMbK\nnQS6zc81zp10vUwmIGsmZwr7YtPrx//Jm6VggdzmibSQV4Uj8puxexhKnIB9\nCLh76D+NVe48j5ZObkxIJbs/qsZdIjlZQi0sL9NacORDBcWQ+8/nLznX/y0z\nQb0iwgSnxec32+RZcEKcJNENpDdeU3S8y67zicXcuRn17aBCAkFZoioyG57g\nrhFCX9m35CIjsQAJrcez2lL76osrTsiT5oMbLyhjZcG4CBNNWriBAp6KT+oA\nzG6AM3ooQmYE0mEzCL4vOAjgrMcE4H4jaU3As3UAOsnCkx2Y2CYuoVXMC6iw\naGiT7iZskTMrw7lzVJuE4GbLVCbsI3idTwKG+218pCAkKX4M8v19192O9m1H\nQR+onz5Vk7c6Abz0TvLMqk/oeDlyYupW8s9pd6K5RaDv4PPo5kvAr7zCrGFf\nsLgCJOZ8CuX16D9nWPAkYcCapbrdNsNZVVSJ7WsB3y1PHMuzRP8p/tbuVVjf\n5yqB6fUI7/+USNHIUQvExDwLfH01HsC8gffC6RhlC2wD9CmW5dpj1rzkmolp\nzhZP\r\n=k1er\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c25d70a31.0","@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/ripple":"8.0.0-canary.c25d70a31.0","@material/density":"8.0.0-canary.c25d70a31.0","@material/animation":"8.0.0-canary.c25d70a31.0","@material/touch-target":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c25d70a31.0_1600136938132_0.927897574099062","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/radio","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ffe56a2827536a933bbfd929493ae01482690d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d52b165b5.0.tgz","fileCount":42,"integrity":"sha512-03opGi5Dl00Sk9yF7kZidxws/TMavN0HpbWtOMJNtyt+mCKlcop5y343rTjFxQCOy6Ke6bl2Kgl+lhBx6hyaPQ==","signatures":[{"sig":"MEQCIE0d2Uic4h87hkEgg0xS6GWxgLxRKctLMuA9DXIFzrHMAiBs6L24yAHlxKol5qcP4U3uQi1Xy8Ckqs/Cv/mniPdOCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWhCRA9TVsSAnZWagAAcikP/2QGkmQ9bZCA7LPoWsmc\nS05e9bysStz42WUkbM1SoSie7oFQIbdb2f1F4h1tXxyRFZHdpPmohLQqR8uu\n6R3WvMlhSlhxRkbT7E8sjsW5Pe1u5Ftv17EiVDhKgBPyjokSq4Ck0d3Z7Omc\nElqhsP8Ih6GbqGzyHWind6TfrT0nvPTtqLBdyvKuWIJ8XeWoDmNailsqbz0F\nrZt4l9+0zT2R7+A/iCaYhN7GwEgZXUxt9a4m3KltQD/E0IOI1kE1p1y6ae6F\nTIXKrYf0bw+aSW2ZvL+BMzhRmCl4ICr1//O/upDH9R53k+r2CKreNdjCOlAO\nYcV/S4KhHhvQDH912SCWpDHE4RM6ivyrPDKHBI92sNg4Fv6ppguDaDLH4wN3\n+27sXeg0gmtZDcVFcZk+9G0z1FP8AOZPBUwTH2Ie1hRhOO/E6Tjo1B+8Xy6K\nPxihb663XO/kLhjovs1nTDMZpQkQkAYqshRKkcDCXByNUYrhg3+q6NrOdvYL\nfDSJYFNJ3mWzcRk7Effjxjuc8psaDDPGNw1411gQhC5Mn/UYCxe8pmIzptw7\nZTT0bJI9F5y2fX4jMzLM+Zsg92eyV0fazpwGEN0UsF8ccsRn9rEhN4fDKqcx\n4Klm9l8Z4fm8plzXh9TCYbZ43PKRQlmqjUA30E7GRAzVJcnHP31naz9d+o1W\ns8tU\r\n=WnpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/density":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/touch-target":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d52b165b5.0_1600181665466_0.013542426856842926","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/radio","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"118fe710546d45fb330c658fdc8665e03eaec6b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a831d4799.0.tgz","fileCount":42,"integrity":"sha512-6DNp8IRrX7h08/nhRQzAUxe4hvmESSco5oqKzoyk214ppHGvRaYn0lI5LpDLiBdTQ/9g5ekqwgGJvry/vE5Ilw==","signatures":[{"sig":"MEUCIQCXnkCrlhKIIvVRRidL+2evX71LhEbvgrfhEaRKL/lFPQIgFLz2vzzJw1bw8zRwjBNX8VeNdBAxnEcf1fTRh4KT6u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP89CRA9TVsSAnZWagAAu6MP+wd8OaQDfdNfNbLPkaB3\nD6ktzc49s/0cEds5/Y7VkVJ4yL3bGoaGCCfuowrDtbx1b2ZS5pMQBURxElqv\n4MgcJmgeCB+h7a4jzTsY+kAqgMDJh9dW839NXDv7kZTmrQEYv8tKhCcimQs0\nicBF0NCSNS4CcKK8F4/tsSATemAKGrf29X+jQuuX+keAilP0zkk3qVlB8oBe\nSgcsCY2SBwt9rtm20wBc1uSpT7ROz45E+h2jOxmQba4kQvX88X/3kKuwSGmj\neG7MXTGJvb8A96f0rcgGuJAakoAc/bRh8yHa8HVBBPoYwVDkAnKy3UPSFFJ+\nzHxx0RKFVmk25bwFlotTFe6Zc1lCmn2to+pwZiFoH3Fz39V54NnhfPRPye3B\nPi0wmirg5kYbQUswRFmRnx2/mtI2JK44q+XALKG2eOjbpIitGtc9f3cNxDNI\nuQfuGllV6N6f4N8Y+fYyOw37Hv3gIMj1GEm5BDC89I/3FaWoJ+VSCfLZu4nN\nef7XtuEbr+7V4+UWJ+VtnM4van+C5hYYp/5sL70l6pU7WicLQbJ++g3wdC95\nE115f7latlPNFlMRaNSVqSCOuPgEcm6Tn8cBRJ2aNFR4nykDVZLFXbKlqR2N\neCZQiaX1GwfHJf4IOdHXmwpISNbgCFiPcv0cccUQXdQpGGON11wGDUQEumLm\nqh8+\r\n=TJ3/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/density":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/touch-target":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a831d4799.0_1600192316870_0.8422645436192004","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/radio","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"099129a8e206348e2d646a50272159aa3ad1e354","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a306aa488.0.tgz","fileCount":42,"integrity":"sha512-jlL8NUR7ed2Z6+dHHJ9YCdNVGbN6HHj3eAoVpLRXdOQtibipqdPtaCQsaRfPjUjVdewMUI1lXpZOe9wsPG+uiQ==","signatures":[{"sig":"MEUCIQCr4igrQ7pPx5Lm62NfKY6cncR5ZpdwvVSSue2Cp+FozAIgbPy/jl4X7S9KEsHkT9rXDfqAgVCEy69GsMVt8XeI9Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTJCRA9TVsSAnZWagAAHPgQAJjWstP5FAuiCjIFf93N\nroOwyIKxqmrt3XkcR2893IRgcEKimC4D3DnVg/DJ87CPhH3UkmWh///G7ABG\n3eZAQo6oVOl97Bz6DK4T/qGAyOuWf1maXlrJ/OtaDd/3kICUxGn5N3oWFUNG\nscnPimNPAKKtjpSBL8gfuKSIPH8L6HKGDOlhjb/5pUzf9zNzVHtn/kIzljiH\npNuSgASwsN0UAjrBFIh227b/7+fTvOOCVlFZROnLy1iNMSCU8PS2Ao8XRguc\nXMZ+j0SZpVi45LjnKelH0fYdGpQuu875Yzi7/+nlFAvmvQTP0Wi44dX0m1I4\nov3Ltc33xv5hWhvZLBISHayKtDNHAqkrw2TeBUpC0lLo9OPOXPmgrXJIEirH\niFgQ7xcvWgbmun0Gfjn3GBnG2DMkzN7s8Li9X96xxAvwpX3LRJILcdxnlJcE\nPPoNzaM5eAZaMfc7ggCLrTFkIeqEwRjWcy2uhz6RYYIE+M89zsAe4CaTEj/p\nsyf2cpZYGDO5VNPl0ZsgvMpYByYiIIUIGDpOe0pcNVN5LPBRL0q3eSt1MPgU\nluPoLMoSXH2YbWynzf2acQEAS44UdZK/Gjq/iiUkwrrgBfRTIEWDA4TKS+b8\niYSlDuhgBB98cVAoox1rzFswq8ZJAuEwVmmFjl/V5vDYFXmTJWjhoCG6sfFq\n/QhV\r\n=UbHd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/density":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/touch-target":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a306aa488.0_1600304328813_0.965532020404936","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/radio","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"783101517a8305ccc2b430e5351c3de22085227d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fd608ff66.0.tgz","fileCount":42,"integrity":"sha512-LgnT9Ks5X49ybDa8n1EH8MODB8Z824G8VS3CREXDcu8McOKup96UzUwb+YTdiWgps5nBT2ZHNCP5GiisT3vvPQ==","signatures":[{"sig":"MEUCIBfEmpUl/yHbbj8HC3SwImD6TUbjGogz7ZxvaI23V6hTAiEAtiebBsmqCem2z1xf8BwAB7EJiXlLpxL+xQTV2TlUzNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HhCRA9TVsSAnZWagAAAN0P/i1uJuX2UA852iiWR04S\nw8MHKBiRXHtLtoLoqR0qIAth+g+5KXhQIJ5WAvUtPt8KV0Y4KWe/FFyFMDDC\ndKkkyydTK6TGvillFrHrpFkWYpZR3lkveaxBDZtqt7BG2TwhvIJivlOuOjvl\nXZnGk5Zbllzwx2AQ/w4A4pbIEchYUlYGYmC5A0ywriiFCJ/jm+heQtEY+3ln\nIa+Wcb1vKsDKXgApKOhQlxQLwZwSJ6GeVYJEim1/PTzTYQoxyFkatxPkEvra\nF5dn8zovakvSE+UgP1aXIQAaHZC9VDDtHE/EkbNKgUoZBGKc2r9FCJWn1cjD\nub6AYWB99RO48opkpaBNGrpy8bNEP7qcJABCw0BOBb3bYaEHKIxlmIvcNvyC\n5Cml/zygq7dlpe8R/Ap8wPJr7zcmKuvWEUhoHSXohH/fH6J2yweDoBUjPBWO\n48cpurPAEdf5bhc81xHSbnzCWb3pbljF4qianTJXzbOnHQ0dyOByZJ3ixa8I\nfZlZZvsjWdSJVm7VksmZOgY30I+EI9UTw3ZrkIPVHvPC9rc8OHdy7AWjjT6U\nNoUMu3XRLarcSZuVTVERDmUGiAcR6nd3wFzHlsa+/sEsxIzNAtOkY4QGtS8+\n3MO2LOyX2K2U70Fo1K3a+nywMYNem1eDfWjIJ+QP0ksNJdPmBTOqhk5E+Q+y\nCgDT\r\n=hctS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/density":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/touch-target":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fd608ff66.0_1600352736822_0.5178683550242453","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/radio","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d63fc24a4537433b006f60b5f435883c5a7ab8a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.3e435ba57.0.tgz","fileCount":42,"integrity":"sha512-mRvtN80nbyAobAwjzC8Gol/Wt5x95VrBzSNrvvtCtdMSwxSwVRb44Uwr+tW0enfED4BS2ooqSKDQQRQoKy1TZw==","signatures":[{"sig":"MEQCIE2RcWg0sn3UE/Ruqh9HAVU+4IjcoV/2C9YzwfUKMNJWAiAXGm9FXBto5YGm6ug1Z77NjO/68+UxZCF/n03QAVe2eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3X4CRA9TVsSAnZWagAA5S4P/iBHSwVcN9cRmdiCu4g/\np3tRcg4QqEEAcY2WTyGj5rBGqnrTVD4jCxdDKZEI+SN9Al4YXfgoeTQ27n7g\neGa6iJMNUODvKx5+ss73hL01zfSnGSMTBdmG/VLCjrYDD1wEBku3Umb/PIgq\nBt1CfjkNCSB52latPGALOR+tzHmoze74STKxQKyZdcRzcg3Tt7ti4aThO07R\nodQ2loXkNdlptP0TxapZZHq3cCnzjggzSZYi6Vg7D0zDRNRk4GwCUOAwTclk\n6DyWQD78Jx7+pJyqAzvPrcmZXLwVAVmXZ9qohX/pK8JnH6h6nLIpqS4pnxey\ntfj5MMF8eQ5x17/kL/mfWfT2WXMGAnXgxqM3T84u7m5EgjvZlWi4L6x9r/80\n5Itb6k6QUfws3I2d4Dp0eOpMajaosn800A4FECoMWGli0a6UvscvC1RcPQgO\n1/O+BOBEdD90OdLh7MmHYw5mEpe5T4UiCoDeWKjUuSqGsYqtZR27jgIXyKlG\npE06k4ASenCm+pBZxF4O3wuSTC1ntb07b6ff30Y39pFSVrkYHaoD31JCUy6i\nHi7uh4hT7FPRox2wezVUU0xwwhfNznfeu/lSOTBJD8V67aWdw1TSUqGQ/rkG\nHTwEglJoPHwLhHTfMVTUxIdCdKg2axZHFThVHgf60/i9F30TT/bzQSyhBL3j\nbL08\r\n=jYhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/density":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/touch-target":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.3e435ba57.0_1600353783934_0.9066383485217231","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/radio","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66bbda25d671df94bbf727c67d8b8785309146cc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c250ec52a.0.tgz","fileCount":42,"integrity":"sha512-HGnzMWnZiHCXdqXt9wfn36sQn+lnwZT6GJnCu8gWrR08Itt9OwLOLDkkug2jDMypGZ/dQG5leAm6jlPZSBxVlw==","signatures":[{"sig":"MEUCIQCeYbaUXEmFLXAGcIppBSKk5iZqfXCLko3rVBTPb3y+FgIgYz9KTZGciJc6iiBYv4KmmCHHbAdVUJVSEEaoAi5M4OE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8K+CRA9TVsSAnZWagAA668QAKDVs8dhm9aT6x/ReLlF\nCHnOrU/YssB83rAaTLfiqWgLmoMBPBCU2ak87Iy4UKQzPQ4lGUmmAndGnq0/\nZQ9KLe1XvRsLIxC50JT+I3+jkB4rTvFylK8Axs6OHUQIhs03lUf1OuPqVAwK\nMvGPfZ9cl4b8WKZpQTqDLDO4zDMqHvTykswWK2dCVy5x2eNb8KYNPbyv9a9K\nBwKZRgt8HpvgDaeY6PwdgvuzTbkWhQmhl/Pc/Ya6ia37xvdDBxbs/LV8K8sx\nbbntg97oxhBSwwUNOB0zI3lMPx9hvZ7XuZB67RTZ39w0ksyQVcokRstrbuVM\nhhXvrFmVJeEtODblacNK/0PcjySdggLPm6aw3fA9S3jeDlA6Y2A1XtmfVz6a\nVLVQ9K6Xgg9AyJb3fNwWcDM+rcgUB/w0xrZT67oP7HZW62SihQfV0KUXXK3T\nCMIcuHu7gDj0b0N7WIuNaKJfiS4eBam4hO1PhNqpG974oFW7bLJcsN0tH8MG\npvgCPZLNP7+XY54cDE5Eu7+DlbBglJ89ffT6gDGPvIouU4QaBmEXuHpWOEg3\naYWqxgES7woHymFb5qd8r378esD/oqBA0rzbEe0iIATw3VEC1sMKzHAj3Ifo\ndSN7/OY+z6yHba93wkPvAK5qvuml+klo7ch74Eqr8GZVllkIv+20a8YH5NkD\nHJSu\r\n=GEq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/density":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/touch-target":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c250ec52a.0_1600373437802_0.2504306497208515","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/radio","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59ac22be328b5ace113ce8c188b83f8b622d250d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.e34e411b1.0.tgz","fileCount":42,"integrity":"sha512-3I7KiWd9qmh9E+SW6L9YT3gZIIaMV5Rft0PSQVF6KNpfs9yuuF7HQE6UroUpLNbeF+4ZPdR4CMjGB/xp9CATfw==","signatures":[{"sig":"MEUCIG2xsg19g2BJv+6W2byVpGx4LPqpRL5zNdmCCrd66y6jAiEA0VLdsAUS5r/yWYC1REPgmKysOr7wEbLlWIC6nYSQvTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8R3CRA9TVsSAnZWagAAdeoP/iP1/fOV95LMYxJp4L8R\nP0QvCoFOOH2kcDNU6cNp3OgLEghLOZnAa67QMj048udQZl/BlCwE2U9GsiJT\nqP7DcQdy2T9fqL1mSiyyBei5mdgIvvR9Nk362T+rYpGESoTIr7VPwXuYOhta\nrx+PGHi+4jbJArranYwOFqeUJ58+zBj/r2ctv/NxygbxJsb5cEr0EoOfTQe4\nHH9/oPlBZ5lcsaOe87sYpd6ODFc46KJVEZ0yBXhL0Uh8gSA3EGvbMpd2HKuZ\n8yycco/5VidrPNioEoa//UqmBYOiVn0lFjW/lgk4bhyo6RXlFAkpFj2WFDp4\nZr7UAUXIul/Nn299hX9UFaNp3XdeSYraXrbbjXtIjn3WHS2brHO3hEyLHJl9\nVGt8llErLJLIwUQY55Ttm4bDkqOhz+oSK+eC3Epr+GXzL1n6sxtHaX/6Csa/\nNAPSu1c/gM+sUoPGoAmM/HE+AQxeba//XixfKmE7Md61K4VpS5388hGy0kNV\nGxeHieweiLtbEvrqmvGvw4ErkHSq30/LsGdy9cgNi/782cR7zGfWxTXxfxGD\naBtjJptWQVN/6igo145jJ4z7WH5a4v47WVimEU5ehmI+r5Obrzm920Ye35bO\ndA2i2AbrWMkx6752ptnxqZL+72tJg4J4f4BqGr+cfzYuLdKfWQsqZBW3B8j6\n4wQR\r\n=G522\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/density":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/touch-target":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.e34e411b1.0_1600373878837_0.47160491182540487","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/radio","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc170816c094847b418722cef9371ba7a17b2ec6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4e9343929.0.tgz","fileCount":42,"integrity":"sha512-ByYTfT4ZBpN3kOWf9Hs8t+VXItQknraktItpIJrnbEPuB2nfAGX4249MK50gZMPF2UR5oyM+MPFL1q9/YBgYsw==","signatures":[{"sig":"MEQCIBHrYYXBrZ5BblQSaK//zeOtBqELAMZD/h0FU8F8w8sZAiA6q6aparG0RGNCaEbpiSZFJXSFJB0MIJO3b8vYCylRbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8peCRA9TVsSAnZWagAAkBoQAJxZulwMZfaVFaW+A2Jy\n8RFy0CNSpkSzFjFszW8LnJQXxTDW9xTnjnNeOJmEFdqWGYz1RDlOZ+hMOKmk\nqQVKk4V2vvCguoT9ttiDER3gGAIW6hoP/LyMAYR6s69xFgjeLc9kFdoO2MeB\nG7uhngk1b3mwCDncgYAfuaYiqailJNK5hquKgH8pYVCtP85AL8nZZ5q6QGJo\ncZ6+UwYxgwUe2kUVufM24xDKwaSRsgGiy8kluA22o3Kr37pEhBnrEontitJG\nNoPFijPm4rO1pu5OVBKOo/FNGtefskL10Uyo45raMxQTB3uCgraUPNQpzneh\n0Aw4wv1N/QhrzKjpWH82ffmuiH5Apxupe1oUazEm+fJbgjOv8l8uQm0rQ48N\n3YbYMCeQqEOr8glpeXpbiSyIzA9HRclN8wg5RuMpDfhoTzCq+HV/C8SJaF1e\nZApFUwmFaJT/I3AS04JQuwHxf3Xm8BIlOstlCq8/fLLon2N9yNzv6vpcHXDt\nENyouSj/cb7LNe5a9Xd0fIaEqzMEzxkpDISptsllKV6L87rQyRttmbYgfdZz\ndvCA99ahff5We8/n+MDL53pXWOtstuqTpvri18GkNrcb1esMt38Ixaa4oaF8\nEqVnrq+CG/K9ohzdlG84pbou5N/ISPu27SDlVcpqGPzR/BPK0OXDPgJMe0rw\nyIyi\r\n=LIMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/density":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/touch-target":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4e9343929.0_1600375389730_0.15861597873826616","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/radio","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"780fd1e7cdaf2c29863affc394cbc28fc3f90266","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4e5c350c2.0.tgz","fileCount":42,"integrity":"sha512-wXZziUhmeJaXCUiSvtQEuenXJh6SSaiZAX8CxPMfbcfJlPwvU5PHm6CdLq+gVnUsU39RJHZErQzghtmJhuuTGA==","signatures":[{"sig":"MEYCIQC+rZqlbcTaRq15dCci6Y01Pezxs77AJgMtdqPxoLMCWgIhAI7JZC5B3WH9KzxZ4PbWzAPI9yzuE/KE2xLbNxmxbp84","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRemCRA9TVsSAnZWagAA40EP/AzUpcTJlZgarAageq5S\nOLhMtPQcxChtnMIKwVjfaVeYlw4+Szgfghq34jETfsIj5lUXo6Z5iHcykg1h\nnd7/pGLjOmsy2lEwXS7R7BcXmCx7MV/Vj796wIAGIjYoIPOvOCCNsGA0tcMs\n9LOx8TgNSJV3adduNT5XhnoaxUXzeWVql3Z06upoeNaOWBoCANw6Emc1Mr3R\nlp9f5fOAQiTmRNY/4N5yyFc6trwhQ5LZYeQQCmrkJsbrapGiyeiTatB4Vhqg\n1opr2vl0r8aiy8peSa6IL/bkVl0RahNsHjNtajF8jX6/eoDFA3qVyxrvUd7B\n1UxtB6jNH+MxQXvYWk30LVpzwMIISPFQlvcs5ePXW50SmN6i+JOCX6nzqzqX\nmcbQ+SMbBSnsjBuoPvAX6/GL/NAEM64wOeHQ4fEdF6j0a/7mzaTOPEk91E3K\n6E0o1E5ms1hIkI6DwHSr5ZEGkLBGOwXtBI7+JZMhwqQ/txOeAoCTeYsH8dHJ\nS7TJVWHJTjbYiDrJ144q7bGnfqkb6f0Z5SFBV/EUJlH+PChJ9iXrnaU6ql7k\nEyeHbrJ9GkONUEnU5nrs7faP5gTUkYOSYeRoMQRAQySxL//buT/5b476Ynme\nr9GlGmV4vyXOsmY5lwBCCbztU54d9zpXIl8cJsrIOCVReo9lTPN/MNew8OEJ\npF3i\r\n=ljWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/density":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/touch-target":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4e5c350c2.0_1600722854403_0.2271768987290692","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/radio","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d08fb8281c8b32d022cc83f67d5d0d388bccefd5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.16c563ef7.0.tgz","fileCount":42,"integrity":"sha512-yJ50KHyAQn+js6H1AcrHXa5w4zw++urfx9BBFlfZYRTJSBZSd+jOlNNpp7AecUBw67LxA7Msxjlhrow/vnKwYA==","signatures":[{"sig":"MEUCICFp0fHBUN3EGUX71C9mDfTq3QEKKP/TP9k4fCjw5Y0rAiEAnElJY1HrO4lx60a6QEAh+M6pNfsYpizi7OaqrJOTvF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSKCRA9TVsSAnZWagAAWdQP/2trwbfzUF0YvcNiR9mI\nhtEXJiXTZgLl6swQ9Qfp1YXGpWY3asdPE85aMuNElzN4Lo1B8CKrwse3scsh\nFbr45NeNeVHwui7teo/N5V1VUoXyiV5aJtKj7Vp3pF6WXGM7oRk2GvReMiwf\ntWRjcI97fv+njSIPKl9VE2c3DeoSg95ttcFWhu03aB02ru6jrtpdN4biz8v0\nuYypbMDHFYt5jt7/t6bEF+RAkvvUYOvx0P+Zdwtoiyw+3sa2Tt+4uQL/6bwP\nH6nQgkCN7qgXNzT5Vd6QcUdGxldZRAH3AJG6WbbvevXZy4KxpMD++vunuDCO\n6xScgMw3z2koTbd70tJJigYIr5GceL+r+mtbnalkpbxIAGxKwD/Wi5Drncn0\ntPIh3Lq8Fg8dFGaQnpidfsgqfupDMYncKKoagvDggIrs1CngmX1VWS9d/GoL\nX0IoJYxCNRJmN5yOtQBbt+REwcOqoHXV/NER7rABVX0MBz0nAMSoI/l4tAxl\nSiJbZ2VanCrUBZxp/DDmwb4vhkptqDuYiOg9reUM0oz5/daXqj+z7SQd/ndM\ncaOTuU9p49zADhi7S4yNfFaaafAtpfNhVx93iIzoBApw5FWO2dgJ6870KZ6X\nwU6cnvECe9mIh00fmkJYVEzDToAezgXJxIAG4MG+nhbQ4NTqgdDLQsOLp2JN\nZ9nx\r\n=ZE/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/density":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/touch-target":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.16c563ef7.0_1600803977159_0.5794966129803134","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/radio","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f56a957e1bcbbd4d4182bb7b2e0e34c2f105146","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.fd8af3d43.0.tgz","fileCount":42,"integrity":"sha512-p1mYTfVfIn0jWHqoazVTk6eba1tlO05wxD8KiPBUSi9z9FPSMu8j+Vi93rXP46XNu0K3M/A2peCvY7VaAhbdog==","signatures":[{"sig":"MEUCIC5LBU3GGC0Z/EXTNpMnXGT5B35sLAiFm7fSEfpgNif/AiEAlCfISEvVNEoy+mcuiBL1TyWNRT+9aFhFDkndv3V6/xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LFCRA9TVsSAnZWagAAoTgP/2VIU1SpDizrjPpClsTF\nb58RZW5wI/s/oTIO2bJKPTtqqQo5Q8nV4QapJvi39GgoRsqro7r2x2seQJ2O\neY7eeGWT9BIs1EliBBVLNAG0xWNPz/kf7ShwoTbiCPpIVNxIHuCecI38iT6o\nLTXAg4Z/ZNnMnYAkJwG/fEWc8D3L7CSBv2u2dbKIQpNK8QKkPdZfoB3RW4dU\nowHG5KlshnjdTYZnBRgEMU96GO8TvJ2FvBz6E5Eosg3cobl6MYOP2IbFoSmC\n31c+xOArKzKMheXD3Eqp/kKHl32K1uzP4/S93CybrWUEZpAtTXNqE0z5wsCU\n5iftbnlvcQilNFXfiAO8QWJlBhUQkosB3FO5muPUWrfonVo5+r+jrUnP4GSG\nHi8RopbaDEh1liS53KvBaN70C1LFivHuRWDqvIHkk156jvwinVvdKW+NExMZ\n/LcEqELPWMlV+fLjcQtTTXAy29tXnqOFoTOrTHQQD0SWqc9xHwb4t47xnYaM\nShXRKhLwX0CM7m9mVuUbWeMLTYgWZvYUBnm5YM5dCG+D8nUEOJD3zOAec1Kp\nJersKwckZLBcgJ7U3O/vqvAuUJwoA/TMf3XuonQW9xAa1yOOZpn2x+H/FM1n\nB5InZZwnhZmXqwL9Ruku3vRRgDzJy19d8/LuS9cC3JaQE775Qn+28hUySfot\nbzk7\r\n=cR3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/density":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/touch-target":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.fd8af3d43.0_1600889540906_0.029356163731721008","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/radio","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"664721c3be5d45b69ab63c442c13d75378e9b9f6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d4cd83a85.0.tgz","fileCount":42,"integrity":"sha512-M8VCN4zzOvk5Ofzfw6rQ3/fVVs81H5KB2iDOydT8XrWzY5X/q2z3o/O80F9h24Yfn4vcA6oboYRO+UHwRcTPJg==","signatures":[{"sig":"MEYCIQCIQiWYiQedJsHWX4AZ0ItHUq35I3j1NbQelNuQuSGo7QIhALJSUJu35/ucdurjVZjylb8LdFbWRdByaC5kG0VuQHl/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtPCRA9TVsSAnZWagAAsQsQAJOVTc9tk2E95rjZDeQp\n5g8cASNxzpAq37siKVBWXxV7VSvTnqQFxtDP97FFbBT5jJEa0FHN0ecu8tlp\nqYPxI/G56+8K30hYqvseTzEpvu1I7YSxQ6RvYE9YVpy9+lIHj/MPaxXLLj7Y\nE+XMyo8ytKgiwZ3gjKj91rgMCNcsNOTgWWvaTxsw1YPRdQtCY7pTnSQQNFBM\nGatukN+dDBB9CTsylDU4BtRrwRdqaxQngGw/QoxSnFck7e0q+TXrnkz2bl2u\nh+ci/jwkX05wH2fawqd74r9vzF/lMGgNkwKLG6oDktFLjYUwny9e1ZX5UdPJ\nZDnRcr4YcNr8UAUOUr9EBATIsabDeG0IRxfXXOPqiJrK6IGLlG5GZL1k8NLJ\nwVt5PlLq8MutEvlRPd2oViggrAPOZVkma3Z2NxN6D6xvzxnDdFl1l5xuH++n\nyGY5YTl5yW9dkCmyCUvR4YonFj9N7nG69eWWuU6GrNIt3hP/an3q2ixo0UjB\nt0sP+1VWOg8wUtUrcIDvaj3tJVPKm5d3DxNbUbcSRI0kokBNsVzkXDt/nJZX\nt4uHnNLyvh4GE5kh6tGiNfOuGoj1kgMVjSKdu6NEh184hkVO5fKIhIFQB6/7\n5xTuNJEP+ZrE9DnLRYVzRYjj78CWnlbZGN8EesU45XkCYQrgwG581AfVJmRf\nX2I2\r\n=dSKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/density":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/touch-target":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d4cd83a85.0_1600994126888_0.04986638767490148","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/radio","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea207c1981ece070361f09f2c23ed909435a47ec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.199aecdfb.0.tgz","fileCount":42,"integrity":"sha512-XvQUKWWfUSKS2+NDU0YZLSBsKsaebTd9F9O51KauAt0YhZzrDenKPHQZgPW5yPsARZEHvFylxYz9+T0fWITT4Q==","signatures":[{"sig":"MEUCIQDfXFWnsgX7UuubXiBp0qE+ube9VsQxlOQHmdklvhkdDQIgeFwxCWRWKnVieWJghoaklz7LcdtMKveYxvn8lozyLPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHzCRA9TVsSAnZWagAATqEQAKKiUcWNd9WMYfTGVdOx\n1HgJBv2ioeKmRLNtvt5mu55G+t5tnO3bwxs6PXayKLLzV2DYl41djmbmLMjN\nQAvrQSYFdbZ9eT1G72UN20KdhVNHvEKyp2DYWZxKXpKlCiyBOh8SfsqkJFVH\nVrMbxpn5+BEoqtEFjpk+zMflq9BlxbmFK991hf/u93brZKlFGiRGYgrvt+Fn\nwVZIbAcvnwDAV6cwJ26vMgzlxrQ5jKpM9kfaTH45LgVMAQWOCi6iFNl3Nk85\nFqzXAZwW57soV3yz+WtClneiUTUAdw/73jHvl6k3dH+sQBbaIGGdKETJTSc3\nrj9dyA+w5Jn0hdM/VArMG6AxL1shpow6A7niti3oF3VvivE5/+6zxFvT1pkY\n2NboAeU0vGpiIv3MWak4O+K9jDGw4UGhLd91jyViWe/HTa2JktgnOn8/TIyE\nAesrBq5Z6tMIBtp38yeTGKSG+NVTLlkh2MGcDtpZd9BdftTsjc3LCni2ESft\nD27FiAAIw69zDsjBctFNQ+Z7O3GUxfmOzjcIksmBWtj4mvVYv6sB/DXVrd8f\nP+UwxKsUVELljkkhy4QwxfaYb5JhHlDWIM4RECOyxnJ6GcAmmn8qDHmt/6iz\nbnFAnA+Tb48AhGbfp6HYP4LvFFvNV544tdk5X/viRfI241PFpjT4KUS79Z5F\nozu6\r\n=UIbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/density":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/touch-target":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.199aecdfb.0_1601049075065_0.7985894027830056","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/radio","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75fc7666b61a3b7dce3ea64b5ef9e3d1176682ae","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.38ef4501f.0.tgz","fileCount":42,"integrity":"sha512-GXiOFkcuMNj6v07SoI7yUKQAwyzMxoHE1qqLrYuxOzULE2ZYeX0Z148JNbMVxXWWMKy63QsdSO51kUrlYYoQxA==","signatures":[{"sig":"MEQCIGa1hYMmWMVgu17JZ2M5jzdJExkWSK0tb1PZFsxy9fbTAiA5i62ktocg31T4QEuSkLAUH1JwNeX9aajCH2fwgKecBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1mCRA9TVsSAnZWagAACbUQAJV+Lu/r8RKm9n/PsWWp\nje2fYs2FBXhNm+3gYs8dj9EwJ5/8stEIQc9IP5tzEeojb2Txawrwmj4V/dXM\nECMFZ/TlAWX0qNlhShwSGzWpqJ82xxKzOIRZoHQKjVvODKJlHL2qwm15Z1eF\nXXIBD2nh1H0r4cwGtxxhohGUX0QDD9Urm8q6yaVKbff3K8nA0EnckbHEv4QE\nlEbLTRKi9L8w8/9rSiTAY+SlgNb2H6CNwHlX78ttvu4Icg+cTZzv5Xn9mrb8\nhBfEx4orxXjTitelnZjqta1DuJf3HsH1TxR5BhUBGEMX1TiLqOi11Ko8/lxX\negr/3oFjTZqwEqkhREAc3QWL1jbu8FN0suoX7sOyjZ8qMKQL3EoRqUIENXFL\nSCOHllLzhjnQkMbM4iB2CiAchEcd2nNCwaDkgOKMYqhT6lNZ6q2d7tnAwCWo\nJTRlhFzbZHBT6u/Ed6/Nhgs88mncLZsGYugw0E6g1WuVBoJnliUHiNkwnPzo\nptjZlJ8oOkCJkkMWDLrwon2jaHaGB/hg9omdRN+j39FcGn2U9Mv28G8BwYbj\nIdExW2uXUavrdmVfsov5VeDvQ4BffvAOydd1/e0QZ57o0JiiutrLXqztlNwp\n1AtqgtDWpP7UVJACqsLDkb7buR90P3KPNq+ZW5UyuyEdhTE7jf+Qkm3MPcyb\nY8Tk\r\n=VYII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/density":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/touch-target":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.38ef4501f.0_1601490278463_0.5856290982989214","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/radio","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6be941bddac4fd705c4ce8191356ac67980ee06c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.774dcfc8e.0.tgz","fileCount":42,"integrity":"sha512-PzXLQQpNCcKi6WOwpDWKDhLIl028G8xh+ayYciq1xvJ+7TMIMcExG8ijU64JOPAsByJH3H4JTx2oOwVeFOtxlg==","signatures":[{"sig":"MEUCIHoR6ya9ANfxf38uRKcjdkHrHaKh47uuqgPMypM1SENqAiEA047xU1XF9okC7PS45EKeHgfJtn2e0rjho4mz/m4cGO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadCCRA9TVsSAnZWagAAY3sP/3vZmLKJz4nGbycOvLTj\nU9vemcCjrAmtGpKiwnFCJlLH0eX42Jssce1k6SJJ6U0+VSwSRyXmL4HJdqsC\nZJyZKUiIJEgFX9HmCIVrQ7bdrg0XAp+l+lTM+FgJURpbKNmriRXUuD+NMlxf\n9ybYVoY7xqlWi4ffTd61bf/iJrUMZqIm4T8MrCv+CLFPAzE9TySxwyBikA7r\nhjW8wm04PCPaKj4d/DoKy1F3TQNnpg9YF8PntaPtBMIvqtBDUHTXnGtXinPJ\n/ILKCLSzRTHyBNbm+OZrZKyDcxVvxPUOjq4yk5JA93Nqes9PdliBVXOGtzRI\nxtywE2jkVSh5ZGWfQ8OgWrDFHX7oIxzqO6UqPcWTz5rP9vSXoEnaQS+YN3Ki\n0rUB0mR/VCvrfsLUJu7SyO/F9RJaVEp5ylts8+qgEvUuoXZpttIo3GGl6ltf\nnXhATVHjPAoMKI63zNmUqBVHN45hbTKFr+H4vKnSJNUgZKNL5+dSlKPVrF12\nrbtaTd6neWNUMa3qw+Vcc8cIp3k528cq4dmtqYaovn5WbU9hhXow2UbPgCD3\nhlVq/t9YDwKmHxbWlqu+p7z6bj0SD6FQpTfSMupRThVEtwOTfVj6jFDEUzPO\nKzomQbu/q0UicDP6DqskofBg0PxMzSGm2lSTNKrgzwEwGJ3LvEXmgQQJKw2R\nIN8u\r\n=RnB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/density":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/touch-target":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.774dcfc8e.0_1601546049485_0.1435160086977274","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/radio","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf716357004362ad225c01144a65ced6d3d57e2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.0f60323a8.0.tgz","fileCount":42,"integrity":"sha512-pL/XtKSwqICVSLekhm4t0zh6ATv0Y08l88QcqPNY1cZAZAlncicZOA4Fu7qlAW+fTzTmLI/0D1ytrZHC6g1jpA==","signatures":[{"sig":"MEUCIQDcv6fGTqHgAHbNR61xZwjmrIgplRYR3D0K4MbYN6Q2DQIgDARSdxPUagrcsZtzgXm+I1OMSWgtATNMhyvK+aJBiuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4A0CRA9TVsSAnZWagAAKCkP/1t6wmtUNuj9nfWzLI6s\n6sQZB8j9gf7NzNElKRFf4O0FrKASxXyA8Zj6PMn073RMrQUb5BBFNfvJFD+U\nY8MQk5q+2lLjqo9Upk0xJV5liQpbTwbuejfvoqc56ht1LD4aUbP73tH8mbEX\n80fjQJZcYHc9P59wrlnZGonnNVHaMNwcyNm6QuljOSIGcoHF2eAP+eYKfksR\nnt+8I9ZPwtZcuRn1Ocrq0obSByRin9flwJAaKWR1CDDu8/2ddnKNBk4bTMJ0\n/TL8KrRViXpFNvQeBM1LEcSQ6LulQEjONKe5S02p4fHg0/a5SF0D5vK0RV9f\n/AOVB9KhMkrF2XrpocnCIvho3MrYmvX1pfDitjR4jIdaDJz14C8FM2ebNy9P\nLcu29sUObTuKKS0y1YBJctnUfMcCA7QyBb35Z0kcYYPwPgKLyLE+D8rCB3lk\nLS853OGgJuiWxuJePV/XGZDxSf1HjL1IT9pNzAbYpUQcHMIqOcsOq8rk5R8y\nQyzGfDq6J56Hby0+5rjaDQYl/rEScCH7fTz7rqMWrKkGUdgthB/77tjDXXRx\n/EabwFRgWXagXVxlsdbSWdHnqf5VjxLeLZQBnqPztRgryku3v+O27vN+/lgm\n6IuGM9pIPxyn9hwcEpzcUlJqYDWm2nfF7csEGBkjrGsmpE2hgMFtCvE3x8jS\nkU1W\r\n=ndp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/density":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/touch-target":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.0f60323a8.0_1602191412222_0.726501591590609","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/radio","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56af8c610b5ddc2390a71e2dd3ce3b9c1dc4b755","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.d71622574.0.tgz","fileCount":42,"integrity":"sha512-Vx8g7hj9d2v2M+kQbSGO7VFmw+aXw7Wep6hDN9nMozIqSjGzV5UoaakIlkrT9pKXd7zaG6caVVq8hheFjVWLDA==","signatures":[{"sig":"MEUCICQaNeV1hXmzHKtf9q823a8qkPh+ZbiKOEyySdvayedxAiEA7I7LjjVC0/FBgoCMvtuAry1Jq+iAPMXwGqOxKk/5Hes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBuCRA9TVsSAnZWagAAr38P/140OQOsvO0dsRo8je9H\nDVL+/J9HG9YZhRn9LEckKsQdVmv9+BrId8H/5auTUITcYfIyBUtBF67h1jSJ\nhoVnD4taaCZbP0Lq4rvTSscN8AbqFD9KGyMq9D5+l2115KMIU468EKeGATUv\nB/nfkeIMDZRu4J08BIelQ8JD0TQ/ZudV/PjGiQkCO/P7WY2miKU/b+35yymG\nV/ZnANRx5k6adIMdICXXPktRNsaPwlQk+j0oemoxGxhF+j1L7ovEnRy4pSLE\n5JDYA0V4Oavvtr0eRVb5CqJyd9/2J+MYOKKmG9oaKegUpt3DRpVfGA1/JAWN\nbyN5/0SHvOlIEApbTVqaJfHqSGJRb/YW2Rwa/Aj9IsjwYPzcGFFJoDI4UgZE\nhgwCPNwMtsOlffb+CUmmuXrzzap1wcrbWDZuF+ZAc++1UqBgmZDo4GZAs0Vf\n+LtyOSt38+Q/6QvyvOOMil5KQ6Pm6Thimen01MG9bAxiYLOIhDsfxnIbaSOQ\nj2X0EC+6irr+cH3PRP0Oa1aiRI8Y9xwzfYEriae5xNXP1I0RftsK5Kd5AzUg\nHFo17yxpoKrAT02pckeECIVn6w3bbyQKwCUl3feBPe3sQu+lrT1Lg16UUoRY\n/C638JZtxDFGLcpBlWckJkQ5o1TCR3Ok8YN36OSUd0L1khNteWnQsLz7Id/A\n5f72\r\n=fMN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/density":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/touch-target":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.d71622574.0_1602261101410_0.2010075352304277","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/radio","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e9ff425e58ef59403babf8cba258263fd830af","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":42,"integrity":"sha512-aYC3CT+MypY6+its5h0/mtkruC/v0JF+mcEh3pdpkv0NAW1V0I05iXfg0zjlRho0DAJyRgMnTPaG7AGiAZZ7IQ==","signatures":[{"sig":"MEUCIQCYMPRXpagho/qJpznw6vGPuECnVGCn5txZEFYgBY37NgIgJi1j//ADONEJ0YRDrQqoVYnMs2U6JN1mnIGWd4TdBIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoECRA9TVsSAnZWagAAvWoP/0vpzggsjdmXP+VxG5uM\nDwAlVYhFd0W0Pfa4/v3mMOTsyQPLg5wjH5sZu+hfJh8RoIRBnN/XTsX5/uOP\nv9oHcS9bgBlngSphwYwczsK5m40rvTiCkQd3gMNknxQzz2sptHhN4GER0Ps1\nh8ubIqp0gTygcJtSkEC89tLGndhMCLe85gmUNSMHfmiFYZgbR/TycgwzmiyQ\nOOL9KQDjC1oewpOkyVyq1w4IjmWyiE8vTcgfQPgj/T+T3LEXrKE2MaH6dOWZ\n23bcwOzDaOxHDnyaF+simSIfPqbhx9IBQoCiEBlpsJ2p4iXmB9XCYrfB9mHL\nXZmGoUj1oaGWpUsU+1NThofcpiZiJfw9ky9kuC210HQOOJY8g9X1eImOsd0o\nroZoNO8m17YJ8Wp7ptNBRlG3qQhn9YpoE8MUUNWrVqMWL9Hs/WaWZxblwPRf\nNWPT0yTjSfv52KFayR1UZAXZH5zlWjUVVRSL7aCuDutrkq19940DgyDt8NAA\nIuyZDXWFWQILgRlL/CXsucHb/0UPn8jkQlJFf1kvjfjjfKbXOFHglXtKiPDt\ntoAlYBNWBsCyun9w/+eqW+Bj4DX/W94kO7t9b2QFlf9nb4cfCmkoymTmDwXD\nuGVbtRE2lYo+iQoSHyWMx1rW+7yWAufOZKVCR0T67lS8n1YrP9Af/nwER4S1\nxHuF\r\n=FQwD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/density":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/touch-target":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.7a9afaf4b.0_1602284035802_0.7095245460860959","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/radio","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc677e27f4726cea2c4ec7065ad2f248afbafa06","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.8a39352c8.0.tgz","fileCount":42,"integrity":"sha512-CSUZOTNVVuPFm5ivrrFUhr+ivOOky3sG1y8jFs29cTyARM/0+A3euF5F3HRDuhzvSslvxt9fJCgtV6DJEXqdrg==","signatures":[{"sig":"MEQCIE80T+XNNn5OgWYMX4k/qky8L4y1z9lZqbHh8CAvX2qnAiBCQVLUHR4vrecdF8/qtrKeWpURfs2sWOn246jp6p7PxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZ1CRA9TVsSAnZWagAAZ3cQAKE83qqCOardGsxms1c+\nT3hh+DVpGRZg+9UDTtF/sC+J5fqrxTaHXExw79qNP5kOEXw1/AJAsPPnOoIM\nMRV7GOB8pDItuhFr0/YRqsBU94Op9X3VJhH83zR+uTkdvJQZjWZfJrVeSa2N\nIPwnW+oCSWCagqWOFZVz9jktFrM/Rb/AGhxtfm4bIabehNLkNuFgRFeMdAH1\nfw1+AuY8XLQxvmw3rS9iV4sLiWqjfPq2PkOVO1PijOzuBkko/SqO9QCCCk/Z\n+VLVmEQthA3ipeDha8nxUw5HvSl4ox0CMjRuqAqt0SQDhL/qWRv3ljvVH8h5\n14mlM9hIDdzpri9+nQKk0iXSBHQiAssi3btvC/gPnauYeJiw9BJvyOmLkEgu\nGqmZ0gTQt1yJZZGtcK9pIRqWehmi+STk3rRE5PxsWkUIpkGyVvLm8ttPRHEK\nDTtUkaRU8CNddPdfox8I4YwQ25+FUozpAuixm/SvOW6cYn48ZQEMRbtXbmFy\n1roB4/TrWseQqi0GxgYWqsZhsXxeB1tI40/DepruU8GicBo52ZudRY2Ht+HG\n3M9sUo9WHrv/9rR8nwfWprCvd3bQ9KB2Pq0iRIlw4hEDJiLn1zfJ2ovVcJDm\ngLAc7wy8c1/Ccwo8RKB7jUygyNt+/ioVeBWQyCYhHViPJDjhj9n+MTMuDQ6P\n9OqX\r\n=3kqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/density":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/touch-target":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.8a39352c8.0_1602524788618_0.7431191844903924","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/radio","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f9eefa8167e0ec2cbf2e652fbbcca69261abde","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.790ca85fd.0.tgz","fileCount":42,"integrity":"sha512-UjYWVmDts1Y1+4O/LtqS6ryQW4fR2yEGUj/rU6slCOOlRbocwowCYIAh5LQFcYgjlw3fxMZixbK8vO0hLsMipw==","signatures":[{"sig":"MEUCIF8qnaq1cHoiFSzLSRooB/H8fpPwOvpfhfz+gNXzhhbVAiEAiiTCarfHkG5hjN3YmNZSwYfUvnhJYWYZKfgP21lRQp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEqCRA9TVsSAnZWagAAy0kP/1Qev5mwOKlWfAEjJwLH\nsoHXVrwnyseBPiiJ+zdV/bMc4W/qITCVFxbuTsUeM+/ShFU59HbNUKKduZ1P\nkZFde+GVCmwUm0cMAPBmw1auP0jVsj1VeZEjqdLqfzOBN6W/0hThgna75JK0\n0lWcCo8SN2dS1l3cV3gC/+aT9nstplx/qwdfBq6mra1840sROpSbeGZsuBZ1\nsX+7OqgE/2NF2Ea5mVZJ6ke65+ad/b8cYKylv6f3UMzu5qanUN/LtQA0mrWv\nZn1EYNQ8WdM/bf4qSqYDbrUo3ERfh7bKf+Exutbq+qYTY3U6nwJx5eTru3js\nA1rrB1wZ9xpQ7iTU6V9p0T7oPgeRS674aanM1D6HrlIMvRl27Vf8zJ5MBO3N\nEZKX//QdUqLEKC9E6yy/cGkbatavV4kE+KQzlMLA8QMYEhNF+94Bar5HiZpF\nOI/Tp3uFvCpmbxMWAMbaZ8fh6MNIIoPJVE9+pFvplPCwIXni+HeOsg/M0bRy\nGWoJdGwAgwJMp+87y5tR3RhZgDQTw0wiYi9AY6Q0sRIScaw1yX4JFLxcMwFY\nqbFwO8JUo9z253KseTyu858EGnBF8wHit5wE2VfpSZ5+ZZKENYoLKJxMAHeK\nhiGVM+g/FQjju7A0sSFkaEUVptaMQEKMWKP+DYWi8kq+p3j092XgbZmYuGIY\n7Plo\r\n=wSfF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/density":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/touch-target":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.790ca85fd.0_1602539817902_0.44582654913288344","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/radio","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05dc068782d79f540daa5e0300f9d6b8435908a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.174c0becf.0.tgz","fileCount":42,"integrity":"sha512-L5unaHxlrTuFOoz2luQ0q+qh1P6OaABioC+H3nUEe1syrGXw2W2plXVD0WVFuuMctB8SZ6d49WtnpS8TL7QIKg==","signatures":[{"sig":"MEUCIQD5HpQP/ymwbHrCFRS6NPthzHGTAoqXhSs7T2Me1/A6HQIgZbgK9lke/23cVQEwZ65X4fVv6jSi+uR+yMfP3R0Sjf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9YCRA9TVsSAnZWagAA8TcQAJPnrtW1eB26nOUhYAqP\ncMSkWj+zSPxFHlv/VxJUPCniUOrs2aJPlKSMaYeIOgTwDk/HZNCCz+M69Rdf\n1JS5BSgLjEROuyzMIUd85TX494p4li0NipC9xl8VCq/lgXSrTaRUvHrXlZnb\nnClU1tB2tziMIjP4Rmo850W/ivganb1uLCrt7PBu63u17cyCzgZjnuRtdzMI\nxYa2Rjij3p+L0Z0yoiMbXfXGMjUVMe5EpKLm8HBrzVe8Gkulr6QXLfZ7QeuE\nAzN4Kn1u/fdA7JZ4Y5Z0zsPXwRFDBV8d73PVszjAsaQhZHqhjk99amEeWc5e\nB4f1hSyelgEg/nS6rUKTJMJX5S6tlNMNP8B/QIpF58kkFwto81Iw4KoDV3Rv\noDYMlIpAUXlgk9ZA6BO83v9fFb2THUfA9O6zUYKRAQSk4i69XoWz0P2Jq4U9\nOckEXqhM53lnGOtPCDEtfjz7VhS+yHE7/ZidNDPJmmQW+y+8yZKLCDzRxgT6\noaJ64/mSnERPAEJ14Y0OAq9fmfxluROc2sABp+Qr5QOL2zMMOYAOsvCkikTV\naynJ78JH4nv/NTq4PPQMSFb7UlXlfetB7qLgwkKEhy5piGByqwv7IetJHcla\nByTyUuCtv+2tLfCg6u1HN0BgS7JxPistJd7MkqIPMcil4S+ZpfZLHb3f7jmF\nuglB\r\n=bM/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/density":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/touch-target":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.174c0becf.0_1602641752190_0.54134652028478","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/radio","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a3273b2eb6306f95f8b09a7add4ef60a8286ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c71ebfa02.0.tgz","fileCount":42,"integrity":"sha512-V+WMuUORp53hldcgM/ZsAc3EXzYUf40TM+t0d+OG0OovF1TDn+9hMVtLmrR2W2wKYYpw3h/mXeTohA7vtD4muQ==","signatures":[{"sig":"MEYCIQDAQpPaaMVa0o5Z8ZCEeTwBSct+ogGtw1YcZGHfkSKqmgIhAPowQ6IJcQmhnD1EVPZAaO3HER2oc1WW8WmNuGhvQd7a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvfCRA9TVsSAnZWagAAxbcP/2YArha5Qtd91Imok7WI\nhBHUJWMnWVqyo/FMusqZt3x3m5EbZQEW6cmPXlChuXCiC6/8JIlNQYXboqMb\nfJ8JRikLgD0DWQy04W2cie/gQUFIH5VM42M0j8KChZRFFJ4MKQ1Mv4cRUFoq\n0+XeoavmJaf78iOBCScV6ojFElr6NMOvzxBIUGhJG/XBzijdH7WfN0KupN5b\n0MY/CS4fGwX73fnejR+nvJSV5P+c+nFoxagp/snNEx824TJ2jtfNW0gElOii\n6uHhouGjuGutVOww7IZp81VNi6l/e+4NIZLK4LhG8T0TKm5HJRJ8xamxWkXj\nG/HEAlgtm+xEIZaOwdUmyGuoEBRVR/NUlHClLgyNjRpyh8Gc9vXDjsFmOIfA\nXDqOb0eWhwVPVT82C8wN2fv4UvufHRHW+uEx57ee+kkm6nvE5Z6W1sZ9vNgW\nv2/TL7FUMum6Mo0P4YQKTVC48nqgPJcLzSRktFstIIygURRPg1dLXMxlCh/h\nTQhKghf3A4F5pvggofA2ZX9j8kmrTrkDKvFGbzMLUlerZZn86cD+iDYEwQAy\nzexnXo48cDY4rqyG5e5+1y6bdEmBn3N8g9IY5ETJsTZAqkIGb27dagFhfaMj\ncTNE4R05qD7S4tLfe8b1Ve3fgbKAej1PCcfGwfsn5svAA1mARrk+6ohr7J1z\nj35/\r\n=1JwD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/density":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/touch-target":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c71ebfa02.0_1602649055394_0.6559015834528832","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/radio","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a9412e68067ffa374aa0bc70572d2e07ca08db","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.2ab716cbd.0.tgz","fileCount":42,"integrity":"sha512-53skJJn2M9OS/LvCfrarUerTvhM9+hqATSEbVR91//sgEGFTSecjmoPKr+nu18afTyp/11ApQCVXqm6UHhyZxA==","signatures":[{"sig":"MEUCIQCEfMdCD/mGRB2AnRU2RGeSyeWJkw9CPMpSDa+Jbe640AIgFuopB201WQ3bs8yx6cDZD3AL19bXF4MsRfw/egBSLmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOICRA9TVsSAnZWagAAB1MP/A7GNsfhEULs9pwTuPdb\nkBQzwSp+IOP+WXlqKCbJiwRsV3LuTO7G379utAe8nUgpTQ4poG+E4d1R5zot\nQ+s//QWZW8lMzVRGfmmCKomiBhgpcHYdA6754EvBpnE7+5OQQgh62Bm//0g8\nUqFdKoM6YGOl1w31M7YEmriEzW5mSsn5BI3wH+mBv3wO6KfqF3hJqU52tgNu\nvvXnGPM24jzzUyh9Xkkl6HTegtk50kjBw7lW0L3UtCwAcCIdBkk1it16q6Or\nbz0ESUDV/19S77gNPXDCkbKs48wSJBiSwL7HCXgzlptRc+Z8ZwlrwOd6Gvvb\nzigtMgNFDx50yLu445VonacJ5rqP0YBpl9EBqdH8UO9d99ZA8D4scVIAkOHM\nfemN8IruW7hcNjll0CpI7ZgM2glf1zu7d0BZ7SgR6wPBtyKOSg6aF8patGs4\nSN0W9KeBls3+lAuJlApva+L4Ik6+Zdznrf6Ee6HNufVtYw2T6XXWlZRC7JxK\nnyoeKqpoSw5hFBAFytq/+HLGHHNdiGiuAlZN57EYlO3GiCrf2c/zQLp7najO\n9PTh0D58f45+sINofCN26bo0gumFw4/VO06EAL4VtqIGPDu60/trEHE5ycbJ\ngZyaFxWUYi2QkjZWlbWR14pP0GWwJ++h56mMiBfTokD4bgGpwFw2eDTfIC4y\nFIV6\r\n=aP0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/density":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/touch-target":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.2ab716cbd.0_1602806663414_0.6627609938138708","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/radio","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca4d5522fc949d1a2ccb63365f7a9402919f7b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":42,"integrity":"sha512-ThtorxPZHRy/1Htnan8hYI4JoQJZy0XkTXIFI21jjKEr/edMMNrn56n1bS5rW3mcyhKr7k4qOzAuTpsHnn1ixw==","signatures":[{"sig":"MEUCIQCZx2Bj7CMJjaeNuH1qJcMLNdxYQxj+7C2pvX4EDYo/UQIgeAuW3E+zT7iBnywu6TT0q0Up5HC4rtCxJ9jc2/Dwows=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3MCRA9TVsSAnZWagAABpUP/1iUrSib5bmyES/toeNp\ngcJ94vzuSVIXYwwqHvlDSAd5LTzBaFaESuroNCV7FyIujjLhXqmCVo95p6tY\nbgMinK20c53LJHngLFC9YeG36bclJJT6uAt/Jdsz+aWoHEFrG5HPZr2qo7B3\ncAUTghtXTbVrTeV91TBlPqKCibU00NZY9rWxNuktFBmpEAWwz8yLmYRVITRY\n+V684rpB5PG2Bete9inGzKTcGhbmn9Ht2gZ3GIGJLV0kyZXhUuVWLbEo/xIr\nNbohXwQXldWfqbc6ep1YLipK+yGgImOU21vmHw3w/g9Y/oI+ny0RzNprt7hJ\n6vUOhiusXp4oi0b4ABfgpIL49m2TD369MtsDCxm3TPsnA7Z2TPqx/FEtGl4l\n7JqNHLhAIb5XGdiE5b86bRws3RXWKWlyBGHmOqlDkPdwW3guQp0bitC8wMHq\nBiy+r40J93bvx1OiaTKPKwa1rM5NANXji3LbwTAn7XdNDMQHPBwK/Al+YI/z\nW6UORU7caV/FKpYpOYWChD5SK1n7/zlXkWYxnHrIkuQqjiwQwQCAaSe3BO7t\nuED5Fh5G6qxeu/RjruFCIrMa+04QFw2UiKeyWFvy8cKvd3KY8/7j8bfZax79\npGlf8szJ3oS6jdtb2qse9zq3USPWHQ+W3CyqdddOTCT6CJzL4uUofL5TYmO6\nYbmx\r\n=rwiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/density":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/touch-target":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.43c1c5e2f.0_1603116492179_0.4192665222810146","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/radio","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3df4649ccc1fbd0d93e72ad713b369805ca8ec9e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.ccc64eea3.0.tgz","fileCount":42,"integrity":"sha512-eiTLMIOlHGenkYFCZZ362o40J5HA3kqsOFO/16imKLsGUvCGLFqAIEeNkM1Vb22XdN6+AXYSJG7oPnE6puIEOg==","signatures":[{"sig":"MEYCIQDnHbomJdcxgqq6SU9eOwEnvvVOVY2Sdi885EXAgompMwIhAOIPag/iVUxD71iMsU0pR7aPqyLCvhQje8AVnPXET/Bn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1L+CRA9TVsSAnZWagAACXMQAJP0hDMMYrcLZcMfi0tE\nHXBGlnCRiFNsaA/YHYUArAZPbxqqXEkKSEYnOCwstYwSnUvyC0cgxmV/eIG8\nkmOaLlo+srhWhslk38z68uw/za5Aqdc1ZQcX/MZCUt6s4ag74PhB/nuAfrwD\nDzOpXjSWXUVbI1Au7vLGt8y5tSvyzjBaDGYAor94NUEesBOghAOXAkTxL23a\nd98t0RDx5aH8lhX8KZkxNuH3FqjqWYD6b8RIQA+kBdgDWFDMnP2sLwMVSvMK\nfj5io2YwGss3C0Dflyk9GELfe7TxHODl6cBeEZXZ1vudtGMADc+R8SmtCKH6\nQpPlyz3D5S2eI9W8+2iFPWGXdXMcC2EsLSlMmQHK6X6scsTfLR20reFSsvvC\nlGjK1AuFV4ykQzc8bmbf/+qncmzZdwnKv687OmlmXgIi5qR6+3dS/ZE4vbnb\nh8Xe2IVjthVqSQanFatzlRQEVS7IZqQbqCkEvn1SgyJnlFnjJGjehpy+mgfM\niAA8nwkULEEtVO4HgQuH0NyKJEcbX9nSPozLxmESbZdblm9P59st5Cjqllr2\ncszFHL61IsDF9X1yB3Gh0Vt382++g621bVm8zHV3Rv5Qi+AlXk64kprBS7/j\nR6pRNTBAR2TdEUWIX+f0LM8yaoAJi0gokcwpMFUL1pB7t4O2oe+wl1uzT3Cv\nq+zD\r\n=Zc/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/density":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/touch-target":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.ccc64eea3.0_1603752701745_0.497724371429785","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/radio","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68ac1996926544fa8172f9cb7860fb651c2a8154","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.a79cdd019.0.tgz","fileCount":42,"integrity":"sha512-m5UFjpqTYKMKxHZo7eWbbuOUvKe8Z7xwIRyWFTS7k/eudbCTn2P4ggKuetHxyDhLT9rO1qJYb6ZuLTa0mnKVlg==","signatures":[{"sig":"MEUCIEvNWqRDQv9XCjgKN/3iMDL1HR/Iffu1l/FWo2wAcAPwAiEAojzNXNaedRmKbv8WeyybCbdzkbdApxtMizMiT6QqLG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtaCRA9TVsSAnZWagAAy2kP/2ZIvbEuNs8yp/Hb6K5t\n2RoCxk14QzauzVfxUlzGQZVZq+1YeAWIEZMq5LQJzPQBxESxhpW2zGrmmg+T\nK/T+K1geqjo9X2tjO9Z1DMIIZAY9h8jwvtlglkBkQJpLd2+zu/v4pJV5odLk\nVIwGBYwusT5gFpCbTUrPMOWypyayydzpfuOD8QBnLwExr3t2Kuo5+Z9/W1po\nOt0OJCY4uFzRuWAVI8RWGyx6dLkAMduGlnNnKZxev36VbwfuZjLi2bTQtOso\naCeXoQwSz04TtdIbZq3uom5Iz1R87MMW1VkZnOp/R1OaK4xEsApzLqBwKgbZ\nvbR2pXOnBNkmP7LKJY7xCl701ZDDCWD+FuJ4ebRmUdOAUw9HOVS1QBeJh/0X\n9DVvmdpSwFbOxZD6b2pTxSqRpXZeat0YneunuEJqpZ/yldyZEg7VJTTiZtov\nik2zzhZ27SiTFqGVybG7S99dviuaoZH+Dy/FIoGftRsww3YiruP+z7xQSgQ0\n0Fj4D1OeQf/YyA6rwrp8wH7hYigo4E7CzuFWPgQIP6soGDAkPBq9m+tuD9xf\nmBDqnDA/9FjTqHWS0NFR3AHcANYLGvt+pyLaWYN1X7oD0chxyshth6AYDFNK\nqKjjYiKos6T45FQ/Bo8LmkiEsrV8I/azqvjy9XQTg5Uekgfe1e0VK5IJGgFy\nqJFL\r\n=2WG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/density":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/touch-target":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.a79cdd019.0_1603816281832_0.2101488019169968","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/radio","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dd557e4d073b57f585c071aa138ba774e9d2c34","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.596e98424.0.tgz","fileCount":42,"integrity":"sha512-GqPgdbIgya6lgDT4wA8WcFaB4GhXNBFkCYDlBg1OKLz5DmlorfrSGeUztnSUCRiKvoYdAq/wnwPph5yeTW4joQ==","signatures":[{"sig":"MEQCIFs/Y4FY+bvSJNfnDCZlmj0jtg4+cF4zkv2fc7xQEPA+AiBN0yPkG/G2Sytj0M8Z6CIhFagWb20zzISwF8V3U/mlyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZVCRA9TVsSAnZWagAAWtkP/jatsvSKtEsi4YuQbjsW\nCg7Nfra6fOf0T22f5zFDlWyVN+Tj/boqtt+0C+Tk0xn5JXeMmz31PtL2DT5a\n456j3kIKTX/HVZk5sElK4MfnwlwyGxd/B574doIKQ4Z7zqiXobqYBbBRMRNQ\nLpg56yhclizfrCoqmDx5yTWlDFRCItuYBkqL3f+/JNTr5ERPOQbm/Wb4Mfoy\nVWUq7B6qBFJlRDthyq9tmkEpHK5FyvnfvVQ/zqPwNsBktbvD/IpoGqyTCK33\nwxcvK0ORZNp82Q2G2GouAvnyregNzOZBulr7ZXU/UrBJBCh6iVen4eE1ss2U\nE55qLTKqvKpeeBwoVmTLtjawulPUDrmfmjF0oMOzSEHIr0ILGvJc8vTQcPbk\nspNEZ3iC4uPZxGRScdiQIUOjdhhru2yv5iVDhDi+vAl/qFzrGSxFEB6E0TG8\ncYxnKHJ5tJGmVXDy8L67yaCNJ6HHm4RLzlYiprdIpB4M27YoJ2y2hZ8ggYUt\nPgKv9YOkSijmSW3EsAToOqfVhMUaFU8bAo/GNP7lxtPwskhsVQw3Jt1wfLT/\nxo3IXiuFtuCS74M8MsqIWnFycuKLiwdNe+wFfllDnIjdHxw8AECabjjBV/eq\nH/30HQrBg34Q+08ptnatelTRfjAswN4OerHdRQnvNap1vP7z7xYUENvfHwq3\nryQB\r\n=BRl+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/density":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/touch-target":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.596e98424.0_1603901012538_0.9495505092230376","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/radio","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b6540fe37815eddf9472bb6150f2c22a737a9c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.05d5facc2.0.tgz","fileCount":42,"integrity":"sha512-STOSeB6CKclSRDyFS9scPykJWQah6R6rr1TZ9uwlnXGbNZreIXHHU8Z4nJA1k0WdCBV22yI9tnjWQdLaR7xjsA==","signatures":[{"sig":"MEYCIQDvw/dwZ5pkDRZ1BYmX961EyB7dD1PJpu/LB4dWDOk70gIhAN+YYZ7TuvNQQzYx+YXXG7MV0CIYl5wACsbOaMVlSHUb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhUCRA9TVsSAnZWagAAhDMP/j6RG1TcFpF1PG/+uC17\nb+ClycHm6GcDFFkJ5Or0DFoJrfojJyMoj58WALkYnu6cb0CVl/UGGwAvsOK4\niQlooJyM74nOwnnyTqrSC3WPw9lSSQW6+L9R00FJDwsY6/n1QdldTPRQefmG\npX6Z8hL7Fybwb8IIF6Gf73tuWUJLStB8feu8FGW5jIMzdWrmonVUdY4yHE41\nVnU3udE+2N6kWc6pvD8gq5ZwIDZ5IU1Vk+G2wZoHUnceoycxPudJLz1xMO/c\nHhGEenHSCA2XVXW8aPI5LUHpw2Xw8gtS4EzHtf7gNBFTQB8GkQTmz8kA0lHr\nSlJoEx3AmVyRSRgvSMX11revdwwmzzZyfRpGBzJ/oY0+PaRsFKWWIPytPJM/\n1iazeEnWdUdoofOCURObALmFoufjth/xHAfecMTXllgJxPnhhJsZ64NLgydH\nkP3AOSusUauStxppZVMxBEWnbYDAXn/W7/Kd104BBgRfxwosBX44sM17vJ13\nPbTnRnFP7ZlNRjt25Jzi7E2LdYK4DX9KRI2JqySunkMb+PkhWI38RCfXnTZz\nKXSwPh+x1uXuE2dkTx5tlIQDj294zrXWU3ZeFcklopBlJVR7T3nhrOQ8vGEB\n4h/2lDMeTshn5e/gFEyJbTQj1YbpTGJGdVFSQkhKooJ0wajNQaSRnfuqxT6a\nNT1o\r\n=8lPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/density":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/touch-target":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.05d5facc2.0_1603901523683_0.574738732400272","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/radio","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f5a456ac0188ed0ad87eeaefbb10fc63394193c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.291b3553d.0.tgz","fileCount":42,"integrity":"sha512-lGQcmuKrhXOgiatEqlYc2Ppc+YrF98NffTL+s4invJp80Jq/nhWumHr/lmegigrlAuIZlvvvpxM4Jdg1GOckRQ==","signatures":[{"sig":"MEUCIA4i7PjA4P2AgRyAaPdrvhVoysQBdgVnxfbodD+a08u/AiEAmNPqxovLx770zRwE0PFmzbJnbEO8NOxstBc+b2Ylw4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4lCRA9TVsSAnZWagAAn+YP/1jL2yHa7RLgbfAsRPjz\nu8pLM1V6h+GzQBlGuTeywMJYz4a9d8T6vo1NoHtxrjUFPhwGEer9eR8l193+\nMnbsbRCJ6kbv0VQVdz7m9pcKaR9wmGrkl2gxDzgDwawGqWs4R8Dh/HA4xElS\n23BVqXhlWWfwse6OLMMhWVPcVtniw14gf7ithNjJJaMxrdognKTspADa8qC0\njiBxW8P7BVo8lPOKWbz1LXs+Dc9aLv9rWTvddYDErKbGWaQVXZsoGvbQrSEp\nShVwUL2lbobNoB9lFNGc+K+jIWvAPctOleHkODMw+EbtTIYcZ/0Gwju1XN8t\nzmfRcCpJ2i4Fu9wIWQBIxixtl9/A6Pa4M6UJpw6vkMxy+wzNJAWu6LXkq6zc\n+17ImRiqJszmTEKKmt8MHanPbRtzchmCNRO/E8sC1TnQ24/ONeJPwxQdlVGu\nLaR8z/nGk2ZsoR7Ff90KHrRcH9CePm5sHsyZBN+qhIKN8DV2DZx0svXw7dfD\nXX82+cllnPUvqnr/oXimGrh7HR/+wyMctIY3DNOyJHMRDsexqKv9BxZnbs1b\n1Pxs85pyWZnKcIskmjETGiax0KvDoBFAH0+rQrPI5SBynXActQnQT8vfOS0l\niZV+m60qGcnLlll6i2HA2uaQaZWcj8Ik5aMuWtiULRntlayVdcARHXaX1f3O\nfp2O\r\n=YBjK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/density":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/touch-target":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.291b3553d.0_1603907108768_0.23298173890279794","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/radio","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4d198eea3b06ee2bfd4efdf27be2b54c5364552","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.dbc449b09.0.tgz","fileCount":42,"integrity":"sha512-P5vSqeRXIVpuwNPBrN5Tc7WlLDnPB49N2NwhcykVMNPs6ut3oB+TL6TgTwrQPhG2Nu5koneqd0nJaF/5JVbnHQ==","signatures":[{"sig":"MEQCIC4hw20SzJRNtx7ZImB2ieqe8BYUbplgxIUd5YAHUCPZAiBo0N7dbK1gY+MJegxcSSMvPts/fKMx5PdCmaqWTV232g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSkCRA9TVsSAnZWagAA0CMP/1D5x0mjyAcz0GDRgt6I\nDKlnLG6V/1SfhEnJAhZkeLAJv8TOud62vkSN+R1GsMsMl7dJcoCB8slg57l4\nHaCzPRuSUwcBEDUzQ7MfPDWQ0pY6sYpyJ/uhHBklOOX4aL5rO593TgSKRVge\nRRSHP4VJHRFp3bCT3KMv1FcG25EM5T416JoXAeKIqs0f1VUUinPksikm2Dqq\nTnrgWRVzJC3JqFYoxtb9pn/cn9TVEP3YW7mOyy0AV1+BEb4wEK+yZPWYAuRO\nTfW1BZQRV93XkE9kcWWarBr+6JecKdRcFtjN7RFCu/nGfsvvRG7lzfM8D+SE\nki1KO4huNELpw+yZncBV/dooeIwpT/zHDUVHi5h8iUuPMLLvTiS+EdT5sfVv\nNuvdF/nb2Wr5I67IOzV9vlj8kYyrBK1pMqqeJ8r6Me3DqTj1S0MPpgGaKrk7\nwwqW6EL5s/7MtLkogLHL7d0e2AG+tj+UuW6dcsw1GoOtln3vKIhL6fOS2Kvk\n5NnWwKdRwwHZ9JI/yAqFVOTISsAosZzRk87A4Dyn5CMWxpRI3WWoc8pz79FU\nEHdpE9JBArrJSLyxl3btMp4KFCmJcCzTyJ3tPFfTpuzxH/TD99aG7WkumKhh\n668uqZN0Pc0gvfhRDMPcIasgRPhrLzNhWm8IbVTOWx5MSJDwFCSyus4VH2nH\n1Eb/\r\n=DsUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/density":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/touch-target":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.dbc449b09.0_1603908772003_0.7952331767025329","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/radio","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccbdcc5be8d459aca1c500b6144750d0cf8d5bca","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.4794b25da.0.tgz","fileCount":42,"integrity":"sha512-ysS6J4ivSEj0EIVTfk44UjOuBv8sn/ROy2vTUWpLbFoJaC7jVdfGMf/aNeWCbbUf45HsxTSQYRv2q+Y2W5NPyw==","signatures":[{"sig":"MEUCIFWw/Urzr0iQPl4j6b0NOVhr/7OE5IuFhhgxyUKO0eQzAiEAq+e5jYRI3uXgupdFSVbPeMw6BTjN257e1Y2nya4p1Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtKCRA9TVsSAnZWagAAmykP/1eWv74/dma0lFIS3kb5\n0QbGd7LPLlaZsUEXBBch/YGkzy/pyck+dHSFH90yKpYimceh8xVMLHtGZCi5\n/fsZnLbjDFArmFsXTEroiAok4yWJWIjRt2CRBUzBmpO501avevX78z1jupEL\nUg/cg45jjQJEuAhqVy/pPRW+KdtuhknMtSBQIasM8W7XoQ5AbTZvXPocKVTL\n9OitWog7+4KvPwF0j/EXSJtaWqB+Kc9BJtEUMFtu/3Qcgy1vGmOinfGw7pnn\nQKees5R+dnCsyu6terYGJiEeLy2CeER8m3WlDWDiIGzjHe2p2IxNX6BkpZ27\nMjz0Sk6NTce5POF1F4WeVu/lRjjq4zMsP1FmF/MRIo1XmrL9d5gWzXHqERuq\nXbcj92VXQyrOVmL/2QAM3nW34gcW86zRs370oNfREWrN0yGX5AJ9YPAmKNiv\nc6W5AGF4oCWb+b9rgJMqZDKX+Q5ipVqN3U9gxOcG4CO4CQ69FDB7cE2HMkmO\nqp92KqaPmIyULburJ8IeFOSHkH1z5Jcm6Fuu6bOzho79ibQsXQAMlL6BEQjg\nHn6UNtlXoDgN9UTOKNqqblWfAPqDXMiS4Evv09abamJkrJ9kGNBKH+13Ln8E\nIRHdsoCkOmQEspyeKqVvBkO3XTLTa41RBwQLvfHF+0pSUrxONiQDoAXa7hJC\ndccY\r\n=Q9ur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/density":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/touch-target":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.4794b25da.0_1603910474170_0.7496291604223713","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/radio","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9394799789ee32e9ee813adddc89c5ca05be16a5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.c61db90a5.0.tgz","fileCount":42,"integrity":"sha512-Ic0GFeKMaCuaBW/x1UzhMnREBFVbkiRaZ4xFt5yjZzJUlxdylWpTw39mdR8Lrz6CGiUNZp0dv3Y3LKIFSlUISg==","signatures":[{"sig":"MEUCIQC9WXcYhFY/htxY+4vhyau1Qf55j7ZKMqODgGsZeABI0wIgcIXUvhDM2mU9cdhjXOvc/yAQobbFAiMqvvEykL2w0jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+sCRA9TVsSAnZWagAANvIP+wW6mZWq+MdMXIW1FlPn\nUvAfEv2mM1DoGY3BIIvs2AWTSB1n3gxggLy4BIf8cEtrA9Q/pDlO0+ruLKB/\nmQMxEIzqPzk+8467xHCFb4zQnrq6VG+MvvCbe5XO7+M2las6xv8QoDh76rBg\nHn/n4e4lcqNLjYlot1IT8URl2MMZvhze18gHZRTs2IvDg4CWqcYNnWwBfqd8\nmSPAR91p7fjND0ccrPTQ7vNl6bOp+HtWgoJwQ8qzZVthnqNILZkHsdF+hrbj\nCMCJA+g/O42+kqCV1XIHZP9TJwNcdMS2dK6EUb+St5CxRkk5aBnmewbi4EKB\nrLI/ogFkYtQ4Cq1qTN8gKzlBSWcU3gELzN6ieZQ8RTZ37CUT0t64mrpqtLL5\nm0u0Jz6c9uD1G56/eGig0cQ+zGiWlf5SRsgW5ZgRjbEkiJaDN2mQ6FdVLoqy\nt11rgKo1x5KupPn+U/CIGWx8GbvTiADfHxFE0/Nkq5gZH4X6RGvm+zScgXVZ\nvsDoXSHwUjLAN/yRucbJkU8TZ8RO7lRf1GNXVr3nYqLTaoCRyNW1X2ttZWdE\nmxlB1Fmf7FiVojA2Ek41zoGQmMzqMm9hUv43ePRgfPgWcpZ7sAF9Nv+Beq8B\nJzHwR2WuyOEaz8i/oucmc0jm5rzq+p+Iue1+XFg8PPpvAKgFZe3Vd2s04btt\nedjW\r\n=Fqsr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/density":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/touch-target":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.c61db90a5.0_1603911596145_0.563047704964295","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/radio","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"962522a0b8e935eb952c1d8f929991441b0a3724","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.6d9648ab2.0.tgz","fileCount":42,"integrity":"sha512-w+jPu5Z3FmYf1CzlTWHgaReDn0IEqeHT2+7gfE02RQAob4JeBSgDNnGnCdn3T4lAu1Gq56i6YGSxYeNs3yLyMw==","signatures":[{"sig":"MEUCIGoXPpsQg64k/aTT93Y9k+8HytZuuIxGJSkhumTEXxdOAiEAo9PnNwUozy3Th8Pk0tdsxUcE8JZTS+oFhr+sThLmoMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybmCRA9TVsSAnZWagAAa2gP/i9Ggz4mN2+cIaqCLxKf\nwwgPnQa3E0YJzQyhtM1nzaRrS6YepszbMPCQGBp+WeT1q5TqA0LXscrqZOPS\nN1BonLbr94/QaoyH2FeAWovj/tkSJW78r44ml9qzUyHn3GWEYg+UHE11KsPb\nL3DZKedAWZE0iPt3Q9UoezfnPJ7fO8TbGYpZ9wtrWp14nbflXZJ27kNK0TVG\naykEb1FBRIXKsx/YnMdoYjVw4ILVsMvCbyGCsxwg2YhuRQ5J5ZHglr+ZYRl7\n304yAktRIvxqiqgnfQfR3Ikati1a1qkC5VEeDIJ0mzTYIs1Zgy9ghcX8n+Yj\no8TPfIltaB+Xiz+JvScOudzWzT8at7E/rm/YAPjq1qtcFODHvaBn/s/b/4Vv\n+J3+LDtAbFadmxEB4YpDrkQn77S1b29OH5Lj1LS37KHHXEoh3WnYRjWW8PU8\nNTgPKR/mB4Bo9rkCyf1tpwrYI5xUOH2gmwvbO9BORxUsK9AdOxtOJzYjdeJB\n5NSYeF4l0a5xbvsm5zL5wiqrF45HwxK0SwMQ5hKJqsY2EHEqmHm9i8SjRUga\nr8eMA2D807kOpl1UeoLaraNRJvHJKw0ksUyKKoY+jbIUOlM6b/fYRnn5lX7j\n0YXc9x25D07Y3RduGNoq1fybqAXD+GUvhNPhE5KzdI8wOgkUWKRLocMs/Mju\n+jYT\r\n=fIAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/density":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/touch-target":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.6d9648ab2.0_1604003557572_0.42805212714828045","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/radio","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fcc78dd63bafb60d31d8a7be5074cf01b81c4a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.5511c5254.0.tgz","fileCount":42,"integrity":"sha512-dvU0TExoEF+YdknwVW5J4AP90G5TP+VeUjyoVOOyjYJgBbZbQjbia3bbPJDhqCGJ66QTk95pKNv5u3ns01lo0g==","signatures":[{"sig":"MEUCIHkZzaMJmcx7ptm4EVv+NhIFErS4vJtnqfzR+rLNydJkAiEA6uZ6uLZuc/BreUgrdZ7HpKJl9hRdekcJzmSbHuZjz1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFS3CRA9TVsSAnZWagAAUUgP/jW23j/B8qXF0wTJadPT\nT8A/vBTEPt94FWc19TD1zPVTLisOQOxKc2pssgW65bfCaTNz2Jill/skBd1b\n2NDGPCgMaSp+QDOkSxA4nQovK+aZUawupA8y6ufP6+zwI84KIRGih695W3pv\nyTwY5MFl8lXk6EMfhiu+VFFgOlEzJfZEx4K6DNx0s9Jq8pjEEI1nNNYqYdlT\nrNnAmSr6bSykkS0wStQAzxR8ZUgxSm8s+rxXQGsOZLt/YpwllJ5L9O02sqdd\ngnfGfSZDV0wc8dvmb2cdYtzbYXA/S0pbGeJYa8ZMddEUuIw8ghkGoGbTOE/5\nzFE6vD20FqFld5v3+ijyPBdKGyZ9W59rgSSAZn5vgsQIBvd5MK1+/YeRde9K\nFuQPnMgAuoNo2fJPHCp0nDBHgnnR9TGsEfAKkvO9+xowZ454TqYAz4aX6Kmw\n6zcAYiJoW0TWTl04uh+lYUV/PTP9ZnYvTrrVqQuCDVELFbslvLE1b2i+NBd8\nTACpNvFw+hkDgQWncwx95t9rpN7frrlwxubu0D6Cdx2NoEB0KH3Q+qJlojOs\nLMqdUK7anhfuv5hLNeGHFaDwH84zdnxdar4VOxgPBnnm+fx4kog6hzEJnVFg\nckVqtv4XlAgXjOJyFtzhuM4Q49WD4dY9fQb+AWIv8/DIVRV1p5kS/FoMImqQ\noh43\r\n=UpeW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/density":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/touch-target":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.5511c5254.0_1604080823511_0.3516547863887476","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/radio","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dc477cae8c1082e06aae09d5a8452d19d87b621","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0-canary.bd6e302a4.0.tgz","fileCount":42,"integrity":"sha512-sUb2ewG4mnTxcptTh8tyjm7IdjPVooGA9tLE2NbKR05uPI+J5abHCt7Qlf73eqU6/LgvAo6QRJbOvxyu+DS41w==","signatures":[{"sig":"MEQCIGke9ReJtVq5+uhMEkP1pmyNCp5GHLgiKdHol/lm40g7AiBn59wn+ctAkSSF/8zgG3dP821xVz6DKJ1EA6I3xrnV1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDw7CRA9TVsSAnZWagAAHXsQAIy5dCQ8M+0jQTytK8C1\n9N+PNWVSY6+8dr/KcEs+5W4wram90A+pq8nSfmArJIeD/y34dY6Ful5cOjyx\naNHsdRvOFPeP2iRfewJ0XtUQwTYrpS6fFb8xK8Lskp3DaovLAzg+zlYto2uI\neuAa0TPgN+fnhzPqjyVpX3hjj00hw2V5R01fb+0xluFN0Qhe7BMy8vRiVpoB\n0ySZ+QEQ27fszQT26dGBi7thou9gGuv4LFZ6t7oPI6L92GpCE0Lzalvc0aiD\nl+dQIh7rpI56KemO56rAnqXPixTLBuDXTX7ty1O8mLYA+0DLKWNxlSJmj8Vx\nr64JLB0YLvQeiPiGayKQRI3mmZd8IcsnPCD+hobocBcAx0dbopbELF7FvURD\nQSi+uPKI1hNng+Qzgy23s0t0BN0oTk0LeVcQizyp8j4bQUbBQ+ly/jSgxhi6\n4ccrtH4cOy0ILubEkIop/bRvy3VmqknyPevn7kFL70TAGRnvh4358iq42pqg\nn7yWeE41MaOfTqfpRljO7B9XXsRXTGPJuRyMPGx1RaLmKdMrBg+oqKcuHGGY\nCXL15bFw0JU2Q8wd/WseK83Gy/YWBN+Grn8ktSAHfC+TKlAFQkJcdT5N49KX\nDdK1yw164VCUYHdnnXYAtUFfXWCfel2bwVM5cuJ2XV+L3hKKE5Elxa/zpMlz\njyG2\r\n=cSzs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/density":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/touch-target":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0-canary.bd6e302a4.0_1604336698855_0.5080961312904941","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/radio","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859fef576f896070878ead13f715598665db4e6e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.d6b5cd418.0.tgz","fileCount":42,"integrity":"sha512-/aNvF4mLey9ecVlVB6UynNtUJuYOH2TMkCeN2zk+ScQaBgMf5NlcRtUyJNsfeIjafymzhCesbXeHgN6AjiAgmA==","signatures":[{"sig":"MEUCIEs80yEYWCbhDRhn5fYa0BN0gtDOt6tjEhcKL3bT5ndPAiEA6lbE9U8rk6nbUqKWzN1+NEmfnZ8Sd7wUjQp184T2pvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI89CRA9TVsSAnZWagAAFaAP/jb+OHMV1uL06Nyczgap\nSp3qIwVxVX2K/InKvNgN4E1VyPIGVsLd9rqL7yk0TMNchzEN65/U8x2xLVs3\nOqr00LsvvPs2TNHZstJTE7uZbleZg2zTK3m25QRlQV7/jnA0GhzhewGobwB+\nZ8nucGG1TIWnOpUXcF5BUmR4f3/eluX/c6tBF+maLAWoTFUtww2VX6/if3d9\nOmpgatig+w+Ocqovs2la65uXxty8wSmkT2yAaaT0hSr4I8zzSaVtz7O89xnj\ndCYTzxAHhDNpINOco/gTBH2+pNSTZLHTJzurIgwBSXlegzXoinqdDFN/BxGN\nZCtKp/5Fm5PMiAyz86gYjCbQ2PFOMSe6sVd9LOWSvUcVFwVg0TChZHJFPja3\n9UvM9LVLTzjdNkFUZkQkGshr7xrmQPMOBLqE6FuIi5v9GdUy00C09AP2PcqU\nZhik1LKPvOJwDVlxSpLyxTuKS0JfEroGIA14WSQRU7L54Na7raPdPQXYNGM2\nUCsXvkNpgbyyucmTRBkJ9i1ndzXGBsyy73SYif2tWwLSarpx1IfVjAcKaLsS\ndpMamHSvOaqo9wt5n92zHJ6/Pg/wOHx5/Vi6VTU4oU+jBGCo/mcMcFk0APYe\nErvvf174kiguYpHUW0F22TRVqycCurpeX1S2xYTf6aEkUAUNNlyh0yMRFdaA\nmEYv\r\n=F4p/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/density":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/touch-target":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.d6b5cd418.0_1604357949513_0.030884265017546486","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/radio","version":"8.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012a68a4130904aa13621a2e3c2a0bdb4e93beae","tarball":"https://registry.npmjs.org/@material/radio/-/radio-8.0.0.tgz","fileCount":41,"integrity":"sha512-TthlhTB+a9XJXxdAydT+3zy1kHY1ATdLPQRy5fAYuY00smNYW584SftWV2avDNsqa8T+3/YvlvXWNQnCCfivyQ==","signatures":[{"sig":"MEUCIEOrMKjYmH+mBYN8tderGg76XnR/DuSHcNkTiS/0BXMFAiEA0eqzdKzEFRcBqwKRMxWO7LsQY7JzunsTz7U5uFHVGys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9YCRA9TVsSAnZWagAAh2UQAKByMF4CZVbgLb0DLrao\nRddu8B/ey0lRYb11p2zpyByOvRzsTmpSzMuogKCgIjnZRojFG2Hlh7tGUaAN\ncLETi6OEZAZGwknDmaYevAcQ5CE63f+Es/xWTEzp+YSFIcDKLGTndfw87D9e\nToIJedPq8pe+7/KTssBLF4KB0BU9b84a70I/fcE8k1gt1Mf6oPTc3aUCxSvF\nPfW17sPjoTbruyf0AwfugMT3jhwiZxrmZmtWeF+wOPBPKzNpdPvKo/0pnD+U\nSXRAcNVO3eQAQv5liWrduMV2UmmT6ymwgiogiel71PxHpETsaMbKTng57mQ4\nQp7epUqji4CxBOih8s6+fK4Jtd/WRzwwHbyilRtcoNGpAkJHwcISSkvQCILR\nIpiXSYZ0goE4uWC+NzQDu/TtZ5uvlMJ14gvWugObPFhYREBU+2eKDU3XvCXt\novP2patGV9nDZu8Ki0k8KG/yOg1WUOgRtNiZOczIUW2N0YwQ903op5SCLNVo\nH657ncf0VoNnCWdCoZJVW5+rEj8ITYnLFYkr9osrvLwIGwAevgp0WVFtSF0h\nUMQhTcAPOaMrnDaX+gnEfKk+lKW0zfJkjxRx5a3PU1dSxafsxYc0aHJyphgo\nOAkLyGCv4IagjrwfCuXWihz0+r4fftIFx/qHvkjmpV3IHdl7YZ1QY601b/6f\nnMuN\r\n=guU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^8.0.0","@material/animation":"^8.0.0","@material/touch-target":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_8.0.0_1604357976079_0.2806782139465107","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/radio","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16ae8b1e441e7a45fef7edc011b361ed92f46cbd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.fdf9a2634.0.tgz","fileCount":42,"integrity":"sha512-Zk78YsT4Y97FyPfH7pxBKhwWIKPEWbpzOSgk0ttxQwEhBBNWg41hPZTGwWwB1qx4SUTfrNo12bc8MgulfuEyfg==","signatures":[{"sig":"MEYCIQD+sjVJSp2AaGD/LSZAOQol/AXxjf6K2Scs6/Rh3OqfCAIhALxiV3hzM4qPm/RTkBgwcbng6iQwmxHJa9UV2bv9Q/nM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeX5CRA9TVsSAnZWagAAR3IQAIz3MvMwTlo+CCZ7d8Q1\nZ8GEnGyr6+tYyFQzMQKQ+4tzWExu1xMwW6gZCzetPZzxtZB58l/a1fkAAz40\nQAHUBoZ4gCxcmpbYZc693wH+dZ/m2J40THg5uIOPrRiKY6eBiBWwg/9dgsWC\nFzrO8KQelZX6VdaXmHEmtlZXG/TE3f4SZ2dSpEE94qqvI4zVN37APoRLy4aK\nbq/JSr16z3wamFKBNpoMXp4NoQxq0TmEaLHFWwu36nG8ene8eIdJ65dWKfRt\n5VwxXPLMyZJXbwXWRRuti1mgDH8AICH3vebYWFhEU+3cGGSiBA/n4ujC3aTm\nvoxC0eP4srbSE+c6FbWOGGMgBlxO/JDxIj1qwn5/JLi+9VjvFG3jCEHC5VUP\nUyWnxxY8Og5bXH7qzD/MpWM4NLt5Ko5TIt40AYJpPrS3OPpgg2uoub1Jd+Ml\nhaKqgExaQrGEsIfHnf7/gmh9LgXEbEhaZIFW9YH4Ze2eBgoU2uGpiPnrBMHl\n0NXsMkrq3gNu+aqax/lnkQaX1G+XdigcnsrEpwnfll8us7cgS5LpNqu7ca3T\n1Km69Zv3oe/4Qdy7AeUv0lnQWG4Xl5FDbhTq5nH5T+DtXF8SohfcQWc75r9x\nT/0vPV1o6KaOgFrn/0bZqh6EU8ZAUQFo6j3H59QZB0uqBMwq7nczfZqEkeiu\nW4Fv\r\n=wfNz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/density":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/touch-target":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.fdf9a2634.0_1604445688962_0.012673788189532464","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/radio","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98d48d377afbc4c6ba9dfb13058ab213aef304d7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.4a86f30a0.0.tgz","fileCount":42,"integrity":"sha512-dAuh/DKOJtFzqPmYnNfqWbZl1j0FOpeOrVY4f5ihn661lfbPKlECCUBYl08b3q5BQOGTOP7fsgELAL6YhVtYSg==","signatures":[{"sig":"MEUCIGQgEHrlySCPDrc/hAb5NWVih8cNPeazuOMP/+Y3f6eKAiEAgNlAkVKPW+kRqe2V8WnKrRkRGtTWU7+vbUDCJOKnZMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoed6CRA9TVsSAnZWagAA+cMP/im1dRt7E3Og/na+mhE1\n/NBggMt2lxsjpmmXOksRnnifxJ5ZoxJnrvb8/aG47BqB5NXyEzkH8zHtRnBH\nGA6ytnZn+vtCcz+pioFyxhvS37JhWaK2+BaPbO4rAks7ILYRWBcMol6Zxgoi\nQI2FIcaavjFK08X9hxIO3f4RYdQ4pqP54pqAyK0G4PlqgHHhC2MUWQTsiDZW\n3kiBdB94ppm83zHG+9JCMemk5H44YiwpD8DMbkcTkj/XZEfdBDc7UCy2HZsa\nwqkTQ+/9F4nnU9J9wMl/BZBn8YOeyyQ37FXbQf01DYuuzepkTsdlGC9Q7bu6\ncf3EEAZj91gdkw0cyEbx/wIhnE8FVOXmKkSXxepNKXWY9Uax/EjpuTm9JCua\nmGNtHaNe/8PmIZIcv2OTSZNiVfokdSH4NMTtAxNwaF+n/YHG+PMmdyF9FR4u\nd6JRakhBo3L8JTmtzUL8kzpl6yw3rj3lIlYzhPmi0G1wAXm/83wDW3KeXhNi\nCWsKmGr9bb7jzRRFJMPe6QcPe9mcamNX0WU4N9V0pWJ0n84Fsm6DgCtRbRYU\nTpH5fqsm/OwJQ3dAmWDlqcSyAsuIXuZQu3NPQiBiJALyEEgfPIbxCF7ePLBA\nLR+dci1XCd6HXNzqMl5iuVLXrhMy95ooKkI4frTaoQYrAFCqrnEAnCCd9Oe1\n5zAx\r\n=4+oZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/density":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/touch-target":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.4a86f30a0.0_1604446073592_0.2015696685311812","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/radio","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1e02ee2715c00717dd202efb6f4f8e277f96c7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.fc8b045f1.0.tgz","fileCount":42,"integrity":"sha512-BTCJQmpJ3dCc8CkipUgpnRKl9TltK/gywXX5lmWqRBoUwwtHN8RvZvOrCG9+uDKK8j4TGbijbBPG8KbBbtgzng==","signatures":[{"sig":"MEUCICcwJ66vUKEPjzxTt9eAUtxGZhGOyTgvVEXxWjPvqmyTAiEA82dGIBNzW6oc1xiGlJ7lQgSy71XlZxGUe4SVHG1h4Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemrCRA9TVsSAnZWagAAymUP/34dGM+7q7oV0L9YT7bl\n0g8GKIIaRyfGKP6rkKaeC+u8TvCsR30/QjOIJYXlMmoo7J7ZOiSvnYxhvIlO\nJsYT6lez75yA5QS1+H65ps6rydW/2VgFAwGFy0n971ZuvWOEgH4dlxNE9PZO\nfmrai3BeDegRL1pyWBpCjE5GvQcdQNR3YqrRM+LZAdIpusUpFH+h3XdbCm5C\nW8HiXoHQzQ8p/0OiXY50Y70MbG0GcZF7k4Ykhz1taH8vwUHWJYuGK+0joB5B\nqhNzWfASWlrWmUhSLJmYjJkIYz9I93RMqKpi3NBc2aE64Y31GcHJVZtHbFHE\nUUKlDBAkubY2ybDg0vt7qcyKJ++XYXDnja1swpD+8qq8Oi2Qp/qbVUJkcJV3\nyqe7K3vHiNC3n4XMw2ePsSrzFlXiaQoQzC5qwJuYyc4r/6TJDTwL7tyLPjNF\noTtdnwpkUfsyU+mwAIT3E5xd35C8ydCqZUp90cF0/lvrTK9WP9m99c1YgmPz\nfZ+buFPZ01vHsaMtiUkbkOo5CPxMNbBdxtkkcCnas2O0Mm8qZudaP2dnCsdK\nGzGo/LMg2KkaLnqtabdrECfP3Q8+Amn7FiF3JGeHs64JmKqe6bp9ojXW+8de\nwMVnzedCXbM5vGY0shuhM3BaaboA6z+Uvhi5DsCJfSFiGoaYZuG8rfJJB0Wn\nb5kr\r\n=xUbc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/density":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/touch-target":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.fc8b045f1.0_1604446635426_0.9607782469914634","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/radio","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5254b52e644329e1a36f12acf5aa362eb71aee0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.a0b2db26b.0.tgz","fileCount":42,"integrity":"sha512-QkLi8M8vc3j9oLGkaVthuc3YSW5AGaxYzPKlDC6Uczr+cjJ26hbZUFh8STAAT7EcWeN3K3zntI6DR2x42//dNg==","signatures":[{"sig":"MEYCIQCbiqjqU2L/9dupdv1NcI3BdgPj/GbknCR/x6O9tVdhLwIhAP/L0/Nm6NF7qHO/it94APU/nOp2uYb49t9aI7ld1o5y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofEcCRA9TVsSAnZWagAA86gP/iBhrPkxbuI8kVzIdVXS\nFjkMKHssu3JDWSMCod4hQYqR8bJBSEfU9bpJXfAti8ohueKHM3NnGsEsIbBQ\nc56onAEdGmTFwJaR3iyBfIy1jN2vJtASFHsVD9j8GzatiWQkuPZgE/IBNOTV\n1UrGK/Pbr1F2vyq8ESJYpY4HTwEPA+e/Z8GYsrUfpijnjBMCVYdwAx9jvvH+\nksnKusMF3Rrcr44EkbLNUgxH0b17W90KdG3UZScAxEjnrSzjffZ6zCTlkSNr\nSx+uAzKtR4LoIekYc4W79Li3uotpMO/+GFPAB8yUtKPF6gp39DbBDIJHpfQK\nIrWI8+S4BQFQrmbjxxH24uMP31Yr52noSq2Cs1M6ccRe+XWZFKHB7d0umUpk\n5u6edy4iKhKtqAWcHOEXe6gIzEwARUiHPPH42DVHVlxAa5TyXnxMCmqFbQf+\nw0qoSD2kpmBayYSkWN8QnjgDVnNMay3SrPE/j9g+3UARY1the+2qWEa/Pv7i\nZLjP9hyuba1iJy0/GwahvsyL78O/C6gSR7mDnW8ZJWkxYQH7B3kz58hccRwB\nFkEvrcmIvTdnvpQW/HkRGxDpMFQLNWZ8nYEL3pIK1+8xme+Fra8hoVB3VZ9W\nGlX/Ezg+eKN2tb8OCWM3vk0MwwH7E68JCb5SA+NUOe85ZAWCQlTi/9IUe681\nulhk\r\n=U5mU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/density":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/touch-target":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.a0b2db26b.0_1604448539738_0.7155299950152847","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/radio","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d4775842c788d2ec2e8346787bc19a966ef863","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.419e03572.0.tgz","fileCount":42,"integrity":"sha512-NMNOy0b+4rC3rTAnFLl0LbeysejH9rgSX3kVUJ7Gv9JT+8ghSBbb/bDnrQCxEqpEIomcHTUXxdD4X6tN7egizQ==","signatures":[{"sig":"MEQCIGn0AcsQj/f9Exa+vcGKma6x7llNF38A//4bSOdmdDEvAiA7tnjrOz29q8MIN+2L+he+UhXYiBM+DTERVFJbf35hLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTWCRA9TVsSAnZWagAA3L8QAIjISKsK4e4OZKSc8mBP\nXDBsx2e6jEh2NQDyzgOdRhAqkeRl5u+vOzV7DUObHyke8Pq155GCxwlMJXRo\nyyqQXgn8VRjCxYknBBkrscQhOl80474XEOj36tVe2uq3woUmF8mtmXHmbbl4\n+w8gpQinBohQqmVuxWf7AQ7ZwK4KrdzsZ8wsSaGK9Cx91TigoFSmm0XgIK0C\nxiJtBu74H07OPCERWxqK+vzwrNLVi52TcUuSawj2kP1ITCzfXvLU4O/Vf/B1\nouubyLolYAWL4LQCGhCoIo5ibGD7LYAfBKBjVHyzozDDwKoiyvxs2B42B+jX\n92HAg7gpsndLwy2wji65mryLE/3gW0f3hv5tOxEAw+a66+w1w9qLnLr8PqjR\nNWKMgYoiBPDAJ/oMEtnRn0QvmuGSXxfjv7hucOSdjuZevWCPTbGHJcbbaNjB\nMK5ngQgyng+GOCwe85q6x5+jRD4DGRuc6emEuqwFNxCAK2pAuxwSkQIast3Q\nesDcBw9ww3fjUel1b5hZti7Sa/ncLuoOI826WsSl6sZ11iotJFhghUY40MRf\nEu1tgz0KavhU4FCzwyQV8R7pT27E0DJEh/CuyShoDSwTkfB8qUj7LIefb9Ep\n/nKXI3j9+SltYR9dNpULB51ARlYNVP46SVo8wyYleh4HXgPFrU60uJXrn+KQ\nrtTF\r\n=vjVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/density":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/touch-target":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.419e03572.0_1604453589784_0.32627993777562714","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/radio","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7417befd500c1503685b8c8f862c492d8c2c308","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.a432ad542.0.tgz","fileCount":42,"integrity":"sha512-IaGoWV1DW1dqRSMsw6TGgU4bjM0rYk0f7Q9AAfWthlmTdewjv/pGY10UqqZPznsbn3P8A+veThAcXaCfFm1npA==","signatures":[{"sig":"MEUCIQDjDyBHP7v9Gxghd3R69/I3P3AQneACdoiC+drsiXwKMAIgbG/mTPdvfDNcEX1kgjaWqwHFBqPcPDxRGyWndbyO7R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrZCRA9TVsSAnZWagAAsr4P/RPDLMNf8dy4OaQnjjo2\nU5ZKBbO/6o/nnBlPxpGNxycXJpwHjXSaEqNY6n5ymof/+pJ/+IVBvoVbHdZ+\nXFKaT4GILU2428megdCXbxhraP7mqkIP5E2LWd9oZsktKIxm4yiYppCSEuZi\ncI73ydc/3TgOgoFnjvtoSLZkiDX2+igwUM9m11Efa/khJR43ADBuaSsx9hsP\nFj1MM11/jC2Ozh++e/88MBuOMgJW2v0Ev5obNscynfdT1wrg4EeT9XZGzZyn\nmaJYXwwjiu022pCtEYc4RkTnl1Kb+xd9vQwjjR8ns5J3qT2zOngGAGVOhH9u\nnKYvi6SNeuBiLzWAf6yRW1Csyq8mj8o0beGX4NZII+ZGXG/8+jPt0FygZxv0\nri0BzacgfVurHc7Kf79Z7AKaaUOWqukphaA1COl0YobSsPI8SGzBlCHZDxBo\nsg9seO8k0f+JKHMnsmdIzNLvtVJMgYZg+7tZnxGM5sY0Pm/f+08HIcQ3DTWN\naD+NEMVcMW/yn6JalpkCUxPS03/MA511PWPMDd4i/pcoMi8jzj4SjDaTrvql\nj7ZKiw44QG6OornOyDuNPbNp1qZ1augmAJFgS8thJMHvTow7mRwG+wFe2tMh\nUxg1j+XtltwZHWIZQY2JyQPV74ka0Qf/vbUeKjR+NrqkykPMpOqQoAVx+fc0\nAx9r\r\n=WCox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/density":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/touch-target":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.a432ad542.0_1604627161171_0.4401110906565082","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/radio","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f517321086240979ca8708bd36ed8424e5c760","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":42,"integrity":"sha512-rT0n14uCPcWbIWVu322TorIHIXyy6A9EDJLzKQ8xFsFPdpDzvzjJ4zjwEc/qz8yuCxPIQQ/7alokpNd4S4ZZHQ==","signatures":[{"sig":"MEUCIGYwMFKTVyzrPiM2txfKXI07rglo/40mnh2GA2ujOpB1AiEAiynd2uDvkZcweeBFRL1kuFdFvzj8hvmdvmq1yUvjN9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9nCRA9TVsSAnZWagAAtnkQAImdeq3e+FTN4WuQa2ey\niB72v7OmXtA1m4YZBikFzGtt5c7F851ShjQtXRMeZrcj/J/7VDeg1HEQ4wtL\nQ1AaTL/USJYcq/UD1mPmA9a2EAxC/aATyGnD92h6zbx2rd88hvzDmiv9mkXd\nlUtUATlRGzDjutD7VD6znHWDmriq2q8ZZkuphHyT2q+XDIYMKc9gNMGQPJRr\nezt7fpfNta1NxkAoVm57/KltMlcbOg79TzSkVZ1yhE1WEM1vPth9BQWTfCtT\n5r1MYGN904QTcyiJCtZf3tYROiYBaJRtEZ1qC9HFt3JxQ2yO+KNYCGvUvoPw\nL/HSShCyMcGTx8UgWF1T0tuzQnSEINzDZ8Ru16KLbnhQgD0WIcbwGwXW0O5m\n62Y9LQZnOyi0Wp82EYge9wL/icxx67uA/TGot22sVwlw3vYfeMNdcgJh2e7R\nNIA3Us8hpPEAooGPExzh3GlFTCJqFj15O/UIaZHAyI6y3P9L6v+atA/d5WRq\nll4faxb7JTD7fGglXAfjY1o7FIqiSlpDIzJIJBj3WWDSOEg7NvlIudS1m4CQ\nyHlgunF8WAmd6p6WR1fL6E0H1SmA1L4rbFHA+BEUZLriNJBX5qGGHA+Pandf\neHoTf/vXkUNXwOsf5iJm72p+7oYFBrP9bdVaS+D+fqSLFxyzz9eo+9QkDbvQ\nrtJu\r\n=ApN6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/density":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/touch-target":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.e2e8aef1e.0_1604628326485_0.21514513424775816","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/radio","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0d2b72559359525f75e868cf82a44d0ef4360ad","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.ec6b68b34.0.tgz","fileCount":42,"integrity":"sha512-cGKA5dX4W3BjJsWld0InEeXM5z6ORuJeq+HNJ59FhBoh9l0S3e0VH8cNYFWrQ7R+i1oK0mqIZebulByuTDdhNA==","signatures":[{"sig":"MEYCIQDr0P5yYxFxOQV6N5hUfJiTXmSJmU5UAFzhDzOy+LYFAAIhAJup9CDMhupigrWfJWrE8YM5D3fiYLCOYdg5hOAJyTuk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxhCRA9TVsSAnZWagAAPTwQAIxNN+vRoFFwhDahgEuT\nb+XU3/00eCjfhRx+RrU4bnvEge6559EOsVgfIPI7vu0Ae6dkNuOPl9GZzVju\nUCxHfRB+8uMdR7N7OnPBPhd/568ypRN/ezHQbQSZVM1raW1I1Gb8o/HjmCgr\nmP4xGo/hV1olgafWQagNHyrXqqfasRXO1iQz99Slr80R29qhqinTP4BiM+JF\nJQvM9Mg5LTO6ES+E2IoRp2SiAjOzKUQ3kqm2J85BDmPf0Zi9IJk7jRYsWAs0\nRp6D/ZIyHsjaGJgzr8vlLW8x09Ov3DSJPH/mySn5GG89KaJ96e9fLSlZDrZW\nRf+KgcH7rk7SZx/ftMhrMLzjK1DUxrmX5BpgwAVVcXn9eMkP9lLsFp53s5iU\nQKLmEJYfejilEikXTooamopu9Puu4QaBkNH/W/y7PrLzsHl52gQhyGUJq9yO\nf3O7P/EoDI7/+grKQ6fzv6jKSmMjF5MHBprt88oDylWY6V1Jnv1LYMAzUReW\nKtL8BW/hDvK/UxipinL2sSIbFCLTZNb7hLZ8Pg38CA/Rmxefnm3DoLmATSd1\nE4Ya/1hoFux0eMAH1DG+WYuiWPXhLJMWItcJFOU78mDQboP4JSP70E8GVkrT\nbCdA+e1ERCema4G5dK26Tynxb1h3o8A2r1GceEeTaJN3/riv0aAwvj6Li5Ew\n7NaO\r\n=3IMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/density":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/touch-target":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.ec6b68b34.0_1604688992494_0.8356314879545319","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/radio","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"456871a1f595504562e81c928b2e3ebfbd80feb4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.b39094d14.0.tgz","fileCount":42,"integrity":"sha512-nE7nDrMUS4FBigxQJh0w3nLtfJ27mqWfIf4tPrsDbQ7Jl4TINUPHVJQDPiWkpp/T3CYwoBaXOumnwTZNKvoMLA==","signatures":[{"sig":"MEUCIAk9bCXODXe8VbMu/6pVvxhRTgjnBmtYnVGQ6xkT2nVbAiEAlSHR3+UqhKD3nuoDyajZeT/5cKzS0xThY8yWa7uk5+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0aCRA9TVsSAnZWagAAx/IP/19g116o/Wuuk7wxK9e1\n2kDC9svgm3f8nJ0Ol5S0egX315Zd/WFOBXzdPLIqCzcjCg+/iGAaDFuu1YIL\ngqn25N52obeATzvN73a3OPNvqyASKmHLfQuX+hkb5yNO2H7UQs/tu2CJt0s0\nZIhcQR59+JjKI3HVAz/f0GqMa2G8zCE+5ab0rJC2wPh67UiH8HzpchQeLZvk\n3YGmDpnS+HROqxbV/ryLAsHFOj7t9mQVKC08IDLfhmJ4NZrcqPCHbE2wVpvs\nkIXw0AIuwE5OsTIk/DbtpqZLDfiZEUgVbqaiKXVn3dZ0L5MEYp/2SPYR1zl+\nOEDursVSyCqQDcpGU8M9gncdhsSYoRxNhuqqgr7gL3DwBMholmWO19smqQUL\nYn22ppOIqjsfVCsPupmppmddoKfqPIjMSdjqTiv7/ZZpc8/kB13MRAAzNnNu\nTAw7/RaV4bjM6xnNCqeCb6O5nXE45UMc3CDxFigJaJaL3N7cE185s6/PWf4C\nmW0FpwP22l5xYhT50n8kOKGnMKzS1G4fjt2K8wg88Pje9H1EvwbSrD9Qzf18\nJgegU1OZs0XE7SP76XPBHCYm2VZMbIQoThEMITRsooBCZbylxUU5775zQejw\nuCd7ayldMs4x43F8xxTlV7VzIPLKclp/KhLA+HNIp01uMPn7AOxC1FCifAti\n1den\r\n=mFc7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/density":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/touch-target":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.b39094d14.0_1604697369539_0.40463927672799316","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/radio","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe5b52a4ba055ccb357f30ae4ce8f495d7de1fc3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.8648b8258.0.tgz","fileCount":42,"integrity":"sha512-mOohGdAXWlMx7kttHr+5H75Tz6T7sYuVsoeLmLGNv+gI374EP/uk6NjuGtGvRgMsCbPzfFPTfVBVP7eQ6UhH8w==","signatures":[{"sig":"MEQCIE2GHcyQ8VI7P7w0N0McOvY25eo7Gfm0WMmVbFw6StpnAiAriRhcTgdmBXMLaeOXGPIJBXDqRyuR5YqLH4M0sN6/Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIXCRA9TVsSAnZWagAA/zAP/iPCCLvFMAsPrHgJHCYQ\nBrso8GVWnsjJPkkkp8JQacW67myY6G+o00vIE29vzGmM+IPRyMsEUyMzBlyx\n0+nIb6PflXUGlIuMc36j2QjuKEd3DNO6tkP+EiZlKXgDUIPklJ85AJmj1jBu\nxU5gJiYpBF8rlm1L9oQjTjnAz7yr5UChdPwQBVCtsg2HEXK1yN6vzws91qKO\n4U1oSjDRE1P3Z5YeJGO6Vk5xv92Yign3U9YiU4snz/YcnyR8BSXI9vlkAnA5\nWw0qiEA7L/XBk7XF9jPBcGH9LPG5qwb/1khK+5wgbVhCvwlA18QzdbrBK4Xh\ndHY+82fufRG584HDzWqY2pODNBHQvVwy7T8Xq7dpU6ArxrkKP+g/VaZEEbne\nqk3+ijoCcYJw5AWKjxiqHCbyp7cmYXFUKTYccXV0cZRozgmRFrAwo9CX0ROZ\nZVAFeLRR9K77ThXDTMlNjCeY2/yl6jeMwUc+3M18XVquk1Smiuh8sHka/PuG\nhFYnNMoZ5yfBG7dWt8pBmb7laurCbEShGVQDQFmKF2tnSRqWfqD17pnGcQt5\n0lr5gzkG6XaumLBYVPseWbsVTDZ5JfNW5B4cjocQGWm9QeHeigWwswUDX4Uw\n+5plF2bYWQ0LNq5IQUra8s/Mr2GnHSrY2qR5nE0/K+W4PvB7xU7hkk8JnvVg\nVA0E\r\n=nbAh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/density":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/touch-target":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.8648b8258.0_1605177879044_0.498312773525208","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/radio","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46eea95c8fc8f0d4308856fa35c4e29ac4a9a81","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.240c5f74f.0.tgz","fileCount":42,"integrity":"sha512-kk3MQ46BK1zJB5o287ybjIf8OSAG6DnAoUBS0O5XSa3vEmy1v0NKhIbrHiszwNETi2Zv2mVY6XL4kMrAltlVwg==","signatures":[{"sig":"MEUCIAIlx9TbOFCKUZDUMuleG/yaxIJtBttDoXUX0W1h7gm0AiEAjPTClsRZThSMqddjTFyOGX59XKMpNJzmJ5GZbx1btx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkYCRA9TVsSAnZWagAAnCYP/1FgF9YeRwDRPyaeOMwh\nNQXFS0fSZuBCTQlTmR14yNAct4FE7dMxhyRCJC9Q+MW0Aw4zM5rHiKSNPvWr\nNVyfAucVBl8vaCcvKU/9B49c1dbowIqBpQ2IuHfoKyDMNKnIxxi1D+TLfsyP\nN1a6YK0lnKefsAZ9eb6uEHhxo9ljvYEjnSgna5mgylh0oJYdLWwu/YVT+U5J\n0NwwciXh95Khj90V9IB3zG5Voeb1ejeOjoeK8Fp89rSNZefsIhJYbBlKZMAO\nQzUt9GFrxyxn41tYbL3P8cf7ENe0okg7F1da69YrNwlGgAWlO5jhlI6BtDwG\nbbbgxYHtGQnlnfQZVksHxWe5Hf5gdvuQndV2P62bwMuHiR4XE+kMMBv8/JZ3\nx7JlaJpSz3ByQEM7LzDWdrGBJVIKGqd/FKS6aTZlQBevCufAuW6C0oHbOosF\nAUCfpTviAQ1wJbw85LEs6Wg6ZAv+dcyOP/uUCNYNhEcqgzYsTtxirZqbdB2h\ni/Xv8XmWGTqlw6yyFWNzEZVk1ot0ZXNZPORjVOKTQthwazpqzr69QxrKpyny\naEdWhFUEgfasyDuSUNXktHMflj5/Pxsw/zl5/pyGakDt8v62dVP56kZ6Z653\npK1chbquTwwPHWaWHu2o3ez6/vAsa7G18Q1QLnOzDLT9iHUqo8msebcPCdKu\nUKJp\r\n=+77Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/density":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/touch-target":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.240c5f74f.0_1605212439833_0.713100508580204","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/radio","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6845fe2e9fcf5cddadb1d93b9368a705a7797f8d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":42,"integrity":"sha512-JClf790feneLqI0nVsTtiKG1cGPQceuJdlaCdDG3DIopCtgAQCzn0QnM5UBnwDC2bm5o7yF37073zROD01mB6w==","signatures":[{"sig":"MEUCIBQhhL9FtKWwwlT4cbEP5Yy3QrwjYG49VJU5zBqvmzPlAiEArWamji9iBExCIjCUD3X6zYm86MoIyrV3LQ7wfhSySn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnfCRA9TVsSAnZWagAA1g0QAJJmtTgGgpZaDE5N5Nvd\nFrjKx2WvQDbK2mGAeJw4+YpjfBIRxzc2my0s3o1JCVv4/PPCBFPoGaVIL6Vz\n0OJSTqC6lfqDu5Ywlqk/p+mfClm5mUK2m+cfOBHegSNKMMKI7S4Du/hKEcTd\navukgiU0w5pZOnEUbJ0ufkSX1jzqMrfUDJhmeFEYZLYoMyEMnQ3upa/IKltF\nYBcGQnDbVCqB2emYTR2EZZWyTkNHbxrwpcPNhvkcduoVByZtl9y9Bjqx230w\n7xRhpPORKWUZdpXQbTqAiE+S4H2uFacVYi8fKjIfgQOCmYAZ4i//+BOYyW9c\nGqgZKRCoD8D5Z80d+7ZSxyOIcDmIKzhtBiGmhTG1L3qH8S5CVDbtrRTAq6ip\ndmulN1my2B3hMWHYgK+gEXz7PfvOoGhVaU/WaplRR0UdlSzBRUHeL84hYU2/\nGKCVh5qeJYb3vds5jQuxUc39dCtbjuoeJ0w1l3XRQpDUrekS3kdTWzYPJ/VS\n2GBNL7IAkcxTu5QAuIgs4J3aUpIu97LSsdDiowLO+AQAAZuzslVNLDFNDu2R\nNNLVqpK0a+//U1Ojer9nFfkC0KKhM62rMavcsK5osCQN+6oPrt97xFHZsNbc\nDKTdi18SXyBoclbhZ/XO7TDon++eUuho9iIPD4mcYZ3AezTJ2Jnw5paVV+Ip\nRxRI\r\n=1K4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/density":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/touch-target":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.6cf6ba4f4.0_1605552606759_0.6773797296774116","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/radio","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1b1b2e9be46c1a41448c207001ad727a2ea6a0f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.07f3e01b7.0.tgz","fileCount":42,"integrity":"sha512-TPXKCPj1tKKyLT9AV1ck1NTj03KZ+/2E5BqY5F3P6qq5/XRkHqbDirZ9D5fDBjBMBbX2ZakJC7MX0phRikRCYQ==","signatures":[{"sig":"MEUCIQDGmck0TSluCI6ysAV8GoQjAqFJ9pCshGh9lpsbKW/R7gIgAVqs/CYkDTyjpePCQZcqTMPu4tTlcwMFooHEFzstRPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMTCRA9TVsSAnZWagAAkmUP/A3bIsdkACRyHJzhFVRe\nFXHISwYWPBWkPSqAXaxOzyaPG4Id1Up07sbeDlFuphDoZhxOUyJ4Sj57L8Gi\n6OOCbSi6NNaqcgqia60H3wO6hdSZ5Ezja/5q89CpJRdYziB5Sy77BkEKCfYQ\nt8sATqwzmM8m5E42Bh6BbAR6QmBbVemzXPmB7daz63dxYOxNBWNxxLOHSmW+\nQrJwXBq6P/pRmH1fm8z4VCkMG61M0Kqu3D71zstyDM/hwDKYXlCZN7fGmbs1\nV243IH8euOQyz9k/bDicu/vpuuRtSWdaqShzxFPUfhjdIOEknI4kiKTtHUXP\n73HIcbEi7wTf3WLPfdx64l7e07kU6c9/8cQVuFjdsvgeFaWO2z9IQ7Wgh8lT\ncVqPsnt4VOLkJv+bO6khshWJSxYCP1yIdDUxL/gqPzN+DQ4r6qv+oxv1bKr/\nobml6tr+hN6bjszc3S6QuMjC85v4uveQ/b2jqBwVE4UY5yf7sOqo5VsGD2j0\nq6kkhw4D5KHxirWU9G0xPIi+xBdFP1SdtBz9jChTNLhALhJrBBr037x8kdUt\nGBTw47y+hz2zLWslpkKKkVzK3cGFuEX/AuA5fmlsIjjUiKGWwCzjADApsZiO\nWsHSUpJUUptdQwqYcpvogQCbaKBamjzxIrWJpQliTw8ZEMINAB9FGlOfOiF8\n4oce\r\n=l100\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/density":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/touch-target":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.07f3e01b7.0_1605563155416_0.22865558553964882","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/radio","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc5050067cee664565c3d0364a07ab3eba494e3c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.23491cf85.0.tgz","fileCount":42,"integrity":"sha512-uxkvo39QsHkj3Xx8Kd4uk3Y8ERV38hGf5YRUdfDRqTPBDeeCWlNYGvBNT4CJ9H3R6uYTVXbu0AMij6IxUniJZQ==","signatures":[{"sig":"MEQCIEZuHf2TGVNk5KKJIUl1kh4wiJUpLawcXmmvH01DGWLeAiBElX2u8opJJw88WGgv+80OAGnzg68wcplOsKNJb/oNwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaTCRA9TVsSAnZWagAAcasP/2Ah9vEYU8ckhlqWA7Im\nWkthQAccyn2N75MwMqvFzapNmzF922RIps6Cu//B964atmDlY0HUSOV5dvDJ\n1yFZQV5mpEnFlFs2gvphiyarODuV6iIujd7hI0IbfV2XK7LuEq4A09dfSYXf\nq2jAuM8gRzQMNUoYYAaD8zAPMfU4KDeGNeAFIEeZ6vIQDeH1mCwJR3gV/VPJ\n6UWQAcWgl9pEsy9aT92vnwt7yjgZ9XDT9dzp110d0MJ72j78T7WwRBCD3jTz\nq2bB+0x5EV/R7YsocGenBpz83cJw6J+/3ZWeIislmTw9+PHMZmNvPwLjDRG6\n/aO/uk34lbwEUAw63c0KlWq0A27JUY66pDjch3N3kmrtAR5IuhftDyJQbXNO\njrBoc/vGvogR6AuzuIWZMyKPnl3BOO3w3doApukO9BY38WEEzx/LbqbMXaqf\nBup3WQ995T7J7nbPijj1PRfdSEqhyKSsU7P7lnoZfJZNSjGkAyr3eCjX8ziV\ntCWSSOdvJni64yd3B2ZH/GhaD2QKNurr09Q6Zd9XPq7ISvP1+owcGrweGtBS\nNhuPAhqITag8ivUmVan4FC0RieYgcuuCtoTSUzY8PnJgLyw1GnTBoWoaeVce\nwJFhpFgbmhwoB/KE45UyNeqviT0tpIvDxHy3c9KvCBeSksefZ85C8qX75pHW\nGNB3\r\n=9xKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/density":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/touch-target":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.23491cf85.0_1605572242432_0.9675348360280394","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/radio","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63f5d54d2d9cd9db9a259a84af16e4b7642a4f63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.b659d4fc3.0.tgz","fileCount":42,"integrity":"sha512-P1FFa5zHvRAgwzFngFn+0NtEHK7FaQjSgO+L/z3C83eRjz0uxVf2y7L7ChfBw2/90yp0sl+zuwPmwf0V3fMU0A==","signatures":[{"sig":"MEUCIQCYB5vnD7CDzTBiRXWbk3eM3T4/V2w1SwAt6m/xjKhESAIgWCTLJktF6MIWXeGxhpyw7VAXZeXjr9hHUnjRJ4l14B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhrCRA9TVsSAnZWagAAN4UQAJA+gAhWNZIAb9uTnmtf\nZeOcKZrszhw8xRiXd22fxoVZV+ouP5X7+0QAd2/TmyIHd2vOtMe936HuBxVq\nMYY5xkGl0WrjCKwVeskdbfi2WcCGhLNhcknsl9fRPNkGUPOapG0PRbtpVtwu\niLvPoimvA9EmICdaG8/aos7ujSUVHQUZrymZtgtO4e1HZfbaYxYeKhSfe1Fb\nlgW1eQ3nMPcHhNpsEOTZ0eJl+XpvqWgIOMxlbWpXTCpf4PVpVDKDQ0FuDE2T\nR/hsIL4PmYfqMlygagmmgUqkcYQsNRARp7UmJg3uVIR8IZ0NT2eVFM8pLZmz\n4yPEOjOkkYKeADBPI1P0MudknmUO8o5AlXSH9RP0iGGqpty7fCvT/TJ+Hr9D\niyKo30TY0lwL4azmCFVGRGWwRKe79/nCIqc5/Ya0JdncAwU+Z9bU9KGyhrQU\nXq31XcePLWP3/eAC7sGQui3g3PHX5R2dYnszYmyO8vVmbetPEHWT8yUGkaQ/\n3QHudFzps8wvPjxHPTx150xrpi9VNBvR7XU1mpjuGl/B3UmCswTn8Sz/PhhA\nUXvH8niADw4HKogMLfEw6cuM9QFzc3B1do/IfpO8sd53N64RKL+hfMRG/AcP\nWwAewJ2Zvs6xfN52t4c5oiCfc9pmOt0x0/Ob10DC/aU+nIs0TQXUVkbc8J4y\nhITh\r\n=tM+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/density":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/touch-target":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.b659d4fc3.0_1605572714910_0.7737919820510741","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/radio","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e84c182f3410babce669971fd5a927cdc6d1ed5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.d8a3aed67.0.tgz","fileCount":42,"integrity":"sha512-BHZIyesz5h0uzr7mUnEGnKeywZ9oXAY5HjU/Wx6kA/m9K1DAXNTyt5VYS37V3KUs3EYZZE+hxqGK2onRuQ0X0g==","signatures":[{"sig":"MEQCIAiIjw8dwHR0fMua7D/XqNhk4w0CIDS56UfUKnEgGIFHAiA6JRPVmqmEItXdK0g+N8SN6iZY6Vs+p6MG8Of7n+zpuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+vuCRA9TVsSAnZWagAAfyoP/0FVhdONo4lHRAa9Wa+g\nPyjD/Aop9HLuCOLzMG3Ro6Cuo0j96hn7kM+qhr4sdWfUUFg5GfRqlUGAXGdG\n3+adSBnYXFmEbbvWEKqOh1XjN5XkeZvN36wi+jkNoffNYpuFk2xfqCJeRj4K\nVqqXLkH53/eaaxGizNxzBjjcOJ0j/E6YBXQEAVIOgeTU7+33EICO4DTSe/Zi\n4mCUXMVK48TkgWp58zbwIrDNL2ZqgRbITv1LXF+l9AhT/yxUVm2cRcPtBzwf\neQeiXjZUCm5IhY/gAFmBmLcWAWRz1xIR9TLtSJoA50AgLSTbCqrpt6aKugr/\nHKQQEHOykEsUqyCVPRCOP0HMShqVUALvAqRy1koHcqArWuuUJIt+HlRhGseD\nl95ez1ERQ2GACLnm+9gzei4bxYwUcoWQPOWcBe0b3/J+/VYdY1Tml6ZmAPf3\nB62WqN1WD2xz9BOaN0QW2mp9T7n9AJBoG4dm2IReFztu91ENWDh01ZuvOzSf\nKClhWI5sa6DgPLbBuoU5N3UbUWYUkOLy+g+Qn5GWHUVqSO8adLORX7FZkVgy\naWMuFRxYsRpweKCRMRZtb5w1egJUnPL9caDFrrcZ1K21Vv22CN8WojISkmiX\nku5T2cLae9X6zD6gfNY0iTjjz2oZxRR5wEvkIa/G0uLzWWUR9pfve41VvUxh\nhrgY\r\n=GSCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/density":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/touch-target":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.d8a3aed67.0_1605626862268_0.8795407990339887","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/radio","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72f292ade5afe5cfdb7e357a9d78a899baa66127","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.482ff9091.0.tgz","fileCount":42,"integrity":"sha512-he6gPhgs5HXAPOEWEOGIpN90DSi61PUzthZMnjkT9DTGoxSt/E9srKLcyR/zbvZeYDHFDucazDBJ6I3rn5WJQQ==","signatures":[{"sig":"MEYCIQDCWIM0QIfm0f7hiB5S9e4Vii2Y8P+F+RVpVobflGCRpgIhAJ1+06lRaiMjXTATkLtwfGOvsO15y4IBUFw+4XM+epzL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8zCRA9TVsSAnZWagAAW4YQAIlZd2exawKtAWucZM1l\neabsuLLOctUJR831wGJO+P2jQ4ApwOHBxALBgzTqoih2abcF/MHAU1hnnL7d\nJc+Dk5wl5JIZVql2vn5oDsVFHsvB9ltH68kmr1SsHNbFQ1rHpuWIbP9PuMVq\n4o96F+Olrb+J5FyQ65cIE3Wp279FrhjEQo49nEftAp6zE0auhwFxYsebL/4v\n9GrXDSscqslofQmqu3gkz9rqusqO/Oab/XmPmOxSe9R7xlcs712p9xVHX0UF\ndybFG3Lf3aZs5qwFgOQzYask3aAZUgvvkNxQtRuU3Og9WfxW0HP2ewklxBGg\n5C8qZEIYJx0cZOW490ScRHuyACrntIFiZVEnd98WUlI+Llv09H8mdiLLgGEA\nu3wEApdx6iFobEtuoIIRv5DPxvR9w/2RFnKV8Jj082D8XAJnXlYIkA+pPohv\n/tFTg1+PlzR/y0CRHjNw5a6u0ZGlJLNt+rKlugXDaV1ESO1GWb2f+rCUWcLB\npjXgeFa/pKD6ipxc/FjY/uCsbBaLc6LaEjT6u+bzHjFfUPOGWSjTwHkEu4yS\nI4iKw3+zIIg+dcZoFIEmQUPi1pE/KCZ7CHR5rrLc1gmAN4YlGLjBRWtx2yzC\nEBkU/BgTy26dlqxwe/cUZOymZXbjGi6Vz+KVHikClq1px9zlgQUlLs9WVeSi\n93J8\r\n=jAdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/density":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/touch-target":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.482ff9091.0_1605635890984_0.5264703849728711","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/radio","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cd623f1fb5a38578f63c0d9c72ea7ff5d119b10","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":42,"integrity":"sha512-jxcZYla6ycoZGCgBKfARAx5yW6yB+kTahoVKCbOoqLQg/9MZ1T6+H6gIiIoQc5CmiLM8iodP2sMoL8hBrZ2mYg==","signatures":[{"sig":"MEQCIDKXJqanfFAzLXBhsS/oGJwHfKGCPevYV1UYoZqHupnaAiB21xOWzuPPa6oNn5qN5T/EAPWZVkMgr7xp+Vfg/d/gcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWthCRA9TVsSAnZWagAAZ5EP/RsuwwSsnYLTYVZ/I890\nc6UtcvjmIqRAMv3obIspzoy/Ue1FHryG2NCSdRInnf6YGnaT8sAhug7rPL3k\nqCpg3C8iH/+yXzdB0ZYkJ/Ynx4ONXuyRWNtISRoEgEjosYj1d51uvVh4vWc3\nGOBiQvsTC5Sg3LodcaFX6h4Ymqjs89UY0JJ3ajOaSZ4bVksBeIIsgg/t2+FU\n7h09B1Sp8T2hqSEjCEoIBgCRF6FJe59lXhu8xFAq22KWCmF2VgUm03ApZdwi\nTOMDQpN1riyaseIjPg207rFkkta4nGYEcUpjqNINJ+eoZCaYbdNncvGwnEbX\nlogbCqF4ZKypubBbHaKJEZngVnmTvudjHIGr6AQL4ZnlepAWp1MUUKUxcQi7\nNddxo6AFOSFxdo4m3mU4OjLv5SHUZDJxS1qhJR5AhmfTdTH4XaeItQx0Znzw\n0Iz0tsCWSz4muveJfvRUly0ReUntmh20NRy5b8aljLlvpPZv53oDD8kSWLnd\n/x2IeD8KNMpRBzBahUOlp13E5f4W0lqzCE6s3jAkgbRn2YS3daimLNkyvEqx\nljklhuMSSEBzUAhe8gp6UiX+gAkWHUQ1Eh7/VcRlQWkXJRxGlKF5Oo7/TsU+\npKszDnuyNgN8gQXiiNq31GCElMmdnVLwfv9EYFGWdHUR1k4hFlektyXTLSWA\nMjal\r\n=SwfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/density":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/touch-target":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.99cfb6bd5.0_1605725025169_0.24060558822890044","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/radio","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2839262c214c960c6f8c3a287a310a984f027e8e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.b98d15d90.0.tgz","fileCount":42,"integrity":"sha512-D89zhnsK53coFIidT9DzdE7HCYR793+SDdktSsJzuuAlOjiQk9yH2s+V+EnFnKCR2PBzlzwJg12W7UjI2Umo0Q==","signatures":[{"sig":"MEYCIQDP7aVhJ6U7e2vrlCG5geflKv2yubUphm7xEkXc2e0J7QIhAKidIkMSIfwJEh2DXRFgDfwjRqdPixZNgudXnyJqmGA5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGSCRA9TVsSAnZWagAAlAsQAIv1zCmS++d4n5o7XnNs\npN7P8WepyWYgi5uzwsCvvU1do1bneJxcU7FgG4ceYGbLutSxXWF9RYdwQrCU\nBZOQb6QOsAfv70AlqaY3v/+Vi/8Nx0HOS9Jlp2hjTNcBoFKHc5A+WrN18TU+\nV/K5g7pMZsVAftDXXjwWQ29seztBBiRv19OD0iLLPXoUC1aVuU8H7FMojD7h\nqg/HhVVYjDyfnRNcEZsYTJkqeH3JcRj+cvXrAJdDWcBtA3OIER0KGjjoP1Sv\nNItB0wk0SkRvJFY3x+uy5D0Is7fqzTpJR6q1skS/c0S65y66rq6WrUbbpypi\nVwqy1KnUNiaikIuQEWjvJq3VTHBnH8kZno4A/ybagwHWPyXSOdk+eP608Yn3\n+bjaUbetxB+YHr4kz/NeQ2GZj7D7hG6qv6k3IFCs1yhFx2mlHGk7vB6dHIYK\n6KPnJSVqvzWA6wda7V/5/bl/B9GX+pIFVmzc5LPBiyHJpMhldCqQVJLHWghU\norvFH9ly7o0kDaBFJkTcKtooaiNMbvg5gCEV3tY7/CW89d8A+Q7KSMscgqo2\nC+YbOqKQlmsXmHO8WJ02IjMEYhdjO+tMOq7uKDZmJAa9mmtA7l+ZULjFhF95\nl1Q+otJqcZ54YdX/c/H4bsUWcHNCCU6jBXOoaLh1oU1C4Ca8g8Qfe3gc3iMS\nz2MQ\r\n=mBRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/density":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/touch-target":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.b98d15d90.0_1605738897695_0.023184864239890413","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/radio","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d73b4d4cb60ff3befb42ff1204dee31303b0a66","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.30c11bfc2.0.tgz","fileCount":42,"integrity":"sha512-SR/JsNZ08eeiYRy2n/xYxEgVfF0BEpkv2XYddVq8woqUWpxoSnDFlbEHJzzHqlHpJBfZPdD6nKFsv2DFcq2frQ==","signatures":[{"sig":"MEYCIQCk/tEtT+sRWOWkCai7pic3E/l6SOfgw8ww4oCyo9P3BAIhAKuzo6ax1EpSwvQw1kddnhrwm/021iItonX1UamljW1E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmuCRA9TVsSAnZWagAAupEP/i6PJGqVbWO2lWRtHYGt\nb4Eb5TDL1Ymu/r4MvnJNKk+TkfOuuzkScuDLUQllXgwyimxraFURnyW37ejj\n8sHV9nmvHuktITqlytCVFvrJ/nm58yxKHWWUkZJpxfcybzckGNX9nrKClFyO\nlxYZ2RiUYHxDc6NP780Zip9WQ7qNC5t+47Y2H0XysH7YXiAD6BdMQio47jaU\nYsgowZZJXoRLJccajHj0gaHDNqDPSp3+SeB2X+uvwJ2WeVzBMmNFOldKWaLX\nHn+zghnN59F8ZsvDnV9CBIer/W4wynfe5WVswI8UOwShLHtbv9dsHHmxCj17\nkw/p0QuBlVHsH+7/7plLHTMN4zuW03tnD3fAGE0+fBq6ed95ul0qK/n12ao/\nTM3lvpX9ctHea1efM8+AO6GMiruCiY0v6fGrmNyG+rhEBHAAi+zkS1E+DoAT\ndkTco1isKyeKErF/p034IdiuYdTEg01gT3ep6wjmxsNuJwVIrB5Sirj6AEeq\n5eC6jSOU23M9VIfva9TY0JlbhZPRb/ssrgd2Mdoflf0/M3vg+3o5J4/1VJLs\nAJ0atZ9SpluepTOFiMW5Hm9nD1qOfZnvznm3FP1ZUToqmUZKPk0WvOrLpEE4\nrTiXDjOPy1Tu8CjkUeQo1cUxxSJ56kHZA9iAN1wrDVv57OA4V8yWf7sb2FOH\nCSJb\r\n=loVm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/density":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/touch-target":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.30c11bfc2.0_1605749166148_0.4735305040450435","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/radio","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4ab29a7ce08a8d511a97d9948d6901bb4930e6f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.1b731d51b.0.tgz","fileCount":42,"integrity":"sha512-LxfqxerfHR+YQtLW2jKxPpkuEF8ZQBva+2/yPCaSg21yxLumyf5ICvqh9RhgJru6/KofhS2eMuUcSxhqVQfp1Q==","signatures":[{"sig":"MEYCIQCts2ja2QMH69xcyfzyzt/1ZNyMOq8pHWaBpADzhVX5GQIhAJez382Akn1Mkha1Cf37jcozsHynujU/1sabRVimGgyT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7uCRA9TVsSAnZWagAAOjgP/Az/eb9quc0zy0yAqX4g\n3b0r2xe4xY4CGD55Metx0ls1K2+hR+qIP+KSy7+8hUyR9V9cB0rSW4hqNzng\nX07Wi32Z5wlMIs2E0al34q/hEI0fjRKn0e90Oqv2gQtPfNclcgQIQ1Uob2Zg\n05f8GslF8KNWvbfiG26LCyx0dVUtv02AhiZEAxj29B0ta4AkPTeAiEHSEuBE\nzIu9kaVckhsiK7315ScbSC355c1PQEJuZ1irVR7tDDOpmC35Aav9j+YaaSre\noVSR2phehCqzCeaSpMwVFQaCZSzE8yy4Hlrw9vXPWuw9nOak0x414raTdXJx\nuB6BE/UaGsQ5pbhztTONUByEZ/iR2vApl1gR/SgHRC7m4EL7Md4/m8RUy0r9\n9qEWvknwZDNI+doIldtrKrRvCfOMjcIgxGCjBirFW2habRRahBSkFLYm0/Af\nB0vubX7HFhuEy9cjod6dL+axVAbcT+0gSFiw7yMjolHhMF8dG2E1kUFNAfJI\n8arC3hXGzPQE9JhCNrb4sMnB0lvsKCuC+Lx5C9YxVqYaZSCPMZiIU4sJrdMf\nNmZsQkedDSAW2pJQmyevYydLYJMwNaqQgRO5SPygjqnnX5tM/NnE6oWgLnXA\nc4nUAIxJN5lDd0f9blVsfDY/IItp3Ez8FsSexuL8Vf7b0opftyHcrjpPsZ3E\ne59B\r\n=rvoU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/density":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/touch-target":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.1b731d51b.0_1605811949445_0.3058777121865208","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/radio","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06434592451b7f527899d20d8372919b49760e24","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.4ae94ff78.0.tgz","fileCount":42,"integrity":"sha512-B/EYeIKwvl/8PQe30Sap+JrUaUY2Fq1BHl/oIkAwWZIkoFZ4KjFbC0fkSvUsqOWACoybDQAVQIdu0Goks9iDBQ==","signatures":[{"sig":"MEQCIFkde9vbzJQeJXs6eDH+6dIxv8cu0EDfiqvS7EUbXXjXAiA99rJLxfQBFrVw2x36IHVrfFtTu9SVrFhiBgCLwhkbwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+UCRA9TVsSAnZWagAAwnAQAIhfQkoT/wRkzGyipNU1\nf0YJ28/6d6UDYskmtGeV1CdmW9axwQ0K7ysO3l52ssA0moKvgOTJXslnbi0n\nMpsZRtFABIzo7QTLSqdHBsMRJTwJl39TVJ4Tm4ea8VJUlF7oA9/FUUuh+xxq\nVUMcTe7FiBtnJq3SolEYsdBYk9e4JViIo9HpTRD9614RiVZ/Ds8JLWficwem\n+OKIJtPVDnl8+3z+IVLA0K+84QkfSqSYITF7fG6JMmln8WLf+vNslvtRIMu4\n4ev62z0QGUJZBDsUGdc1ZhfGeBLJvAGmzITJVuS05L2dCnfmRVwV7JUXcfLz\nQvRXGzs3eZKTUYXmdGdc92eZz8UdfmANiWM86NM7mbXQtMFsxI1Din8N3W4P\nxJx6mqM/w/RO3VLdBhYwTzZEaoajtfv2OGvyT2xzGTV67G8GIeMLKzQ/ozMG\nURmemb4/nq7eIP6HVZBNbqIrcJVZyM4FFxqzgTiQ/J1ZdvFCMK0MAakuNOvm\nL9eJUJC5wPnDHMPI8HMt3iKQ3TSEK0dim1K7QJU69v15SDXpa3UhNIZclB2L\n3iITKjmuLGV0TR2JitqHuuO26h3Y99GpZFKv9f95eJtIQIChSoHnjO+pu5pC\nkv3BnNM5Rp/eJ3/Lb54wZaxM1h6p2qeHa4ZYbSeX0HyvU3F5Qaxn8jCBIns2\nILgu\r\n=DDl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/density":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/touch-target":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.4ae94ff78.0_1605812115761_0.157729054319526","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/radio","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01125f320e7db6b6c262007b67290a45e51afee0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.7ad038e1d.0.tgz","fileCount":42,"integrity":"sha512-+Brn92e5t6b9Zn1XU94pFGZboWe5tu9MiJUPhjSoLcVksKhsYJFXNNgzTbtafbyEXDAUoSLgPJVREXq5ZgJ0YQ==","signatures":[{"sig":"MEQCIBGk9wF7jd9a58tPGwDR0TiHEF6/qZFFKoATJDhNKaSeAiBdUXuDKUuOPWAevTx/e3+u1z8yuLwntIk6UgGcxgN4Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsT7CRA9TVsSAnZWagAA+kgQAIPZp/SG2ACtBwRz7r1n\nfH0Ea9xVMvP4jsJZcZj3XVwzjZd1ZHnE6hpIVVjmSXYX7Pm6Tz1llyOiJ5Vk\nhzFUWL4ojrJmXkX49tZz2Sq6eaQoabhJrytaxyA+UPLBwVtZfxux6FuEfD9i\nzynbAwZ9SqD2UxVPn6buEdn5FBGG9gGzNKbEjPcz3MoieuRqZZBnrULI4AKs\nNLAK0ZHQwOQL/pkIBe4nZoCBLZCmGlRWkSVVgJa0hV+hI4+S4l+4H0qUaXuP\n0aR/7ccV/gvM930FZLgwzXslQQ1SHR1dbzAF0YjRWrhSfDX5WqQSyXDPlzUN\nY0chqRHP5YTb2dr8dXtW9PH9re58dnUKBTWga0MU06NOHnyApV/NFcHp3g3O\nlo878+vVzl2rXc5+Icmddldn7eeGqyQPXBtA5BnAch0q+8iM72a5vs3a7r/5\nSPvvcCSbL+AlYlzTgNdIR31D+9QiZYR55aMY0hppOV4Ka4ayZSTyIJvui2IO\nfRwbao7/3JglWBNM/p+aetRU+UfNSlw4H7SJC+4hv+M7FWl5en6Vi3gicXxu\ngopnJN58lNSD0XG8EL3aAghM7FkFsIXfGpoDrFcgEqq4fzyVkr9lUTNZLAFp\n3N7lQjD+gNhqfTWK4b4UDt2VGvmkwBO5GXq27gt0zsN+ieuAHYUE6sJmhn3x\nCPaq\r\n=jbhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/density":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/touch-target":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.7ad038e1d.0_1605813499203_0.8059700021889016","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/radio","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e609cc18d056f3e6e456a2d78c7963e8538af38","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.a41527604.0.tgz","fileCount":42,"integrity":"sha512-6sjDx1G/0Q1kyFMseW+vnok9iJCUF/UkETus45Hotrt2KoQG6BsQulvSv0z4R7zsOHOF5UavZp+4dDw/If4EhQ==","signatures":[{"sig":"MEUCIAElYMz9+JXKExY/HQ3HNBuIAZgLaCBwpOFBLhLwM5h3AiEA90AE7yIexCNj6Ru5PdKdWtbx1NRJFiO6KfNF4s66CKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7PCRA9TVsSAnZWagAA+FoQAJ9k3ryMo86o9UZeUtT2\nNVqrpLKMHhL7VWV/8zkh7AcfDt2HJadGrwoVm2B7hox2+KZWiscg7Lm5GbeH\nE12q1uM59D2p+lGOA0vM4CVkx+2SYhSnHuO0mGmhBPy4UDgfXbf0bSh1P8Wx\ncgNdpVlIFMiZ9ynBDHIIJnnGNFez5sxYHrIC6P4Kh3PB4HKYBB0m8/8eM0eP\nc18w+/COqDf3ei3iT+FMZQ/8F2hQf5uBLxVWRWV7gKvHo18Rugaa1BFOEMIv\nB8Hwf9eyPEKuvtXh6QnrRhhM7LSXxUyW7E2K8zCi1a47Ly1+zXpp9/tAM3T7\n32ezy5YSr2fCO1lIV6inzVgQfz96N7016cnvJP8JPJ8EdBu4EmfcgDQ3VOVC\nFhSylbmSZbziqSgErW+M97iAPAC5hNUci+03MCAC5dOnHORQNVGp4XsZ5f4U\nXQOUquPu4wzs8AxERa7XwHKv1hP8jaDHDPfjqzeRpJLWFXP8iN4syUeLmvsg\nTMrFiQIwPjWo1cSJQG9qn2xp12bOUR3Xapho250hVbJkpSxjTTjeFfZhcla5\ne6KSzK57063T6LIlj3YvJjvMQz7oCl45FqhLBMUiVU5f9GgfMyLEBr3QsX1j\na9bRKa2sJf41ES5OlyTFc90g1JAz0sWzh5tVxciECJqyX2TR3hsAWvWFRDM7\n9aqs\r\n=vTib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/density":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/touch-target":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.a41527604.0_1605816014499_0.21531470725280966","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/radio","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"823e8d68c66ff63a1a1726b0e3b852c95c6bfab4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.7b0e2b377.0.tgz","fileCount":42,"integrity":"sha512-z7UeJ+6zBoFI70IlLgzHx0m5GcjQZ0zLdxGVaObYrTJH0PvZ/4IVmiH+g+mgjhKYovHb6xKp4oR3U56Y/ig/Bg==","signatures":[{"sig":"MEUCIGgU421EgmFb5frSwnq98SJTR6Tt6oUXORSG7RqEtqF0AiEAgH2DDN1GDZ13FFPTkfAPo5mU/J1geQbytYIVoSCa7Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElvCRA9TVsSAnZWagAAGgAP/30mUkDf5fIHLsJ1/MJU\nbIJppNlUhGFynMj/q3VwubCmvAvEeDNNzlFDd//lO7F/g/XTH4Pg79d/yXhQ\n5tvJALN1Gli9yL2c+0cwX3ULt9RiyiQ8x8E2hJ2JPNNHI8lwAaBIeXa3O1q1\nEFXOOiQkqsiT0xB+twyBSDDzrmJNjHPQk3f55x9C939yDhfyoFb+LYGMFwYb\n8splcXBwzMV5oChLQwWRwUde1ObbXq5O97tUo/un82LKe0lCwVWbC/+b66Jt\nf0dESAAIei0K8prznKT4ooOKyS/XiCAgZJtf7Rz6KwMo8mz3GU/YT6ns+3vV\nLTesEYmOqNqq+AWjncOhES8R0CPQXf5Ew8ZNAZUykX1aAzSEvQbche6p2diy\nBmNO6QNXLhD5h4WoWLRmw37N9xXhnEfpm4MrgsyMEyUo/FpcV86l2qSRVjYe\nh1Fbppo4vtw1mnxdnrRl5pFJbw00sQWbuYc8Zd8Wey80xaWvX4zU7dgo/pLy\nEIFhRH3MMPnzOUSienXWqqn0ijan+mwEYTnDErGCLHhEAzMkfxBvDikgYJJr\nhrN/axWsA2zNx6pDjrY1WkbkxAxw/MSOFSwZD2F91bjZFaQ2/e4e4rDV0EK0\n/Qvcp5I5KpsP26NROYOE/rlKxXT0G09eZwq8PfjfoinIQaDlimQ8M+aGV5cW\nWwWY\r\n=Wn6x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/density":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/touch-target":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.7b0e2b377.0_1605912943001_0.9506475501992033","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/radio","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d5fca284c84d3c33b84e3e06d3dfd5da34cf208","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.c927a5d05.0.tgz","fileCount":42,"integrity":"sha512-WZm/noMJJYddxfYyCxkkpK9rbmb3p1bvMKkPYt3EXqng/vwfbV6ABPKMEq5GR9FGTf9f0yOZg6PvHCLrkb2nLg==","signatures":[{"sig":"MEYCIQDh6ajRTj6kGTYzUgMWLJiyxaY45EeYtXLlIGkNJrMGagIhAM5o/gU5Bt4U27L4JVZc/p3LEB0IWpXgm5pDBAIgwEhw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHNCRA9TVsSAnZWagAAeF8QAKKRFvqzRzI4wTcfYs43\no/3DduuPT2f6Rm35hUrDQZvFt26/3Bi4tEOZg963yaA5ZYS/j9mBmQUcamvV\nX9r1Du+o2aPSv3XP/2JCGh4sUjF7cXLiGeTuRt0ueeu3KgYoYkbf3uHaRZS3\nvXPPOFjxYmLcjx9BGUJnyKButy4tclpxmuyyDNbMTB8DNDtmC40zDcPv2qYI\npcUfiep/fqUjDP20I7D28fW86LoP6rIAEYneSMfAIcD7U297/4Gplga03YFo\nLi4zHQzTvmgsq9+DAa5mihYr2cH4osyFjFMutpax49CwxBfa5rdfODriQsUR\nu+xoU+yLpAZmH3Tza64uvqKcCzsUPvKKzK52ekimkkMf6qW5r/HlqHNwnPTX\ntuovnQ2Wfw6BkydrQgrDFt5OAGsTpnQZZc6Op9Cs3ZgHVPIzFco0iDeBh6Wj\ncM5a8zEXIqecErbPPKimarepc5JeZ8zTn6bvTO/HwmGJ8KZdNlTorbKFmNln\nDeii01VzPMmi4/ypuCr0JtgVQlk/jduzld3AL6UYlURcbTLmOKNClPPtPRxW\no6jRnzG+ylLBARhNEIAohlwM2L/I2vYDi2BZ2J6kzWpvc3qZRfTTfkHUhq38\nEFY5XVFQpHan0y358MWo1e5LA/mPDkrtJYcP+lUM1Xv7CxBEHhsOR1JFySch\nplVG\r\n=xPQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/density":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/touch-target":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.c927a5d05.0_1606160844844_0.3450327936060751","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/radio","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4938a97dde3eea9148d78a814526f8eacec34d58","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.b349b5185.0.tgz","fileCount":42,"integrity":"sha512-79MxBy55wwBt2qNkkJrHDwYXy1dD/R3MOR6RJJRd1gczMOpouifoODyn1U6NOlEXfr8Qk1YDDJwQSW3VYOhRfA==","signatures":[{"sig":"MEYCIQCGk0qgbkVo4RWul4yMZiOY27dfwg8d3pJ/uWZ/a0T66QIhALWm1zrQkjP4cw4ddesjIxnXFTg5+jhgofYqGuakKuYe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4jCRA9TVsSAnZWagAAW+kP/Rk5tYNJmW49nGnyIKdd\n8PQ/MPxnv1bulS0tlZa4UKlZ4YLJX76L1kEYk9jpGK2n+JV1bp8gkeiow6R8\nhO0CdjuxsPj7UzSoP30yq7UhlmODC715+LBHjfH8r812QoCJbSh+h1f0KH+T\nXhoHicn3dDru9IvtQIwbkAkPwje6eP8oYAiAV53qaAKh51o2FgqrqnnMrMkX\n7Z0QXNZi4HAB1h4x7CoOpXxsfOhJoc/2Ysl43Do5KVNLQrC+ENsTPPV4oGq/\nrFJeAjp1g/Zmi93eq8cYXxNYtME/y4ickvpvz0wIjR4v3olx9rfsgDq7fyUH\npdjjSQDvf6K5HYtP23wdTkV4Y/uRHlEesvjo8mkBCa8Vi4oLzhELwty391cz\ntWbV4qToYGIHH1SoGA/CrVfSMxwESRfhpEKk5P8nWswTznWhfdTb5MqzVxd4\nJdudMysX21LO8s3ALieCFrK7TbeLOjPxEYOFhOVIiOv67slh3rUvJJr/bxjF\nPFEKN4Q3kebrvrF5plnNa/uM/zS0B9oDG6qvMVankz4wQT1CRhE5IWyhJquE\nrOpb3c+4Ic04mzG2/MuQ6OJo1zBmI0o+39qTy7XP1h/GC84qFCGaRqxf9Zc3\nXWwdU0xr6wUXXvgnq1NQNY6VQvgS619unPQ19S44a7rh4kF7Qj9tHU0KgXmJ\n/YSt\r\n=38Ci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/density":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/touch-target":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.b349b5185.0_1606237731240_0.2256132918839453","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/radio","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b721628d359cf61859df0935d64f507b17705f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.9083b7d61.0.tgz","fileCount":42,"integrity":"sha512-iRHCxF89zJJuogT6v9iKgGzaRZOJfshgBOQPAJ9pxCxRAPySaUsS3OVdVL+hxiIJjpaGOluMg39oU6+bw3wrnw==","signatures":[{"sig":"MEYCIQD0xq3dDm5KY6Eew8+XI1Ra1nebk3Yhi69mr9oCZnn59AIhAOpr/pgREhW6OO6sJ8GZIgKcZGwxoV/XmPBC0erYlyxy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgACRA9TVsSAnZWagAAhX8P+wa40ethPgPNjPVlNtsP\n2Chi+LKNLUo6admmh/2X7pb3C0SAnqcdqgyTUeLt8G3qHBzezbCMOmuEyEzh\nPRnjboxnnzTq6laAVDi5D1KxaEmBXdVaQ2rVM5iLACn0TBW6NsH0jwkHvOog\nzn3/LKDOhuvc3BXJ+UBT46+j8PAHOYFnjVbNuVCVg58NQqufA8Lu9IkQWo3z\nys2A9TYqxpmPLOEsrfzuhdQARq3RNibRksR/kAWZQVfDDheIYmbHVf/Gb8Y7\nXre0fDHr0hcEUMtJrbNf5zG90SegQTLyh2LIwNKrbixujdywp9FjNgVmwYnE\n8W2UY1m9IwdKJa1/TurtrkhjFg0Sb+mONVzzKcjNSfj+oxtLeylNxp06MI1H\nNlfm6JkL4n4RwtwDJQD/Aihu2y6U5vPFpZAWcp4cOrPVnHhjFsaopmNpWcPW\n1xtinOWkDnvfni2QAMrsubXecIZDYGIea4jmF3zjkCaL2zErex0rzalytFPS\n8YQXUtudaRSNgusDoQGehwUtuLe6uEJTc6GFPRLOnYB4C6xdWRuy8s/YacIW\n44x8gBYzhC3xvpKNNS9waO9OvphkXuMNcKfni3t0pksv1z9JL9xS3m1E2I3j\nnmbHDKTMPUfE5UDplekuBYkOXYTWpqB74cpKtr6pK+2fC8mzD5UXtVO52Oco\niyLB\r\n=oAJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/density":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/touch-target":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.9083b7d61.0_1606252544412_0.2942852879026361","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/radio","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72797ce7a0b3ba9650731d3ae2778835699d023c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.eff7b46ac.0.tgz","fileCount":42,"integrity":"sha512-T0cQ0ckWLJS/FENZSqyMCtHDPZIti5Q0nWZA9gOAuGviIxYeSZ3Ky5E4HzzQZSq71o353TS3WtmmjRPTDhRkqw==","signatures":[{"sig":"MEQCIGVs3GnhiNqJVMw9euiIrWsWUNxmo27n+2Hl8Ke8hKPjAiA8QLIJwrrGrTWq89n0iCE9xHQUJqCnmwvfYi6aAhKGEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZeyCRA9TVsSAnZWagAAFckP/2kT7a5Uz8ik0nhCl2uy\ncoLcBKksLpBviiXOOW4tjK60Q4LtxaQ8uxUuoUxC9e8u95waulEQjMdyyVFo\ncYW4B3IjCSqrGzjv+RGedFt7ZgpNhCXoPOKOHlAdfVNlufTHEa12cbr01jlS\nlU9vVnagxjngP/7992vRbTuifgK9jJawsEaeOhDKkaZwKb92TlmRscgkAOLa\nhsPPZXMyCP5mjiVRJCaj7wCvLtb8LyX2flZQlYSIHnegInrWo/qfHlhoiZ5y\n8+WF9FAIMR/EaBB4nM7vb5r/rU740rsglJuOVLBLqcEHU24fCCyA+CVKSEA1\n+G6WiAl6gYSZ7SSHuBC2zd9oWFETfajOIFcz7dZadV0LP/EfwnnbSKCENZL4\n89Gb9jZcqb+7lVJK7fY85mfnGDNgjMiXyf+wTRnQd0t8NLARZtp/l9ldux8i\nYlor9h4thikGAM8R2f1mVh/UbePJv/eauz4p19XAZcNbftjf6Krk184Vzn+S\nM4ytqKPMEGVqnUvLdgdFKjswWgQM3mStxI6ZDRCP6ivo3ZvdFYnCLJ9y0RD+\nRoLIWPJbVW850pPIS0VJjs1bAAOop+EMYUZ+PggEE6oGty0jNnsevpcRhRJQ\nBo1UVLpU0Jb/5sQk77rI1roHychxrf62WhcvE0C9u7Q0yEufltL0ywSRhxw7\n3PS6\r\n=ZAYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/density":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/touch-target":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.eff7b46ac.0_1606260657924_0.6471116870362303","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/radio","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4c387b6899b7d25993b999fb4d39420a88cf4c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.ae27b44b0.0.tgz","fileCount":42,"integrity":"sha512-ye8JU77Ng6hsaCZgHJI3g5AZ2wx15TSS7fQbNfgGGGcP3sYxsA1uxO8dUtU8RcYc8wsnfGVYPaaMTNomiroaxw==","signatures":[{"sig":"MEUCICKc6V2Qm2k/pbF/YAlnrb+t/zQZ7xyRdMa1Xed2niYuAiEA7s27wE2HBhW613GiY8bfkWMpQ/TI47GET3t2Efm8A7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkqCRA9TVsSAnZWagAA0IsP/ix00pDhyprMZnEcFP+T\nOHNmXh2GsdBUg5OUxDmVAj7FfFpJ7xAdXxj9MZZzx/cXTWbQ7MWa6S5Zxj7g\ndZ1UHjivfdwzED0SQbanvYfT0gc+WVXnB7EkJSJcxAhoXscribOqcOUjGMVH\nOERqhHtIf1BseArPv27WGvKMt9tWm3XeNtvUtKZLMWPbPWdHLH6FGeFKvEWO\nkRc9JVFi18KTwB239QwBsE6YWvJj4n4Gf14HjJAs4+T3VL5LJ8SFzE570c4K\nNK7cwUXaaMChw4E5V7x2JaaAtEAsSBQjm5o0kf3Nu21zO9pZlVOrvjI3+lh3\nl2Er3LSlIb2eYCl6UYlWJsr98vWZzqMyxT6iT8RoXqxI3ywybEwHrMDmirOl\np6wvPbTjBcbwU3xX7ohQJszs/RCBdNqosqBuqJ83PuJiosRFhVeUrGOM568+\n9gR6jQ7tLmwv7LWk3W2omE5V1VRvVfwK4B9RUVzqLctFMFuwmpA4WU+vZnDd\n6TJnMuHSff2FmwIvQjJy8pNxEN4S3Lf9KXkxIC0NUB6fFD7zRBxFqnl7Llw9\nTPXCHbofCYMt1JMVeTRcnweDwUQvM0OD3QkmDmSpuBbHpo1zeAuM59bNucyA\npa/7pvPtsidvTg0K/+zaPUD8GYXjC2yEliKV2onfsydBcBxrIsBbHKSRk8cf\ne4Vh\r\n=nYz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/density":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/touch-target":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.ae27b44b0.0_1606318378191_0.14982488297240182","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/radio","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1644b539fc28039e6c6169c996329b198c6c99","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.2fbba2554.0.tgz","fileCount":42,"integrity":"sha512-+bwdqnU4SCj3eNqyYGPbtZHUXonbp9qmU3NzAMyOJ7q98kdxahFGZGECHsq6xh81sUmmtrwG5ovFlb9ntbyrEQ==","signatures":[{"sig":"MEUCIQC1V0WTVtAdOBKRh4x+etRy3hFlFdY+QJMy3Aerr7lCswIgfglGf7Vo0jzVlpT8KpHRFnZ4Zgcs0u1XiHgO/h6DNk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6NCRA9TVsSAnZWagAA4cUP/2I1hc3t6QAQtGQcKpAZ\nt0BtnJilg9w8CNT7jCEYxkumHPcjfLA3NnQamDhuooPfNq6NOWR08pj2Exa2\nJiI4x8V/PWbN6kMtsjUi072iOJ6O0ir8yEqtU/fdxk6A3+l27O91iAwDal7G\nRGw+IDM67A7tUFsooTIu+8bLFG3HKyanOzW+wBXmMmZ9iv236zXRpIyKUkw1\npae16kF9irhTpB8W7ly1zfoZ+bADpBYdGZm9SGFL6uenPYykJ8fwFj5oqC8e\n662SCab6JTFAEg/xh0LoLKE2d4nmJgDdTg2PJrITeYMpLAR8wpeXNXB3V6X2\nqKB/0xomLYcx0ZG51kq+PPefQNiaLToxHlTKH/mmWdD4lB/oqCc/1hug73kB\nkl7u0JzeVQWnwSFUk7uYXUtinDxb8zLUNclxAr+oR6hjguRbn2PD+LwRRQzy\nBLQPCtwLnMjfG5P/tEBTN3OjrFS6NEOxBdTOtKBsWm/hGE1lrV0/m+JnW9BK\nQq65yxVwAZGg1Bc1Xajdbf3qs63NSiGbfTBNLE0XJRHAoxETMVr/nhnPfL0b\nRrokytXKZFkbvkU66OgeWUhXwI4b9COOcVNCfFFzk7wArAdHzdVV7zbB/y8Y\nt9rA/MHR5dSfwjIFW+wN/NZ0lsIYftmRrH/8VOE/OzxAeaeEHKR1+FK90BkF\nl/q/\r\n=wGEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/density":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/touch-target":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.2fbba2554.0_1606758028918_0.17620941386246014","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/radio","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bb57ba2e9eecfd76cb75f72a43ff8bbacd52d7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.6d8574fe1.0.tgz","fileCount":42,"integrity":"sha512-QroTan5/XwmYiIUUNJ5rOIZsxttGVOq7kP0hmj2h3afjpv2IwO7Gmi03kNwdhnITav1+3xXfeLowFWqLqtsMyA==","signatures":[{"sig":"MEQCIA+oto6ySVSB8At7CWwz2ilZTz1fxoKRwLFaq0VeC6zVAiBJLJo1rZxeUPxi5sDCl50RH599fz3YqWwlSNkNJoiJ2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEgCRA9TVsSAnZWagAADMcP/1m1JoOv3Bgl999Uv+H+\na8msseQouBCrbqxaXEhYaRLZUpIEmTMUzLSSC9aWRdyqlRYWUNu78gQu0TUk\n22ofKRv/K2Wj47vVEZXsgz/Bu/Pw6La2Ktahj9ALh0Qtk+bS0tLfbTGk7Cly\ngVgys40lb4LWbdM2WNA0CJYx/61/6xj/KS9ZowAGI6MtLrBJnJQNeNla90ls\nEyLtJ8mAiVIMz55+fMKSyyhGYnEMgGXb4vzWs49T9KfTcSbleFOTArMh0TmF\nxzeFJg38VYaiMls6It2PArYg/m+rDUa1ubeXaYxr5ua4qFDg0tOW538BxXxg\naYIEigViA84k3WlWF4tBZ1BNTNpJeib/1SoL/geQ76OpE/Fuy18Gn6uIxucs\nG6VJKLYpDL7Fky0fd3rTVwxKF1yXYwRPr4yeXlSOQkJh39K7x1YkAQ5TxIAs\n5wFjB0ICWRZ9kr3im0gAe6sZjCrrIjN+9uEk3hGESWSeaGqb/CH9+3QaCgge\nbjj8XgHcBdTkFOWrUosDyq5tmQGarSEVJXJSlcwHVa9Qw/J72J1fsZ/LPvw5\nBMlSLFIWmMG00Uexebgdx6/31BBdENgJagEC9iEeu11iy2fRR6tBeIIrI37R\nU6ty8NWq1/EgPXwRxbP9+lSIBFn3c0YF3dw1HfsB/MonN8A6s7NpUy+qjn0V\nx4Yf\r\n=A4tm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/density":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/touch-target":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.6d8574fe1.0_1606758687780_0.9575747060884352","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/radio","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab11bb52dfeb28a90f6c0b76529ef34d0c3e36f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.fd22355f7.0.tgz","fileCount":42,"integrity":"sha512-t224LMo0ElQ17qYOmgtneShLKIulwwfi92f+YnoN5jezPwOd0l2k4bpcVjrujun8yybiVRtVN81XtJAgfWHvIA==","signatures":[{"sig":"MEYCIQDYR/ZHlDkIBi4NLey+oBs570bhIFC9szPFxT+LI4FN/AIhANvhYyByYR/qnMXDlAeglq086rjmXmFtGf0wE1Z1elxN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlcCRA9TVsSAnZWagAA57oP/3dxiwNBH5vZbKMrBfWn\nNkcBkNk63gBhNzod0dlXjoNmvRjQfKcKuYa+rBPXSLJsqpxDgDCNTp6DXqAJ\ngLJJtORRJqoHLl/iMSlppcUnZE1BWiTDen03yFbrzhEmUzYwoiwdEBt1zHVO\n/7zpz88MgDWMm6o9AlwheZN2S6R2CAZbiCdY3x09JEVSLWgKf25b7tnJSkJg\n0w5JdEu/gldPvEwvUAzJ5YGlSQsv624lk4NaPzRLgDHcMmXfYQzLKGovSkwH\ndcnjUl7E6vG43DDjMjn7Pj2KXP14/Y6wotDOIyn1yO+/7Jwk13wAIWW9A13Y\n9ssWj+VDxryjiDTERuooIOIDF3eBaAyS2WTG2r2PDawg5hMlPnNorUxLcC7P\nGbjH+2+yBzc2UhYaQc0f2JAQII4bEPaw5bBk9fc+5X9EnfgptBYHRp2hMcTb\nkAC3n5RzfmU1xV9RIqD6UsDR4soULVtJ771fWq/atfWQiPZ/WljRR+vmv6CS\nAAXTZXOmHX2LRobwkXNRlJ6JiZmPj4M69CmVyBsKY27mogaB5CmyFx8Qjwkt\n4lCpkRL1LBYG80HXB6oM0J6oPosTZa7A6OuBfAECLzKSTUP2mYsrbDAwo/rT\nnCDEcZE/LrdMae1BD5NJLZFi2H99rFBmEiEK+tFfNplD7KQWSVTVWFYOsCis\nPipJ\r\n=1jdK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/density":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/touch-target":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.fd22355f7.0_1606777179408_0.9365951034018241","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/radio","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0430d62aa0dc7ae8a8c6fdfc873366618910bf24","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.c4ab98722.0.tgz","fileCount":42,"integrity":"sha512-3Xk5I2zhzkJycc+d9VVxy+Q/qWLiOSQIXnGiHHLR5kCPcR6oI3zhrihlDt0bGmXokHr0CXF2VoSRJ+kFQNUjbA==","signatures":[{"sig":"MEUCIEVNsI9gf5mov0vPoaYzZhEo1rrH5WvcmI4BCFxALNKiAiEA0j7R2YIT67gpClEc3aDXffd9dZrKzrK6hGjIo6lDAuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZNCRA9TVsSAnZWagAAgYgP/Aqtq9ZQIc3BSNv/5AqZ\ntyeT8+yvZT1yjbgiSu7tQ63s4pN4GGm0Y8ev16BuNip+ByWB2AJQMlJXbsVw\nsy7/3KxLo6P/JgWD4r/fTWQw9qkIoFE1OmCZSNo/V5TOO9OZnkkrMYKGsFBS\nb428CjykOQVXN1s6h0Nc9jK58PJYoIZDWXf/IXxcuMgH0l2GB4+1bbLcZ/mA\njvC/tiiAME00y/ZIrKNNSXI3sdHgdy1eRAqWYa6aI+3MwhaBBulMBKWzpFHm\nlM8ctqi79176JSuv0kjVT8OUZqH00ojzU4zK0AHKPqY8TrF8SsOYFk/W5Ld4\nMd5v2zg/i8o4M6sytwTpns5Rf18NeLmZ1R0slErI5MQs1yekQiqOfgGZagtG\nQooNYKU5+fE2I0IiSszSFckl36fUOwL8DEfXpvUBGnsxC6ZHmrssJOS7YxbB\nYpSuP2qGvmZjZ5n1kigJXFrgQ5CadT2DrtLFCAaKLLvS/N3y1/onyuS5a/rT\nh7q3RW7EXPW0zQ3H1W69Ze3aV4nARhRNsgS8d/Sgl9zcVnS4zXU+f2TV0TKE\nBaE9umMYEQRemjEkBW4syYk/WqX/sIIQgye9KD6po3KAY5xX6JT0OiVKSHqn\nl+giEkMXDvXeTBwzuX4ruvXNk5gBlpz7UwXrONRtfI9c6k30dPgUQQ/EY+Dk\n99A9\r\n=ptks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/density":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/touch-target":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.c4ab98722.0_1606870605320_0.10839143874795076","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/radio","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"709f9fffa1ff15948bb5852a08772b0790027db8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.977585650.0.tgz","fileCount":42,"integrity":"sha512-AHQOktQgr1jL6PcVm/QhqIZ4apaeKa1V507Ly0/kLqGrUVFZcd5euR6urhLEz5s45tS036ewS3zhGEXmfl4Z7Q==","signatures":[{"sig":"MEUCIEcHU05gF8/8o4SZ/SsBdRRQfVh/T4KZOBDN1bki3ASWAiEA3t3RXXix8dA67ML5uFQkiQmTg+QADR1C+rTjTivs/MQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6e+CRA9TVsSAnZWagAAhMUP/jmrvRCpiEoX33Wd+JDV\na7LjCAEnoN5y7imB1VbsWt0jKf2MF0QiL+7ZXPjNxGG8xcJktQaYCNuumSA0\nO4gs3yt4JzuxBOSXkX2WXSBqr/oy5qJrOdTsVv6tGRbkqYZ/qTKZryA24SC+\nbV6gvKXOXkO3zsvEoZ9M7gOLx0F+ePh9++mN8AKRHwdvId4AaZXFyTAgyWIY\nl7WYNtXlA7bWkpD58j9j7fUd/smf6ENVUpFi6zfgwHVWyvzYepywdXv2BnJ3\n83OOzSc9dYiFjOrdWMsJQWUqzAPY42IeJEV3WQutdF8G2raiWVZNcMbAA4n2\nZS7VNIQ4patLsxb/E4blef42ywmdFgxf5ymak+52CJ7GpqS+C44tFYIStRkZ\nBIBcHb15dQDd0HFZUQjtKMU4kvSja6kbvgqqr/iklCApJoxLG97+nnmWGBvQ\n6YXpZyeChI2CucNfPau8A/hEv+I71fFOK4G82iW1aTp3PTKe5aoDvzQThRBL\nXrYL9VEmVUciv0YxqwNTp7RItPbw/uC6f7uAGYnbIcTTDnmKXKZQWKlR9W6o\nIsUNbVhaTXbjYyy5kx58QJ6nmwxjAlQw21VsJQZzbBEq9JbWFPoJNWloVp8e\n2bHfKuvyTj9PKsiQOYF2Be5SHlizS+0xjiVgcu8+63acRPmS/zIv9SX8fHZ1\nSjLK\r\n=fqFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/density":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/touch-target":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.977585650.0_1606920125264_0.4500128476253431","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/radio","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c926766b883294bf06f2683132ac0e4cd910156","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":42,"integrity":"sha512-xFqVuHkoN9e+28qo4Nc7aLn2IXcC9HgEYIwtoJenoo5dI/9vDLSSDWRss/epL1p2D6mgtoFMwM+yh0LIPkujjA==","signatures":[{"sig":"MEQCIDW095nxnXTnGnyeRMi0GwrtM0KLZu79dPqCn1XqVXR3AiB76Nszn6D9HWJy5bhQvjCLAATH6XF+zOnT0VeyT+sgjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mLCRA9TVsSAnZWagAACJoP/3ne+BXjfsZM1vKZrKf2\nualig9gu3Pd/827T6kY0sMVhXyyotqRuMTW6r4vldFxHbtZYQKGqwJ8ttvrn\ne4xbJxJVEpUyzF9LRQLLase8OVvAvRJvdNBcbcuB0AebzPazEK37eHBHTbae\ntnT34EKllyMOQwawIfXUJOdaajABJv+c602/Y5Jn4hqbysDfsZVEszHybUgU\nqHMoSRBJllYVGH32RKU8ons28n7bgblbpHCcV6YA4TqDQZDaaLVhwj8UtWES\nrNv6I78Y2xho3OZLiAh9azuVI6+zO19dBtUJmvQ1TOftLkqWHk7wk5YcBKyH\nhyYR32cV4BZXKbYkfsz/Evq1carxLsMqLSpHLPxZja9OAzQszcQgkjQ5PDYW\npqf3Pvu/LRw+I8XRqc+C89N3leNcd+xLVTUBUOglgzcWMy3YYvLHcPSablFd\nelJSRHNkGzngAa4LC0MIcWoUcS+2cwOx27uRQTCV8ZBxeB/JziEgxj/e69mX\nkGzFdPU8QfqPKOWGj1JVGWc+Xh05XsLL5rVv+pXCm5pmfytt/42cimC3bq++\nckMZr8GODrm1ay8/T/E5cxrOsZ3AVHmESKeHfF8UmA8nK73qvsOECKC/RahI\n64AEClkZlCWIs8DKfJcoi5Sq5zmARleZn3aMyAqPxg3i3rU9rheQQDJqMFEX\nmJdy\r\n=7EFK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/density":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/touch-target":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.c7edfc7b6.0_1606920586714_0.6934956117188946","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/radio","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42d368ab88ad69fd96d2efc79002246a69a260a5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.4f3347306.0.tgz","fileCount":42,"integrity":"sha512-7Z4Cr6pL22r8Z531tK9Mm3PTfu3VuVhAIeIktEq2U4SZoBXfUJRyeSJ+GqRxZJF6koiQVvNbEYc0YQPDNfe55w==","signatures":[{"sig":"MEUCIQC4bcd6VZPMvu6V3/6QRRcQ/8dF3aC0fb1ER3x4xT2JoAIgX8N80ZaYrIY9AogPQ8DiZIN5VcXf+sXnbEHHiPFbk9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx629CRA9TVsSAnZWagAAsy4P/3vlOBPbByLwjrjqcpkV\n+//BAl9skfipcdsYS5qvQEx0xt3PsZson4rREnMuugIhhxiRenS1fUZc7WhK\njWyUyD9dxkJE3jYo1f0Ty01BJDanWr7pgnbM5XMes8ZxUlRldNnlixijSF3a\nTVFxJAj0szr3WRD0Z/REO49Cqpzxap4oI4LACcblqV3kVEfH6UA2YkosqeSX\nZ+w/x9uJc0B1LLqHNjfIghPNMlpxsBXxkuQiJU8GpQuhPlkJQAxV7K52KqYA\nB3n1+5mauyufun9SVbPlhOPGJDsg+v0RV1nFdogjGbFOuxwGzwRZSFcWqH1X\nX2E3sGoCIZc8JDdV+kG9aPxoxksWh8ZUxr9jNnp3U0eXn7bl49Gvv6G6xCSW\nSjSIdOdFAQx6cNl8ySn5fCFz/hQg2DGuc9Nps9w/xLe/wGPX2JkUUd3bZpov\nVbtpTM3C/QLGkeepiV1X1tboNyp3eZOebTFb8vGbaBb5RoKRrinpGLqIy2kg\nJob3Kqmgf4wRcNcwV58Qq19AyAsx8QrnWqT4R7G+6Fwxyd9EU5vHrdUm6vFW\nSbXx50rd6KEqM1XpC+qwprWlXtDKh8wSAsH/YhlSp6gvQN5AxqTUxdcAk5Un\nVMWbjBkScTa320ZLWrJChTwBbE+yfkVTIRy2+RMdaAFvtmlz5RIRDv08S+3B\n9TdW\r\n=dZJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/density":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/touch-target":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.4f3347306.0_1606921660828_0.5341933279336513","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/radio","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b508b1feb2d9cc1296c63387fa185ffdc0030e93","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.37fbae10d.0.tgz","fileCount":42,"integrity":"sha512-bh1lduQdKQIpa+HvwQAQ9fhHXc4zjInN55lLu8ew7qysBrUZuOY3BIqNww/I1eGHVYJO/BEQ3o+UzBKRfDV1gQ==","signatures":[{"sig":"MEYCIQCc9uokQIww+oWFMJcKdpivn/R9TFO5/J4OdWZuACX39AIhAOHS5ixlKbpaBu2j98RFdDz6Yu3CKoqPICJ959igLgsM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9oBCRA9TVsSAnZWagAAOVQP/RjSksfF+tjOeXrcy3Th\nftO1ACGBf67fho4b5meB035cYsdMjMQqbGZY7G37OyIbcBr8/jshvAQUU+bA\nk4wXbgBgxlyPA8CEyCiKvcVyzUctSYpKmxcdwhY7qZiD6I/MWmW7u5DFHtZB\nc072zQaoapfXXL5fHxWyrHQxtK4VnDOg9i864yppHr5qpWcEXGSIWFkAg5+Q\nDBcx4mxbfoWcXCID9e6UENQVwomqj8Eb3wjJremy4COqdqVlVhQRXQJAoVkm\nKbJJYfaSzmggMBMoRZfjyURKaHYT2sL6kj+uND2xmJ1olyAkZ24w6ay+Sdln\nsmLJLb2qpEoo8CCyQFwb1VtH5i+9z5ufmMlZEi1mqJMKP9UCc0JTrRZS/aUW\nmOH5AKJuhiLxzyLIWp5hqbsd5e3wGP33YhLBERPOOvS1pbBmm1eBLzGL2Am2\nt6sZCZ6Q/mJyODavw/vSnt4Q3Gnmkjnyrmjn8og11+aqkYrpBN7hdj+xNZUh\nez4SC2fpenEKzgvAwtax1gGJHVweRiGvojYhMpZnpU3XmKSkQYGKEUKoewrW\nuYB315uY1kY92UlUiZQY3fkB+0pCPZCzhBPATHcYSku9SjeiY1JOKz/FFGjI\nOZ3abx4ArJ9FKroGDXlNhAA6KLJQfArpm82tGdOHaQGJx2dqO/t9EY4V2j0W\nhQVO\r\n=LA0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/density":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/touch-target":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.37fbae10d.0_1606932992979_0.7771561205808686","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/radio","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d9ed00909da24020f1b9cfa0f26fcd1dad808e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.11da3c0db.0.tgz","fileCount":42,"integrity":"sha512-/LsXNSYWA44u3g3R7YYd7t33NIE1MAVefaCiTcG2o6CN/bQVbbJ46wfhyTVUd2IMWtDohVtEX2bogmuktv6xqA==","signatures":[{"sig":"MEQCIHn5UU8gxSpToFrjbepocRCUZ2OV4276UNCVy1xvMirHAiAjfOGRHv8CB0kzLhoxUo1l+YgZ/cpA/VGallpZrE0nuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/eFCRA9TVsSAnZWagAA7WwP/j0Re+YIla7qGRE8whUr\n5cTY9P9/K8m1LKV+Ccr3ULNy5Q7+BxiErcAayWy5gyDvGtF/c3rEc7B6XRbN\nKS8k6hNUrpGrhmGZqXJmZB6PRxScfBJI6ssiMKYq3ndJIevyNXXX/wWne/8X\nmEsOE+0RExNzwQ5GWjBZSLwGtNZfRZDjjfnEbcFNesF4CLCpn2V+qc6gcQ55\nGRLRO+lBjNIrKRLoztQkeBlwLHQ+OiQysjW5RtrQtgrcITBzZEFKY5E5b+L0\nh0MLZInjbSe69vxeFbjB33cxaPLSVAcWMMsrnkD4Nq9s/6TbNJPx4P5wR9B1\n0Z91CJsuHGO/rStQpjohBTnD3XH3ZROKjQKUURGxR+bVkffCS4HwJ0xoFMoB\npFgbdS+JGUjYytKgb2RJog7l+mc/YUyocxkiS1xX7JmY/ZfMlEGPfOO8lmQT\nJHniY4QpVN7+D818c68JIAvCiYi1MDK9UTa0SbTsTNtYkMxCF3xwjH9GWnl0\ng9ngovZPBlbhQp/o2Lx5NF14ixvWr9Q0Ygi8coJ9e6b9EHielb/1lkB+MCtR\nVI0ekZVNbXo3mbs+tybuJZrb+sT07TU60bQ9NUB7wZ53Bwf7RtBRWQRO5P4B\nL1Mmsc/fzXUIP+ORhC6hUHo61lQQLKsJa6yBRdsLHiAMHkaIop1hLygEMhHY\njxbn\r\n=s5Uj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/density":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/touch-target":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.11da3c0db.0_1606940548527_0.528514968196421","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/radio","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e4300cfd681856189e39a55138966a521bdb81","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.489d4c219.0.tgz","fileCount":42,"integrity":"sha512-ink61TCAFOREEHBRZbo14iKoa6MRVWHET7ryiW2oB4KwqhcsiAEmMuHA1PDNFEJWkmqfDhHOL7vC2H8/+uEM+w==","signatures":[{"sig":"MEUCIQD0g05bTcZ65uONS6UxjiXP67rGMU6s36y4jhP9hHWVEwIgVV6Mdf40fqFyT3cZ6j4f4Dvs04SV9jNPycuXB4Ef6pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRqCRA9TVsSAnZWagAAvvMQAIQW7qULlt/suHcsDcL7\nqAcNCYkLNHrREh91Ku8mJgn0JnoOV8kemY0r47Wz0j08oF0LRNYqV14MYuXg\nEJ9Mbjc1oSSBLVoimzoWovm00On9HYxgh3X4g/vVYgaUiWxs/7kQYJ06SKlW\n2G0i2VA6UlGdPtxZtGk/EPhWaKAU7vUWV9dofjkRR34MWPjl1yKEwSbd04OT\nwJjNFtfxVN7KcWWBWanWVr4Zqu17oJ1dRbXYQBpaoECv2P497XIX85mSTK49\nTQbAIVYdU+6gSaJGipGSXlUldVfiB20jPqYsdNsa8v8vriLQLYIzrKs7wxH0\ndNa/pYHXBx8yD6PPvF1Zrnys3XNrW+/cdyj0CeeVpuB+9YrWf9Xpauna9KEV\n148zC3ditVZPATakEZ0iY6TkUlaG+YYolrrYrHQPnAPmYWrRmLplaCg0UeHt\nm7773sSq4kwUFezuLQMMIrIFokpGIhRdie0yHsfevRc46jdzP/wtOBwSg0a8\n571KQ9A9KmWU0yA4DMyhhvfWv8KYqsN8DCunHlvMmwLlfmQM9LTzXx3DO2zT\nj6TJ+xCgasBY4QSHLwuf7BAqbZKYRSrIe6tx2hoxFLE3wMtbRzWHvsMWyOBg\ndfkSRlpkPVVGTmj/gnk4hr2+hQa+Mv3Zj4GzCm0JiwQkQErjku0l65GpHjKR\n8AO7\r\n=sHmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/density":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/touch-target":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.489d4c219.0_1607009385817_0.5742027174472868","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/radio","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53603ce50895046abf4eec2a3c2b806e5a9d14b3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.6557a69d9.0.tgz","fileCount":42,"integrity":"sha512-iNH5V+89UIQ1mXebiP149fas4mdS8ySLLcqFDHV9xD6vAXgwiWl3BqdsCL7P/b/m8WTB7fpzzl8myq5UThbKVg==","signatures":[{"sig":"MEYCIQDvknp2xfSjlrCb5YOQczyQzn0qqBhXdAQTIi4HzKuj1wIhAOLKLHomywz0PgbrQ7mtIe8RIw4Fu32pzFmH+EQ+Onke","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcxCRA9TVsSAnZWagAAphQP/3Qi6vdsyw8HEyHhedrZ\nI0ySyetDP4vLMD5wFnUryAiLcHhTStnyCCa4PDunDNx6PPaWc3zWX41d0zuJ\nHkz/Q7b3BMnCpqenixc8UlFjkfrcBIy88F3TehRpCwkBvdZjzjAJStuFUSpt\nrtnzAZ+0Ws0i02YLm8SpM1lwCMcWKsBPD7A8/viis7UGLiLVzfu1PukxLejQ\n0VHqW/BnbC1SZWcB4yRMPctlF5ujobcmVkFTtuxNYNjB+XbtnpXD8unqjnKW\nxBST0+cp85S8LMhdab7uY+m+r5zZZjMpmDTn2XIwN0l7OfbbD0vbtXrDEcWA\nb3w446nIVZRiFk5In3UjVP2d93Ak8w//wMC1ukZsi/9456o2wxCWI94LJB+q\nTbCBRQSWhoHhO3FPsU65xW4aMuUCAq+DVNnQe8ACNzBaoi9Zn5xItHSlhmUD\nsgIcqECOVVBNbM9E7KlkWBW5HPqtqHo7XvYzZSJOZg/15oBCykmhzWJ8aCij\nfmA0Hf8FXScAmOIrJqAkr6Qs/VJjjpEtH/kkqV6xg9n3TYPHXq6bhO7edvhn\nmsmA2E+C9ypO3VHo9Ei8TMifer226XPz6S/jLEPkES4IqzPV0niy1FxVI9vv\nSknPDGbSZD1Iws9/bFg0xei7z9XhN5gIOcxYg2RKgrf23UWv+KWLWC0iNCK2\n1xF0\r\n=3T7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/density":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/touch-target":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.6557a69d9.0_1607010096721_0.02773453779570878","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/radio","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669b5942c99b78a0cb78c718e17c4d7564541a56","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":42,"integrity":"sha512-mwzOu2cQVRMekLnMjgsuIhdmys9e1wCoa+IHyFD06bUDcDdIWCX/ERxs9rhGUiukRAHzyxnxIBKQ/O6hMsGXxA==","signatures":[{"sig":"MEUCIGQpcM2MwXezvFBmNnofakpLusgK9uW4qArEUGI8ltRxAiEA3vZv+zD2PTB4RVi7ulA74PKPBn5htgt2Y6dla9f9GLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQscCRA9TVsSAnZWagAAu+AP/Rk47GSUo2POHKNr+RUp\nyLB/182RaqeEyiPCycHpoX+91N02au3tZfdF6sx6NuF3SJAoD6TEGqxffw9F\ntDdZZIMpNROuhNO+/sAPKBjVwLLy5mkNmfY/2DVnbkcuP9SiAwdZLFPLgAeb\nkMjyo0w44I3xyYrT3n7npFp7xmgWEuJU4Xnh0seu/DUvMo6W95C2A/DdVNnz\nfn1hLPalTGw1CZBQLqYFNaPlAwSUTdkDa5I3H3K48n18pOmv+BfZfU+IG6S+\n8aMbr1FPOi9w7XeLTXnD8P1J/51OqsLZlXdwXq5xV7oekIjwdouZ1df9XigK\njvvfFEBc5nT5k+JzCAqACYDdVcnKw3ueYYVexSk7/CgUSIMFCtoNJdpUempY\nD+Pe+vqkJRcDzjfK6Xm6oC7B7KupwFwdUvHU5V0KBQJPW7sFWR85EjvSHlRl\nWQzDPByS0BdvwqlgYGTeBwardQ93N0QydKcXLknXUbxZmETDiegsd1SWeylJ\nSAg/BDuJn0abuhTM4MSECixNs3YT62dDimLGdVb81fB3onTq/81j/llnyJ7U\nwE08G9Jr1Nn2+B7EW/dkvROCOW6a+D0xMRKg7b6m1DZ+KON5Og+wWi5i4HiK\nuTJ8gN+bZCLWbO+60DrCKgkePAAg9beiNBWotrQIeEj/Ic1Z5Br6CQQBk8I+\nvf2P\r\n=m6HN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/density":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/touch-target":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.4ea1b7c69.0_1607011099878_0.896700885995733","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/radio","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5a8614dd943feb804e325afcdf14c17c393db64","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":42,"integrity":"sha512-t4SJwnXe6MWMZ41ZOxO23wtxDyBodW7xfgOyKOE10ocHtEq03asBO0v0WEruRWe6Kld4PFqRaH6VSD+bwlrpWg==","signatures":[{"sig":"MEYCIQDXFlG7z9ILSFUbCOoO/FwYauxg6y0JmwWpcSn8qamQIAIhANwYgp+0dbMWH+ws0b/Hoik0TcWq7c0JTVzxOGYGu/n5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnvCRA9TVsSAnZWagAAjdsQAIu/L/j5pcP93RNEXqY2\n1lGfeE8hp78uuozLRrBP/k9D30MgNkXh6FPaV77odPuYE98u3rkRr7D6sX08\nsg6xe7jpfCl7+XC/wDh6o7G8/3ywjt3WrNEgn9U3rMyfwVgs60NgWWZF7uoL\nbXTSixbCR6PFlS/KC/LJJXk6dhGPaaF6JsZCBs1OCzzC2JuUxC3nSTusi3N5\nInq1iT6n4RWgLEGhAo7a2YmzJr7h8Jpd3M290kMHxzF7wxbqP3D0P+LzMIXU\noVQHdoQC/UfOHrPgt+FEj79EadxQiT7siqMtRBO+1ilaemKpq6Ke7ZYM9yVI\nHCjIiThSPtxxMZmoyXk8EzjbuMurbmFI2d51AwDITZomHZhu4hK3eqK2wy9H\nZcmdjehcWasnAnaXALzbC+svuzLvRSxLltdUXvhvpfC7Nz/4NAq6YVPJJk17\nFQGohbFy8mfbs431rCm7NNVe9WglIFEBfOTMTWy6BbXqzT8nmJj2WdsFViAC\nXKxV94Wu0Hn9j5OAv1QZuosRTVkUvb3ZYNtgkLzPkjUSQO8UWh7Hs3itW5SH\nQwva0RHLaELprfKCzMnuHZolBa+9HEz+sVACfKgOwUyWfFtAWfjTvLLx9IhI\nV2m3h+hY/h4xS1ghFy6pNh201bqmPutkf1VhHLxCfTSTcuH63ZQSo+0AZe7a\ngPOJ\r\n=bENj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n## Contents\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/density":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/touch-target":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.eaeb78ce3.0_1607014895423_0.9302652304675607","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/radio","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0db2c1da9106a7a3888ed382da31b16fe78d1fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.1c156d69d.0.tgz","fileCount":42,"integrity":"sha512-i2pDFRhvk8bWp8BBJ0dyuGCqP17FlKSHzGqYQNI80dRPVYyLiexqIRfn0KGcW/sJtVC/P4GlyhE98g4mNYA/iQ==","signatures":[{"sig":"MEUCIQDVmbRyGgcSrwtWhr15KZXX/VzBnIFu9iKrmzLLtuspgwIgC/GIO56KZ9fbqs/YNdt4LTZF5eKxbVOw/+sZPBtHL0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU5BCRA9TVsSAnZWagAABloQAIfEZlbK2mWAAF7rpXJy\n+nsQwM175LOyrBU0ON0GHG42nWCIPpQJAUnSN4wukzBEUY8sYq5Y4OAqyFJQ\noKh7L2a2caSX3RDoI7f3kyoy1O2JKbc8I3I8p5xtTJBqkWvghEMXiJB1xIWS\n2hYCzEqb7sL9niTcgEQzYVJTNEBuTUR2G3+Q8Xp2L0R+wB5iOXuDdsAz1T5/\nBBDVBQc5a7dFCIDIcEY3QXVfuSIGwqwHfFan43g+75fovzSyMt7CxGYC85Wt\nohujvEGe930PkzdEsnGIsyfS1Mi0QBKHoYexS9Q8Nc1IOybRjDm9bazXHBPu\nCYFcUgICZttGMGbbK4FGaPIQldeLiZR2yvyjZN8TPrW3CHdqfaDi+S3Pa8Ny\nQ2CW9+iGLTWgdEl3yKuM1DPPtti/nKCDlPheYgr+QiVoYmlpbncnsv3zFtb5\nLwxY+b6i52egdajj3M+1w54cMAMlH3vulaFYIlFHuKVSkK3FDWVR0q0Q/OaU\njqn2XXSsvEMQTXMMP/op3MrKPSve4OHrXsRvDZesia6yU2jZWddaefwoYdbS\nouxfAy3W+9TCIqP4h0ePi1bhra/vLUO4HdmsH3Rqo7ByhLhLhiL2PqUiyAjg\nE0QJUGQr+ePxyzuRojoKt49MP/7rUfdlfitp8uJQ41faDflesxCPLvON3GkA\n+X3r\r\n=TbYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/density":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/touch-target":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.1c156d69d.0_1607028289127_0.3132790046444611","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/radio","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ccec8434a048a48fca423b8a7fb05c99895db8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.832668d33.0.tgz","fileCount":42,"integrity":"sha512-A8YaPfPy/oqrLPe7uc6nROxdliy+LIwON/typZI0InekX/IyRh9SamIVepgkHZTYfnmJbAgeONg+GPJgXC8o1A==","signatures":[{"sig":"MEUCIQCSw3I9I022tSp76DdmD2rQNFMiKcs3ov2YPdN1FG5Z2gIgI1hpMao67LMZDuQYCfT1YqxzWlRv++lJ7puckVf0Y88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqLCRA9TVsSAnZWagAAvEMP/j/EzbDD1bj4h5+Vxw4Q\n2Vc3Jii+owt2FjCnQRdg8UKrOUuQ/zycjYmewzP7BG90vWmain0x1rJ0AJ/+\n1a3ZSocKU0NP43/ECRlJHyfc/fTNAUEG21L2xZkrNWpee+PuDBA9jHFKmtxt\nTcaKpNiF4QIofnw3s9x/nliNyGgGinwhi9A2r1of/0oLHz1gtT8UixbNwqcr\n/akAWVbXx+c3XMGHwN+3KCVrzQvXSqAl8/wX58uM45/zp5/NgBxzF2g9pjAz\n9g/p6TIMxFFiqkyWMTmKiykxG9md0FKPmYxfC5kQnNTbO2vpuA3Iz04WLWPU\nxRZcVyuB1ZnqvVBYxW/cC9IanLbHyeR3tyiNjOkOye/J+GczlKDsj6IslIjN\no1j78weQXCjGQOesaLJetCMjSgn0Sv6X4EodqHmi7i8IH/4l7dWyCEA1AmoN\nyBYmaQha3hhZjGyoIhXQAIJHstzG6r9oKHq9rdoD6y7udPQptNfp2CfllWiL\n3XP5YG3VDNL8djOPwx6SYC7+3LQDSIQ4LgfxjM6b2V863UhhU9c51LBZ2KA2\nBecbTH4ZC/n9NZuLETN/tQ7QOCAa9X92421H+JikFMNdcSV9sd68FZ3vEJrd\nicTE/6sfRVGrivWk0KC4kIeP5Sl/WfA9pBC5zYZ27y0RYtZS8u/kBrjnv1HR\nrxTv\r\n=HNTx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/density":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/touch-target":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.832668d33.0_1607105162599_0.31320915952324424","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/radio","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a22e7fa73c62d619a8facf7dc58a7e334389040c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.4321323e4.0.tgz","fileCount":42,"integrity":"sha512-nhNSaGQEih6WGVrAsnlUPJizIqhI9jMRR6VSMrqOkug5Gq69qi1H9jb3A10BDvV1SeC361KnYy09OFuRmUQirg==","signatures":[{"sig":"MEUCIQC8I48LkWjPuqhb6yLnv4Kd0A1QZ4hUVWGs4E7aXgINogIgIfqgIjMDt6NPCbnLh2uiJ9zLJgMpk4EMrP4FwWv1XME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIECRA9TVsSAnZWagAA1i0P/2YDHLVo2UWBdwoyWcxs\nGYovJ5ojcYMl2jIrkpHaRNAEEwhIupO/kxSHPQ+s5Xinyw6arNjJsWwOUeMR\nPQrHxe1UMrlrgTyEEyDeaUzkGEE2giI71SirOtYnKvsCFrqOI/FHFrL0JLsV\nf7pdmw4bbZ+AKFJWESPpGsR4Qogp4pgaPuPVGF+uWx60GHZxddVnkbtyMqzq\ncRny4a23rQtZrKwdt6WYEL/QXsUcR3CFOhfkaSvjDNw59pE6PhYOQoNC5vhU\nb3oRVhv821a2zgdh/48L3bvYETVJ2N1+w/8+teAecH3MilKsVteG0MahRwO0\nIDRwuHyqIPkjUR8k2ilednGCvt4x2+hxpj7Q8plO9SZUJIoy9AODsgqld7Rx\nw8piVP1Xxae9xB7QIhS/WONAzzAIv6vsQndFVp9dPoOdzNqaiMuJDuX9PVwx\nXspEDsjFJ0dyt9rV5aPIbnBxFSdqIXRyeSxlirmEw+PAdib1AemcJCg+zbGy\nP3ao6ZDujB4Bs3G/X56FUglhdqZbTjlT6Gp+qNYZloGTRKLYQJdLqpC9Z6VS\ny0S3RTOrma2ZpU+ho7qHqEq7EpqiBWE171Ab4aRjHZMt0cfbCOslicQ50C4v\neKE6O4ZYeTyl3MwBmLPbupRFG199bLUmgq9XXcM6fGkmQjUR4nRXUDjraRge\njQPl\r\n=EVGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/density":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/touch-target":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.4321323e4.0_1607340548112_0.7254771245433858","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/radio","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ecd4d48f85b10787305aa41d987cb16849495ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.2d5f32d41.0.tgz","fileCount":42,"integrity":"sha512-tS7av8MyoCzGZ/U7ZV52Ro2VNWeS1Ur2T08E7YzaRDidZDRis2cDs1Rjcus5YtPAFhPZ3O6FpA9Ysrj3HU3jxQ==","signatures":[{"sig":"MEYCIQCeNBMu7Rykw0+t8HP8/3s7IBQ613TrrJaUqq9yDYsZiwIhALkzwcH4AMuczq/0A0QZ/VKuPdb1n/SAez5Uptismof9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltaCRA9TVsSAnZWagAAyKMP/jKh016DBU+wqtsydRog\n6DRDvWyJDEyM85+WJZdNBv5nIq5JdFb76HY1X5ThalNA+6u19aIx9H/bQM4e\nTevwi1CyGk+y5s8EoDRfY+0fVv6zhiL0vV0i7zTcwpxfdaFA56mVquyAz+fS\n4S7q2ZZHh+1R7IQIATc88Umv5DRvutG63Y4rjjXzCT9Hn0Jwm7U0fviKymMB\nNk+WFm/NOErTCh7omk5ZzWwO8L8BtDZzCskwHC0Qg6ip3bPDj2nFMNLKKHdX\niXXkHul3/2Jc+QRd3t2NGoU/5F4o1U+z4HaiTB+PDELnnml67Zlr9kZXq4RE\noYUlNMXyi+biqrXHQKlRlHpDSNUj0w6YprAC67GzYp7N3hoF0qlGJpGs7CkM\ndDtETLiKqiG04Kko7ECcX27ASYbEPhtVEuJZ3C4R7lIUOcOX3l6jCACD8mSi\n0aSBGJ7+b06MxpF+SFJB7XRau29UoO/+3825aIk1p6InTDOtKSMgqz8TypMA\nDsOez89C+gsCE8otN44/+cyjROoZoZiAb0FgwDQm3rvNaNsSc2eHjBwSroFJ\nf7QfUPwWg0kz+RQuitBRDJX89e4S7ZAsnGJLVAhkGwsNi2F2/g278H2XsQTp\npOMxkN44Xd6TiFszyXCMtic7QNaUMs06I1v/dzo1Kz9q+38RnbE7AJJIP4Mi\n7lTp\r\n=QkaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/density":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/touch-target":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.2d5f32d41.0_1607359322287_0.5257506304933572","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/radio","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91ed3d6b9c8a79c8138d9e30117c6bbaabf3a65f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.8239afc64.0.tgz","fileCount":42,"integrity":"sha512-qW5N5j537IyrS9g0YHJA3GY+Sr/h0apS4OfXmBNkfo6rsyIC3IL3HL8brC7wM+Y/akEPNh2wblMZGYY8AZoSNQ==","signatures":[{"sig":"MEYCIQDqJxMla38+oz62hdH+ntoH+5kmSiiPCf4mWZC+PaHv6gIhAMae/h32kFeYYqoLV4Ai1ZK5g7tkTOsBJT51wud6T38S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodTCRA9TVsSAnZWagAA+uEP+wV4BelJi8tSUAaz8ADa\ngHGCQrMzq+39RkjAcTct1KTIrYAbOHIfi9fc2t5TCA04nClkq2Ey4QV2rHFt\nPOyrKwZUMek9nejZBlpDXtNBiUYTuQky9pDRPi4vtXUuy7Li1gn6eFZpgVHJ\nR+xQRCimgbRHuL3wS0drMD5x+9zxxBt8JRJiffIhOAK/M4HSCEGND1iVIBto\nASwwzFPbH+fn14WVKBIej4VGuvVh+pcs6zXZAzKu6vOi835OpQDxDaiuaPe5\nryXZMi05g/oouFSXwEjKYtXE+56XayZmbCIMkW7JQj8IAYEU2vHcGX7Yncne\n1Os5SjsuXbhC+QvI9wJ++8Vh3rr7v26xE2r8Zy9VMSZWh1aob0MbRISktkFg\nq5fg30IQoXDH+8vHp6GZQuH5HXryS4Od9lqWE+/M3wIwl26dwVwBqjT5P/bE\n5zXnI1PPeCtSDHTBs4GbWUVb+UJncyhdP6Nv9eRL+8xVGBSgiWZlMhKsrtEx\nQWWDiZeJuB9osxzyLGLkJkLOqCOZIEtr6X1yA3AbHbHp7BIgXcRHR74oWThE\nNcUfvK+lNxzfbnU806YvrFH6KKeWAQ2/Du1wBYYmBbk2n0+nFhIBS0qgKtzw\nOY8/tCb4Z1/R00+Peii9FdwiyJETnf9ckJWkthiEZzW0RRDQtq2DCXw6pSmc\nR1ME\r\n=8lK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/density":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/touch-target":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.8239afc64.0_1607370578661_0.5895162535824172","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/radio","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a17b98b0c8357b86829b01181d47bc63e741e4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.6871336f1.0.tgz","fileCount":42,"integrity":"sha512-u0h6Y33a1XL/mftpva4kCWyU8iJekDOakWj7erFgBWpixS0JbJwvG6jFE40+Lb3ucmrURDvdbJNH2vmjuKUsWA==","signatures":[{"sig":"MEYCIQDaQobv5bQLEOkGSOZ1Mr0v1kYfUgpUbchbU3eNhAnetQIhALjePTyn0r82yMd3+u/TQcUJkDCOU71pKpJwD8Ep6dMb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NfCRA9TVsSAnZWagAANUsP/3Uk6rMAamx4a7uEGIy4\n028VRlv/yyySUxDfrowXl1Ji+etXREcJ0uV9DHMSGDABRTCT42xECHeR8AEy\nMv8wNPprEXgJ8zJAgbWJ7lebOuvU3pThOWqdQ1ZhPDTx1ymJ/So+T0La8KLU\nF7nM7LGLUe0R89fKstCMD16BSKcuJtn9j8kSXcH+xniA/X2Ikxr5M8xCng0k\nWWZlmMadXaXEoDPM6BY5hnRilIr7yJLCGEmSCJhec4OmGcw8BETj53izu+8j\nL74CQdeOYi4rbC88Tfd4CsacEi48QSX3nm1x0cpBBenoAgoAbCOOFlVl5skg\ny1G+cX1TBaHDcsKXVu6Hfhd7gpmx4c9DZh+kWWy3EFlP8yYEnN9aMNYCcM32\nDJpAgYuKyg4JCbIuu3Xz0ASSKCsl2jkCbm74Sp5fp6flGgsft/WyR3R91Q4a\n38F6R0UpBFvFWCnVVvUFHSQcdNyfUPtjD4TqFArTbapDw8gPQ5Y1bWD6yWs+\nVZIw20dA5trDu7z3ozG3Z933b6Kjb53VYH8c/JEV1DQW57QpuPS7R+tQRn5s\nCVkeqHBv3wPQABBC37YB67COc1WsEfcfjEQm3SwLGZ90GjkZwBmGsIt53dPR\nPmLwdqlD1p1oImO3Xr+0lwRisyal4HelEUg9sOS/zVFDpRhqd6DOGh2qpsEG\nvS/N\r\n=kC4y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/density":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/touch-target":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.6871336f1.0_1607443294622_0.5624691597119755","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/radio","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c3b2e63f20520661d6a0972748ee4beb0b49a7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.9f718da94.0.tgz","fileCount":42,"integrity":"sha512-O1gvfF/XfuRSewYEE+H4W5t+xCybqsaUMyQbzv11+FrfcpChH9DfmT4bceFpTUxoK2qgl6by07piitkKCh/mEw==","signatures":[{"sig":"MEYCIQC6HrK15MAhQD4gxXjs/ICTVa/0NKQbnAyhZtCLOIhEuAIhAO8F0PcC0z64Q0zrMGMkwpq/ENtJJa3/Ii6PUVRx67Ik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YhCRA9TVsSAnZWagAADPsQAKALdLFUdvERLLDKsxso\nPRC6J4bQ9i3mBk0ENDsnv1V4H7fnz6jMYg+DFQwCxRyBUN8OVxu40cw2vSAj\nmdeGTxn8Bpl51lU+JDyqLWKc7BG2H/1L+i8OT0fk3Yvgxo6pwLDNxBw8IheN\nd6BOtJlIwsJqNDDiypzQg7UTtTIzXp0YTl1gpDQZ4Gn+TFBUz9zqLU95U9nc\nlc6AHayqSMJINzJh/kfVN9sNE9IN7Pl2jXkUbK7+EQsTJU+fLU179hLATngZ\ngdEdIyFjWcB4bzSryk7/QCtf5wl7OIcDDiIwirAfq8hs/kD1nTo/go3FCG7W\nFsnV4g7j62tXI3vkaILyp9NIYe8tNgTFd5ryLdfmVBmXa8n6CS+3V5UpXPTg\n0Khrmf+vhZ5iT9RXO6uejHJPp7ruZasgQcelIH0NqTs5YAJFJvkuXmYXMe6l\nxxp27j0MQKQvJRr+kf/PENPn+Y2FhwE24wV2+aO/rk9GChn/8skd9NVUArFw\nAApiYzBgMu00S9oWkt9ZRUlxLc3sS1LVvz+fSb6949kdcAd6H9qWe3pqipES\n7NilcIt7DB/KnBivTXUf/2r08VGsWxHnzBdmfOv3J+nVubtObNhAiDXwx5SZ\n7MAD8q29szoDv2vqRBNTBaaWF3LVajfB6m0VmNiGEIkAQ68PDX5J5ehy1RkK\nIkNh\r\n=HqIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/density":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/touch-target":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.9f718da94.0_1607444001168_0.8621514620287338","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/radio","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1690290d34c0fea591a31aa37f227bac82976af4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.1fccb1418.0.tgz","fileCount":42,"integrity":"sha512-gBN/SU4+JgaStSiOIRo1YCjONUdBSKX2xIg63C6zY4lAvVqJFSUsWLCtEGiF7fBnTdTMFGfI5v50s+h1TphZKw==","signatures":[{"sig":"MEUCIBvAUTQI1Hpj8EG6Mu/ZIBTs3lwsyMwtKyfEcEKg3ACpAiEA56KP8zEoJTQY7hSwV6Fz9GEfqbgEid6ShSTVNuHpW30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mnCRA9TVsSAnZWagAAUY4P/i7MYS1IC/KEPyg9XYbE\ns1hUGzGWnIEDspJ4UmANNAkoN/ezWRIHspKLGaB3wTg2/RdV8cDuNJNjNDOa\nNQHQuezH3p83VDWiEHxB18xQvEFwjIkNQlac94kaYk60NQVr0TOgbiETcvWm\nCQmAsPN8tfQb+wwDYh84VWTn5VUD5o4Ba6txtqO2BJCnziRzE8KGwjHsTSxC\noafSUe4Vt4OmPNDlD97QqirZWkpJ0be6DemhHXe/zwAv51u4soOtaYeugBhJ\nW15MgRNTriIprRfmNmaf8CUpfiL+PEY5qpI8vVHxC8aeO0JlHPgNgXhOKuuf\ntNJRL/CzU/P19Vc1VUOuiD8FT7cAskDblQk3YqccU/+ZsB72WmfDyYrni5Vg\nDxe0OIx5pqAcJs3xbGq+vAPwMTsgcggOlgHKKsJviPLIRC5Si6Zas4BbBAJn\nLZaP9Oo3RzJvMVHzBpSL7mqQSBUVajgdaLPK5fQI57EcOfYmjppBMm18QfzP\n/V/dQftZvuA5XVOqzUK8d/AxbnWIb8Zakn4UqWEb/zfjHX4XfHpfEdl+F2qO\njEPYgOkDVSjcLaUiihlg1WUDqQc42t1/ZFcYz1oqHMOZrJ52DkR9OmA5eYMX\ntP3D862lD2K07zlfeMuOu5gHUXry7c8CumdvzBooKv7AwyYDYa8M200xLFdj\njAlG\r\n=fO2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/density":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/touch-target":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.1fccb1418.0_1607444903222_0.10515978341160404","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/radio","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a37711e7421509e70d841cd8ba8b21401dfd015","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.afb68894e.0.tgz","fileCount":42,"integrity":"sha512-MjZw+taxtHx+gId3KyxIBPcPpjcPLYHIJbr/kMfhhNp3jfSYRpsykYDXgoKwkYckFU8+NgD7qyBje7ULZgwvGA==","signatures":[{"sig":"MEUCIQCiALL8zMWGWTvtGMpvE3pSq9SYF2GPt1mO6IWGfBkBbgIgJNFx6A0QiDYmi6xt+qwKSEnIUVCS2x9tzOMTpZcFlqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qWCRA9TVsSAnZWagAAynIQAJT/uuP08IqNdTZK0MIQ\nrhUlF8FvrrFxq3HuxjOpyHH/u1fhLdPyDjmPY8KPZFcz8YQR/YZnuPen5ulT\nrgH90aC6NdjMB7pS4k2jibVoMfKDK+g5ZQI4S5whgnaoZQl6MiwTiV2Y/+C6\n+UVap15hG0Jp59/jiQzRjXFQ3tHi2MDTJzbinwsQmAythuuiVb8KvvVZjbLG\nq2UhaHcH2QTYhxAT4PWuTZR6wPyvmviDST8JC/V1czPRRJWRSefhg0aRdkPK\nMJPcDogD8/B6xLB/RAsWWJIPNLdXTnhydOUGI1CHk7tF0Jf/DIZ2h4T31DhV\nampHJFNyzb7xlKBrdNdjpTcPBs+NOIhYETMrqAt8DvwGZ8imVFK1zJ8SVbTD\nf7+CmZRyBI+vqQ8o1E4uuNN8I7cVxWzC/OH4kCBWFOlqmjXVaIe/Z6vqiovg\nY7ZERLauo9D/6ZGcvc1i/Krq8UQUXfaIYgez3g+hk0QC8fTwg2rLKCu/elm+\nbKViQRiAhQo0F6GWDavi2WmD8bxsINu3SWT9pJkMIH97xvkmoYbSaiL3xzAv\ng17gRR1ALcGWtqVEjoxb6kI0KD/CgSFLkPlTBdymdk0tbHtLOCDJfg3Nxyfg\nWk/qfP1Ufbfb7LKRq25DJeR2nYNH6LYXJA4QqwHrvBZFSckd/c/9jRWlw0hf\nxyb0\r\n=MPa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/density":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/touch-target":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.afb68894e.0_1607445141859_0.3575367349427665","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/radio","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39dac400a0628e6636e54c0db0cab39bb010ba92","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.fd88d40c2.0.tgz","fileCount":42,"integrity":"sha512-X0UkPKmzo+1vQS/kqRi6KO4X/d28RdmgK1hRpP/sHUoMOhcow/5OX9xC2l8hEW1pn5NS9FwOQAAH66qjlFRUpA==","signatures":[{"sig":"MEUCIQCviwg+v2uzQO1zFYKh866g8bEBFiZBfdxS/6KYiZmYWwIgFzKHbQePlYRkC1uwHTy1Y8xMn/I9E+JIRfPw4TPLXos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62uCRA9TVsSAnZWagAA/jUQAI1bB2o6O3b9sEy62k5r\nLmgfZJ4H6DaWHfdUl0Lb+AGwXtNMpuxzDDBA0KcXdB8DoXDIR+bqclxRJ4zF\n6+Csk4q5fs4Z59bZx+E/iO1a1RHSCKiRWGwt57OJmHIsACl5NrNL/0dAV3T/\nHfIUV57FFqO+mkK+Z5PFLiTrd4+x4ouAuQJQYcE9T3E/60TyfY+zaK8qT0C1\nDpU8CjgTOqAGwqEX5YlGbRnztG8KD0z8xhdSQVv3EnlTD5Kj9iPjsIxLAvwJ\neKsVQQHjEJyMLf688Qs5dZdeGLka2CnynkmmE0wk4uRRW2mosyjsl3GcK+lE\n65wWKn8inJvEqF4QKVQGWuMehLDIXsUGeIhgmZLjDG3+vGhE5AExB99RRPnY\nEgHU/NgCz0efx71gKUC5BhtDDqKqKXkJwgbkWvkE6VHu7B7RotGptPJL+Zms\nlUsjiXz0KY439kJGfG7jaD+48F3KvAm5i1FJPVQ0YfmzQ76UkxCl2/lJhdJz\n94vbuxDE9tZr+O2eZVknzabKhP5hqAwaD7O/lZB2V8ZkwwstkzhKG3IQ2zsg\nF9mpZMktshtKIuvDVC+FAlra3YGz4VNk8lM6F1c4cZDiuz1nT/ORzii6wOZ8\n4FwsA7wAsI+A4HpTjbk3N2byyo0Wy6Vpytp47MOzcrCPNqfA9KGTqPaUoCRz\nkJpQ\r\n=mPtr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/density":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/touch-target":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.fd88d40c2.0_1607445933643_0.8937114216589848","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/radio","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b69a648fc59683fe6d1e6cbb99bb92e85f8e0a86","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.ba9e3109c.0.tgz","fileCount":42,"integrity":"sha512-UJVIWnZrigb4h8ZQaR7jLZMtldWNMx2WoK0JWXV1Fm8xJVC/9m0AvKOiC8bPHPnLOWb3Hftx6GTfSfE96R4AQw==","signatures":[{"sig":"MEYCIQDiUk4njJeGcEr+8gMYenwZoOIqBDDKHVEjRqJioJThyQIhANFhesoHoRUM8/scUTc3YhmjbKZkegeY8BqpV6j+iTw/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85zCRA9TVsSAnZWagAAhMQP/iJJJPj/qCwDOqwyhciq\naTZVKeUaGvzqiO57sTDFT2ypr7xC1DOkpjKQYy6nf+Nt0mpbM7dp3QR/Fa18\ngp8A9w54SiD+hhzrEX6Avn0v3sQx+Whv9nbrwkqiyGuTF462pRIvirtDyOHH\nik7SDaVOeX20fb5j+AHnKjoulzN1ukwEY1qfyvliJoC4ofEUau4w3uuCODy5\nN2KhmvDXN4fRcxK1UagUEaLMHEBkWWYu6OHL6/ZfAFDOqPUr8M8RLg87n1tN\niXn/VJZitHEFkgWdrhbA5mu3RRpcrtRUiI5KS7QhtOv2rbhiSH3naSXq14bH\ny1cBuddQRH1ownae9owNNpa8SwKA9VUnhDzkGt0khPNlbOSIP3t/Ck9HADsM\nhxofFcMRfl5OQbL6RlNH7uq7VPvKo7gKCITMgk1lho3Ihr+XUbQoW36ajsZM\nTnVtNRXAT6USmQ820BL5YT5B+vFnlXF2rVP5imfSUzmNi3oep7nWO3iriyWi\n/rF7uoUQpN6iNJ+VEgZ/nEbcdE3EJbTUCE0TuCYTRCPGfmdR79fTGCeG5qIH\nybtjfbYSbT839cBjq3k5ZjViXgTEZoZmOPe1itbLfvB63d9QrFQ02jAxaANq\niq97zIrBha12dC1Vu2tMP92iGOXRJLVfX1U1SL5yKJu43l7vBWyAclCpgGqU\n4ZtT\r\n=IWEB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/density":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/touch-target":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.ba9e3109c.0_1607454322885_0.5333098317716514","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/radio","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363320ade4a0cbd68f85d79dd591c693e6dd9095","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.1085c3b2d.0.tgz","fileCount":42,"integrity":"sha512-X4U71oQRosWZPdl0Y2FgBzcxmOYuglbs3YUnNTu+wIGTvTmuEuAU9YqUKnO5L6tvcSmJdImXux/FnqGNIEtBKw==","signatures":[{"sig":"MEUCIDLAjS1LtHYsuSn1LW3zRdM81lsUVDIieLIU0pHWDJR3AiEAvfhpVwIPuOMH0rfVTx1itU+lMMXfGm/Ba+Dlyp4p7Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SE+CRA9TVsSAnZWagAAd5cQAIEdofNqadgpx0jsPA7c\nG78scB4w6qFWWjoGbxVQuba7PWigpJH+/T7xwmek7SjbO/XeNHSEA0SxuTSe\n3SAeZc+n9GlIN0AIT0THs2yT+ftVRUmpfNB8VeRNGgjVJAFDR+q9KXkwolZI\nV/TdswmAxE7MRIHje9nWdWgKkNzThukNThbhEESSY7vedKGAvgFdKQPy0RSo\nCdrq/kYb0s1HRSTX8yaTR5ThYMnNOTuhxXx+vczHNmctD43jCCM6XvMhWwKy\nlwb+ZAG1nHjfWbLcp75LZmNZD6+i/pqEp7wskILUqoeW2fwpbXk5t+GxNux6\n06u+qdZTZsgY+BHyadDKza21GXABlpnSkmGnpRh+wiM26a3oF4LknIJZw8tp\n5aDm7VfHjiSEW4dWOR0L77+zzNKgz5d0yJ/y57oidkcc+g2JqawRhDSJs1lf\nbGGgFUD/fYoR7esO1TOlw9mG4sxf3QQkJjvPsUoVc3HmTYJZrnnqmFK5y4Hg\nPGgxKhwVXoopWLkYGNGgspRbl3rT/xZc78gVunYjflNzASBRHg6dbVeV8M4t\nhFw5HmHC9Jjslq7+RnhG0dW/UIDnmWqQ4M2b0DuM7paeO1/BJSVbfHJbzbUD\nr8qiL/o2AIKDiLHqy+WQM384Mu/fKBjVpCep3jaIjOEIPSMPKvt3t9RU78hp\nDBcC\r\n=jS4n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/density":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/touch-target":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.1085c3b2d.0_1607541053645_0.4787109158575693","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/radio","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2009f010ab97a593830ffaefdbd72c2e3b934c0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.c5dda809d.0.tgz","fileCount":42,"integrity":"sha512-PMKH5dZOLcjTdTymiJkUDN39D/rjEtBy2+n7inbalD6RJ/zsJgHHjgfxxzXHJtS7OeUQzXao8IGHFaTNqPhLiQ==","signatures":[{"sig":"MEUCIDl+JiAoOtvx4e3ua2HM7k+DFp+9pCXfXivz0e5SYAG2AiEA8+Sssdh7IaUus0klGnt5/HdFWQEWi8fdgBzVXSKoe7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThoCRA9TVsSAnZWagAA6UoQAKPshPtTreZAvZgbUMpq\nha7QeIwmdA1huujptxCy3Bavfn2hXAkT6Ng9M3XbT6gUIqDOyordUfliBmJP\nhT3skhc8IJQXBDRfTsYMaNj29wYZNIPyeJjPImovWrhg/4J95UZI+mLrNEnj\n3lVC0vbbDwXiZOTzrFZtqVrXc0jHlLTQY9c37XBX/joliKezwQmZieqHE5Te\ndqbi/MJZUwvsxp0vdIVbIuUkhcyFjW1gysXVsC+YySwXK3a3NM4GB5fYcsad\nbVUztIAKjr2VdEIjASlGypt8oA3VHoPmSTJgdTZDHI4EnNEgajxETluQAEgi\ngPfjLqM4nF2giVvoCWLg8wCalCSlyYBdBi3VBIIXMxX6hzOxmpLKRhc5WErA\ngwnHzwngY52vDrshekHezXaHRLc7UDBaO2RilMyGAdr+jRYze7/xZscogE2F\ntfM9N0AYvCQunhud7ej7UP5aDpAGIGnEg6LrcvZlXLe5td3jXbYi1NuCZRf5\nOlLFVRWqFOOk8MG0FFaY5Owy+qgEoEocqgaXEs8bDVEKYWNGW3g2njp3KJCY\noVU4Dh4QZkAT1QP2Q/KnrlN2aPFMDJg5CKikKpAAJeRM8a8+EaQoEeClCBhY\ndXg7bMOriMfQ+AOXKWNmvTmpufjMVcMmgmvqKKxNOvWT2eUaYAu+02VI0FyO\nfv95\r\n=s15N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/density":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/touch-target":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.c5dda809d.0_1607546983755_0.916199398675819","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/radio","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6815292cd95bbf71a3c00972a2196460eceb721b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":42,"integrity":"sha512-XFpiWTgCGSytdr33YGnqczCe5VkXMBIYKJ9gkdJzuxa3Gpxzvqh8/6duJ2BCHEPsS8Y9fvicLuuZRnRw3fKHCg==","signatures":[{"sig":"MEUCIQCzfrIfNvyXm+d+GqFXWwe9jn2bsFkze6geXj1zKlF2sAIgBCvlQ2JVyI+16bHh1TrHHvJ77lhfWOr5fvTt7OLEUYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzMCRA9TVsSAnZWagAAEMsP+gNYup3Z2WkX9xaj+lVo\n1owFcBmiUePSUSSI/hKzK6S9xV8xCP2kJR7+LUvXU5qKXCVfuFayY8bJ0pEH\nEl07c+BYDZowrxYBclhn9hZ8GXyCPEY5z99bUKLKDU7xG9+p+podkR4Gx5dX\npt+vRzBXBJDgNL02xC31Z1ffAaQq/fTxSVFPAhCmhbqh6vwGQ3QLN5aOU4O0\nOCcAF1ZOk64ldmKCY4Xuj5xA6x1jcogEnctetSrsrUSWBsydSCX1BLBrAKpH\nNiyby0ZKW0j1PDeJB5iXBoKwcGnWH0qWaoW0x9gRxpxxkQO3qOdmBDXytkEv\ntmHtPpI+C48eslyN+bD3LXAZhdc8T3cj1Vm3UciHKvpzoopP5NNaBCZIPnCA\nk3FBopG0k08qYugLDloRN4S7HSaWNctnrlXQ56azrmsOYTALNlTQtdNXFmmx\nNfX0nhkn4GEFpzHhXSL95Y2/s3RS4WmF2R72pVJzpWkk+8VQtGXdJEmpkk68\nujIeLNCcNVfddyyF7f3SYrwzg+5oB+sUJ1p/5hGfeovEQXbIY/zEM9XteBUg\njz2vmUgPSxYPMCstzt3FzX5mNDBzojHEVF8DucYEndcFAM8hzcvoGx+y78/I\nY5M3uPHyL5j4uknZZZrEktbM2/sTyHzxu8ThnqtGDrEQgNO1xfiJ7LrTaC91\nbuzl\r\n=Hc4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio\";\n@use \"@material/form-field\";\n\n@include radio.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/density":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/touch-target":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.f5f1bd86a.0_1607548107923_0.4105173706007963","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/radio","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"216274ebf65f2016558ca613265f2e2fb3923eaf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.00f38200f.0.tgz","fileCount":42,"integrity":"sha512-bnDN+JoKm39cRhAF4vCV6xRIFGBYijCNSuc6rRsUKNMtEbSS8Adte49xn68ejlog2vZwkN//uClyzuXx2nqNEw==","signatures":[{"sig":"MEYCIQCK2ZZtpWJ0Scsl9MQKnUeKPztz++Zxab428fKokmvZMAIhAIipnlIOgggr5pWyVtpo5CkLR0hSRVpCupPvwSgQLTRt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05PmCRA9TVsSAnZWagAA9oEP/3S6VRIQ9VFn+upT0xIc\nGLHk7HKJT7PbnlugAbXjAwoJju90iwwcIKVN74IQQM/gAU+tBi69EKezNsp4\ntrATsML+10y8JwrHs+gZFUdVYSR5l7ouveA2o8GVCt55FgkxUBWKwSPgyo1M\nIGve/jbxg27ZEmYQlmdjZWLOpJzTxMkxWGfobsbzAvyj/5XGU8HKvIb58gHV\nDavbqXjbJpWFyRiUijdj++JqKMgJsJepzwtf3sCTUA/JYFrwcyZ5yDGrgkfI\nblo0vkOUkApbdquuKOcwBUU5xCAlvIllBlOwyMAuczVrPh7uAGMk0ANhzjMQ\n+5tQiLnPMy3GtYUE2jAouHGcZ7B+patLvfx7zkVvNrJf/rdFPMTz6SJgK8np\nH2ytmixP7BwzMiZ9QIQNx3HoctDHAJwsw0rikLatdnbT5DRQP19v/fC71X4h\nVza4RxGaehGI/J0LDmRdmdM2kEhohmmpsf5x0chScnjSQFJHwWzAjk9uIr22\njaIP+XgvCKCzxXcujIcNcmZPEMwNejrAhUjE8oIUOPopJxWozRDWBgtY31LR\nhtV+lbDaIpwlfLtwPlpx4qFlzetCWfCcj22EzqQP+Sn57CHBHlm+PR4ORvZj\nLzyIQrVRocuua3x6oDMWPzYY4HDOZPB/hGIzYoBnBsZBy0IJbg6QXFS5SG5q\nGDgT\r\n=GFgO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/density":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/touch-target":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.00f38200f.0_1607701477578_0.09001869728275058","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/radio","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1d7ab8ce97a1a642c97b888e095034b5a6f1c9b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.ac41a5729.0.tgz","fileCount":42,"integrity":"sha512-yVJKzbwMKgFlc1pCnXbXI8tBlBJt4niAfuG/P4HlV4xLzSgvCn3wwo/VChmx/ksPAHxNV6rJGnmB4p5qxzC1kA==","signatures":[{"sig":"MEYCIQDFQjEwKjEpFerKy+omI+ohaVtKzVUNRIxdrmYc69A2xgIhAPZq3/aGbSyjB5Zxup4JCzgVt6dCzmqv+aTvxCeDDR49","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054WCRA9TVsSAnZWagAA0+QP/2v6309PQ4hZ1yTQUOMz\nkG4LREA6UHFuIANPXRQFaHoi7sJI/lIMP242wEGZVYOMhHCeVUrfqEcogncX\nKncsFJLQdDMB7yaJdz/C8CSJHFHPTuVfY1jsWWasyZWOHSCQgraVfo7n57Ma\n7gMWwUdnXjJeIJNEc3u6tFNmaSQ/Z6wrC5iFJ2f1w9TLFfzVoJEX1YZYzhar\n02e6yZsKvklO08mucdw5pNQ2xa0c0161IXX5aMK3NvivbklNycrGpP6fDQL5\nrwqjXUX3Q/7lNRcnjj8bt071Foe6/0ri5eko4c2UdMsGrh5MRXnmLKxYN3PQ\nUBnbDwsVdQs31tmknI3UIdc6LJ75Ins9RZ6/I+cCosjrkYSks8LdAIJwnNnQ\nbX2t49a4dFPI2KpYYtSp7BqId9LnSrxjZdSCIc9U2XRxAwz3sxp7SXRJhxpf\nfdeLnMDsfe15PTE0cYfigVPWOWHLwbdsNucxvkCCfcnL9xZr49tQg89+kzGp\n89gkV+Nr4oyy3L+WvvfneoKOtF7mFVdbuZ5X/eknj/QjVEg4fyYAKhJ9cm5/\nYjhn0+lD5Xff2dTk/vAtxLUn50sXASbrnaJxnMwXXWqTGktJ/iWQsYiUbsgO\nlLK8Kgn6u3uLPu++zEv//2RouW9eYD1dFAHVvl3wKdD9lyfsGu5X78SVxWZG\nOlLE\r\n=QVNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/density":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/touch-target":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.ac41a5729.0_1607704085510_0.12539512090532456","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/radio","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee622a7a89ff8abfe0f44d7bd070c3a1953fed9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":42,"integrity":"sha512-0l4W6gyJXJzOtqHoBUd3hSj+zqqY+AwvU1ucmFIXYj8lzdppzdjAFID63cW/AaL+QidgErpdLzC9qGUVecDkEg==","signatures":[{"sig":"MEQCIDsYLyKZq+Z5H2DUHJreDNfMG2+y+yc6oLqIUhNqBszPAiBrnIjyODDgChDRP4Zi94aohPGDpqdc9EH23SmLtWV/EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bPCRA9TVsSAnZWagAAPvgP/0YPMKrOPND72YA+sgL6\nTPEaaIjqmBP4W6f3aCv7/+Q08qeuvbWhM+54ubleFN2yuD9f/BClSLdc6gbm\nYfNtE6cftwhVtvMN96buVCBwWre8yvPAcKCTKyd++221OmWRun7gDBwk1sNJ\nhf+jFAQYjG37GA87n9vNu4/JV/JNINAncSnbhYgOQVvPycEATQeO4RPqckph\nMqKVEOBofxSSO5aWit1RAtYLhkKB6kT+nqSdWNd2O1rSldZtYuhFmzl0E8mA\nNso1Bfs+ZQkIrfWvf5c/91Zn+6DSm5F8ioIsrMGTQrr9E2c7/ROD4KouIghK\nWynanKd/hD5aAqXc/Bp/Y395cbdG0CrkQWP6bWWLekGPFLrhOVXgcx2i+G5Z\n8vH4yIz74GwH4dqRwPAgkfTMT+qds+t4G7H3CHnG5nD68bH/bbRT1ltfT+ZZ\ntf/tezpgpaR7ooNGw7NsYghd/6ftf3zyNa2hwSKmrouWt4o1qldpiSDgpneV\niNLBVXTlfd2bchNKssI8mvD7bd//8jxvfrlNn+UEP2jNz5cWIVbZgdtf4Qor\nYYnUu66CDNFYnJCxnl1mGlfo6kEpkm1qb6XN6DYKCc6pWJ6WjFQJVZVwmZce\npj4yJtI0onDrfZhmLNHDeVocRUP7WkQN+Ur+eDNBk53k1biGvki6yBnOY22U\nlkmb\r\n=SkwU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/density":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/touch-target":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.7fe0e4f05.0_1607706318547_0.5684449988413796","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/radio","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62d882e829844d7ee68073212b15be7fd6de8b10","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.9244508bd.0.tgz","fileCount":42,"integrity":"sha512-R2EWX0FHIiCDgie22p4MvJNg0Y1juerGqKervlAgTZDWU3zqWz1EPgoujY1o1Dm7hgHjjRK1IAUKnxm/rInD1Q==","signatures":[{"sig":"MEUCIQD7r7WPxn5O9dB55Uq2+0tVdWjDoujUxcID/cNd92LX/QIgHhMuE8h2Lb+eG5WH/5n+X9YmtcEc3AJJ91GeSsbHwm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NoCRA9TVsSAnZWagAAl/4P/iktbGnZRgy3S1HqTlJq\nh/s/pfYOD0YmhnF6gwbWj0i/FDX0QV9Q6PGs2z2yReXGT8Jpj9W22KAK9g4H\nVtGQ3FHoN7wrod+c9x+m9IdcI4c9gtBUhrHi8cMlDOA5PWVDS564G+qXYRF/\nLMxgLsDDR3pNLZVtZrgMjyU04aS+aacOwTqfbKO7PA5sY90JZhpGEjIpcqcs\nS/TwQKZI06GFqjYzfGhN9iLF/fmySlUDoAAphfX1kLEasLahEMqsd4dnPcJs\nV9TuHwim2KZ7gV747fMPe3/BcJ95MCk/C63HN78P+1zWRNf4yneiEwwTSza1\ngX3ethTDqusTNy5wWsr74oP2rYsVJTLCnEWTqa5ZXunlxXv0iwfXceE7xW/H\n42cTCbcykswaF9CX8E2yODJzuEdp1RcKfwLNxF6lgeLaZDByXI95sqFWTxNT\nsJV5/S12qwXdPQOn+0hrq6GWQQu2qXQVeDdjsprGhx3pwO1qnhFrVZQTdxSy\n73DK5QLqbZ58vRMQW9VRHFd9iisTb75TXciqBsUDJn58ecjnCxok/LklkGgv\nPlbP0GhDFvI4le5VWnUNjueCSMEtJfLp4ipLovmN7Q5pd32UHYrRt+e5rucq\nh9M8Y7OT2H+t2QmwfgZSFCeLZhpf0IpVqymKvzWd5qxLt8SdJTVdimCV36yh\nZcLG\r\n=iGni\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/density":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/touch-target":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.9244508bd.0_1607713640519_0.8846666061699004","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/radio","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb0fe375b0480f7d569c8ded2d0bde3c2fdc2edb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.384a8eeb1.0.tgz","fileCount":42,"integrity":"sha512-+KspvBB/QNVmTgmSddb+Gd5fG8rfqld0qKPNioh1Ds4y8yeqHl+xg4mKtVyCSe8kom/IZduPny4CYEJk/KztSA==","signatures":[{"sig":"MEUCIQCPaqFrbeSRv2kjXaj1EPVnw3c2y3YiAe5pTzjqTxdNUAIgc51Nii2swpWd9avwZDFmkUn7/clefzdmm6mCAxkwrjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2DCRA9TVsSAnZWagAAc6IP/j2AvHUDL6KoEocEvRrj\nwpfpGj1kcVNoEyXuJ08q9f5tOAHTOWOQ1asWKzXSbCow7hpmWsLLlfHsw0mt\nvNejq/KKWywaoCB7cV5X/Jo3q4CMHNxXAG/m7zSzEVB5I09zmcE1oH7Oi6nX\nTfuTxWBa7Q5DNy244nQ7t2Wh265/REVzS3s0VQQZTAFb48j8iav8iCfaLbP9\n9yAn0qLyYTDbzCrpWbe1LVuLwepnC4U7T0PcSDXgEbmqxX3TpGBQ7BnIl62H\nW6qc9yd/IjWj84Qba295YqrXx9TTBZzA6wJmtNbuFv1pe/ixgY0bY5Q7p2YW\nLlEYgDBRPyOLPAHpPsG33uNHGR7Vn7SKtLltNnbdQLbu70DBwg/5gEH9O5N1\nWYaAo1q8p83dpuY6x49jIh7K+um6yzFwGF01xHJi+yyBZOwYJMfvvM7IJp6x\n6Z+xvWZZszWdyO+FYA6QvldeEqCtF/WmNHR2pal0oDnQHdSZ3IZc/4zYUCoB\nhkXOAMMd5NeZPYNv5BTfFG2MG2YpsiHnPDdM6s9H23Y9C6xw6p01V0XAFTdP\nIotaKaKwTKA343DrqN4y3My+8NCfbJCYyZOcc6g9fneuXjXKrEmgX0Zmcled\n8loW/TBDwBgwo86nb3gQR0MC7a2+C9+kzcX4XJ8/DFSibcr5fo3fGzFD2Wnz\nXyh9\r\n=TXTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/density":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/touch-target":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.384a8eeb1.0_1608138115028_0.13957111813024148","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/radio","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6235555b254eacd0e423c3a20bae87f28a37c10f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":42,"integrity":"sha512-iRUxre4qurqFG2TEWQ0SxO6vxL8tdr0nOOfIYJzd9vIuMj8aGNJQKzZx0tPUe1w0KB4/5XDsgoYaNmKTSlZvGQ==","signatures":[{"sig":"MEUCIQDMWQOWaLE0V6NTi+ynlf7C0Rfgnsly6lodW2M+bKLP/AIgWoFZ8ogoQ8rZw+uknIhRTLDcSxm81y982os5DcvZfho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGSCRA9TVsSAnZWagAAhzkP/1ZUudDFTcTvdwKR+KtL\n3/Nasxy5nMfGjjrFi9P8LOZG3BetVDLfJXP84Ydn1N8pC4TcjLDQZldJx7O3\nRTasrnq0c/u5IpVHJ0a2RgPKwHlcugPpyjbEdCXvJf+Wy0Pfb8aRVtJxqKQV\nzELArpAhM2Y9F1W+nXvpvn2c8lgjGTPnxgfBHN6tFLCHNgj0wqVR2jZGSwYb\nwpaZLh73EPlGuG2jw01qg+oquKBafdyz52gNRLE1ZViC04jIBDVIgyoovu/N\nfbpwvHAARoiVeP9RPQ1vyGygAk57mzMLaKEXfB/CZOLoYNSKhUxEjtInEh5Y\nTCCqN2AoTSDru48NYxLqA57VCbmp40O4SW6WJ1KEU504//5owrmjT5Rsb4mj\np9cagzCJtB1qq+tCupCXWql/IUgM0P8vIGS8R7eUFixALkziEgiyuHBt3X5v\n+/kSgCrwkUz9Ya7kcm8Z6kLEZNl07vu9kOQ86Kpqb+nMmRfIOMqCHDfDsm4X\nR02NkuKa9eX47PKVv7plSw1qH1oCcNvMepRurRES6niPIx/VXx/r1oGDrfth\nODqG+V4QI95T368EL4YKFKb3GbKIDoR3VZYRVMtPsvSDuWe18JWNpHIVJypu\nKe+Qs17bSIx6almtJGoXb43QqhBkwtj+UHLTVma2NxNPXuw3vezYx8rv8AdN\n5fzJ\r\n=woUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/density":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/touch-target":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.eabf9d5c2.0_1608143249938_0.8692291068038496","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/radio","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"236f7b5029b0b3aa4e9ccbabad97ce20d2a9a5e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.30fdfd06e.0.tgz","fileCount":42,"integrity":"sha512-kNp+BwdOZJjqLuxKzcwdCY67Z+dFnw89jY1vCDwc14SuKkSVPOle6V1keDnL7NZ1oMXO0QNmBOlv674kvwjC4g==","signatures":[{"sig":"MEUCIDBU6NgdSAIc3G1Czsx2RzIpdjYNBnu2D0UutRdg7ROtAiEAr5uyWxmVVbVuBd8A20Y1cMuU2UG/2M7L/8FtROvWb8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lr1CRA9TVsSAnZWagAAnHYQAInPAO5xTNKHgj6YUb4M\nlfpEzc2Y3z4j8VYJbSliHDUzGYgpWp+qfQQN39hdlff0zH0+W2+5TBSPZceJ\nYngLxOnmINkQauXe2xRIlqyrmQCOHx8vCe8oxWLYFX9Ht378rHISF6f9fsvY\nUugrraNGhDnvNzPjK1ynPNeQ+8nAyQFnZDNiExwyOgyIUAKn3AvCp1x0aO2H\nhFm6U7WoCms1/Zrp31uXtUssJ9GsyQDbkzpHI9ZnbCjj2AoHD5orD77SLcrG\nGk101DBgZfQLdG7QmWo9F0JsxiocQCHF/x2ZVuLdwfXixqp9wXoLSV05xs4n\ni1MVbtgIqP/MIxxE2sXA7rWtGtm/wWR5xC68dKor8OhzZewRCswXpr4KKmQ+\ng5cZMRXfDxSUlGhGxpmvLuM0XK3/lSOVgtdjPngYsWni8cIBf2bWQ1/GJtwa\nLSONK89sfFZhwBhXFwJPdgtohKAyBnKmCpLWJNrydMElHWuYgxNLd9Qdf/VQ\nhEUJGNj3bZU04FjNH4mh2vdjp1oeOeb303FmZsl79Y44JqvcZz0dP4LsXmoI\n+TSgRXw9SGvdqGMTud3uoYq1NW30V9d7RVDsCgdeE2loMFHqKNX4UD5zyqFa\nfPkdHseVENHLIEIjyKp2HbV+Tyj7KC6icwRuMZJMx0BXfFiAM9hQB5VDWRYZ\ntPWa\r\n=yWVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/density":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/touch-target":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.30fdfd06e.0_1608145652561_0.7043061830373671","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/radio","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96d7ec2ac657717e980f9768c032f04c406eb7d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.9590a8f90.0.tgz","fileCount":42,"integrity":"sha512-uC5F8rMYSeYTKyYnPKAsGBpG1Qa23KPyZKcpeCTpbuNb37qeVoDU65jttQWoqKzrforcy7gMPr4Na6PToRQQdw==","signatures":[{"sig":"MEUCIF/0ejphkt09+oCICYinvcNg/R0UGIFsCeDP2HhhqfffAiEA1j/CfEFzEhkunFOTvly1ZPFQTdeDqtMRFv3SU88bcJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/iCRA9TVsSAnZWagAAEQkP/RXhd/dy28/oAvq5K23F\njUkyHs0G9bqg/jOYy0Ofhnm5ecRTWXB7TCln6p+7aBO6D5kdmOiDC3Sx8EMS\nN4Ee6DCRj9EFOummIeCARbFNxU6DcIuhEHUx8aIn52fADPjpaOVzIeL/yef4\nj6XN6oJraMXBY4sRx4uHmTWTrfXaIsPyUHGIKx7XBnJa7GAL18S1Q7OAoIeY\nXUE1b/4q850szGf3N9Non37osJFQRZCE7Py7HDtSMRLXkieJ5ads5MFcMS4i\nKCk7TvUSMthLyK3K9EQE9gx6wz/dNVQZYqxDIBs/iKSd/ofzVfCiUJpyYLv6\nkeWIx7xD2Rj3azvww9YWNMLPBPe6glSnUMfI7i5iCa7hNHFeCLQTAKabX6ej\nRn34NCj7e7EWn3OyG6ecJGMxhNxm0khveJO8P8TAV7rKecM8BqCvErqYRd1S\nhfKV+yjjoMmLxb/PXEacS3QnPFaJQFcGjhFO+ss0bEdOmKF2xm3iPFXWdXvB\nAMwBiepXi4uSDdDZ3C5lqhIRch0YHz7EU1AXE2z6xI8bNZh8UO/9fCGUocma\njyfl8VTJKWj/nxAj7EcS+1uxbGpOWJYwhIHByQXxnjRO191PZRhbno/HrUe2\nOEFOPunyV6mZ+7uwgjwxzd4WZS7xObTRf8hnBEZX0CP30VZytaAXEl+db+kC\nWqg/\r\n=N87K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/density":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/touch-target":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.9590a8f90.0_1608658914076_0.2922798478205926","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/radio","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb0bd3df665f9c41f00e9873421a3dcd0ce858d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":42,"integrity":"sha512-I7v3XbrrcVZaJOoDlBM3zR2PK3t5T3VAVFG4dfNG8YeseCAlt9DChEY0lJ08Za58DNzKFbhNj4BOFGOb4EcSrA==","signatures":[{"sig":"MEYCIQCdD9rYiUNJYkNt004hWudYr2NNZxYbNqscEX2SPoy1+gIhAOyd7LlCQo89bvcRopJ+4QxAJiSfLvkjdOnau2T4yYhu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nugCRA9TVsSAnZWagAAiuUQAI0ptYC0vYRelsded1GR\nJj/TvOyBN1HYSV7zKmJeeGF3uVMmDgKplqFFF1F0f+8k45QGXGbGRYzM0s0r\nssq8EGglzVh03r4s+A+K5UyHPtlWoRYHIUAFbt+Bs2Y57gY4FrAsuezlsZQ8\nzHJrZQZ9dQ99kyV8YZb6XZveKVUAg8FHmpNHlzNjCMvA0RnACp4od9PvmK1v\nN0S7QklOwqdvaItJlEzfCDxi2L6NVir5JTSsWPPHgKKdyic/QDngShd3JsvU\nHT7bsCcu6HvVrZO7xtEAQm3SZvPEg6ahWUiAXjOyb6Ta+z+oebcZBQEOzCo7\nrZWoUUWmAAhiJM77in3Yyg6liEvj37UAvPR5gNLz00nybFw7MDkeIJ8Lzz5Y\novX/PZroftthzhjtbFb2KvnB6u70cd7FsuN9xBbS0k8U4bd/eGGce93MSaOa\nwhPa9ndeEkyD3NEoVOLdNlyh9uZQVGqerO4XNojFZnZxDHqAmpi33kPIe6o4\nDm589kvbGDIIEbXKvtMg6psSzI+xZ4mVm59V3OXpbJD5hMUJmfnD2vSFqPyh\nKtxKIeHEj/r05dapq/qWDyDFqZCn4wcGeX2yrnUOhMWR23qATIKaIoZiLc+K\nnOJBMzoYzhWz0o+XhyrocaVsx0B1J+GEMg44SgF82zCceK85xmfICe0zOWX4\nYLNy\r\n=HM7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/density":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/touch-target":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.f89d8b8f2.0_1608678303932_0.24998928367669637","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/radio","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e45a9e4e6f12b050845b9ae77e22e12cdc23979","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.fb194dd35.0.tgz","fileCount":42,"integrity":"sha512-eyFqMHCLWF+eVY7gU15R06N4Qe/LVxSP2Fg2rfTnQQ67zCMqJ2slDYwkAnvMk7r54rwKO/coQRFIRuHT5JaAQw==","signatures":[{"sig":"MEUCIQCyh+2L779wxNv5OeyCd8rdHs6LjOdY9KDsXd50qpI6VgIgSz7+W5Abn8OH0WZOzIv8tGGIxqRoWCayqmocveXkybo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kP2CRA9TVsSAnZWagAAZgcQAKM458gmdHMt7w3echTl\nslkj9OVdOJ3LCnWUevXEEDpe01vyk84rus+9dq+VpnHAfRNFPCTh/Yh3Rj6y\ngU8Kttc5Q7waxDWw6tb9JkjnXcsQD8i43OnZLoSWKkMNNv0pz19rn53d22NK\nPi3xyvY8iRTUjQP6Yha0BPKWnr6b1STLxFPrgHqgLorQLd/cDFdkuyLl1y2O\nhbfA0rrgurj1Dd2LwRtSNV2DCI8lf2llpVSFtqrf+J2uoJ4UBxS0gGQuZHXY\nQ4169lu9Nst6WSiJnwNuJ/IXlUs7P3gapt2qi/RLrjAgpuv0sdkOHOSeNGQf\niuX9ozJY08S3uhvtZw1euwDcr6yQyWr+xKCfDlRhnRPwaTl3YZGBnXZ5Niad\nD5smYCkoi6eOiecfQ5IlzOnuMJ4rsAX6PoX64cgrLEe8mRz+k26rzgTeUOx7\ngYw6KEbHooznR9PYSOBoApRL+yuOAxsvIRu/CP2UuMihvmQEW3wbyJ1LV5Eu\ndbEgpU47Ukusmzw7rPrqKAQgcJXdO3fnFzZ31QH3BLePAyXEpBYbPRggWFx7\nceYYeTMuLiIyRBXNavQtXhO0M8vWIdeNE4On9lk3oqgj0s+AaEpheFG8j6Pp\niw973QBzp81NEfoaJxRTef6RecpQMIaBS6yqLK1n/jDCpyqG6Gr3n8snJ/YN\nSLwA\r\n=E8y+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/density":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/touch-target":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.fb194dd35.0_1609188341768_0.3732255421484356","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/radio","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11fb1ce357e4b51bea2bc371a0697034feb694e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.64f36e287.0.tgz","fileCount":42,"integrity":"sha512-cis3AtcBU1t9pALiKthVO74zRT8Ln2jdN4d0UVUR659PRhFssKQA1xn105aNlc17v+5WuDj4IWbGSJYh3R49Gw==","signatures":[{"sig":"MEYCIQDLK458Y2lHxizkizOyfZGM8gY55MJfkVzCrAKbHEsAvgIhANrZX2oPc6GDjsaK60UeRQWIZD3CZ7gYV2vOt1PWsyDX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klQCRA9TVsSAnZWagAAKC4QAIlUA8snT5dKpmI3DiEJ\nPaXHuCloBgs5ebgvIUZTUG/sXvFtWb6+0tD+nmV5h+K76FlLsaTftqc1gzep\nx5N42zALQUI8jI+aMYJfc8GhEQ219C5Vh6hveqw+s3WTuViIn78Hhx2Uf353\nXQzmtzT/xEtCFCv4Y+xhTzQeM+3D3bHlvZtIpeYdV4nOmnFXdUs58yV8A5KH\nQRDJFEAyq7yM2zf2LAf6GUu34TPcMBergcWgAiu/n/UyBF/aMqV0TYI6kVJW\nyziHumPJjFKHWVkGdi470ND/fjIFwZt7YwuEuLjhi+0JkZ5w3j7eKlJnNMti\nNO/UI1FHD5Lpy62uisx+kiZ9c5m+NSL5Xt55b4yanH4KG8kuAFk7bv9s9BG9\nF5QI6m/OAYlSeGjNrZSStsAJsgrR7N4f3rj9ajLV7qD2zQlcQv9anM//O3RV\nOCXyS4EUBnokuCwp3NKFfuST9XFwjlSoR5J4YB58fgNcRm/miXSCwYDJtkh2\n28JV2ued0kzUR3RxPdh+acStIYobd1VQdBN8tqm6ufuLVqo8yYwAYPUEW7b0\nCFsnLBFci5gXw8iOZjjLsqNZA/n/TAn+jQYYfdM1UecWP2enn4DWr0KAQmm+\nzGRuHOZ7wVBzwxNh/NsY9tmpcgRBnGXaMAXcLTiveaGZdEiGtKCiSZyvEt5N\nR0E7\r\n=YcNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/density":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/touch-target":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.64f36e287.0_1609189711541_0.00029618737011860574","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/radio","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92601b6aa5ac5bc349164b9a13fc54328caf035e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0-canary.b7bbe7022.0.tgz","fileCount":42,"integrity":"sha512-39HbcH0UH/e7VGZdYbiYaJ5HqXRNpAtsujkKxIlaoBwCdTliR6grjNZCRiH0aALdOPLb0h/tE4q8aRQ1nI1NWg==","signatures":[{"sig":"MEUCIQDbi3e9lF45EpfO9g18vmBY8VhoP3cQxCRo72KnImXZkAIgYk2yVMMlAJQvy4SVtU+WpWTOsc0M6YkNtn8uXhhJETY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63njCRA9TVsSAnZWagAAYr4QAKBJs2q8RhZ+XNusrWv6\nodLgvEyn9s0cotjgCL1ewj90OQXtmJZ54Xxt9biq3j85x2bAqumFndyFkB2D\nPRuaDyjMPjbdq+WBYHh7nc7VrzPIj71YuuhXGGvAzdVUEdgTrDUJMN2rSC6r\nryWXu8rbRM7y4Uzsb3aXC21VP0cNTJB2iUb/4Smoq/ngmt0j8xuS5g1Yovmt\nCwybhNgyZidQFOdmRQKO6hCuT48E/e4pbHvBaGuj9M3CeMgBwTKHKv9zGErA\nUq1j3Sw/YlJlsjKs/leX81niVgKMmfmf9wi0ZbSsT10Wh2fskHirNECQTIoz\n2Fk14tWDt03aWdqxK/YRWKonvGBgc7Q5JlM7xndB9ZEjyYN8CRBFa+s4uy40\nN0ihlEzzqgLejNycp1LOEBlUfpqXL1M7HIyq564q0vQRHqu6nylZ5r35YEme\neWc6fhE+QoZK0jucVD0ptxE4c7NaMw9o3hmLgoqp0WNEzh2Jr4cE9ZVLoZAQ\n0xf3eMLtpbuRmTk/cwoMhhDumTH7Rke77vH9p4nezuZ/bdmlMX6A/sxQKD9I\nvlGzpiX8NTioEh83Mftgu1swxXqq9LQvcc4lFVUJiOJXPGdBoz2QwAzxJ1Ld\nNubiK6BVIeYsA09y1+Q7HPxaE1s4aeZBHb6kZohlL0RZPls2oY2mO/6aA9Gw\nXklj\r\n=Uyq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/density":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/touch-target":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0-canary.b7bbe7022.0_1609267683343_0.37257932436326513","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/radio","version":"9.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66c2ea24de6a81375bee3917999f3392f2ce6a69","tarball":"https://registry.npmjs.org/@material/radio/-/radio-9.0.0.tgz","fileCount":41,"integrity":"sha512-nP1Jf47Hag64qnCPFePnk4x61yhKi4mJrOCCxRqm9gMzDcod+YrXWXQQPdlkSJxIlgrKesH2so0R+fJzzXr2RA==","signatures":[{"sig":"MEUCIB7mq2BkBGtNrxZzdO2bwB2YuhLDCjxVcJsoayKQfpX2AiEAsobhaNedZeG00lMXO4Y8mIC1Z0Z3yG49ooiTYvy3WPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64d2CRA9TVsSAnZWagAAJqgP/0BmhOnlmytMrlqRUKPj\n8X81k0azAMN2PbBOkkZOW2ce6xS7i2GmlWLOiSHKyJysrNK3KLvQEJmarz3/\nzy6YgdmyCa/1I/MV1GjhlWz1pWqacVczvsrQuTUq37nIzF1XknYgYkOW9quk\n6XY0ftrRUyU9w096qkHGO27zE+oPk2ZZsQozszukiNTX2MVJ7DBBKMHcfFbe\nX0eXiXEqXz9CLtrIWFTtzjijJ2HU5nFXg8lqEre2gkhnBVm3QbMNY6WZQF2U\nNm/kf1FP0JYITQt7BSDfjr51tT0CvIs/tFlj6kbcJ9aqm0JtMe+z2H5FRl9e\n/S1DaWM0374thfKheLL+tqAJ4y1t6U68JkXM4yGzPFj7rcxIK50dPRs8OSli\nuXHVuAZHjf6zJheE+7kTV/BY4M7NRjs5EyaM87BG3ykEaaIed9zJ5WUUvJkH\nnH4foUJC8SScpad0TyowatlQfYXAnwZjbDqUWgit0DoEEVF01LdcfywaIgRc\njiXd9snvenw7iUDOFVX4VWlVlIqOCXGWsFYAZOrrWR9bLXqG53Y0zcgLcQ87\nagL26QHRJ87uoTGbXHtA+UZ+LeYApgQOdYQe5Cbfdwcu4YE7JqjlGG94HoJT\nXLH+fU+5ExzLHss11UUI2WKI5gcUBqKz2f63ncX9NF6oSRmIHrScrTpm76Cm\nq+5y\r\n=eXSb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^9.0.0","@material/animation":"^9.0.0","@material/touch-target":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_9.0.0_1609271158038_0.7094139498473941","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/radio","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a7e069a05ab85b6da14b07e9baf234377776e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.776c18681.0.tgz","fileCount":42,"integrity":"sha512-E0bNo63O/gURkWM1fCXJIebmQHm5zMk22iuT3prtIpH1C0G/WKwSu54SzJkRccR4AuKk/lEvi+3qCVLFEk7jfw==","signatures":[{"sig":"MEYCIQCkVhRNZeSjiFD3awObzYkXZmze6rb0HprjiS5j5m+4yQIhAMrkkApaJ+PUOB8Zs4ckANlan4WrB17TOgS2jVcHVmcP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xtCRA9TVsSAnZWagAABBoP/ijzZYsjPex7lwkkRxxv\nmo9r8VgGrOS+5ILE/e7VG49riax5y/k+i7UnusA4nN5gkqgaz99ZCXB840VT\nb8FvQ+8arqJruoSNUl2pV5O8InK6uz66b8em574ofzDPtfp4Foc3L5y+Ug1d\nZdZgW1fjUKQxsGvrE0BunQyQmckGj/SX+0Gtdsaf0UAaekOwBJvRru2HHgko\njDDQs58gQWvXuKOHRdfsnB/EtkOyXXujBZ4NGmLNBg0nEzdLm8859j7a6T86\n0i5795Asnboojl5Bk9xnXtbHkUvg22QkMc9l6QjbIJIcpRikGy5mnMzcPkgP\nD5AXtFylRDNQ2i5sqxsTCM8doCyGkzJkTxES0CwuHNWHoYqI5NZ7F8rorgVd\nHW/JDtanbFuxEEHCphfVt0D73oOSQSaoutlg7fDmwHX5KWEG76P8ecqrFLq3\nnC6oNIuI2ONOGz6ZaPNZpPI1T/FvZpASq+0VbkKvndKiPV+65Ysyr5zaGF0X\nndiV/pORglTvjMwjKl1IFrJmS/o4aGE2zl88QtdC6WTfB6CukZSAsH+UKkKX\n2H/FdkUvNCo1WV+7NqCooHizKdM/3CM+a9TI0uEdXDfRCTodAHi5oSfs83Fq\nr4pu4NOroOkqhrKFC3ueDWj/YQJBgUE8kwZA73e7DfQZ1KrhXFUDMON4L6kV\nhWtl\r\n=wSYA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/density":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/touch-target":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.776c18681.0_1609288812986_0.7182935463205415","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/radio","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6aeb25c1c3de47e4fda21b83c05319589cb2be50","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.671d72d95.0.tgz","fileCount":42,"integrity":"sha512-wYsF/gdt/Nwi3OV+68MdzF+jj4mRN1aSCvlKLWnPhrDGUkQbS4F5iskhbOrOPoxk7X+60mVYawR0COxHPuKMWQ==","signatures":[{"sig":"MEUCIQDfOyR7bP1NXNzZLLG3l6ceN6yZiqnsLNDteRH6WFZQLwIga8ngJwO65W/2W29crpdcZfWT9mFnuapircwJrZKEQAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8BCRA9TVsSAnZWagAAmD0QAIWZK+9xLb7OrxrWqfSN\nIyuwb7rOCSIo9Gw8q+uOmgDb9Rho1UnFI9W18T92LW+2j1UyDpL6I97x/Dqo\nJ67micqgBQujTSCVqkq7IFKCsIWuFalaqVgMnxy8W6/UvDoGMQewNUbEDWaa\nLGGEa1RBeLTE3dYJi4Twz4dS9GOK9ALZAgop/AKQrAEs/0fm2jnDj722jBig\n730FnEfJiBXcoRuuRX4ezjTSNqfb7d4Ehck2yV8KqKYeucRq1xyM+GoAVfwa\nFzv7bF6kpUQvULY11KI90CpxDx1jbTdX0s7wi02O9picj31IKhv4pcLeSMMg\nXgbZJ+FPhVFQaeTYCg85+swjMIgByn/PgtB0wV/DlGP/6WjG64Ph90Zz4OOB\nBYjciP3qKEKoQUmDLrDRu4cP0l9EJPrXxOqIxlIgxAmnkQLEBdxIlHmv9qRM\nFjQ6wR9fLo+yWtMdQUCvVB2EWXtBUVS3SzJZIoUGTqm8EMwcy97DCuwYu54N\nHEUwys3acX6RYpKpxKbi5vsfnizLztZkbyImyfWI7NzWmtl6kfFNm7WfByVw\nuxOqPxf5lSDnI2iyHzrxNq2SQ4eVsiKeopAxO7Rh1RErF4H/bpcpFpaNhZia\nzPVm52JD3grystPpSpYniRf6mJIbp5Z+8vLmCW33Gj3lKb2PavtQz4blt9Gd\nNbnU\r\n=6n5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/density":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/touch-target":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.671d72d95.0_1609359104623_0.6359551659188905","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/radio","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f70a6ed157868e43966c654fb6770f021d07807","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":42,"integrity":"sha512-wEphCyBZvGSQccBtw6oYNMqdi9wz1czezyhIRjsGk3Bnd4yv2SPcfH9YhjdnlpuRessUTyEJa8m2ImrErln1cQ==","signatures":[{"sig":"MEUCIAcncxdJTbRcsk+86v8fMgBdbQIdthHSPhdOMk+qcF6QAiEA/htUZlaXAujsGAjUtfA/g93AZnPvIB87Q8QM5ydpvq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PU3CRA9TVsSAnZWagAAjwEQAInKMHK/P1W79k6MhlqP\nNKwDRhPlD/9/dupJ5DX9lr+h4fPHuSIqqyGCwfP7FWgaCj93AjZq7Xe063B2\nNef5OeQSpy4m6NKKC/vkryANsQMbTGwfHCOwwDn/TLwIZ3zXLLzejO1BmPTn\ndnxKdHVgXtEC4wdNdQlJF0R2QEMfsl3fRkOBMudMbPFwTH/gqV1CzrZOEazr\nlS7CzT9xQgSJIu1dhaZLeRqrsdsu+jcYvsEBkQ/yYCzYXXwhHcZA4F69flAO\n4ixHZK2zNCPVPP5BlO4Qx/N4pfVu8xHgJ7T1GNnvGyX36wzw7JYiuZgsMk6Z\njsCUTitPuT0ON3LGDVVXNeEbPFDqC6kSXVYiuK392oD+nqzHgaW2XhEUiVC0\nbj+toHZrkt6okz0Zhf4j5edB78gLx2WhP23knxVjbS9ssyCt5rULJbRzVupD\nOp4VfvcPxsnSrf+NNKnsExM3vZ+YLayA5XYrCpl/TMkXFNMiZV8+B0a3Zyuc\nVowopsHEP5c0InQC1r2ak7aJ6YXd9z2Qq4cBG5cGARCNI5/JG5QCB7OjtmCG\nPw64KIb+yt4Rg2FIXeJ0JNRZExlD/KOCVgZ1MkEEX/WqfAoSYrIjR1NsqHWh\n+AOhYD/s10b7uaek0Qr+gvFVg60YyiscYf8S+b9YSNvmBlAS8O23f+mEuJeQ\n8CCV\r\n=gzv3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/density":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/touch-target":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b4f5a1c9e.0_1609364791383_0.845282202445077","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/radio","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4da34327f54fb1cffa3131351f1c083aad28d7fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.a94bd8deb.0.tgz","fileCount":42,"integrity":"sha512-v0qZQAbpJkQRYocZaEdI1t8di7Z/fzjsINkJuUM/i42TOUIaDTfztqO9d0s+DMsLfyyy/7MG+9Qcvq5exmVVxA==","signatures":[{"sig":"MEYCIQD/+FRNSmGELlDmvILuZt5C7Z/EAdGcx69lRUULVEURswIhAM6yePc32AxQTcS68BWwS9z2TtwFSDZjdCHYlk7wkgSn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PljCRA9TVsSAnZWagAA1egP/2OlG8UE2Nknyqx6M0wT\n9zq7CRqJyknCqfO+EzEY5UOREJBaR/LhuU8s7+ovX9CiPh4QhClhBDQbFf6n\njstbhTx41pA6z6OfOszYj8tH/M2pcIYaSenp+vOR1kJoBLbOKXtg+gqWY7Mh\nKVMU5cDejW3CzRYfn429GfoT/dqiKMuE3Rzg/EqMOZi24MoNzUMn4VTI66JL\nMzYhEUNWOJyaQrBpbZ+DzXtP9/huocnuBLxhobtFJuEizhKF06tgzUB5ACN4\ngobC8+h/YvLSbjxMHxslAPOlddgVMoaNYp3qbvHsntjhWcqfczp6KWMFbuiX\nFMkFrrbC6fg+CmIHfxr9Th9O+BKX9Xr23c2mQgrD8OXXXRydeRep7PUPFoIH\n8f2kCSyP/JGBteWkpyDURMnMjDEV3ZsImMWoN2oNZnS/k4fW+x97Qtj1B9WU\nT2qSzZkhXYhlX2qdUzpQrb3d4UzbecdTxC8zjgvbOVJ0YB4Ig/UKD5jEYK/T\nqT3UQEemkKMKIoTdh+Vlp/1/HwuK3NoXMhx7oA3PZslLHsiHy6S3usf20EN8\np0x2uGQHY7YfGsyx3WIuG4bIk4yRaaJHfuDnx1wso5PssKGB0jIx3exE3gdI\nZAbAuYVNH8AJHk9ZlTxvl73OqGCdWVlN5jqX6zMKInHPZhp8EQu04XDIz129\nbhXm\r\n=pqXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/density":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/touch-target":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.a94bd8deb.0_1609365859099_0.1701033920887116","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/radio","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58e1ee57bc911f79fcd0638ea7c974ad4bd4bd4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.5d128511b.0.tgz","fileCount":42,"integrity":"sha512-6/kCIP7pEvHAqDoVctHNnPwAh2uZEwsprnz6tI/2qQaSuP+tjSzYo+ODssncCIaOoAReFo9ChH+tCrbg4pbPNA==","signatures":[{"sig":"MEQCIBo+xKphAmtlkkVd0Plm41HmIcDbP0d3Kqiq+DaiAfPgAiAo6pXJGldkJg3e/s3HIM9Jcw5Intu+W4m5cDjDJoQZ8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqqCRA9TVsSAnZWagAANBkP/jzI0LhdsW7dMeRshlLh\nKwmVMsJi8LchlqmNz75t9lZXirEBaggMD/t5h26KwkxQgQlLaZaJTga3ZB2g\nTjQN3ineMUPgUtg24KLPB7joyPWzHgVCp8Wsy0CLvi6suMIoEm+SSkLJVhMV\nltlpSf8rbSKvQweYA2C531drMlbkaLeUBi5PSvK/9/VTx3My8LaFzV0fP2Ur\nmZTWCdA9sFXMaQ3+wy4OHnfewGjj0wFe6ox2NZoF5/eAto1/SzKO14hv+WlD\nK6QGea/6bPOna6zTI1ZwnB3dMaejvUZjotDN6X8c8NrAQ1ZQzFEi8a4uRjxl\nJ3QaG9k9cVPYQ7nU3UKoHPZjqDxkS3xmX82GjzEZwSF3sE6N8GWgTJ7HDZX1\nQgFJPqcdRZiARy4ptbVCQEpzU0Iem90MTqWBBc/287uJqSccdK8wfwatkz0n\neO/vzkYYfiGcnEjGUzGJdFgWJLgxDFKuuipKRyxaUJi8SFEa0FwbfGrcAITd\nSUZtkAOZ7ATUgrKWWNmVzfYT4g2Imla49OTyvgL1yQJj3cCLkNUShpP4Qf81\nX4m2qBBWhWYKTjR/+FPmuoocT4JZf2KjFvvJYk3bg+UHw3N3e0NuBmdlCVbB\n6qNRRCPO1NfqWlDQOnhVHDlUxh47Gc857ObJPebS7W0dPOmGgs9DvEr+5f5E\nT16A\r\n=ThzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/density":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/touch-target":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.5d128511b.0_1609366186112_0.5252091809805259","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/radio","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d30c4d6961631932a0e29e29401ae823eef7479","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.365c69360.0.tgz","fileCount":42,"integrity":"sha512-oXOTqDl5U7vlui5RSVrMIhj0TFVJKKEwNYPWMzXDFrz3TB32vqHqGP3iqbQMWCeRXmRL33SrcJpbJpedCYtLPA==","signatures":[{"sig":"MEQCIC6qczLigvXFXKmWonjHQOeNz8SK1ym/zyPABp+RqDrhAiBeXWMtZwXesVc0CytEokFOMH3A5bEXemqz9V00t3Ul0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZhCRA9TVsSAnZWagAAnpoP/3T0w8ZX1hR1F3SGI8GJ\nkxz0AZ7u5VqQfGMvrVo7JSDSVSOH9Hc3yzEPGdB45ff3uGIIivRL6fo9nOzB\n4e8bKUPKUOtPMV8EaFln9QKL8MSFXPa2Q0xJ6MYyUo+L6C0eT+WX3Nf4KEuI\nkH7H+3GtMcpv5Uxixsx2Fz0pqv2/5bYJQraNU3E71DFj4v0dPObtgBWDi+cv\nd6NXxDUbi0LdFB9YyxKjgDVg7jx6WOC8hzJfgDmC0xZOyp9/irzxey/+gt7g\ntVXXjWMOoNylWpl4By+7T/W/owlfQ07o494wzkiDCCYnyvio3I5she+blg6a\nfydAgoX4LAB5LkWnomdoQNabunX+UpP7R8Jm31X1hYzbjNDVQJUSJc7CHban\nGGgFDnoGdl4RZMNkPSZDT30je1m42wQAv0dDHxmUBN+QLMj0uKbSQMLo89F1\nwyw44voNni+407BE++PVDNFmAZT+MGbVye+A9F4ABvic0mxQSqMsargUQs/I\nmcutwKE/cTUp1nr/NMld0X1GFHTa+bf+w+VkMbGvfyY124ni/KT0pF8taW0o\n8cLLNuJgH8e8bIHD4IpKTwTi0KC88GV6wujgg3BJXaPMPKdX8NecHPK5prfJ\ncajAKl5yHEynptTrwUEgp8qVKX/Dfzscyrf6xc9SFYTLPc3TedC1GIkSYd0J\negnU\r\n=ntUh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/density":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/touch-target":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.365c69360.0_1609868896802_0.03748654015649211","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/radio","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3055755e02f3484d6ae36d8f60f02cbd896d9fec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.700a8261a.0.tgz","fileCount":42,"integrity":"sha512-mMJhONSGfm8yNafrzRvqVDBvm0410fHO30z+tQgfP6oDwoL9ROeYAbXPD90kuSOgTWIWp0pjAQbGaHTACBqlyA==","signatures":[{"sig":"MEUCIE6FIEBfjn6IGWiirIFsk8aUInjbGMhS+MCzOxh2MGf0AiEA0IxEPGB5iHfR+bY+mpDArRR/xcEU8P8VBy37qKvQeyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NN0CRA9TVsSAnZWagAAdSwP/03dSAhdoqxWkL/O/ITp\n74OIIJBzB+7G3xbsGgR8GSKCLQ5bALENnM8nP7kSxnDAIBnT0r3MLK8SS5aK\nE9CWY3UsaQXQAJh0RK+frZ8fPVdohxKn/F5jq4RW52FNVPbGq+RGmKcyKqwd\noF/dMe3HUw6YNEbo4LfPgSMcLUKamOurWhzS/b5KCAgU4Xlm3WTkPN+wJHZL\nnK4zL18tVPvc4ghnvDtexeZPLVDBq1OC4CKTDP3nh+ub2SdMUqdmBnRsMi0b\nUZo4LgNR8/ioO/ki3bFwJSMcvIKpYJ0KDv2kXQ6kDTdNuyAwGV0ku/KlmVFL\ncTQ1Tewa4fkX5nXxSxqgpTrKs4ZSX9js3gZKQXxJIAsdH//UZ4qlilDcbf2Q\n7ZuUSaP6wd4K7dI9JPGk1eGoVESQ/CK2s/ojE6xYt+iOgYVqYh2JVWXwdC7U\nbSfgwa25LPn+DzObCqdHEcG5He61y4olf9WzLlS56j2SjpGM2Jk2gi4eq8Sd\nMnmehpJPR1CcaIk3dcXT/KwwqdTOO3cKU+XXFlxJn5K5r8apTHU+Fu2Eb/rs\nd8qox+tzTo0cutxe/8zUllNNwpurth+agQ8j+2C2wbbetA8GdlVvGZpWlbcw\nrNUk/MOKsu4j2NcXfTe/DFi4Xou+rgOrQ6GEuCQiIcYk5LbhtTEbLqny6iDc\nxyOf\r\n=mR4K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/density":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/touch-target":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.700a8261a.0_1609880435548_0.8085729559421553","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/radio","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04cecc3821aad7d6a6e452a8682aaebf368b50d3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.766981c15.0.tgz","fileCount":42,"integrity":"sha512-6CMcuhlB8TTE32Nb3D/5StCbYObtH5tF2Q9ZYKdgrJc+iRUeWc4TaUuFDxrgZPI8b7+9spUbZNphbzQFRDWIyQ==","signatures":[{"sig":"MEUCIQCooQ85fSnOHU3JkbBw/F2RwQ8JC0Nl53Z6G5qSi8baYgIgcQzDjLViTXoImqzOCSkDf3zf9423s+oZCChfim9ehTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrTCRA9TVsSAnZWagAAz4sQAI93wAiMz7lrJsQgFGAF\n4buDO/xX0uBojVHJcDq+K4QOik1DA9/8caNPXt+IM2vi4D3xPXdgILVjmcpp\n8hxvxX2Y0U59Nw4sXrGC3ceQMYvpghoj9cVgdVqxEw6Owf5ad2zQ21T27tGE\nu/L89AGHxvS+tXZT4VWLj+icChF9JDt8nQOA8ptTvfMS8x13JD8YLFk70tXv\nJWuyeqEZLFkFxNhpIRifDVWgf1TEkHDOR5tjY2vLPjhmwJxteo2NtLoHc9Sg\ncmYxAgmxPO35wx5cNEE8TPPKQtbfdSYXbNcZEATUoBDGJnwp366I3Z6X4RCd\nFohrEEn76R6ZZZIAjxVkptyYxTOgEO0bQSPK9HVRluKwhbMT6nM+UXCRlGyn\nSV5A0R5yperN9QIAJK0UsRNmzanMuyClgfU6SovX6lJqYlE2ct0vbyorcOZt\n0gz16Z4Qs5uZ5lOqUt7WNXQSXnGhAgVn4Nw56gCR/ND7820phk9/tgj8tME6\nUp2Xw/Stlk2TC0wFLT4JOUJ4cvzr8zcqY+5prMYa0z793c7cM7VcWbVnR3lX\ngY0/DUz16pxkPTn45UFBftf4jp+WIppoRbB1tyM2Aovgx5HbFLRF+U0Ra+CQ\nkF6TR8DbXp0XlyGhDwF4l6lFCrepHZVlRM+BPZtM0gnIHOxhZFN2UnOf41x0\nbMwo\r\n=MtjL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/density":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/touch-target":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.766981c15.0_1609886418649_0.5902386694148765","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/radio","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eed4532da839d49b0d514f4261c7e6b549e8781","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b28c576d9.0.tgz","fileCount":42,"integrity":"sha512-4Q8bvW2wrte4+bd2y8IPv4TTOkAmXythUyiVOSvJD8Kh3WB0BK86F8loaeMz7+8LiF00inGzqhRdA7ANJaEUiw==","signatures":[{"sig":"MEYCIQCxnlIkLcKAkHdy23uXUsqa0pArH717mNdm7t6jMJ2YrAIhANxluH7EpvKNix8vWWIko8xS8FlgHejPZmHURx/ngXBm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0aCRA9TVsSAnZWagAAReYQAIt2v15T0euZiF2XHTL8\n/+eGGvboDlqfaWfu2CgosY0sIC9bHjLqZ80chFHSzLTGxWGimg8nZkeFmmJ/\nlTu+m5BSf9JDWDlc0GBRD+HE2Pj3MyvqoTbevH9Lzxblhi/jVCtQ2hM43HgY\nZqcliuhXRoHm6Y69YhdILAYwURVF3EunKRQkQNXG3aNMcH6NOhtVCVmeSNIp\ncByVE8iTDOtgGKwa1+Y4d6bx4S3t7oX73OPa4GL0c5LhTLBl26OKXPPP31jl\nQ5Sj4lF71504MeiTMWzttUElskkas+Geh89TOISCAA/AyXSm0NQRSRuJciX4\nuc5dFEmRGL+tHdjrbcTLIq5Fp8ZEdOjYWhuD7gP6oOVXq4P7urspmIE0nx/H\n9ijUexh87JQqJXzZsdjkVTeU1CsXHpcCvvmDp7E5EowgwlieE8rJQpXxawN3\nZL0t45Ts+cJyns/P1vLj/fDu+KKXWZU4TE74SmK5m6wG8WlIMsI9vq5L7zka\nMvqJEwdqxJxPlN52xdl2nD3R7EtQRpV4CcaEyBRBD0mWDzrDJnyPZFZVJHTm\nGj3M+Va4HancxpB2+Ad8zKpwCFeS49b3LQt797ls5SpkY3gVcbD4RLkgAlPa\nbnsbuKExDySneYogZ1WLIerODoyBHPeKOk2QCRuzIdEe+S0WhE9gDfNmLXKp\n7xJd\r\n=UgLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/density":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/touch-target":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b28c576d9.0_1609887002381_0.6681624929792409","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/radio","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a8c84486f9693356b9e0c427af3ec1f43319ced","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.968735356.0.tgz","fileCount":42,"integrity":"sha512-DeicSBvHOj92lQgqCwDO6JPd6193ZqL1qutkHS5mCPB4UklosLHaHgfY113F8dTP/Bc5KyKfMdw79dh7fj/ayA==","signatures":[{"sig":"MEYCIQC4yc/IddGEH/JpiXDO9XX8rwxLQt41bT3ikJTCewEV8wIhALYNdfGOGiyHrRNGUOtugmCHjuP/Lc/SR7TTjXXVrssQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxKCRA9TVsSAnZWagAAmtkP/11KpjyfcOntL57OvmtN\n3MQvYyLuJCWBrKKz0kgMzttL4cC6fbK2QESD8wnsTgAj6YDmn/QCnCNUf+gt\n4kVyV9QSCtCZ96yjnqoi0R6fcyWoM8Or7CZlRWHYDWVYHAmVmDRIL/tkQok9\ncCDylX+OEXf6GUYwYFMdI1HTieTDoEchsQIeRWZAU4Qvn+subCcvyxpeMnO9\nwxJNAjFjPwvU4GxXOFLJnYNF5fCOzdUO4NantJCWFTEaPD7ChRrWkOA36K2P\nZQ8RMP0kxZAOWKktzGB3e5hGF2WAbuLXZEOYeIUSTE/+tEI0rJL1QIU/8LDh\n35c0DAvZnusNAdo3znPmfuHzROac3NMOVndyvFmM6AG2NJdgh9jY7boMK3lH\nRQItXQ/SX8fjrbS36IoyGKI8ZdCRrqwmkuJm5zFAuq0vech3sWpLh23JXoc0\nDpVsoQPpEEHF1Tc4yXGc4T8pR2GgREHUsjRB9SeLf73ySZe2PwkjhJChalrU\nfYmJ79qTAQUO4TE3wX1yTTBJWtECIL4aRd8zfXwkgORgE/uMz6UAxRT2p7hW\n7EF3SyD0iy12f9K3mZlVf4iCVHR1Y6FDBwbRcpTiGO+7BCla3dFci5B5T0TP\nseNvDrxLVG7uQV1x21iyUER8YG62bY/xrk/NRMxC3rn+G1JT1+hBjSdAARyK\nEezE\r\n=5Q1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/density":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/touch-target":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.968735356.0_1609948234031_0.44514083667328563","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/radio","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f16de8b130c76d5de673c24488bd5eaf5420945","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.c5e18b020.0.tgz","fileCount":42,"integrity":"sha512-oF2N8kveb+WrnuSDQi3f8UlWeOURCyKqm3mHvqXbf5j1B6eXJ/7f2G43IxXi63Vk4M7vk85sGcgVJhsf/emwKg==","signatures":[{"sig":"MEUCIQCcQolGV6SoqeNmy8OsyXaWjlU3KTnfZA9gBo61fHp1PgIgZCG7W2sVWfZSXrI29ik3gHgEUX/HuJjkxrx/UvSYHsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMGCRA9TVsSAnZWagAAcT4P/A8+bwmYDgfskpHtvhgq\nc5PYKxIboWPLhHoVtYvdjORvlHuOTAxz5ZWvLZ4k6zkVd+m3Gi/ppLm2F46B\nAS58IxgtyFjjp319O+m9OYtY9XGh5XqAGClBd3GoIug3Y2y1dgP0zimF0UUh\nk1TXx7gws15Wujyk9gNYwzOXsPIzJNL3FDQAcsoU7s2g6NXDJddk65+F82G7\nAL8s85IvDuQDYD6w9FqrZhaNhl0XWTacxG+42pIz6RWYkr/aC03eW/ZRA341\n6Ldxf1jv6U5OAd4KUeyux3Xw4rheN4oLHqsVANc2m9fr40PEcokTc5SUIN7R\nibnwnyOzritEA7RMkGka5IJCMDdq1ehzvkQ/72tXFUqtD+qyDc687bvnXFQ3\nixf32hrwIFqz6EJe/0E6UeokMHdlPtC9xek5kpF04SKAEnnr+httpIWOqaYJ\nKLgC1ygLWj3i4mdyr+e3R9tcReCPLi4FHwOr/ZOTqwtFuG3Z5AKLdxQ3DQZD\nmUUBtpdUpEGA1yVQeJC//hEXTiF6EA1EFmP4Wbd6sUhZir9Zmj1DHUneRaYd\n+QVMQdaJyy9KTzrjmYfZGuNZZQtqjJj/9CbUOvmCEe04lMiQ3o/YXNHglT66\nNRit2oaTQO5LjWcfvHLiRtTh9hLaoCPvBCAmmikhsiisFpfrKjk3gGj+PKw0\ndSXV\r\n=xll8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/density":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/touch-target":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.c5e18b020.0_1609962246376_0.8043678461104606","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/radio","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1909d0231e4ddf2e0bcf12e445857e639cfc9a8d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.bcff8a66a.0.tgz","fileCount":42,"integrity":"sha512-Jk+luksj7l+hRm8PFZ3o8Xb7FEKW9HVlsbxjtuiNL8vLVMqg7gQA1O14vm1BbGDN3vbY8FSd+T5XJ7ilAFa8hQ==","signatures":[{"sig":"MEUCIQD5JTK95/eRXcRFjooiCeyurrFExsi8vNBI1maAsGndGQIgI5XRuPBJfFsnHs+3P6XbPHtlB52bZUJANBzZRlbRB9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hz1CRA9TVsSAnZWagAAcHIQAImH5KHDL7EtQq5Ci5Jo\naL7dMlBdLFBVOhrJIFlIjiuOX0+QgBSlBooxSP3bHhQGw6ZSHgHibJ8LvZmR\n4zsrNaYtkn7u4IbB3RlxAgCxV6Q61NtRkjra0xxTKfXctH4JJKs7zjR/DULL\nQ8c3pvV0geVXPnLYxZ1gRcpvQKYOzMlyXvNqGqWNEXMVUuBlMt4XLR/8zoeg\nUVjMjs+a7i3RP+j+yL2+4O19TOdgudsPcOHxaM6gC/kyrQoEm3DqCRiDfqBT\nEraMq3VvRY25K7G3xnJiM1LGTBsolOL+m8iWz7oBQTbHPH1V60i+PgGOkkHH\nTCjC/Nz6o28Hx4z6x8yCPHsQRRgUBA6QFSvbbKSXc9Ib7eevD2gL69fWHoxi\nqIH5fC/Flbz4Xrgs1wBWwgheLAIeXVmDysbRp2wYfPMJBUOFbwUya7ZA9Hhj\np0Q7tFveTysYFhCuo0WZQnbsrAiAGmU4vO+G480uKHruLiV3s01TO434I+SF\nKC7y6KldCcx/y1GjJd+ixaHuE6fhUHMIA9IAT7snkW/gjzUqh1W6MOXntZrK\nCQP9roe1NxcNUSYnvmPs0Bi0J3dJMlqasNq9B6VrSZUvYa1Y+8Reo/kn2oOZ\nciu8KmM3uOmhhd3RrxSBeREX7nSzphx6nrK+G8lZckbN60xdSWvcBXs6uD/q\nfGr5\r\n=ajDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/density":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/touch-target":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.bcff8a66a.0_1609964788893_0.6984805090970971","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/radio","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79d3a8246b6ba2f4469344ca5874624077035c5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.79328c9ff.0.tgz","fileCount":42,"integrity":"sha512-aY4BhVJb6oHdIdCW/+8QPHoBVbHfvS8KJDLUkiJ2/iGonKP04FI1n8ON0i8D44tV8oAQaqn1jxMFHEjZ1ZWlvA==","signatures":[{"sig":"MEQCICLdrkg+8lLD92GK3b+wD77BEiuJMCMqkwBKkpwciITSAiBspIiZ7GUX9//q8qmluCogRzoZDCjQ6R5DQoOf6uVGSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMnCRA9TVsSAnZWagAAZo0P/0TcQkKpto7uJGeOtPyv\n2Ie5k6sGK0cFtU3icrhNe80+hUdwo4VFh1Cl/BJJ/NeeGLus66vfeMGAsP+W\n2wI4KEEwC/nDbBWKBogRWRfmiEEWE1LaRRFV1cbzPYhDc6IP4blsdzTeXw2V\nvsiHp1b0v16Vaj+Ck31yPyi2YsrRZLVEy+OuenSkCene0XrrN7WporwwLIA5\n+NxGDjhjYB0uHxB6nJcADt2YQII5TpmLH7XeXQ5aepAuK5bmZH299mLijIaK\nr1nJLQPFCzRN+yrSCw3YNQ0AXy+dr2AXqiNaYR/QDV7qHl/ICY4Mu6meUNKc\nr12zvEVPtCdZU9hUZBQavRvugokiYL4JdT26ONE9YwDbh4TLa7YbDiTx/B3I\nWj9z/dkKV2yIccTfIIaOfBFrD2s3KnDWyodSo7ON+1m829/4+1YkhDnUmvY3\nUgfEXtRdu0h3aATngKwp/iYvSdwhvvWImEsZC9x91H4Tbfmsft049DlLymD3\n2CWggglbQHDc5Y7EgWUgEyOtUld0koDLR+5El7XGmIrZii9kovBxGMTgO6J8\nJxh8lKa+Oet/Jj2WXvUiWEx3v79Frqot75NETzdL/7F8ZGhjvUhSuEPxdERc\nErIKhDE03a/dD4DKjna9ROCfpGOThbIQgSihvk2OfEmJunD66NtEISo68Qkm\n9/Qx\r\n=dcng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/density":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/touch-target":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.79328c9ff.0_1609986855321_0.5802127182730059","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/radio","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f3e8cf73f09a368ab57d2e7b53849923674f70","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.121e1f303.0.tgz","fileCount":42,"integrity":"sha512-Xkum//k6HMf6XjXXF1pYZdxbXYyk2KEresH8rdTfCG9d6qj83jrEYUm+I8LvFD397PmLLWJlUBRUWqCcY+kkTQ==","signatures":[{"sig":"MEUCIQCA7eb9bJ8JhVDuCwc0FcxCPfGltNU+rdVA0tFGucuFMQIgWaJQwpEWI8gBLmrqNraX9h4yPJ5mO3V2XOYTeptQPGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95caCRA9TVsSAnZWagAA1FEQAIK0B+ycE//xOHoA69ZR\nreXRXpwjqqu5a+IThgRnHyEs2sUeDf0t4Z1WzRpnx4kRexUuGf5k7VRL7kf2\nDoBTRa1cK7NRAizyVBQzKHOaXBcGehggmSDkNbWeWQc6fPHNZ15RC3F53S1L\npy2USCnZO04jAJefLcqsozx2C+OCNrLW7Y0EqPzOB+F3p1OtKotPWw9mSMrr\nFhNrwTX6geVwlOm1Tu990SekEJrbpvUUwyTNt/7cplxDipJv2FGFiP/X8MH2\n64CG7VJPnH8Moemb6vv0rsvCD7jCHbvwsKpUp8Uru+q9hIjTjYK0785+5K1x\nJxFXKTTFb6CwAAdgfI+vWHMMwpUMOHvyHJeTNT/5QofNEQFfgnkNh2Nfhs4o\nQ9L1zhXwUsAe7zkoTcb4zwb38TkAIFnjt/pOdPNH4flDARD57mFgZinpiOHV\n3vVVPlD3S39COydzl7HUKRYW59auw0AQUnVE1U2I0kYfhx2qjjl/YtkztGVG\nB8yxynhwW/sFAWyyoueQ0GmiBBXlvD6zOoc5sKUsvyivPIJB6/bmUzAIS7sq\nlTUYpoeecaSqiBMp06gukexXV3qr/sQkFoBLqL83glKQpaWS5meLtaPM2MOX\nsGCXeJPhHHXBcQcaSioeo51Qzfb8TuhnIwAt2ytxsverCVZQcN+iR0FEFFoO\ndpgH\r\n=7pXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/density":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/touch-target":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.121e1f303.0_1610061594337_0.37870827018196485","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/radio","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44a9f404b2455a74de7aa780a2a9e88bdc2b02ad","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.abdd10065.0.tgz","fileCount":42,"integrity":"sha512-oSq0m3+8OATDKehuC7iwOK6byXV4S3fad8vMnyY6PfXDrgDCOItrwCy/gFdoP5K29YrQ2teu0I6k8UJ5t+3IlQ==","signatures":[{"sig":"MEYCIQDUcFLSBDPScyuuTV0obxau8JIqTffKc16OGHl5SkBkMgIhAKssOnzyYVjkRr1qvFEjnI2TG4PFK2Oea9mWc8Ez37el","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JukCRA9TVsSAnZWagAALc8QAJ0coax04QjbAV8QZIIv\nhILd0njcIkE1CK3Q0OkyXEMZ8j0+0ryY3FgMGniMN0XQ6i/wGzyO8UBid90t\n2vaOb7XmqeV5eLbBqE3m2xpW1agpEOqCI7s77/kiiozQttUN27aUPf2vlEwb\nAKzJmHBT4Ud4G8s9/Rv3gAfUwLNIixUC2H0y/u62h8utjSe93c++tqLnxokP\naqRjKPkABpFnrdTsGUI617sBaUJJVtt7xfgYolLprZSTIPUp3hjV25Rel1Vi\nRyku4/Cf/k9iAxmfhRYTUuZKxu9pv2PapOMm5D4EUIruh+G4XU5g4agFOYtG\nCFdahgTfQY4qwv2/zNpDaoRKfyhe2QfLsQTHcoNztLGTJmYP2rxwR/Ly5CqV\niCHEdgOQgHVH1r4cu9uMAC8LQCBFApH6EqUZUG77TFwCQSlhrf1DC9/BHPjS\nqekEF/uRoB9SJUPjOGMqHYhxiPy5fXtK0nF8vTjCcSaCmX2ZDhC1JwtwaOMd\nJKhB7EOMM2QhwgaiEPLEkEbhMtFc3yHzIIVxaTivrYWzd1o0lFkCKZ3NGNMd\n98JI75tq38OFdHlIGutGEOe2KdICd/D1TdvR1yRWOR2CBRJLG3XRNZZcIyCM\nc83h1ynO0XuixpvV2D3+1kO57yv4bZ0RU+OOQw/A3rszyHoKCnIhQrffewp7\n+YWY\r\n=Hb6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/density":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/touch-target":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.abdd10065.0_1610128291574_0.7495442785526625","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/radio","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e477936d7b9cbf5b40590e3f851fa3a404c50a54","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.089de519c.0.tgz","fileCount":42,"integrity":"sha512-iHcyAFTpgKXQuE+UWUMINfH4mpdFS/HNJ0/vdenBYyav4YPK4g6kZgBXErDcTKYECzOLuDl8V/pCMNDherDnZQ==","signatures":[{"sig":"MEYCIQD5qYwYP15EGP3zZaVqQTqqJyBXoA9Xh+R3gJsqpA4OdgIhAI4EtYtbj/l0hAC3CKOfdwQQXptWt7GDIIQu8Rxum06C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Nq7CRA9TVsSAnZWagAAKvoP+wTmbUgL2PFsUFC598NO\nXUTlTCLY5jBYbqmaKy0mZj8UTGdyY8HmUK6jYHKJhQNTRSY8IeKTKvf7ZOqk\nJL9tmdz0sDrQ1CQi+iqaRloHG5RNf/Z5Adx1M3GbOAm1kss9GTaqDkloRJD8\nEVjxcHf4qafSrJqdcw9w6NI89gwPetaJYJ+RN+Kq3mDvH6W2l7GUALlTryhW\n+9MzJlpUsvYtxfSDylW9ENR90Iv/OxrkBqLJJwZyfd229C9BKNDNyECcrXq1\ntqmjoVPShSI4r31o1A6zDtYj01vwsYrAcF3/C5lpqfgFhxEoDNZT05ePkYr8\nB6DAj1RiTtZUbCCWszpjLlVNz9sZvhN/AnqKNkujsNPY/eRJNM9T+0svCEOI\n+hFhrFvJcCQ0539gg3sbblDoLv5l0MpXBFxJBnmYf5FyjZi6YuDSLAsPbc8Z\noRVgIIE2Mz/YfuUEpk6IpzCjMN+Ly76ncsVI/KTwLevih/QFib8E9hU8mgK0\nWFklsI1Kx1P3E94LWxFkyZZYGJbzHGbOEyadGi0Wn99ND1O9Zcws7Wde1Js7\nQov/xzIWUjwq3poO5GHiLithBjVCrMTvt/dnvg9N3luj8YaYpK196SI7rNfD\nXPPYLmGoDf6N1m1GsUqrDQga4sk8RfNJLdkP3mp1urxqP8n/QD+7TpC1ZFoa\ncSwu\r\n=Y//i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/density":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/touch-target":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.089de519c.0_1610144442667_0.06495385829994582","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/radio","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc9a6f8a94068ce2c0f8fe3fa709eb1979a0e28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.163119837.0.tgz","fileCount":42,"integrity":"sha512-tPjqE26vD43el+wJiOqglPvXWCtwC0gqw783DbtlEbAMN05qFioMvDfdNCUsiDTEviZPdK2r50QXk5bZo6AXFg==","signatures":[{"sig":"MEYCIQC5ufFRk69o4zuFVYkHYDFaXmuEaZBd4hRGe7JNGixAsgIhAPXM/QTJIE66Q5WRR80s8UBkpmR7HPt2GAmJasAgVzvI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6ICRA9TVsSAnZWagAAQwEP/32zn9rNoXLxuOEBwAwt\nDWreMe+yJ5UkQeS2wI91B91FLlPg9QptuEe0MyjtgBacbL3g+dN1yiA/inyj\nntwdDDBqQ+mvU8LDzbW9Eonb2efV/l5m0DGWpQ93wSvFE6br/rU+olNXOmZ9\naL2LHzCy3hT3AUsyfgn3Dat47vFZNRDlv/B7sStwbrb+/tzsTUETUS1ZWssN\nXJ4Olk4TzSQXHAbxb3Pvb1ZjqDWJg5oEyeolEZ9P2D+EpwcQCy5wdKXGAlKA\njKqx3spROeB+5W7t3UxuYzQsEXOVa5HSN3TvTN4cI4DrOZQB3FlH/Eqw5egt\nwFbqaqU10aoeHto6SWzwUIQlmGhJ1+H4GjXwHt0JQUFG3t58FiW3lWSk7nBG\n3+9op2GUkVN8TfraGdIgiDslRbdUqIUYfJ7EvgewFsatnLyE+2csrtUbQVll\n/esSoDXwa+KXHaqBT/yFwr0Dc9Lu1UkqNTa2k0yEIQeno/XAno9oLZvYS8So\nj92lLp7B/GYKpkyCEPM9+HQu3GFoMFJYZdR5VVTw7vyKtvKJwqA2TCfKzUxJ\n6SqDP+/DnSqJMrHzkBP1yGb/BGiZ2Xo6by9mGr49S0SgY7gka9N7lLZhytKH\nxTJk+eXlvR29yy3x641tFviULndtvhhUnjuWKCPZiHzqbsln+3bGsXc280FJ\n04Jl\r\n=PQEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/density":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/touch-target":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.163119837.0_1610149512281_0.7476504352125048","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/radio","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322e1399a68303d63bd4800301a79fc034e0090c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":42,"integrity":"sha512-70WzKEzb0q0JqbUu66Oyzu/CGZm7VxMxBHGb/mCe3A3yBERyfe0b85M9vw2OlzJYakCGf9jZrXTXNoJ3D4y3Iw==","signatures":[{"sig":"MEYCIQCGB/CTlidRdV9vzPJxaiNE18sntleee4CyjWGrPtCGwAIhALwP44FvANojH7EF4Y0WQuTsE99vNTNangD+PC6a3AVs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Hu5CRA9TVsSAnZWagAAE9AP/1XIUIdxh7mA7p/8buer\nXq8YHEkUIPYV/xXFWgHe4n9sMmJNCevRP6+IMfti67wib8TKN+y0TuidJNdN\ntK1Luby0nlPrZ7XOTGHUUHiob6ftslpMDkDcf769ckVbp+F2FtMkkSFU69IU\nBUIivIQys8+qgSb1Sl5BUtuwuQ+T3FXLEgBsT01+FdNiLKi6i6YSe4j96B6C\ngVxcbq2gd9dn6VlhEZtX/pdTsstsUlxGQFZF2iZeOGZv9j07fWvg0fKJM0fy\nkYvouZ5V8EmoXY/qPt2nbO85J/2teV+iCePJwMIvbyApcI/rsxOTktfNWg5k\nkT6t1wANMEGf3Z4xR04pIy3+FYtyze09iDgu8Bgix0rep3KvH6iKu3BJ8DNw\ntTK9Ap+DzoVd7nSA7Mv3v+TWrOoDcwgbPJEU3TtOdTZUD8OxYAG6hgh924Ta\naafBLh1WirF+ntIah9ZDSmvjQ1ylheB5CNymcwMfHuNBe9YDn7V4Z78s6hTp\n8ZtnT6CMswklTPVQPYFisa3UG76I3aCn/oiMpYKDuojulBBsRbshezjGfos8\ntzDAoMajEFjNOkHOzej3yxwL51Duc+/msneTHBX1mi9SgBKobmuBnI09bKeb\nl1hv2BF0EN6k+6hIGVSnSErfTts5z6oIiDklRfo4OzGlZP5Cgcb6rEYfnUOD\nA71i\r\n=Kxe+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/density":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/touch-target":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b8a1a58e4.0_1610382265384_0.37573979728272344","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/radio","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b146cf4fbd39eb909c9d5830bf844a77e5ed534","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.7584267ff.0.tgz","fileCount":42,"integrity":"sha512-yl2cK9cH8Vu4IxYD++gtyccxDFphMJEsgUqILbydevbS1B5Si2b27Bb5b65W/buHrRk1Ya4JSgSSMTaXL/J5bQ==","signatures":[{"sig":"MEUCID/rCw/K+mgpgK+B+f7zQ/DCh3VqDrZnSVWu6AlUNdxfAiEA/p96kGP1BPyW2GRBIjz074Y5tlQTAvDclV1zETa4S9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Pd1CRA9TVsSAnZWagAAj7wP/27DN7F/+VQj8fK7x6Lk\n/yoCzYyooIxB8mOvVDX0cVLN+6YgxkC5zd9AB3DykmpAA6sCllBhqRWYFbL1\nvKEC3wAU8flCVhkpDx+LWn9zQcPa7Ey9rXtEHjF5mu5le+ZjXyw7JZVAuWku\n/LCS8gG9TXkATd4XEwN6AxIzABsOWRqMMiJfkZOwoFWM/ZHaRpLgsTukGVvo\nTZ/yC5LVe64E/WRd2zvpk1dcGQ3dy0bIVWuRMqdhpkZH4m3yMAXNsi8FmdJy\nMRXP/lpzQseJEw1DwooIcUNP78FpIPSkMiD+uScNNkdvOt6JHC7A9lfaX9qz\nDH8hhBqK3XbX5KErD8DPmZ5F9kVpTIs8hbml88RhM3cQCksSe93YWJZyHLa7\ntnQ2CahFqW4mhulswzPRsyfY3lNu7yTZ+d10IvsUKUw+lZk3pG1XRLObGOhA\nrAl8qjg5ZtVNyJTXEghmpcum1yYvZvaSLH2Un8OZR1r4R2BSk2pjH8UKLlXp\noIq+Al8L5A6Q1LoH7SDjBOGj1QCHuayytKAilDUD4edWvMAvfC6UkaDsj3Te\nY7dVLcH33mI8hCAkV++ame5ZHSUM1a87/QIEWgEI23UwhVptmXb/HZiWEtyb\nIiM514hucUvcgZhVi77uAAK9JI3yMZEFs4hP6mfbu6IdLjcOWUPAdqb6MyT2\nYp+Y\r\n=cgbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/density":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/touch-target":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.7584267ff.0_1610413940984_0.6617350925240617","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/radio","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97ee399fd1cdb52e9459d71bcf721d867a973843","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.251ac04c0.0.tgz","fileCount":42,"integrity":"sha512-md1rmRJKtbrNGnhAkczYnPWl8fCASQlm6nTsiawF7H/3rbx2aBcxGL3nbpPcSPZKtI5ae67+ri6LCkONzZOXHQ==","signatures":[{"sig":"MEYCIQC2ceickay4xaBSEEPQh0jMW32BIDnyAJwa8bq216I7CQIhANwwUUaQynX+LaHp0ykjACgkQgD9kJBC6q+DIQQ03e1h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6UCRA9TVsSAnZWagAAMTkP/3ye5YE9cydFEGKDpC9B\ntqT30HQPzKjx7uOQC0S8DXizS5ClWEkv46acJiFc7LkiI0P4KQB03wcDlmKO\nQulMKJkgIiOrTg7W6Cy9oMiuwagBEs0CR35xgA6+Jiv6zck4sqSaGMDj6U+A\nkzq9nlh8k+1y5jqDsB4CKpe+Rkj8zGG1KbBPgdhFHBR+bpopySUolt6sGcvk\njXyjFV6y6Pq5fdFDtu5AVYg8cZwm9RPtSDnsGcB3jA06FiqBIB2SdJS6Dz2z\nYRHDYpU1ZA8gXQz5bn5ZMresgOhaNiIEkUVlr3mn6xxp/8Ec3ZepfXjr3qZL\nHuVsKvhWILh9SwZWPqTC7ZuUclE5d4/pTGj4TkZW0mALUYnPGxruu86xi1JE\nBy2i1SksRr3TheI3jf3gpjzMJx0fFm4rIYTIdrWtgH1zTxq9RAnZ4BLOnH76\n7FHx9LK+P0OzzKjHD3D7WggXGP5w7xdADCngD7rvc7V3Gx2yXwhUGU7VJ1Ov\nc2pvapBcj0Z4HV5Z4tuLijWo3o0toOx8JV/WGzby8yD9QIfTpHXPhUO+FL1v\no0VJ6idB4uhmvhDsR6/Q7XZ46RCgnuRE7JJWbNjZMN3mD3Ka+7xslrRMUoe5\ndYXeVOiJLqFbXICrBy4Wbcu7BwEkIInWEzDD13ORHtIQffjgMh1b6jCCr5cE\nKwZd\r\n=50VW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/density":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/touch-target":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.251ac04c0.0_1610481299648_0.8964563468007973","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/radio","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68926d87e6257e4b654780d78b832ed82b7d94cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.772cc1068.0.tgz","fileCount":42,"integrity":"sha512-bIDWDC3D2WCazWgqG0f0+1bLfsHNm/pnW/cJNZOyPWZPZKIlf7uqVqvmGmMZ7WBqpHE5sqByfzd7/E1ZJFaw1A==","signatures":[{"sig":"MEYCIQCAdDyrU+JC6lXDkOAzA/9O6gauBUZhTWG6QT58FOFvSQIhAM4U2nzDTT61zprCPE13kt5R7i0gNlp9gEznYwdRGPgr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4snCRA9TVsSAnZWagAAxI4QAJYKsuK9nyXPnms+TAiO\njra3/5XWBuEJwFJJE7hYDB7+AGT0exJVGy/kl6EO2AczFsoow9nxe3BYUNxm\nvVxTJzZI4C0kgy5XsMOjRfNSBjdlYtFp1b/6crEHTbrS5+HXcM4aTFJAhHsC\noEdQQNFaYzCuJaH9t2whA9hCUanOtamvAfQ15rAhBzRLqCnRM5C1RZqfCuWi\nbgc+9DfGXUSTpR/I6lJwibSEWw1DK0uKJ1Yv+dACP1ggUN5MyiQvR+NQQVVn\n5qum22rKSoW3nNqXwt0z6Wgw/02gq5exnDet/qUDxMV22FFX3Lg2lOBzqEOY\nUmN8A1u+YXBfB135Hd7ZplZ4KnTxG/xR7T/GroEt8vb/DPOoxMYjciYMDWXX\ndg/M+CsefkBxBu1+JE5iArX0IOw10oDpo7gJSeXG18j8UxKWFZNgbQE1uJMg\n+Qtg4s6VeoPY3j8Ja7B11GGB6KHB3A9WUayUcPPJrNdcOwdNGLC51yqOcs/V\nylwCBaR6f1rHT+fLwV8r+v2K/vSTx+zbsI2hf0Wj+DysCSNr95WLP2lfiFRR\n3y4KzhrWyhRpW38sKC67slJOgG/SigDwQ6imqVlFYjzTs/yLi4nYA721HBFP\ndd/H0dXjZ+GKmlL2DgUx1Vp0leBqm829ehw88/VB8ZPOH4g6qZAndvsHl+UN\no63e\r\n=g9Fb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/density":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/touch-target":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.772cc1068.0_1610582822587_0.0876526938166402","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/radio","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b0db9a8a7f7132c71e272ef8c2895f7e9b4feb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.fe13dd130.0.tgz","fileCount":42,"integrity":"sha512-yi2BYkVdy+G4w8wMTktLAH6C+dyDnBHNBfZWkYZqXJRWS30tSphP8HBgerI+OA4HaG8BKZD6M/tz3sp25ck84A==","signatures":[{"sig":"MEYCIQDqmiWtISFPSFUCJZmSbr3oQe+Ie67GHVo+gmG+JHV4aAIhAOJdzWpbSojRvw7CVSt16eJF7NlfOPZm5HdCX7grf5ye","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5n/CRA9TVsSAnZWagAAKOEP/RazaiNpogrXIWAcEQQp\nqXJ8FYo3Ti/lOFdBoLRp/Wsz3Kb1hJt2SiC2GRrf9G4KPNK4YGg+lXE7F842\nqV3PQN5K8hpzI0rgtq0D7OZFJLN1Rf7ikHLhAgYKNNgbpuUBOSw2qbhy0SVP\nuRRH61fgTFGbpTxMxwYDOirQ2e+X8U+bvTOzoaWioQ3LHMmywTyrDM6nvBFK\nMrW2vxmKwpakMa0gvYwwYG3aiAkUxNW0gS4SlnCEMUUm1qXX9VSkNX1NwPFc\niCtwtN1C89wiy693nlXWfIk80gP9nEMCO1M86vtS/RXFU+HKA4LE+Qy+AhJg\nulG1bZZGjABOc8ybxNNBKdgmCvvmOsYLgSh28GNp5tIDaWDKlO4mcMYqwy60\naLk7YUH2ya+sDVX0+obVRgQAYkAQtVn31ysX+y0EqFKWcBIHyXb2LgdCAYxH\nOKKMSrUoPFdbET06kDc2H1k7tNKqlMbDHFoSraLGhOh+0d1d5taCs8U/sr/t\nZcPk865r4RHtBTMrnBlxvXkRsz+FOq9OAg5r3YMWi6RC30r0sc1AGgnBv/hI\nxT9GDa561v9o5BtrzGBNUlWNqVkt3habkoQYzl9i8oLlMxKqktuphm30B1RM\nAfkMFmah4+O2DZSb6rvmrEpNKUBlHDVOqn7rQndcZxbGcE6JSl2VNd7HvhiN\nkL9w\r\n=kk9K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/density":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/touch-target":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.fe13dd130.0_1610586623067_0.6782201883311982","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/radio","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b288c7ad69681457e0a5a221213eda163d11225","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.c7c5da28f.0.tgz","fileCount":42,"integrity":"sha512-tgctf9ki+ntigLxk0TF41ishZiTXgANIyYDwju6n3pke0N4XTqf4/pgbKgJLLiG2OYVhxDT63k8qJjuoeHg4vw==","signatures":[{"sig":"MEUCIQD0dOb5ycRd0ThiVHwRfFPSiFxpbwJbp7bYMxAI+uF9FwIgc/bTwikOl79466IQz/ZwaEoc3yVpWJf942OzwORDTRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+RCRA9TVsSAnZWagAADBQP/1BuNXfPzZpvCLoPSy7E\nfOF9FXtACsUASUxOCEeFHcrhr6YnLQ2mZCTqx4YAf3gyyWJgfOeagQSSznBr\ngXGNG/dadvbPIfufjHFyvJUy+c9AAEC9eG8jEOQxr/eYZ7ma4fNxLG0LWBcc\nMJqi1G0bl2mY7OpLR9Wn5csogJ3BQnVQh6/fDEhwPine17gHj89Ik2EV1XZf\n67QPMZ4g9DWgMFPN52mb3Y5C3AH4qC1eMbO50kdATgwCAsG8fp2VjhF1xDPj\nxqwNBb7Wg7qw+row68Mu9kTtzolemszNys3N04u6THeVhoY0aRLi5qIsHmQx\nGdDwh/QsyTpbynJ5Zw+OFeHIVkFu986jsQ/aCZ+pyaEVPTJ2Hwk/f590Oo4a\nPN+GVkUz1EL0VHdRCq60o1ZUUMHgwQg5mv6/KYXHACc9ixOIdqfSoEF3lVWF\nPyYDJY9FZEgweLZgz5nbCUStxOohZQwf0qIEX8/O5Mnm+uU7buYjs1NGKMHA\nfSMO8ZiuY/kNfISg53JQbz4jquz6pAE9Xh0LNSbmi0z8AoHJ+9xgx+5SJkM5\nXMwnJ842Z0hlRZBqzlAVGf/YixybRvk4C7jxG0kLEGrIm55vkyqrWPgsCyQa\nDeI2V0smLfDVEGH+i734qkl8xCxLbTRRA5SFJdEVnXw7nje3IeKhRHZN6nJe\nvk54\r\n=i+/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/density":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/touch-target":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.c7c5da28f.0_1610588049107_0.7787066641150517","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/radio","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3bcad382b246c136612add9b3af925efc5816c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b2faa116a.0.tgz","fileCount":42,"integrity":"sha512-9Ax55QvbHM3HsZHGKE4UqvMbe2QxXLFti0pIaHx7SnuxtED2gWnH+sR2Jq8MCwg1dPQOzFoQvts09bCuphLtjA==","signatures":[{"sig":"MEUCIEuaOHdUUNvSQrS018y8ZNCtMZKfM0OAVO7w1eiuCX5aAiEAvLVPBz3Q0tkyQSUolaAP7UjtzrNftux8j7oo0sOeaDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJiCRA9TVsSAnZWagAAkFAP/iapG9WQvUn2c1dOPApo\n4ytzhkfXPw9wRbXUT+WHRgUwWomtEImcEN76lBYUTYwE64gbiaKRnpHeZZ+L\nyR898c8Fv6Reco2sW75P8XWpOg8j31H8iwogIFN2zH8pCWzlW/QqaU2/Yhqu\n00/5Jik69y4ZDhwaUJgqQXeojX1iej3t4WTIIZgkqzTzvflrOYLF9PADcDSF\nu91lKUimMCEPpgC8zP+Yc2Cu3qhq8U+Qy+rXH0T3o3G1fIhh/HvkVDDRE3vH\nacudawnye6MojUhjvhp6IcMu4ZV6gATem+fIAczGG0gYTgUQdHQsy3M58fae\n4wxxeV/eE2jPTOQ6DIBnCmHRMR2iE6y8oZknWq8XK9U28TVXaMBj9h6QN8bb\nAdpL2ElaYJ6diVt5hdZBd16JgTCV2kYABFHyQh8X+KWcH/zo1ARlIkMuM4h4\nee4JR9wE6GPHgs8AgHO0P1I5ZizXoe8fJG3OzbL1i5vMbURHKpdiVcMZ6BJ+\nGiFugkAkbQgO+ya4T+y3FKZnyCKq25LnRhT0cphYn1xuTwJCQQ2yQWh9SajM\n5gEB5ZpNTvabGXQ9Adbk8wJsuP+mCX0hf7ev03FNeHmFvr+b9AAxsmEOjy2Q\nqIE0/U76QT3z0IedWWxHlAs9Lr3YEFleiBg64dZYZA6u/YzECflnKypIS+Fu\n+/uO\r\n=M5d8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/density":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/touch-target":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b2faa116a.0_1611084385557_0.7733356202179926","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/radio","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974a0f9596be0d0cd1b1cf085425cf7def566849","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":42,"integrity":"sha512-ITLyenlEQL6n8wHtZlLZlgjEFSXegxvu4xaCyuMrT1NxuFaPFHd5yUtTteS6aMw0PLBCIHmktLf6AdOIpfOxlA==","signatures":[{"sig":"MEYCIQD9IpQYb1r375iIZE+XSUY29m/kzWz1GNyXgldcTeXqTwIhAJAOlsG3rIT9uRI01M52a9i/YrEhie2rfqX0WiyHSwmw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2L2CRA9TVsSAnZWagAAXSQP/Arf3TYB5YLYHJPoBU/m\nnXsj318wh9fdiy2hio7A2Sa+s7iKGhA2XNNi3W5BeFVX37OlY56AUrvbAFT7\nxIGN0gjiAxELjyXaSql3Mv7BOD8vlubg7mxHhzCqrx0ZiGyvFE8cKj6Ti6EH\nItJ23UyzLB9hZDJPKpHHyM92UeQS3sNknZ1M3QcvNpR3aE1vWTdHpZ3wILoB\nuCZyjnrTLbq+8/cL0xoZOahXuuabOEBLoqbaDA8Cc/L5kYOnG6+ec86Grl+3\nPZFxgnStcoA6jq8GczvAUF1mbsXIhv92IjNQAL5Hr6iCd+8ZKKefk8svkJWx\n4NlAKyWRrRLQTsu6UJJqBaBe4wWzbQx1ybQCG17yXF4dIQMKIZIShv5k6aOj\nxLgKLgBGkKSjlR/m1b/RCsvHyjVy5RVVwAvnW5eLYLVMpOWATopi9RSmkb9J\nSSfiyL5TzW4qozJ5wFgH1IB8sm+tun9/k7XdPo3H0DKTJnzQZTj7Z7Q6PRzJ\nTexATBK8py0uPqLd9ZfsqHcCgD5RUDjHVXj5aSsS2Bye5W6ds+oh5CCEAxRX\nnYuNSLXti/ZKLOmIGy73mDgaa+vLsDevPz/I1h3pB0i+0C0g2EncKEg9xwb2\n5dhVjsbU9TijHKXgc2NU969Sj1WwuLxWO7kPvLIF6JjYExzbcIIET5wf6UUi\n0jqY\r\n=gqSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/density":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/touch-target":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.0c95c9f7b.0_1611096822316_0.11897621262955482","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/radio","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c4b6540b068d2b6dad508efcc0fa3fa0fd4e07","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.5268222c4.0.tgz","fileCount":42,"integrity":"sha512-InTr2RVh9traEDFkcpbSGYn/Kpt+OOLgNHjkygHxsUA0o/FCFlCfPBPDSKU/wRF8KanHtxp30PgRGRd29Imf+g==","signatures":[{"sig":"MEYCIQDNotSLRGY1Yd7TLcwebSIIf4d3DamlYPZr6z4FfUQ6hQIhAPcEcytBuGXU2Kn3afXyi6fCqaDyJC4z2UW21oK4evhe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIsCRA9TVsSAnZWagAAcWgP+wW1YjThvsMhjqCmuDv+\n+TWpStY01SvRl2806JhB+hQ/OHZxWPoDaNY157YQE5faPevMyJS6LR1QFlhu\nG4Y3Ospzgmj+mcVNB09ztIjlv8vu3i+Lv1dT3/1y0RlpCm5ttGWnbDG6U9CZ\nFkn00axuKuxh/MGe8N3QPJpCLKQ3SAZdZQ8Q1Ih9dFjofU2dOn1Znrt8GTBc\nJfBeKw+l6evRA1BLqK6aOemxrfKiR/pnwkXWECsSaNMHZ9l9wsjB7x8tdVQA\nc/oZOKKQenowjQlht+PZAW7CFhbVAiTAA+D2E7Kgy678EUgJruf+dnUKsced\nUq7Wi6sjjQQVf/5lNmuGUIBMdgwIF8lnld9JiY24dm5VD+BWTFpVY5iTPZQM\nVQkg5REM0fE3NokBbP9NT+vYqG8MwdRCv5+oE4OMm5DcMuSNkaNfntRerq+F\nbckNd27P795F+iKKqv+MbC5rbfbyx5gAQuPSCEb8eWAqiwojx8XqoU1H6qmN\n/Nq5HG1bxx+Rzd19cpu1iDBVHa3BWY2rzUG3dFajc6TA6SCgNAobxB3doc3Y\ntYkvfX/pk+aDAw9YPsvsbaIN8R1FM/ZbJfrpSvjZHnjkElQmerfko+L7KI1F\nO2ssImdrMz1F28AjE04N4m0OqjS4WW3PMsbFylI+Mye8P0IzX0wT6LS+fP4y\nhI0H\r\n=84hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/density":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/touch-target":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.5268222c4.0_1611170347916_0.760443749997102","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/radio","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"249625e5c94ecc59231b821395313306aab00b2c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.2ed2d829b.0.tgz","fileCount":42,"integrity":"sha512-7ntmwxHcBWev9n8ZnjTZSI019DLUivfy0fI9/CPif7sXy6yXxjLOACsDtnud4JvPP7yrf4SGkHhIWghHznBTmA==","signatures":[{"sig":"MEUCIQC2v7cKStT+XOyoJkWvf5q3eiGIdmZe/u5LqVExj5zxxwIgZnyPRW8m/r30odzDQszQe3vBxxsw4YyO1/1NA6yx20c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfJCRA9TVsSAnZWagAAZvYP/0O6YYuZcgcc5sHc5cK1\nTgLtMHVdswyI9vej0bdGs5GjbWnQ1DGumNQGFSVHydYf+1fnTKZCDjQMuZUf\nH9mVli6I4sjce7TS29zFwdxuk/ge0hxt/tPnq1jjZekNdgH5xiWwl8Z7UJx1\neKL/UtweIiU7HBtvtGXmSycFJ7WXarYY4pt3tunrfXny+e431+F3pO3/S99P\n5wWJhgES9PKzotPi1HtXcy1Y+pNaE3rZnjKtezMk9TdTsrBaUbN8hlznZAO/\nzRfTKruhSOtOql9qYTv2ewpcVt7wo90usliN4USROUwwH0+MEjybhre43WG4\nb6TLniENaaPZfhgjLsK8lTPyvYMJLCrXX/skjLMiu50Lq5MSPvvfzXzJCxoH\n4qAzjaBBAFVuhWdryw6Tz7x/yYqwDOraqhvkteHzhJmDIB+memQDWWo470Of\nPT6buynEHoWYNoz3HhF0q9lXF3Mxhh3XzSllEhhMuDICCOtb13/Z0QQr+Hcx\neJXEidS67a4iM8j80D8QyuIq8CBscdsanAZNWDaeyrOEqr/a0XPWXE6UzkY+\nXcKpTfgODvjhNZBUDbY7hhh++Mcgy+LT92NZ6/CY3eTwyIrSE7yTJE0QCHlR\nDNo3eG1/5evGRd0XtJQkY9ymnaymhTspr95h8kQbkpeCiuahSXguGnMxXxjl\nRyJV\r\n=FKY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/density":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/touch-target":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.2ed2d829b.0_1611184072850_0.5433003737641962","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/radio","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b8af73389f46366b4c21b16a90c24a6b7591ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.df00c2b30.0.tgz","fileCount":42,"integrity":"sha512-hLVRF1jM/vgraXA2AygAIzk+cWSpG5P/kv03Ljx4eV3yxnX/peNJeNnDHocPhtfD6ejNi0s0jrW+zHzL07IHXQ==","signatures":[{"sig":"MEUCIDrfXawE+6HMQ/k2tgSphA15wAKbAug8Yq5EdS4n8MD3AiEAjvIDfBlAUZVZkev20myyDJMNF+0C0JQYDt8eJKH7V5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwDCRA9TVsSAnZWagAAq08P+gNcE8RwMiekkoJ5IhSW\n0XW/qWYJ7S2Ql6sQv1EhUpT1mTPIQGVb/R5w7T1OBxDGZ8bWsbYD6+2AiAd0\nE138pLJxgcpBZ7Nzkpr5jbYRN9vF3Q68tvj2AvQR4vZFAcb1dxNl38Cz0tuI\nSG/O6SeZe8zK4wmZwO0rJj8+jzivOMM4Xn+9s9xxuTUAy8q84OJ0C+0ib1+U\nIwKXANMDbu+bmRDsrMgyMVlfhRihVJ/ERSMFAYYaVYeyBJhzyKDHjLPF77Lw\nIyEFIA7whwXrloni3v+l/Et0W+1IPhnQfmX579y+5t/cu4spuCjBjLjEmpil\n0OomzlO8MlQUOhcndH5DgAZ0unXILwmaYn8L11lMNWxRD5eD86xo3HLvUdKT\nvtWPD/7LudgW1vYz2Eh41t65lOemoXh/z/7l5e+ooHheS37q01+rLppMokqi\nWUXtrau8vitoSLDTLzpbFS7zZ2Tum3BB7+y+fD71EDGsw0e0hDFc3AforRxm\nwi0CIPX/PJa/NvRx2/IddBRXy7cV0fDEzhtNHCVytaZiKIjt2h8NaJDZ2yj7\n1FoSO4hvV41lTvpBYp7rvi5bnMx15IXIPFJa0+wHjfcXwp7amQr4r3SlDBib\nYU1GDQRG7datmGGRuNFpIeBUD5KgjdFh3oMmGUmCIidOpCWGKJxBN5A7i8zV\nfMeF\r\n=v8Sz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/density":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/touch-target":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.df00c2b30.0_1611258882890_0.7339699113066096","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/radio","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"628bcf126c91e8599b2ff599e301fc14fbddd05f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.fd61b0476.0.tgz","fileCount":42,"integrity":"sha512-jGmKX4PVyaMLsPiy9/9JeRykPFram82mnv7mocq0b1fJ0zhA+ji9rSjbH+JJkbixTsDBpQWCja6stp0Z2m1kBQ==","signatures":[{"sig":"MEQCIFIhiM9jhYIyaRsACwonj7nYTdPzj3/o7LJcdj/4kuRLAiAJSp77P7rcxdrQwmnmQ2wKAB47kbTDzD/glZn/FInc8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd94CRA9TVsSAnZWagAAanMQAI40N5NUBJyw4s98n0/X\nCfeTa4amt20wHsR3oT++iMFQmSEHWB0lDru6YX5aihM2c7FLb35JOyOJav8f\nDqVTEO7Cw8cfkWJ3Dvz5kghiM8g26vGsBKqaqgku8eVqPhuuBZ/JCnceoESS\nrmQYYe3t3nEy733XxHwNfivZj4gtMGMFE7ZkU4b9hCDnDnWF8cTTz/aDhfhH\nbihW+5hHOJEhHM2QSxF3xSQrykoLwAjukMx3xiuBJqLWEG7SfccloUF//o7c\nr+2HRHqxUiQEAx0dsnHR95tYZ9UlCF/VtVS91xbTNaCaT67qlc64tB8uEJmG\nyzp7E2OV3A8txTsJVjXmDJdCDlwnDOPKmeTVPh9MJpQDqFoKWcpcqNMGQUW3\n2nmBpkwXOaFQ2dhbELPmmOCTEL1od8/pC30YLkigm8EBvq3pekY/WIqPeDXZ\n4aQfDO6/RdeWYnrehn/2acsx91VEkrBTZU5lv+JNsOxN9+AFUIMkUEmn9yMH\n/xRt/iQp7R97V8yJkRtK/+len4l1zXGWJQzS3meBb4TO9f269hxGTXiGTs6S\nHiGdbT6M9E/nb7FtWJ84S6liqsilWw28/2P1SmlqNbzdIjCl5cayTMlQ64Uj\n8mdeg48MQCBLytEbFhBM2ghOn9W+IdumTAyctNeOdXIqW/SLkLFHbtvwqR71\nbXhz\r\n=yXiy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/density":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/touch-target":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.fd61b0476.0_1611259768518_0.551235956652828","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/radio","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1acad18597d06b4b24cd14d378adf3a6a57a7b7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.3fb3a0265.0.tgz","fileCount":42,"integrity":"sha512-CFG23ads/QAxTOtCucNaxtsoEWBFb+/j2Cy3ngVoaZMi20Tu1wArnVYuylKpyO154Ci5DxfjBHIyCT2AChd+Jw==","signatures":[{"sig":"MEUCIDeOeOc7qyjVcBc32sgoqrOq+nAoDzNkPc690TSIhmQlAiEA2ejXQJsS1ZiQSxmh7Jnt1tlgjBl6X3sRdVGvZrfGfm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChaUCRA9TVsSAnZWagAA0I8P/0buXKf57L9PE75clDE+\n88yLsAtMBvTFh1+I+bQmEUy2JKIvyngJOepJ2AS4YCelSVOSqTYg/JRXtNRV\nVoVvUlDuWBdmfpimNFXe+RjxuzzcuTVmR03tSOpsZb9lWbB0axvDsIp/w60N\nkzMO9dPZ/t3T2gVPwDNZzGenEEhO1UMT2AolADLqqOjatCiW0iMHgFbrgJll\n3lDEsFg5PeyC8u/iLLXOiW2u27u8NmEK23wojCnxJz7Y1SigZmGcmoXjuEQl\nMQcP+JWBv8SGJkddZno68frm+b8t3O42az7C8OuzOwMnotS9T4a6BVpIkRf8\nLOKmd820sTE6MrDoHqzgI4Y0qT6oBTZYOsFRV3cg1iMlieCYXZ+YmA3Cs3fr\n7vqusy2+uUXcguieACNvsp0f7VjDlvdafsjwvbYtwBk+cV/Ju3j6/b8Veyf3\nZ8UiFaGkYp5MC1rQh8aOsaSpakSir5mdrkxUpgg7hIVMtcqv/8YKim3RGvoi\nXlM4quSG+Igw0aKYE5YHqumm3gVsiY/N7mmb/s9GjKVbeg1S4AtqOsYRrlZe\nnV2V9FF6tNIhzpDTONKipi51P3xRvJnB7ZQn8YoY8ipA6HaHQXRpvbPeU8b8\nB5wX3LioIlvNdXQWy2FuhFkMJm4XiQpSOo+KpnLePH1xviXlgJCoU8R9UaOY\nvTeH\r\n=ZvcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/density":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/touch-target":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.3fb3a0265.0_1611273875625_0.6257859287828362","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/radio","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd7cebec58f4c0144bf63488baf260efd3594ef3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.07deaec27.0.tgz","fileCount":42,"integrity":"sha512-1p9hkZisNzJ+xsJpa6L0EX6ApAL2E03TEVFbfE/0RTmgqBGIJG4HGShaC68JXnT0GwCrq2C388wbBMj0ob0gtA==","signatures":[{"sig":"MEQCIALv8tPJqvHqrwYDiFTZfBtvbdft2OMe73Fw0qL0gu3DAiB9GhrDb0c5soCOy1NHaOKWy5Sz0C3B5I20Z+mDqu2NBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOrCRA9TVsSAnZWagAAGFEP/0KJof63LCuIckPG2ua1\nDdKJqnVya6u9g00JYmA1Kw5b/5ASvAKFtmXPeSgd5YXa12UUBNshO1aK2ewu\nBee2aomnsAV39E13eAQa/OcBp9Vf5UHopW8LSa6fI7kF8tku6HMSWXCUfKmS\nVErLAVr0I5ay4eVA5sqoD6r9S0r1EGxR7MRKnZGZM61bWWaODk+0O1rZnH69\nicPNqLyadfJ6JLhDP6EDQrZ6HOG4cSxs9bbLosPPtlyVo+f/h9uNv4uqjOTK\nJv/MMXrPOqhHIohSnBFxhN+faYDJ7X0410swZsNHxL5+pvbrV44njuCl9ExD\nyahATljYmv6pPtFVuB0f8kfT6eY5P7c+NvEmsWcyTXpKeHIko9P5D83U9klH\nnVLCeF+ediligGn34jn92uWYCgvfEtfZdNmocVlLoi00+vMbhADHuTR4lhA7\nD50BVmRQQM91JQqbWP48gYRXpvkNTbbZuYbv9KNTtsSvIPAj/UnFwA6gzo6n\nsi/kmQVuK2fHJdTt+uVFgm0s7/wxZwVLdFVIe8mZ6I2ZnNkjVqvN8iJeSWlc\nV0IaPfgqd1G++4wG7dhjT9zL+l4AAmn3J3bxQc6ju84gyZ4Ng39yByv4vjPR\nLKyKAXWh0F2D9So3BNtHhT44kt0nDcqMzS/ReUa71LN9gHccMMWMR/BjgO7v\n4pkF\r\n=m0EU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/density":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/touch-target":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.07deaec27.0_1611334571378_0.7736394312787154","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/radio","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01803909ebfeffe1928c909106155fc8e4ff4ace","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.d2959b16c.0.tgz","fileCount":42,"integrity":"sha512-gqc4QC/JQFaiwyST4i1gZfb2lWOowBIVmYiZXWYnegdSxSUer3L+aqzVQx+LWLSqx0EDdJ9+dRP2WJokZcLCXA==","signatures":[{"sig":"MEUCIQCJfXYUXX0o2wAhzDwPrXkhGbj5JYkCVU0IYk5gK22qcQIgRouK9q/91VPzm9AcNXZPCOPDprv/FQhjcFMIbPNyiss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7UCRA9TVsSAnZWagAAVNsP/RspYpOlAVgznCMci4Gb\nGqbvcsz7rrmvYVoxIHvbOz3ZEIQ7zgBLSjR1rH8ApY4DBbn0JX05qi+nSM7+\ni2xYp8i11vinZ4SsSJmqHF2axctY71y7iXTkZ0NLqQkqwyvhuYPTc/fd5HLO\ntmcFT6ppcCEKrxE6UzuxyRoaoXUQjAUGd/hdGFyZpp/mZwv/vfTKP6LMxYNB\nzdCadnoivV/RyEq+ptRNSFa5AHxJVHH3k15AaPGIpLxBpCeu2oe1eVSVfJu7\nzPI1dGA52KggWxVZrG2s12vgGHhyUKDR9V2bstdMI3RKPP1usRBSq3udltx2\neN+7oxBugCQq4dbvKo1qmqoshSxMDaqGurNbRDO2kVfcw951DsLgAFd6Mj05\nuoKbZA4ATFMgx7z/8OJMKLD5AHbUDYCgVVjXQGDC5uVyA+7TnRJ8XK8wkME/\n6keRQuBYcmUaecK0+rRDwarPlsD1I8x500T4V9+OHPEWFisq0N+DScpz2ydV\nLv1y9lDTSHTgjEJucVzDCbfMe2VzLlvRmSOiP+mmCQqMQxogpnV7I79s2Lrm\n/Bqrsf/EAU7/DDXTPCqPiw3WIIfWwpoix5m3y+adh/TBcQGN8GbzWZBg2L2+\npy6EfEqm5Lu3ZzjoD3Nfwja4HfdPDNxc+TN8SlkVaFCzjOGaT+/JCOAmcr66\niD9M\r\n=E4sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/density":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/touch-target":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.d2959b16c.0_1611341523548_0.09526388997667468","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/radio","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3221536591706b8ca39d484a9f21a499cee52282","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":42,"integrity":"sha512-wTzNOqMZ1T7Ya1YIGcbiB4jvqpidGEVsV863iFKDTEAVQshlEG4hXqLapZqm6NReh/JzQo9iHjjhHbn72wcHug==","signatures":[{"sig":"MEQCIAj/6d5e5lcqUj24eFtjBWTSwCI2iGanGKncRPyTt+MQAiAU7+QaT6x7ilsc8ddQ8i+DgK9+8KAoVqMK2pt8LP2OYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1boCRA9TVsSAnZWagAAyxMP/0k3z15BJm7zL2vNF2Ki\nwPJxKq2mfohBTnYRU5d5Lb/l/nNv3DV8mtOr2BdXGYFOXdesGGNi929vU6AV\nDdE/QlqCHjazjUlDZICTRDqxSQydNFx3P5KrPxURlVtOmi6NhjLHRNIMwqnE\nhozLzqbBf3+YAGVrmL5E+6i886Z6BMkdxH0NpqRCy9WlhVqzK+B/go0TkI6w\ngclewvgQ4t2oGv8QsRnzMAL7re5D+5vQn8+wGm48SwaruZc7/CUbDtta/EtH\n4AsBdDr21CrIsJhl8u1O1qoYxXDBe5soSGYwaH3O+igQpUbsxE9voUB+9b4S\ncQBptSn5U6no5VcwCTlWeVC2CH6vPty5Cnk4OsKk74mSzFxcfNlcmlEcMEJ5\n69xTz4ic4GBtUQPoj0c099X+Vbvb4O675KywPlxpTYf87vLWxmcIuBJNdVcw\ng8+THQVGna3wqStK98nazE70X4PGG1wL0sZcE3y+ejE37AgbHiHVXH5RSHz+\n/LPMGsK3K2eUCE5Mo70vwjrBouBKKvljWbqZgoHK5qLf+ByskkRt7+Jykhn4\n0dC10l6mdJpGQ12/LApv7sE9Pf8PlyOAE1hN727ufJPcxrgUtSBmp9UvPt+S\nNl+lV8trLq7cIefO1s/J8WXc1CoHCf+QBsljNafAyWc0BNjQAS+mAg5MwOaV\nm2WJ\r\n=f6WF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/density":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/touch-target":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.75f3bfe7c.0_1611355880165_0.8402492530237362","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/radio","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7229dee1a256b44b78e480c0f8b95ff1ca7a63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":42,"integrity":"sha512-VyklRg0pVZM4oZ6ljeppIHiRVm6YENyfHHnRYcF5M4SGZ4SvWpwpj02QGjS6VbN253UpLe/3Lep19rXwMs41TQ==","signatures":[{"sig":"MEYCIQCp7Rm9xu7r3iPnf+x46mbEqnxxTEBIqX9T7r4Jmsp2CwIhAN/nYZvGLNVqKxYAApOAqhgd4RzINm/dFg20SJjaLbwC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2E+CRA9TVsSAnZWagAANicQAJ5AzfIlnzCIidw8jiw0\naAjlvVh+vbIkWzPnR2yufyhBLr6hri4z834OpzEsLUMB2sR2fd9MmMAL9siz\nrsQdOlJUUVXrUyuxvl4kkQucppKORM/qJYIICKFyNNBg5wYR/NGPW0cYSqjO\ngVAbkCcm+GxFw10apDnbbwSI/bMIJS1jDTXfFnzwaf8lK4SYDAly0Uh1CN2o\n+zxBzX/5nHJWgWxnE64RD4adF3f5fldxXkQ3wNVMuq9NC1Tyx6U1SH075guu\nX+dmk0odmOySSW/wWLqnTpwi05SyjSDbX++nvHKXcl5i5ykEdiZEq7SHA7Fm\nXRGaODF4VKOE0umrdt+HipIn6DtqGUIlR/o1p1r3Rkyr7wyz1o0r7RMTu/Rg\natJnrz4ZItiqW4GmMSPG2rEFWJ3wn20fwm5qPDXXAor2AFg9/4mFCwbQrGyb\n6ZbeL4fehPLXPPITDrvxK4S/vVtVgPZptN8ZrjsRkpnIceOL+dPg6GWVyP+8\nE8K5+HD4jSot+1XVWJvuyIZbbPtlz1+pUwNO0djGfI4K5tjbFpOLqzSHzjJh\n1AaqAgWug/kwzbypVAEL6a75pzAqxQNBi6KIK4wH2/kkpBEHa4H45BvM2dwA\n6qUpw/bMlF1MTanNG3jS3VYOZomXE2II005orgKA28U8WWecw58Cnz9t1xHh\n1Xfb\r\n=felQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/density":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/touch-target":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b9adb7a0f.0_1611358525474_0.7519736968306205","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/radio","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a56fd908d7c9880e04d2e440922d48b71c40f66","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.d29ec2862.0.tgz","fileCount":42,"integrity":"sha512-RFNLcPn4BB7EeTMDOnHZFZn1S9l32qKAv0pNGhlEKSdSpfrdpSbw1kiDnSsmPnok6ErtuFA2taU4NUkqaPutaQ==","signatures":[{"sig":"MEQCICHO/OZeTD2Gy6tePa79JIZAhM29pttplx2AdBKlrGZOAiBnUEkmZ9AXS3T4LJTuzv8Jqn6DfCSu1AMznwWkCnm6DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCICRA9TVsSAnZWagAAw2YP/iJwCM1eD5xk8qsI/u8P\nDtTvd6AmgUATu603cF8OZWyq5GhJfX0EjpoObrFi0s/GWZfAANowCiZi++sx\nYn3nfKQOD+LIZ/PK7xNj/rvWNQSW9F95NoyryTyPLbkj20bmNPFjLxHM+rL4\nII7JR02d0eE6Z8pdiVph22h/9xC07qIMKAfDkKQIcuG5CZaWPIFV3LwqpFp8\nczwwwZbKVhm5QOcnrvbY2C+lvJSHQdSb8xCPBwVoJBSob928JMJ6k/tNoaZr\n4Q7nBBVAM0kI/W/vATtaaUv0VlwMBo3AZdDaSrhPQ2+Pd+5T7EIvK5Mt2oxw\ns29Wppv3dwiZhH5btQkvdJyJsbxm5UymS7mwOmc528eu3tLoFJ4j5aFSZqJ6\nZBg1iLQhzXAuaOvClfgE3tW5f7kFctBhE905AOhnE2cwVCbvnfyetyq3lUmZ\nu062ZNft2TuIrD/DVolDcDMfsm3S7QAgS7lxS/8q02tqPORy2d8iZxPAsnTd\nUih9nechU6+d5fhqWyd01H6Y4rZHWrOplFRc7i//CZ2hocw8M2L0vGzPS8Hw\nOq3606NsThMN56js/EsWOrCJqkhDl3JZSm9iy/gwP6azFnOnqhPHoudmh8Vx\nViWilVh+i/ei24x5xhfZ4FSZYQ60ZKChGOG+PXbL8k9h5XR59u+B7qV9RLSI\nzk+T\r\n=4kSV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/density":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/touch-target":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.d29ec2862.0_1611591815775_0.16760806104858617","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/radio","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97b7fdcc6604bdf3bcd07d2046f10c20d75979f9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.96be07c68.0.tgz","fileCount":42,"integrity":"sha512-IL6RpLC4z2teurDXsg9F7kodmxCmh8/P/hZlYnltBdcbsKopmZHJFNKPpf2uBKRH5c0PhGcz0c1OAsdzbzTHGA==","signatures":[{"sig":"MEQCIE7vP4fFcJ2Fl/QBV31Ix3YhwvVwya6epAF7jDTl1zoFAiAsiF5CZqAPbRkW0NkAFKDuh6Rmv5TiNzCRQvYoH7p76g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13QCRA9TVsSAnZWagAAgfEP+weB/d3rlYv4REgiOctP\nXAF7ND7dV1905lRmP21NnPJHBaBbCjX/glU7vxMs+zyQC9aBw5sK15XiLug+\n365S0Lvs1y7qrArqYqeHCkVblWBvHQTrZJFEhXKwYbYtD2iHBd3+jbO9p2gX\nZ9l687qmd/ui9bztk7FtyQn6sUxriGKwYVjJ5b2lR+Inf0DmUly8bOSmSNe4\nihsHAUMP2XsqSrQwUurVImlKhl7ahGN88IBhP5wuBwjSocwH8tjUK5zBTkls\nihShL/53uX7jOYEWQAB+DHJcAiogINtJsEFm40NNFiX6SLOyklG1bcAXCUPQ\nKNMjun8ZOU6sz0qPYPaZrF4IDTaM+2OXMEB25PcJwRQ96gBACxxsvZs2D6MK\nXugY/m5Fy0l0l3vEV61SF6IkRqf6P8X4OguxyOODfzoq4vdsnCYfMHxbegr7\n/WLizLCGx71PlgOGMQ25ecu83yz/DT5zn4MakEBzufNf/12OPndl/8zhBE+Y\nlvfj/2sbqnVZPeAaUt5f00Qa+bTSPEaiQDYu/MDx8E+nRTPtB08Dq2oCZbja\nk2Jnx9Gnyf3zfGamh+rgV6/UpiB0i5K7/H8Xh0V1ZCjBOORuuF2/lXoug3y+\nK6rPhfIgEQ9/r/pNZ+fv2Tkqr3yh1fziQgPjNh6dEm72ZuSwjIYS/ABaaxXM\n8b5+\r\n=9VbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/density":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/touch-target":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.96be07c68.0_1611619791313_0.5048160626479423","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/radio","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5d27e9b201a6ecde1abc8484f9f248eeb0a13e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.e383944e9.0.tgz","fileCount":42,"integrity":"sha512-2U5GUgs3Wbh/x9NscQKh2M/juZmc9E65kv3/MSAiIocD3po9qxXt0M7b9YPXFT0MIJs81KWYdpTB7cpnceGEaw==","signatures":[{"sig":"MEYCIQCc8ImTrW/+o/fOH3l0feE+d/bQfiJGOEtoT59zZzbUyAIhAJGKQJRbGsaecnhnUIGc74J6yJvvU5DVmRdznx5+2fsH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QRCRA9TVsSAnZWagAA6dUP/1XOXHTaIX8ZM01cf2QZ\n3rocxqlCZF61iPV5ajRy/leXBmMszTIPgVWKKS6/4NYEb7tZAFufzLxSQUZl\nkuGhbm6Q3rtjqcbLMZatqceIEYDZhPJQpR3xxqrhk258EFmj8xqvQymrXQx2\nt0xvexcnVNmz5A5G3WwU2k98PF7WxNZBeb67m6vJF8Tt1U/t7YfDiS+2oa76\nfRQf7wG41TFzGR0QrL5LKui7f58QgEhcs9+Fssv3zKnaOY0jS4g1hpJCOObJ\nDysQ/p7BBpO16gWkiQuInN6du24bl5TMVXvREt5yxJaSsJCpAsC1x5ucyH3v\nAv8Fm82C5QkprBnzD8ySw64pbuzDSBPEXcll+eD15boZ/Jq6zqiNjiQAZ0V/\nVfWkqZRuc9zz80g0oH5T1WiBMmQWxJxhoVF7AJ+VLm2MdYZxVdovJxuLLF4L\naeAl3jFMR3z2yYsFbVW+9bBjG3pieylCEuKxujl5wIDAAO4cgcXPcXbo11GY\n+beDclTy2iIHChjFATCKjc0BDFe/hTQxK47flNIKlP9jeIqHWCKRaeg8j3LM\nWXT4VjszWTJGZ2sq7fxRiNH+Df+nw4ydPn2Og/bSk/wcowq6Uwix/ep0UTQC\nbdQxS7wfkmAxyZlMUqy/6y49y2vs7H3QaSk0GMx6GkgNA7fWsopXZQDMqvAk\nZ6CK\r\n=uICL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/density":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/touch-target":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.e383944e9.0_1611625489017_0.30717910458515796","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/radio","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131636e925a66ff2a2a641cd495ea9f7eb4e701e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.623af861e.0.tgz","fileCount":42,"integrity":"sha512-gsCzLdlaRxyBCDJtZATOvj9OyfsEWQC1gUSXOLUx1ADA2Ca9/lloN2lFxUOBqSkBQgxoIzmwxARKCGem9Yd8BA==","signatures":[{"sig":"MEQCIGPaD0SppPQJlwI6aWbNiznymHczazc6Mv5lWsNHXsOjAiBhGXWvPiCdBo4ZU6rO/i4UPkxnmOt64ldPQ7j2LLLeIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BCCRA9TVsSAnZWagAAFDcP+wTpweJOvA03iDlj0AcH\n5xf81yEikNbFK/oHw8pURAKM6aFMf16v8C7IL2ULrjHab8t2JO9kvhUOexgy\nCB9UqXOqF54wAD01zmAkGsD4obnrFepttqPPkUaN5Al/pM6STxguo3g6pkqP\npAqqLoTa0Q8oIhC6djyrRq+hhP11+Y/XyTtppYrNaSRg40cZ0he8Mb1M2uhs\nRvmAqkim1FZUe8E2ncWOze+DU4I/+K/WonzSIjqhjhBNARKWWNkPJ75mRYWb\nY5SZvQWDX4RAAlCv877NNj5tQkYH/tg1Gvz6AH3V9/E45jLKwHXhyEcwn4TF\ngE+gcy34qjC9nmeozKM6VAe4iMha4WU5NK/Utu1v6K7pvExFuKXnI4wQAsgG\nTCZrP3M66ALysBiuaDEQ+aKA0eSodt3j5Fd7Wa4d56X3//BpgWE+N6PHwXZl\n28BaS3idOkDa82lChW0LbiAXm9voOwQzzHHdJrQc2Dj3O1uSB8L2dClJ/cxG\nduqVBhp+fMe93BadlIApEUJxabrEKSR7hjhu23F7VkUvN31h5d2ux4uCHnj6\n3KVAZXT0eg7rnNS5s49ZHigHkQ0TTKmHerGuFawbSb20zmuMmS+Sx8mfQKBX\npCHjwB9u/eyDu9HwjbZLxbfsPhu5JkyH8pMTIPfCgQm44/C/sYkdBCp3j63s\n1Ycp\r\n=We4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/density":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/touch-target":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.623af861e.0_1611632705754_0.7493931496407373","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/radio","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"169baa4c107250217d57a7862455c8d98a20f305","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.6863fd43a.0.tgz","fileCount":42,"integrity":"sha512-j7cVaM5Dh6KtwAiXD9k4GjGdQebseeWUKgJEfOzVw65ExzE8SzKZx/JqOr4CLMBSfWja1pfciPcoSLmrnMU0rQ==","signatures":[{"sig":"MEUCIQCYTNEUKCeO0DxM7i4Hy6pEJS0oZjy6vrM2B1v6FGOfSwIgX1AU3I3eVjwnNGeX3ys1GigKBPFeKwn7Jsp9+I+nZmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIqSCRA9TVsSAnZWagAATpsP/jd7d+8ZI4ZH3usu+q/1\naStkEuHLTsvUaNhyIjTdUXma1XASY+Z9IfJGpXsEd7e1i0G3b/082n5Qvvzm\nxwtejN/87vJFX9yXPrGNP7JOD5sKKwZoeod8Jas38+s8ZLsWPDbqhCA/FIkF\nQImABJhOxa9VcrExuoUWWIjh35RqqF2Wj2IG8FcjPcrnLUZKQhgLt4f63Lqq\nJeou/nv4g9ZCxV3wWS/i1g1VIdJI6gr9H20MO+WtTjRKi1PcHsWKFWxEfdFu\nY2dICfW/ZWin5cKwNP5D09D2vb0DlgVLKj6MPZPULomDSy5w3viCwhnG//Qz\nmQje+98eka7i0i+6hIkUEq5sLgtNqwLoI/t+7IlzRyTxPHVnRVXqSEipO28W\nRNlXQtP3JzDGn8KmJOMT5VEpNIs2HTzTb8RobRh8qL0+iggfttuU4Hg3Wk3Y\njbUz9768BrX+R+K8ut1aijgRtlMsufeFaSNteWZ6Atcse1mdnbSx9OEenJoS\nfIAvaUakxPyEjBFg3wGFx+16j0VVu/LDI25lLYFWDodQkgBLsLPic0MIkv/6\n0FT2TosyZZaqJIc0L1OQ0pnmwM1hudiLWhi044hFf+us5+U2N2fhCAvERvLG\nN0bU0ceYRk33xoyv+PI8mthoiSlnWoNTZUVfr7nKAok1EQ5O24LuAE6I6jO/\n5xSx\r\n=QAQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/density":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/touch-target":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.6863fd43a.0_1611696786182_0.3183046829078824","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/radio","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f9ef7c1d5351206603b3bd3b37ae40fb3c5eecf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.ea55b87ca.0.tgz","fileCount":42,"integrity":"sha512-l/yXaYpn1v0wT+p1x6+oypKAeToNDdFQBWXocj+Mf5dLHd9iCwPRRQl6dGJUS1w70HIVKyCdpnacDxS63URFCA==","signatures":[{"sig":"MEYCIQC9jZC13ntEk3o8Oj7YDA1r42Unbi2z48sDJof9FEio4wIhAL10AriGaWJ/jNaq/rYWoXfasbtOOHAljTO7Ic/krstn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmnCRA9TVsSAnZWagAAstMP/1jQTJvHXhXsiy0s27gM\n10kYzrayyyIyoU9dR3xW+7XOlgTkZ2nGyObZvGItTgEKNXAprtzN/CAbP9S3\n0BFAFazMAiOzbUXs9Tq8v14RYy3E5WG8bCq9XvC89h/KWCJRBRBSNF89z5mm\n/T9L7XnKAJ6y7A0Jzvn3F3K7I8GBsV+/BRpTyGk2fqTEgabzMKcb/QafeXYH\nj0KQNTPymDCM1LSUKk9a34uDa3DpAXifPW6D0wTc/YAem5XJGyg0F57MdjRj\n971WEma51slIB1o6/SWb91t4AOm4HnVS+KUyvRYqOS+YW6Deb9OYugzmPdAB\n9PpamdOr2anTlqxf0qniLc/Cv/ReC70g24EBKtjk11rHEFthVQ/ZQ/oHHXNK\n3xXUZabGFPeOqLEsUNpzisRROtECMbqxoOI/3MWGfk58LnTBJ27MPTDXT2et\nKnwVZhC5yi1s+XgXC+K4sS+6gmdHltQ15abLS3qSZjJyY2gdtXLfxy5L6Bho\nYFeK1OeVFqImSdIXRlXSzm5iiTS12BorhcWxQ7hfh955GSQ6Zz5bjRq7FO74\ne4YaF65pXDS7cT81AziM74yUWoYoyIRlgwjagWxCUqdY4yal0NC+LdqRio7q\nR1C/wGWl4LZcJ6UTn3qRaVPvw7oI1EUnzAwqgD81XsqEX9ehIQun/a3X6hbD\nkI5l\r\n=313m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/density":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/touch-target":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.ea55b87ca.0_1611704743112_0.9234350022492666","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/radio","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ffd67e733fc4118eedece451ad4938c095765c6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.e902ff05f.0.tgz","fileCount":42,"integrity":"sha512-rK/HAEXG+fvQ/OIYhnzgH+xkW5MYkO/F4RrSA+fHUVeCGaTjkZ7QYLjfOclVnDQTmLqlGz2T0uyvd1jq143ZSg==","signatures":[{"sig":"MEUCIQCK6/GT2kmRgJiRia0QPYHYJm042z/srFYCEoOg5W40lQIgcgT53UQp/JeL253NwO+17EOO5cx+z5l4adZv9Y68Mxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3pCRA9TVsSAnZWagAAEZoP+gIqp7oDMety60qbLsUe\nma80mximBVvKx1+bHzwukwaV1mefmNZT8VIB8uQUDFRYeD/UizReKoRu4095\nUunNLEsZjDSm2uH1+AD1y8lW5tKexqMRZlWOTePOTs53Hsgi1B5KQ6sIsLXq\n4CofmU+uMyljx/7ebII5eUK5HXcNsWCBp6INOsVxsXz7CzLQDI8KKq7tvhem\nJMkD0lSB2ziTmGZ9QrpmR7giP04UEFMGzijaFKZNF1rw6FzEQh9kdhWC6NM8\nfAUSnrabr1Ygyz5mx3oiAlpm4jyhGqgUxRv6744dY8zUTj3um2I0V7uVue5w\nqiMRy66Wtqb/pKl2QSgU7Ms53SpXXWXvb99GsQMkejGhqdLIx6Dv7VoOcwhk\nvz8b3AwCmXZNnrzVuBRzusY5Lq+T/ERUQRyDEnpUHpCXDZsF1+Vmy8kdnIJe\nxS6q7md3VVv2kzQsnEObz4wIgg0OruzZ1QstX+KFYNI1mx+FLE33aS3+QRhC\nYA5Bl9+kf4ZLpCLnOhn5pz8AL4BKmWScl2bbwskQGsFgnyWRPIDMSKUr8LHt\nIypWwIcZXoUClHV8k7TbH6oj5+v8vppuFtrNHrJ1m6bBs4v/CdHGQv9TA411\no7NJY/RcpwN8EDN8r5sRJPXFvSHz4dNdOzz9wVtFrXR580qHt0WBURe8BTTp\nApDt\r\n=1Qgw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/density":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/touch-target":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.e902ff05f.0_1611705833153_0.27672039445682395","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/radio","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ec7df3f144ff4506d12d9044261db7e4bc618a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.2c9fc538a.0.tgz","fileCount":42,"integrity":"sha512-AUT0cQAEfMRoL0U2qDG3lZStQWQBSti3Q1hYclL8aiiO7e2nGmDfvXyDx/SjZO/JkicnC5dP7nnfF6YWp0XP0Q==","signatures":[{"sig":"MEQCIFZiyoIKivLKNJuxPWNNPQDnU8fksYr+oQ8VUpMycZlQAiA5vqYVfmb1GyNibA+kYgWCf3kFyYt+9BaialsERgbfNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNVCRA9TVsSAnZWagAAHYQP/RPuPGZsRF155bCX9r0L\nbS/truF4I5jIF3+rkNXmr3+lLTrMyIWSGy+n/PdgY06Sy0nUUxZP8vjL8ZWq\na2SFaBfUjK8qLSFGkwjDR5EKvQiL6NQJjdwSPQSdxSEHMiA8zb1ZNF2vh+bi\nc0++ebkCDtGdKVAYHWt5awYE4GtDPwGfVOLBhikX0JAD+urC5DRVVEMCn/ke\nWP0VLcN3st24/wn0PrEhJ4e9lxUEaL71kSEkj3HCnni8hGb4llyS8YGtZR9P\n+4qiTBEGfWuKtSR5KsifMv2VZRJTxH+pAFThOzL6OcqT5bTuBzyPkEaPfK75\n9GuunN6y8RL976m8kZBvgAqSNn/ZRNcQ2HQ1OGwM1PBIRi6Q3ZvJ5T0MofJX\nOPZWtSC7mizB6cxGBqWLwfbJVJBGsZPgYGl/uQZsxJZPqWEHnuVr9u+v9iCt\nmVARhBB1Wt9R+14wbrqeh+X+8zKD95lEdjbCWeW9+4YjQp0DScKP8O3PWw+X\np7McTLDkcIuKplOYBrh6KgmloTCgNIYvpG2lEY1Ad+BnuVvKI2MHBUAjwM1X\n2l+vxqD0BVVRlnVutBhx2Nr42H9AhpI0OSNXqrllbrSI5WMduNwaS8nHPAtS\n5EPbiDGif3seJkrR7yYnnO23R3A6OXVfyMgR9DnzrgCQN7kg8N3ICuWgXhgf\n2D1X\r\n=aPuG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/density":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/touch-target":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.2c9fc538a.0_1611707220495_0.8251426318903474","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/radio","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af049fe5fe848828956f4ecce25a1260c38362dc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":42,"integrity":"sha512-GhWzN4Piwep1KSv8TrovP7UotG7PP6425Atx0z3Chz9LWBVpTv8P23zkRUf7ibNOCjb/3xMvFRcDxjb7OCOzfA==","signatures":[{"sig":"MEUCIALpvRHcs2574pBSSdKjt/yLTMzrUsvItV7VUTEI6VcRAiEAm1xH3/naG/ILMHJQz2AUrAYPEoxksKt5J3k0zgbWNWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+3CRA9TVsSAnZWagAATNMP/3pRrTLNh73iT6D5hZ9o\nlCBiFa8wlFyfsekqhJuokM1IzzyUVUF9nXGprAkMTkt5UNU437xCIEFrk1hW\nQA7HzqK846LzJrxa0CDq4XQgt8xee5zt2w/5c6IFMAoo/S+6Hl4q/J4cy2vU\nF4Ej7/zfieoFUW3VVKMiwWTOAOMhZcp8CqMuSIhSPQ25qWpjgarVQsiLw4JN\nEaZqGokRJ6y7vSiQf2x7WUjwXs88c0bayeHR+zJlFZYscDyFwaflAawSznQz\nHwNdX/aStRs7tvM3gE1m91VaMwhudPP2Ch5OJj0EVD0+zZOy6LyN8bXcvCL0\nDuWEoFQDeDsrxww9Vureeln8B5M11iYbkn0tGg5r0kLICkJuOKcVYEgvclaG\nJ8dEevwwzxQLxUrfrtIoKBKigL9cY0LHlFrE86Qe1nN8SuGwNS2xylvlk66V\nu1zWDzP2UHYkKsXvLtbfDFaMMnMqVVFcQ1vTrRMrVqx1nuXijmz71c5GbEfQ\n57yLTUmGJLy18o1O7FStvqURR+I5hk/+nY/3adGp9+7M7GswaUI/YWV3KkPY\nNIcbUYvpCSgq2YkEPL0X2MoCn5ZI2RiwdGOvowBYpvu1zgl0/nc3Yvsu54R2\njYPYrgvPxeC7sCzb7rTJt0grwFw5RVSEcQhzDj0qwqmC4CKTRGBcKxN/yXUj\nCiGs\r\n=ibpb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/density":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/touch-target":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.6bf56aaa4.0_1611710390531_0.3465466401169637","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/radio","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e15c96d85e2731854e04b2fa4056b271e7329a3a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.994873795.0.tgz","fileCount":42,"integrity":"sha512-f5uyoREMK/B+VqK34HpmRJK/hf+0R1rhpp1+vNzqiAHdcjQb0Oh7HKMWulCudetBoR9oUOizikHmREbS5txwfw==","signatures":[{"sig":"MEUCIQCaMm3Qo5BnC+wDOdLwRzblSxftbdPDrgj480vWEwrp3gIgd/MJFfHmzNFElo/N7xqQVVKqMVSSMRV3Z5uv4tUPl5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3cCRA9TVsSAnZWagAAfZYP/AsbMa7l5VNUxqjjhvLN\nWmEnPIFR7egDTlAS1STJ42bz0YsgA/KcXiUHhNsCjPqzrT5zz5PeGrNUBnnC\nv0I6GlcotqX56brE88u2GO8Hqrjd+V2SpBzWrB6yY5LzyZ8km+IF2YB3eOuX\nmfWZcgyAJn8heI+33ZRN0629gr4wOl4yrqpIScCRv1badggg3oLIdy6h/9fE\nV/c7F9BVu35DOr0HYMMiIA+dhN17LBFfWCRykqB1cEHNVLpJOV9EDCriahYw\nsRVPBQG7mkPAnZlRP3UkDWDO/cCd1//Z55dh9F6cviwSMTZpAAoFGccT36Es\nvQMBhYLrzX1yKcFgaAR4ryhNziE7zvkNDcluOCGXgwtQUv6SpmVKr8DOiKL3\nsNonOH4PUmc+AiwaXtub0mS0CyDu2gddc3Xfl5xgNaCDplKwSzeivwz+4OLO\n6/fFSkXnlxIMujCI5UQd6O+MuD/rtmEhgiKArgJWk4H8N1DE+QWldMOL0UwK\nQn+uzuqjkxbvCKb353j8tyGCtwgJSUpw8ZR2CuL2fVDoN0NdQ8r8DVDmsr/m\n/FLM7BDtO3Y3DRf36ctjCwFMIaPLF+wM+KSg9e66vNZc+ax9B1X5DxQ8I+ng\nWJIpIF9RbiJTtsTLKsS3MSU+oxg99m0+G1lH7P33BAkLy8VHcWL+PbrCrr77\nLlJa\r\n=hR35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/density":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/touch-target":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.994873795.0_1611759067869_0.1533491670880469","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/radio","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f1d459837d4b2a68d64e00ed540526c02258384","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.96878e1d0.0.tgz","fileCount":42,"integrity":"sha512-465SiJqG06MagH+1IjdIDUDdHuyd6wwYuvWqTSA32NzzKLMDCRPlbM0m/6OfmJdYIW6kdBg8Bju01duWf9S23w==","signatures":[{"sig":"MEUCIQChs7jlmHYCxhdY0fSRwmA5EZvjK87C1J5Q4stx2V9bWAIgDXdaeq02eJvL5oFjF63ExWHnuiaS7s7kxRLsSUrUd+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqbCRA9TVsSAnZWagAAT30P/jMSgxej2UjGowQaVHwV\nBHWZ2CVpEHW03hRmKqUbHvMrFjjpJqtpx0pSMVgkB+9yt072bGk7rI7/Rv6E\nWbBxbljbd7HJ0NF4Wt64Q0QzEKBag2LRRZ0DlPjPIJsoBTPo+01hUn+DzLne\nE9CwiwS2FD1TPpwU1PKwbHmQMiZCiMvFHhUaw+b0IFixVRyWrfeXSzbqwrCC\nhasg+DZhYLHQQQ474kML3XAr1aIVs7phbdRhrXWdvahtP1+HYbIF81370s9Q\n5Qa4sFFRHcnzYp95fx52mlWBiYCvxsqYClmrWR5Asc75GitTNAyoAE5m92pU\no6Tvz/vcVfXf3lH1digRH+aJSfl7yGnj5CPcerHl/X0BqOgsidVbLexniOx0\npqGhqjzZpR1pbwgkRrQY8EfzVoUkaMF0pQpo88byssKzLtvYybaHL/E1nJ7R\npzLbAdRTzR/fX6lqCR5fKs8KNdpyp34IDjgAfSrbqqWAvik1P2lTon7YtXUx\nZhqo/UPe3NeTfIbNr42s6Gb6qGX0aOb1E3V27yEWs/FQ3ivXhByOgkLYOlBd\nZ9w5HO2Pktx7kAKE8gO+vQbXezzrYfS/0SuevFWZxCuag02F5e+LnFWyUpWz\nhHWyuT0akLdPsI9BBIWZG467uPQTDh8pfgr6MfwzyueB+Ygp2zRlS6yeUhDs\niuBV\r\n=ccfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/density":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/touch-target":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.96878e1d0.0_1611770522598_0.9652781098083614","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/radio","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3199b75b4f453465c5c5a4131a9f8a5c83652f3b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.3c117cdcc.0.tgz","fileCount":42,"integrity":"sha512-zwXS5UUz+Jk0aqh7AuKSdeU/kVpW9fo3CfIHbUT6zRQqf9YH8ad4k+qhiKQ5pecQEfL8V3EttqhuLUmPyX/WuQ==","signatures":[{"sig":"MEYCIQCCz0ehYY8ptxFfedv34eSiVXRQBlz+Lq0tAE7UgBRgFAIhAJbVLrdAUFSFsiQh72J8qZmMBpY7ZpiurozjuTE8pAYo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGnCRA9TVsSAnZWagAAmbIP/iChwW1cQQzGQ7jSCb0F\niZflNdQLA/Erfw7/ZMAn+UfqE4Vhkntvn+MfGoOA4uZ0UYf9ZrJaoGmT15Ng\njovEtB6i8uCYlyfqvr5J823+1MbL7/u1Kd1nuSq5zcNFioXxYv+3gD5NmWEP\n56pIFIDcu584dnSakj2hxauDTeTaYuiReupc3PCG1X0tSlOIndoHczyUCylv\nMGFx0kynLdRMtNSFlaUNq9skIlEu7jciyZfM8GaXBSBBbKUO5i5izkLf0E6e\nm7qmeAbMteBCOTTh4DTEGVlnxpLDqhZUiAkL4UyCY3fWRo5Qa6q1XXop9m6y\nzVnI6HK/TrJTfJA48DRQiV4GC4ThH3YQeRXBIrAwlGCFkmniOdnapU7fu3vM\nhPsTGbd8V1L6igAS98EfusOx0Ey6opVHgpYl5/cUBKH8lgW4j8tBbJi1OHLX\nahNXp8hzzHB1ok7gba0UrSHP/QPK95tFa9c7nQc/mBNh8X5FgAQ2WA2nuywI\nhZSiIW4m//HmRsJZeznjSzZBbV2BKwZyCEE21njO7S0ODUSjizygk4/O5GEr\nX6JlOQhkBHHgSX3oio75k4rD9KkcNzU601WNiObLFkXgG0s50AaeD6vtZcFW\n7pFt0M9qljL8IJUod9wq0Jkp6iAO0/5UQXNydkY9ZCRV1D983BhhwM5Shu0L\ntRyD\r\n=QPUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/density":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/touch-target":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.3c117cdcc.0_1611772326767_0.8236209342518173","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/radio","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf8a771020ae2a9ef8bfe71413a83a558d8732d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.b411e7033.0.tgz","fileCount":42,"integrity":"sha512-qk8RuArOMQonKrpIobHtS67p9ib2Hh187N9MGl/WcuNXBTVytfSOqxv27qUQooA4q9nGP/s5Rl4q6VhJ3R4f1w==","signatures":[{"sig":"MEYCIQDRw9RmEF1Ba9OaCh9wMWtKzGYSRwMF1f5FWyCjPB5gDgIhAKf6cg1Xw/xu1arLXebsO1JnfP6wU1q/WV83Y1DyghRv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeM7CRA9TVsSAnZWagAAh/cQAIXCRW3CPnWIVbjapI5H\nUZWM1OEsSpFp8CocZmvcZTF2y/DMV3qBizHqZkj6pcDUn84hILaLLbSFpvmz\nfqGHKHfhENSa7BkCe4qpnVLTn99KZNvPcj/NaPxId/1+4z/aVZgch+XZ/G/A\nKKXaAgDtYWB6vhybwGJbWqetIew2su45g9fsdpvCa9x0VVpg4VWbLYB4YIue\nkfT4iSSqXsPhAJOReWsSkC7/CS0x32EZpm1Pf01aPxvyLNnOz37a8Yd25LPj\nsTW2E5I5RsQ7jW8+q8x2hgIKA3H34QrJOj+/eLhXNbPEqVRn/y4VCeta/Ip0\nAh8sR7lhhdWrxbUYA4JzaVXPfsQLrXFtBIejIc9wCQQazzF/ZOQ3Fkq8lDEP\n+Z2l8p61kdpI3NPFb+x7Ez89hG7w8EgYpWljoCIy8w+kt47wx1JSo2/VHeOD\nNkPXIe9sy3euS/cwbkSV/jcY6M/YNWE6Fi/YNIG5+eVBgW5+I5UxIIzxRgUc\nYQYQL9L/gWfvLIuqBNOwhuvFqKIw85qTiYNqkuJwo8AUBgrIR5s7RuyXDo5w\nt6gzzylEhGq1K5WYzNPmCFpF8ZlXorr9mCbfXDA2jUOznRoZJChT6bBN1AjX\ng9Bd/duEKSIkoLdQVHV1fsNiTdeO571kzvQXRYynD3U4YXKMPHIgMO4xsvQC\n7Dnw\r\n=PZz3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/density":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/touch-target":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.b411e7033.0_1611785018858_0.219173566786955","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/radio","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b495a8c78a49947aebe26db5e0ae7c6a2abeed27","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":42,"integrity":"sha512-Vwn1C8f6b9oR+DY83Hor8cz3Ro+cprnFanpqfAFv+6kEuDHAbALsyAzy22Oc09UTAAzhtRP/x6M3XR0cs80tgg==","signatures":[{"sig":"MEQCIC5dcuTyDlwODZw4FggWdCeLPo1CbXb5sxyfXnqml2iwAiAajlWVgLWosVSeDcI9GLKf0QeFRXr502MqBtA9/HhKdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfE2CRA9TVsSAnZWagAAyUUP/iZd3Vm8mshoqQbQ1OzW\nbqML3l9ryhnSdkoDRdg2Hr1sG41wz10ZAfUDdGd34CnB0fg2bod3bfQdnX4P\n1e6Rs+C4EjifsBHb3O0C0MaulmLF7AZBi5GTBm3tpOigPzUz0bMgg85Y+qVT\nJbgB2899+w82k5eqcthhTRasJHkhCtHI1JFlmvG82TtNZHjhSppFoUvAUIxD\n6Ce11flvQvcqmE1iIb2M3guuqAtOxvf/SrKt67SbpiCn7lI7fqk26/k4JGXU\nMr7teYsYjP1FyUu5FTjmEWFTOstzGjHKKglIxJBqjj5DNDOgsLLN24A/Obir\n+3Nu94QmzcCXp3GEq4ywnLlIR4sGV1Q0G/8EevuyqeFfBbzTYPNAGVDUAOYq\nhAgucP1c7EBJLt5XmOWc4evD/bsiwJ6/SMRyuQ5fj7khgoJIQEVkNqtHTGDD\nR8vOYkDjVB/a3RhLftXNZcj7FQz9Ob7uqN0yYCp/mzaxavR0uTt1OUVvY/bF\n1IVt5upyYOcmfkxTWCAafZAYaK+K8qT5sRPK385djLBLgFZKXHMcv1Fmdlqt\nxElpJzCZF4TJadIdVncaN8obHg31IUy7g1qXLFkAz3RzO2AoMn3Hp3OND9GS\nkiywZNI/FoOOTTeQHdyAQGZdgkiOtC+YJh0bLWqCoMKmixcsDRS4D7/NUgAD\nvNyA\r\n=ey9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/density":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/touch-target":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.a9ac16b4a.0_1611788597897_0.422737492587675","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/radio","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ae5e671d2b3ed191492415b19da34ff0082af5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.fec7b42ca.0.tgz","fileCount":42,"integrity":"sha512-6TAt5rMEKZk7aXL+y8XMdKkpJJagClXt/Mkcn4brgIN/sSZiGDWFHhoNxYmBkDUZ5PPKijDN014nuE6E46okdw==","signatures":[{"sig":"MEQCIHlKjJ755zTk4Y7rXCzGzU4Kzz7qcsuul+O3dhdL6BMbAiAG6VoOaIBDpV1/Q9plQ9K/XSh+5C0vzUlzknU390SBjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0TCRA9TVsSAnZWagAAQXkQAI8DOp3JxC1hszUli78T\nLcTx0m0lm/W01tDgdaQuVlgng1jA/LO/wXKWtyHUpOw1Ho9JKwCwsBVCarhr\nPzSCQOZ82RRhFERkSznJBFF6yguiRSCH1g2QJ42C3iPbqEztJqS47whZFaVs\ndjdam8Z25lKDZXYCh9rUAaEg3SVjdIVnqC0w5229UHVyJlNH4RsLN3PwcN8b\n1fux9qIobpWoxXbdXNKtY8XsCEMxRlAA4/1cZjAzKcN567jwpQ3ov7Z/oKai\n8aU2jBpWpMogbEaPxUQbFSrNakP9zQtBrC3tSsvJbdOwB/+2jWLFO08I/T54\nPJ9gIJS4BzvTEQkRBFNZ/xDrKVfhhuP5U9UdsJKYhq8EzTsWY+6Zea7nVpuI\n40o3WvFZDtZxpBYpVov7O7ITnS5nIJDpyPThWguieYQqqULnZq+i7pDhCMaa\nAcVULXt8RzwPIUkdIPaHOC5D2ryoK1xhPGn3p7ul2u+fT+Uc4UguuGHl9qlt\nVmXFgfKx50dfOE1mE4KFMYCpBdcSYys0K9ghfP1fZP4LaAHQfKmsqpNR8/2X\n5mhuG9VwV12Rq3yoIfzdzJL/SMnbhRzfGySxcX/nCXxhmNL0YLFWteREyhZa\n5Zk4wTGUl2jZoaQBB74wreYDTqNvbg2gPOsOfxGL4jc30KPifK0x/vBJpTfo\nNCWh\r\n=lUHe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/density":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/touch-target":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.fec7b42ca.0_1611861267417_0.006928338850548332","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/radio","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d13e4c90fc2b4ce5f406344f938a9f8fcbbee42","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.8e66dbfee.0.tgz","fileCount":42,"integrity":"sha512-jy+qvVRCuXROcqr3mpVxKM7WM74KJCBfY7SM1lM4EpO+9LVDGk50DZhWHq/MMTW9dqPqTrGY0h4THQfudbxasA==","signatures":[{"sig":"MEUCIQCpCJx027eM3GFKcjPpgSNLNknkPcsveffnTbVXf4y3RgIgFxVeAlIq4xoduTFPG/x5ANJSPV/STd6myzza6lv0RSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIyvCRA9TVsSAnZWagAAULQQAKJl3cMX4dHelMT7Loov\n1NEfkOi6RfEpqYvsRq8cBWuscqXq2OrqL4uShF1fggAbibMMGL7k/EGGr3bi\nst6emN7mXN+xnYmIoyN+L+gkjoogypkW6gGqGt06nPPHmu7rM+ig9HtRFv2h\nK7avC9mjVsXIEUfmanxzjPyuc1s/g0N++s8qJs8BzyFcIDwkfAYz6zOwoJmi\noer+l+pS7tbqPPlks45JZY/QIY4QeRUf2xzUnFn63HoDqO5tBlnWKsQseoD3\nb6XhXxg/3CHinCuJCk/js5Vq6tec4eSk2xByT3ojHq5qQjbG6o7WGU3kpAuu\n/R1lRiJ0d4tw5u4a96ftu1JeOtiBI9NTfm7xCjNI/DVC8hobQC6AjIzFAc0z\njHkIiB6qzxlU2UjNEYmTGt4KCA9d+we1ZoUddRuSeU3CMv1cBgdCpgqBqO+m\n2J8LGA06G1q+/wdm07rczyu6FQWr1JpJTB7fRS95qeZLujrraA6iUvASr3Ic\nKaBNHytHr6Jwyyxiu2j0fqZsHCejY6QCek/dUsAxnzkgrVVbXZax5tKr3R6H\nu7EC4QmDEJqlMTOG8Zs1wT+k1Wmo8Vh4AIIi+LSEPbMaPO4gsM3S4FUfW2cN\nSgY31KdRE0HMzgMaZbDfB8eG2wRdHJtzaSwbm61ErhmLo1P+D3UQaJJ81HGN\nkAtN\r\n=6BRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/density":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/touch-target":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.8e66dbfee.0_1612221614354_0.9783891415417827","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/radio","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f413edb0a673f2af07d9f2b80a1aa5d969eb5b5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.637d15da6.0.tgz","fileCount":42,"integrity":"sha512-8PrRVTKtFNhgPnPFAgBqOacZqiBxeHbOpyqznDhocJkMy4clPyQTg4Hpsi++Vna1ZKZFGXidbAuDs+WZZg67uw==","signatures":[{"sig":"MEYCIQCFOK+8+1Th2ou2/h8VaTz2i2Wcod1e/uNDrWkOmZ9uqAIhAIi3rnmS7O3U4d9jOzjH/dWy7oXfzU1HEguP1+XcnjnE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6gCRA9TVsSAnZWagAA6YcP+QG8CnXKJtJlnbHqVrmw\n41NrdofXzIuhuYF4CCl91D+F/1RMWQIzM48gT/jVnp82DK9rw4yyHjlrwmHS\nNKKUyVHxCUMXLn9JbPg6TqjfzoufFvGra22aRGLc2ysZEPUd861uQBKDZpJQ\nBHFvQsd/9mtPOPIv+mLYb39Do6dK0w9Ky8sd4GTs8zHGKQQ/fV3TNC1zAcNP\nn0sQgswfW52x/GysKNy1VHT3WbRs37cOr5VJDinFMRuTWiZQJaVkHIQC+i3D\nDssyuutnWwIen+OhdF/l/0f/+hzybmDz9yhcNBS9GkW90U91Jf2DuLWGZN7Z\nhAspd3ecqH3kaOdhhkRI/MxOCZckq6yq5js5l9Z25GDKCIcFztKqY4e6Nk3V\ny5fviekdQJTJKAljysoIAjofFF/XUuND3oOkC3AvLXrgYRBobJom3933wKby\nimaLLg7sBCV9+oGB8vo/GDYoIP3BYonR2oyR+DchV5wLSntRcpbWP626jBrI\nYX8vQdW1IZzRpsal3p/KXe4hWIOJklsSUP+DbzLMvSLUFT5ZNpRnm1KtsaZ3\nUAcdgrMwfw5UDk7Nl1dhuDnV+KEYaD89skgTpxA4eDv3Jjl5nGn145gdwskq\nsVWuFvyWxyi5ZLTwNCeLywhQcZotiVpjanAZyat+gLtez2Fin2/CY6QCBOGD\nmWOG\r\n=Ykfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/density":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/touch-target":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.637d15da6.0_1612291744307_0.6515099128828026","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/radio","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d5e436f58e5602b0ea6419934c1bce64f4a88c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.fb793939e.0.tgz","fileCount":42,"integrity":"sha512-lodrROQ46zjEye/M7gm7o0+YbVIChDkgpeMrkUyC4MjQe/Dm/fkusgIqeuhpRenEG11tBPJJcipxdsBCsvDwVg==","signatures":[{"sig":"MEUCIBTvcifAEWgMuduK25ZDm9wAkGmJz42bxjBIIvgAOkopAiEA57uwPXol3p5/Nl02mT5eLmhdNsDZlYFCcwbp0R62MRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOJCRA9TVsSAnZWagAAalwP/2Z4cz48Shn6yLqsXpqE\nAPIz8oxbHKrk64RWUquFxffhSjSn/KSy3Ub2df//2X6MznhYRFDxhjitqwm5\n4VdbN9WLFGoKXxgXJ48v4BBH5ZlrlRnPOfW9CNx67CmQE/ak/C4ZBASV2xtz\nnONJ2U9H34mtpKu/yxRaDT3oTig7vGby1M+494EGF6Tj902dKNRz5uPwkSUL\nm/pNQK3Z8gGZiwIcJ5j9zS2jicSeuqIqtunQmxxEVqt5hiV+qMYscTXctZgL\nxQHeorADZiEMNE663+I0VXVXjPdRTli1MkZtL4N0kJm/zevJivSmnuULSKUZ\n113ETjwua/vvfDKWlPSWui2X0WhwE/EPv4+QarGheESvpodBkpvSpTaqefAB\n6p8qlegS+l3qG3r34ZHuWG2RQISbHQFZeTT6Xytxx/73+Pb1DGTXuEydBwJM\ntmurJErZusaPvkxBQGT1hDu1k9oi7eck8RAwBMQ7vijDQBlJE0n3Z1zhD4wW\n8yQuOxUDLUaZqyhCVk1BnYVYk9dhNxiBpjU4ZdmGOAKkIosXHPCjGg0xP8Cd\nTBJXZay2cMNTKog/Zru7crubhvMW6Ms4oFiFrIi0Sr9qvcmLY2WT5j1Q24H0\nX2EoqWUvXJVDDFx/6XSigGzwFNsIa59un27Dkw1RtdjSXZV21roNsmypbFkY\n8jRw\r\n=rOyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/density":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/touch-target":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.fb793939e.0_1612309384851_0.8967241778086561","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/radio","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8058452b32cc361bd18af9271b1c12dfd04bb0a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.15a4d40dd.0.tgz","fileCount":42,"integrity":"sha512-wAZO6S4E2DIj65b6BoXOBAeIcbuTNP8cniUs812xDQZzZRof6NDP1AZpF0eJjaThKniNrcXHhkjt5Vvjd9kkMg==","signatures":[{"sig":"MEUCIQC1UrcwN8P+iHY6LvrpYWVFVz+jVz7BPX4K1ffDvFZncQIgQdUV4oYSW+qNNweTylJp/i518Y4rLybVeyTs9fdGGM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgfuCRA9TVsSAnZWagAA5fAP/jP0MCj5H8rox5IQGwOm\nJMWcMDwvkWIvyKxoTwO4n5dWWSNB197Sg7ZiS1xuhXkHvk5ifb9AusoW9vhQ\njKnt5aRcDMW7UKZPc8K+in5FjMXMG+qUXa9zGdUobDo4Lx+1HqkH27H8GPSv\ngol6VTt7XHfyjGM+9bOwVz95RDWynCBxaU7x0Ky0sihKG+SnAH6S+YpdA/Yq\nR6NwNDZMgpAVx9Q9dgvR+8/xPjQeMWx3e/CgrOvESqk7ulFCQe0ZZDNtrdaN\nYAeNrvt6Y5uhooo3D6foULId/W77RQa1p07TW3PlzuHwQ3AECxFeAvOD22tN\nlaOf7ul9egat59o0cRR5Yy9UhmnkWiMVjKzoCZUZAsOho1W0VvN3CSKD2P8N\nRe/t0jzmTh/7czf14gEzw84ybn+fPzAEzQ/pNfLMBk1JFcmIIoySOeHxxFAL\nRPM8cPCOcDuVx33/D/qiEuSFDcF4AC8u1Trbg7VrDN8hJ4l518WK434eWCYv\nganTp/ABBg0VxkaGC0OuPOmTIv7Z6NyD8bPs0rkbFgi6DODcE5wMpL2M3qGQ\nedkKGC37I9zByeF0wCVv6nzSPLjUZJ5LqzHmvSiqq/Q9Ofovw9dIIHuUbBPH\nZpstfvuM9eWtWx+dHSULnD01wXsKZD+nV49v4heUeqleRxjWG1VA8Yy8pb7p\ntewY\r\n=HXt3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/density":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/touch-target":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.15a4d40dd.0_1612318702280_0.16815207510973695","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/radio","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f8240e6a2c1e4a000e3464af768b11965d89959","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.7a003acf0.0.tgz","fileCount":42,"integrity":"sha512-KpHdwbnz1KAkA9Ym2KQxbGTbDeaiVtlO7LzpCRslC1H56w35YvP5AFUDFPa1Ho+iti3pHhSGBhSuptsZwQXlgQ==","signatures":[{"sig":"MEYCIQDxbj4qHzAuFv1KYLIIXrJkaJ3pQ+zBjYMCb4ynh/+2OAIhAIlLfW2hBCZQsRWngwCPwx08a1oourVwOMxABQEo3zyz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10NCRA9TVsSAnZWagAACG0P/RIWWyJ8exhohMKWL4ca\nTq4kjxCESge++8Ap241LQ+2y5JqltueKmM8+/D3TNdW1KIDgddcUa9PUAV69\nRxgdk2wJ/LUkNKnSAyuoVDO2b5i8e4zTSNS8pnfi/mGsadxf1s2xqSD69wQ6\nZte11SPdai8Y10eVDVmDAMqjd1fCpNV1G3WmzZGxe46or95kEaP0YclgRobC\n8EZwiFR/YZaIunJ6NMSC37NItaWoPjH+gLuQa35N58wIb1oLnIfsehENe2em\noVBcy4H312fmMLTxA8LBETbA4VDgRP4NDRHVhiMdAhMUvt2oaJN8LgWknEMv\nwg8cZb90x60cqKRsgJLB0NOMLqzbYI0aEz9/bh+bZxOup08l+ekAX5+62kxR\nZu1qk9CsUrOA7LMT4kTPdFgx6/xeaMp9DEjiVA3Cb97FfLsCq2u8Ew2kGVub\n12qRJJMjiHdgNVu01b3mS+NCh2t9uH37dz6A862x/uvzE8WXkpY3KQnafgXk\nKVIKAUNDs8ydYZd+WrOFVrE9ytd9/mQ+OPf8WdxQm+PrrVsmNsLQ7fR58Oo7\nWfLkSpZ9tOYfaQGN1nctI1WD58rslGO0oxYTj2OZPPLMW3S2/4M6MbAbmTMD\nIR0cJBYxKfQ45xjT8P08BndB/Ht6myHXXGLyi/uIuBzDzE9NCN7vamXSQndB\noxa4\r\n=j4aH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/density":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/touch-target":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.7a003acf0.0_1612406028998_0.698711797086049","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/radio","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b4a17aef4d8fbf79ab5a9d2444f7a638036afea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.05f249666.0.tgz","fileCount":42,"integrity":"sha512-ZEzLs1fhM7he5qppXKFG9+/1TOi0dvYfotkVYfzh112TCiZzEEfcyLsxZ8MM/fKmELtwddCHTMg0XZir+h9Ztw==","signatures":[{"sig":"MEUCIDCtuBNvH/SNmnkpnnCn7PIO+iXrHSMZt/awJLCrwfkbAiEAhsxVt5fK/cFRNh/0yFQ+1UFdp/S1Lv/kH1cUonLVYIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPICRA9TVsSAnZWagAAz0oP/0St7TbKqXR63y8MZWom\nw+9Kq8L/7KXL/BReDigJD4goH9oCxy2t6KJYI8egjZMJW1h1Tfugj8EYPv5p\nZ1YbntxTkAhRMzCF8JIUmHsqVO5t+2QSDxJdh+ds2yP9bgD1xDb6z3ZWkNT3\nEXUP2KSiLrTHKiO8eBEBOINSieFEC56l7JV67TgLqqhtFaqJqfLGlopFQ3cc\n4meE9Nale2nHO0sk0lwSwvEIl28DWJS2Xh0hkSCCQ9dQkOs/s0FK2F5IonCt\nhJnjiin2FRBYoq5akDyA7OJtT2iRZp09a7gMLw2s1zlZ/yabECPGvfKxkzNq\nIcZIZM4PJsgUBcBfJlkZolmSPkPMO93D3yTxXx7Q5efSxgIFVk0gIca3eCnS\n3otyoW/8wTvCHU5XY6xNMvBW2peNzklLaa1vIgGjg9FTajaBb+hLFh5cKEGB\nmvVsCyH+o6h0N5OJZ+qmZ0gsnhYHbCKCxN4VlkFW+LjEr8iqzwTVbfj0IRg8\nA0b2UZXHAAQYhUky1T9Ts07dFylEwXFtxa/FPFGQUYtuykjaqnHMA4UOtrAr\n34OY0yNvuywIH/sQbvZPfDoVGn33nPME9OPqrMSdKoZzXApgsgopyDkpk4SY\npGH+1an/Q34dHQcqrPlQjKaPp4sJgTZbwSftqC5bL8ihpX6S3AUSKUINzpkg\ncXwo\r\n=nWef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/density":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/touch-target":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.05f249666.0_1612460999707_0.21689886493746524","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/radio","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91d62199ca29ed5f3a6d199969eb748e9d49593","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.1a3a39629.0.tgz","fileCount":42,"integrity":"sha512-TNfcRHOBi3xKVdQi9RH4Z6GyxF7/NphCJwU9n0aBT9tmdCygROcUjhjFybP5WLJbkRzDFkErXAIRyiZiwQIdPA==","signatures":[{"sig":"MEYCIQCJBOv9+5MKQ+yfmNydjV8QXnj7ixd8u8oUR5yYnZZNUQIhAN+cdYo+5pgCGmagWpm7CXgXZbgcV1OvMqjJEYAqzbRT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEAwCRA9TVsSAnZWagAA8DkQAJEbMkf2Ob+70bd8vetP\nCj5wjc8VmJi+id6AiYd8nJR0CgJ0akz1+d8THLAo7q8rfLEinGOr7QX50eUN\nT7hbaQq4VtWFU/8a9bPuPR/wJPhR8kU91Hi6dMuDwAJUxR2PmouFig9O4Sju\nTJe2s+xEGm03tozfRCkLnT11x+GdqMzHo6/EqvIAhD5tdNWNLob2YqC+1ee9\nQjjGf5ZJoorNruez58ZDT0oRA+U3Y62YOg2vfxfhsWy1b4jkHV7KjKsUc8f7\nx94o1wFFiXaK5lRPNvcwQen7WoeZa/Zkn2jBdtRarCsoGZ6lKJdpojf0lShM\n3rMx7CsMaskj5oa07urGm7TS3H1VuDqPv8pS7yV05UzCCtbYNqbR6hH/UPie\nOpIyTnyEvDyY2XwUVl770jQ5/sXjCkjFVNyLsDdMtubLdoGKbVfB52UysCSW\nMB/eiNuaXsKX//aGDaR9nS/IRy45lvzIWl5vAEWaxIe4Ua5+rQ6fjVtIg/tn\nec1+EahmmWLiUxtT7ntjnZrjJXsvlK1UA+zxUBuFv0IBl9s+AA9poL6Wnhv+\nJkGuouOt9xRKQenxJNhj0Z0o315pFw4v2OtEk6OQoTvaHuUNsZsqtL4iR0c0\nQRJ0s6di+3mA9VQj9ulX27ScUhfsrGCgUwf7pURFLknS5ehr7RVTHAzO/Cdx\ndWW+\r\n=SMR6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/density":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/touch-target":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.1a3a39629.0_1612464175469_0.1812097866094735","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/radio","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05e398c60c403a24833cf13bd26b0ace8362d7a0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":42,"integrity":"sha512-/mxUaWcCNGULhjVVZ71bSsi9tnGBOsOPP33yNH3gwGSYa7LfJK+Kf/Xb35yiSYEUa/bVtxpwr8kuNNbE4xaZeQ==","signatures":[{"sig":"MEYCIQDVOxGRFx1uaD8yDjHvATfWc52EbGSSwJPjVUQHFzL1NAIhAJtIdze2Fr/wjWfGGXzRe8oTxEW+44T4WhMQenQmufnS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZ9CRA9TVsSAnZWagAAzcAP/3Imd39vs8oAljmtCZ7X\n3pdnjr6gTlyXzdC0UDOBDncsKeevlX/josKAj/Zpg8vn39Lqydz1WkWhQjRj\nDlvZ8PgS5u4AmJTvjPWDCZTSZc85uWwe05AfwkiZJtZFARRGqB3anaZnjFou\n3kLWrRMBR9TwfvdmKGjep3Pzx/GaMn2t/0ijCFi8wjySw1aS0GGKDP55199F\nb8xFAMDoUwcUjc+KvQ/2bMwr3BTeeWdS7IhSUKrNGjJEzHWElSNJB8iUBlMx\nOq6h6HuuY6W3d/8xtiHakJyZb7ugTSBs3ikgs5zqXglRBY9D7chQCXVO1ZA7\n15lk3fQrI3znHmAYMrXlyjAv1rJbPeL0H+idJzsoyKChisfbYpBnSXOjG4aj\n872gepRZJme16RmR8RnrDKjoUItr6sjOlcKiWksxodDvGYMRRxn6Yy7CZG2q\nZU0LEGoujoYkRjeAJXg7Au48TSRpFmj+MzmbnS41Tl6STl0+opwjc4eqox0j\nxDfEdQWvrtpEpSMRpOVKQ1JAreR0pNdA/iATurxswSoGY8FkWWF5AloXXWi/\nUDcRjV3VXyBJiOJAcZlyg6LJbx4cQeGFKD/1Os7hq/h99AfSRopVafpRKpEz\nQWxkHSRBvakRRNy5kln7UlSQXD7uzourWQjoeeuSeUQDNiUpaZPQvueGT/ba\nY6tm\r\n=1rbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/density":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/touch-target":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.8b1cdb1be.0_1612478077183_0.6697687696035768","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/radio","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3154600d7f775285a876b6991f530bcee644dcb2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.8271f00f7.0.tgz","fileCount":42,"integrity":"sha512-wrCmmsX5lWh35M+jZpwifJLSpnEYvQi9k41xkumcSryZN/MOiQUzhPDol0xJ/ExKPLzdbsvYFFnN/sXlTk4R8A==","signatures":[{"sig":"MEUCIFABbJxsl35s6xiUqerCma4fSEcM+vvGTBfiHRCJGNEwAiEAtKqExB83sU/94rPHJprZOsq8JPnmSrlXnsb0JFNWjnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyOCRA9TVsSAnZWagAAoq4P/Rl8Qca5cTBZleNnoHnP\nhecKN+58o7QJ6tFWoTv4BjKNh/pQhc5Q8sZxk4es+l8j3XZzGSSnmrB3jJkn\n404jcVa4A3JVQ8KycU1zw5KozK+wQkfKvgxJ/k4zns6cmDSXnKaLWQjdOFAr\niaLZpkOqssqUMjAuvpfgw130McWJ0/D9UKU0Xx1rp4v0CpV2ifNtVw29Ie9c\n7n4Z+ifYXdPfEazSthLn2AWd4Wj7uafUksEWPS1RxdK8GXpdVqWQ93EdZHYw\n7TI7Gem+3ANEpQfgkWnxPy8zuKu3r6eTkMlZIA63Z7PapnSYGIS+wMLz3Iqi\nWOPQtMUY3FRMVsODX/TmqvN+Oj/KMnU9hVa4f+PjuWSYsUDoayc2PXDQ0tqT\nv6Mm1lsfDyTalHsZ1qCuwuc8ErmwpVU3rYsifAR5pIM8RqV1MM2Zz3BiK5jL\nbvGGRGelKYhwdEvVZhivnI6fZHALU95hzjscN7nzuhLvYmYgclIJZwP5llUc\no4Ij83sDptXgCB33eY7Q/gDTb2E1a+z1m6lKQn+r438eoC4ezfDXtVNtwNX7\nEVSRID2MHkxDdtp4E+RfeA9fBvrHBE44XYlI1iGVZjirJAfE6GB/T0+vJdLl\n6J/PqW0s/4nWt6HR6voy4C5iwjDTt7MjZN9IRcppgxgHWZcz3dO6nXT6MCsh\nZsAg\r\n=i1r+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/density":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/touch-target":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.8271f00f7.0_1612479629793_0.8337815678088982","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/radio","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d21e5a58f2b5520e9776d5ac02450e24b5c03a05","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0-canary.533092a90.0.tgz","fileCount":42,"integrity":"sha512-qX3IJvUs9bb0dEAl0/LpK5V03BrVY9wv1n0cOtxcIAKb9wHRvmbI0/NhIHCROHC5tMWJWJlSvPCyT4xry7dejQ==","signatures":[{"sig":"MEUCICPrP8sqmzgZW074yJOuMDEYeR5I2ct/mw7K+//oSbYlAiEAuBRL0MwCP/BUhPwZKdbSMtGmT5iwFJFYN4lsPM0QeVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+cCRA9TVsSAnZWagAARnYQAJp3YQvjuvuWIR9T6H6d\nIaDFj9WFqE0Guv61gIcczSkWHF+VXEa7GVcXngBDqSCCPfh/mshT0auiPGjc\n6WpbpMrKovHu8lzFiPP7ci9ALTcMqirmuM1CJr08c3aTpIIuCQxtqbaX7NiJ\nsasvwrjIgIlGncykDbMCT8o2wGm0oEKfj1kOF1bCatpsgkVeloyTXt47vgWt\n/HSO/oNEV6DvJT5qyEfjb6vgzWJE7QbU92xwcjHB1ir7KTabjIvV4NMjx3D9\n38RT1c/9RyqJ6o4cu/YnaoD0nxbznH/FNMZwWXr6yzE+CaoTwLsiWNSlRoKf\nrp9Sa/DEjR6fHOcSx1AS97NsN/i6AWSbfwCbCEg8l22xTXXvmos8OAIjL71S\nFji88olzUeXadYQnDke8He1+CtnXMrnKRDOsVDfk72ino04jbw24E6XIcS3O\nYc7MCU+zLa6wL7iKl1hHWo5wOtNoQIzftRzlhN+iOx26UvFJthuzl/jvBTht\ns8HHzA7DIin5jNnZhhg9kKJVbvEkqQBWpBqCc3puqwd81LKJ1QwdPYaCFbVH\nUDaR4UEJBhcMAMJOOJq1YnsocbNFkp8jsPLF+WnniB5aZN1mdR9SUPnX8Lx7\nFCr1qzdrlHDedaWEN+kFoezKLyn4qHQ3Dvsfn07wclDaeCfhrsl/XsrYsr8Z\nbMUE\r\n=s2IF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/density":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/touch-target":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0-canary.533092a90.0_1612496795521_0.8322006789405583","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/radio","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8be7b31dc52a043d1ea3d789fe0213769299b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.633a9fc7a.0.tgz","fileCount":42,"integrity":"sha512-rp9MO57jqhbTZgbl1KwO8sDNSZ7YbCheJwQFDTowSah4pFclGES73gtLhcDYeouV1j1X8hXpUl7l36Yr63t1kw==","signatures":[{"sig":"MEQCIFLGbPqs1Ey5XBNKddtcibh09aYnToi6BcHfz/SeIXQbAiBS4h501uxcLTk8sEx3cKt2D1SsNj8V529HaPvY2ZiR0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+ECRA9TVsSAnZWagAACQcP/1fd0rIvAOTf5t8oJyAq\nsiwJ98SfvYO5oqKpzNITjxZQOrnP5vHqqLN9waYpq5SxEIZFKwyqouxZkCcn\nzOsKv6b0yYpyinO3HE5/KGyZbnF63L58iQu+8dhKP5cEzszdMYv1StBcS0vI\n1IVKfjDYkUjfir/PTZGNfzF0U+sVwCxjDZEodHyCk34muZ2wMsH3Ln8t/Bkp\nWb0Pq3uuth9CDi5BP2fY1z9aG+xUIrVgEyGpKectCdzIg+bO1zpix0lI3C8s\nl+4HlllsRDtGLPx8B1+19TnQJQmqI2m1j7fNjWgFbREmq6OsALSjz06GvWNL\nU06sV+48F2gfE8MpO8vfescT7bZJYboaxNDObXcDggLKg2P4MhNmRYSElDZR\noW6z7XbaP4u+n6H+InwMLz5E/b6WsdP9uXdjXtkBPRqNQXDuaedIaxZuQevV\njW4Mc2nncf7E7VMYEaRrqZC5aDgnHmrEu/sACOohKMaojci49DZ/Q7wggh0h\nViXVxwup9h5AvDV9d3KpaIrQMOvpYmDyvmkz1p0RsJZMs5P1fdG8fXHc5RMO\nUmex5nUOWbO61KdcZCuf0Dd6lvNjiwc6fsQzWUCCI5yosHdbQNXx46wkNG/j\ntaCrJzEy6f948tOCvAo8XMZ3X+fBnVs7bK9WR4CllI+r9nw4CitK+FVyTCCX\nMeOq\r\n=SL4W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/density":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/touch-target":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.633a9fc7a.0_1612541827692_0.7034162920920697","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/radio","version":"10.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ddd232923d4a6d96b5aa45896cda653e1b1621d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-10.0.0.tgz","fileCount":41,"integrity":"sha512-Lvjfz0NjmwvZ4vvi2aCNQdrvdbFuTsVDjrWCHJgeR7kBLOYM7g8li7G6EpD6GgcMvSCysQ4IljCXUVIimnFoCg==","signatures":[{"sig":"MEYCIQDE66vvjc+K6h1lpQukTxnWMVizsbqy45rb9aCRtcpFrQIhAPUAxkrQZ2mhjtvoEsjKScJ/SG4BMGLeO2z5NlQ22Ruy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/eCRA9TVsSAnZWagAA62MP/iL17sIL00zRPJ5Jjc0J\n+YHjkFdCoq0gZGvhejTeZ5btnJSkTewIv4+46dFv/z6bJEvd9jQVOGfKrbgw\n6Jm/q+j2iRbcWrosPl8I/rLbhzdGN0Zi9mOuJ5bbltNIP8qE3XSUPV7rsHrO\nvW0QX1ZN3nVXwFoBc7owfbkZkS0QWOoE5FGymXGggDEHfdwIiVKBgOGnTAe7\nlfGl+UZRVr5XYvm6lRSe4Ay5r6+PK4jT542xYbIQJhr1dZFNxte8/jm8cCOt\nc6Bx+duU5W6BkjINMAh0O+WARPT1M7Y4nRmzOF1hXa0c+sPma7S6KUo5Am71\ngwLmhT7WMLT6Qktw6shKmiqFXaWLfGaN1MsEZ5dKrTw/SobOAEM1Xj37jeZx\nyOWWJ43e98x3dznwVyKEqDzpQt8nf0yMiKy7/kH1bOcFTdD5IzbPvtegywz3\n6cfgp4Lva2UUOfOxYMT2vqa+cw1JBL+C1Ksvw8y2iJLaEki+/Up6Ry12JG9w\nsDvOa1uKlnoH6Oy3tLH0Hiid5rWGY2Rq5Fxwd0E2EVbxficTPUK8DzOxxDJ3\n75O9MRbTc3fDDRmxi2R6/3GA4X3mj9UQ3y1weH2564juM1BswtzIOmNzhEds\ncJqRPhzOcGIZejCjRDnYPMPozAc/XEv+JOWU3nRYVfiXrOP3T/xGLZU3dFx9\nMihY\r\n=dC4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/density":"^10.0.0","@material/animation":"^10.0.0","@material/touch-target":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_10.0.0_1612541917611_0.6753501090389349","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/radio","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e5a9597aacaa4cef43919cb068fcc754070a9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.b5227247d.0.tgz","fileCount":42,"integrity":"sha512-138NElBNlzN8rthVCX//bEtKmBJbk0xeGqIGgmqd8udmLgRijCQISNqbdUYLpzJ2sqCLr3d+zKZlZ3nEVmSxzQ==","signatures":[{"sig":"MEQCIAw6G1j5i55Qf20RBraYoUtviEPh1RBcBTA4dDF9WY3jAiBHknY26JM95QLJwdFBuVcxYlcFb4knnbtJzxJR5QKU/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNeCRA9TVsSAnZWagAAcz8P/2anRfciDf7Bnydbgk99\nE4QGmmsUhSYocdUGTxcSZ4xkyVVOfAzBHin0DnzS9bM069Uckj9oi8IKnkGF\nuYVhkarPThOyMldjwLXrZDx5i0avDX8vEMOkmv2pL1biYMhibeI2BKR8cbpV\nlxUa9hu5aiPdbLNPjqWm9Y6Jtax2V1CYvc5OAsGYYP0eLa79PXR1jeauPoCJ\njI+YVb1/3NOw4QRtIAFpZXfLcuo9g/t5rzjbbJFMNdWTVPEDzGQQaVB6/uxN\njKs+QWDoYttQvC8KUYwIJmPUTNPB2NLKIFfUmzpAIn7kfYeGJdiMAiBMk07I\n5EY7nenBTFVVUDu04WO+SekXPgeCkYfndGuD/Gn8yTZPod/0QV52kfrYi0N8\neAK8iw8ceJm+aC6uOTrIG2e0BH32tP7PSfNq6GOpXT2swap3tNBD3ZKVSnEG\nuZ6qaITA2b4vcCT04JTPNB6hW8r8SRFZ3CYbuMylrjCkF/JCWFrDxVPMSF0T\nQoxfUEu3/jMRBZ4K2CZPDye3S00/joYSh6dAUPOJvYckgNQ88zxFyT/tON3J\nNLbQ2iXBrF2zDRUVm4f2cEbTvatyXZ0WRmgEKN+iEbfiNiHIQBsVvsYjTw/z\nSJLZWwSt8lsFn7iCJGD5JFJ82r8Gknqw5N77zouUev8+dFsALluB755JLXux\nuJXP\r\n=NeBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/density":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/touch-target":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.b5227247d.0_1612546909476_0.2457332073188021","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/radio","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea62f8f0490052cca1d6791b5c6505192906f45c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.95322b11e.0.tgz","fileCount":42,"integrity":"sha512-QVBxIK4dbkqFoEn8svhrnEo8CI19flyNYAOU2Zh0Toj67jmGaXD1C6FQY3Guz9R/CfIykJ4Mq7jfv4jZusg02Q==","signatures":[{"sig":"MEYCIQCKu1cF0SA19TLcJZmipQs1ur3QnLn1IamT1FFRAw9DdAIhAICAPtIPbgkRo/YarjF3qRc05j3ep9CM1mY8/Z+dWXOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVQCRA9TVsSAnZWagAAlvUQAKRtDF84nfzjmNF+TbRe\nQBjBPDGJdcdXlYIPDHDBza3i9qKr+1nZQ5RWfPmsWDscSKIIPwZi9CI0ijEE\n58HmZqHss/GXCkRbZ15RlNP/QnD7kXgM0UM6A7fVoficrrv0cbFELWjwYYKm\nwJb2qCaVXLy3andUVT84ipJi0W7bAqS44nVFVsdiYTTrZ5hFt0Ff/PgZgIFy\nKiIYOirYa7LTXhX11/mhdJ9/lw5xePFVjhZbUSdw+mk5L8NaMUmwlOZjxp8d\nKpcm7YGKbMIC1b/8Wv2rNX0v3F8x1y5KyYUj8civdOUcjLQs1y80oVUFZm1P\nSaK1J8eFq3NC+mgbDe/aag1IZHOAn+gaJt8dUdTObDekavi3ZWIf/DGlToFZ\nM2HkxcvymJu7JoVFMAJlTsw04hA61tA/Id7IIPfSdTPxTFMuVwE+dPsl5EK7\nXW6Y/AtNdU7zT+sJZ5+qb+doddwG5OuONv78WlO6/SJh8RVmJpaqCPv+8qgn\nGlkBKmE1Vq9iIv5VwnLC1o0ZQimciGoCRBt7OJLY/xrDqWQgBxZRRvVjLDaE\nd7sLPNa1GN2Fn/bq+oBIc25W0owEtQwHBhuKYtZ/gtNkpXAl1K/Xc0DlBcc6\nOX8p7/3+55kw0EZuLbVvA9UUStD9vYMGM+WkSUnIra0FgnbdeU3yUTDS2+Rj\nT6Ul\r\n=BBpw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/density":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/touch-target":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.95322b11e.0_1612567888178_0.17445142336751274","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/radio","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c8464775dbe6744994272eff6e66a61d5d8820","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.1f318ff0f.0.tgz","fileCount":42,"integrity":"sha512-WIYf2bPu8fSKol2Em1RCP3O9DJsAOUpfeSKcNVQuTpCrVD46dwsutz5BaDkH8IgLNEotJYsq05inhAfKvSVoew==","signatures":[{"sig":"MEYCIQDhCip+kWdvOiCbBJnH9cPKADTWFLMf4Lc8uBcufd8kogIhAIsY5Gefxy1q/D1CzFW2xnSLJwJKRmaOxX/4bBt2gO8G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0ZCRA9TVsSAnZWagAAqX8P/j6kVHVAboLrcy3YcCpP\n/6aN4pBZc9HtzARafQFk3wbajlObMAR2NKYVOm2vQSgeX/I9n7oA3GiKNy2P\n2gTSN6q4nOVG9RVHUzb9XA3dGIkNxdYIX5bErN/d6r87fK2+/0jh7wx1o+rz\nRZYq8FEpZgllhtMRgaOJL/9oUBquI8ZZT3ABSsqEphiQZiOf5/eWwTetZ00X\nQGGa07QNF+5xRqhRyh4RCfxilBuwJkjGhwDc41XQBbhRq+zotmVCwq7H+CPK\nKsAsW5B0egq5FVVHb3msOYCGfByswEiTszydxZIOUSLnDAWOKuKQLKv6U5ri\ncLpFxjvIv+sDDCQYY2BE2DHW2CWAKdtNUx1TM6Q+ZcmGIx4rkIyK4Kpcz9AL\nKvcm4nTHYGQGNf+NDwZvdUCZ7Qg9VnhvV5t/rp5US/2yKA6D724XaQfPrpQy\nzVHOmwAoRRratRmsYCpi03QrxWJCcbm58D0J9DOknBNtzmKV2P4Qa6lJ15xX\noHJ1gfmcCajVx1eEYh+a6g7lOGwpldDauRnBYNj4Of6rly2DUP1AL9Vi00yr\nVA76E09zrn/z7MoMrhm6agb72WGfMUpfx6KiP60Po8usuodLM5FypyG236jU\n22rzB3wfGcb3lyCe//L12yHf3qBuFS3dkEPoT+1hOc30eQBRE/T3G3Ll7qIU\ndQjH\r\n=A+lO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/density":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/touch-target":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.1f318ff0f.0_1612569880517_0.7663479988977215","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/radio","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"167178c9651c44fd14b42ba7423e0911a27e9d1d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":42,"integrity":"sha512-I+pvyH+8wk461Nu1z+l/c5USGqPcYUGrVerhcki8ZSv0Fm1Kr886lrPRT3Afeo34FGgXPaSHPIwB/XLj08O42Q==","signatures":[{"sig":"MEYCIQCKj0inRT8M5ScdEJ/Z3/Y19MCOKSTq/RJBMT6xzIOh/AIhAOA7yromqK5O7KMebJuVWLAgPEjw5EutZ3UIHL30sJT4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLFCRA9TVsSAnZWagAAmk4QAKQJWMAX1Im9zER4qhyt\nqG44f9fMAZwGOXCH+4xTS0Iv3PZoBH+MLgv8SpkgdbMvZrnebeBnfrIfAYMr\nX2PwLCIfvaJwBCRn1JPJOqXababHjdTn5pumuDZQGdFxq7BGEpvB8asNIMnz\n+Hgv/lFN7COMzwyt8Bt/+RwLJvFzwdmSruHynFav0B6NidTgjoJe/GLG0TPG\neuXZ20eD0we5Qy4PylNy55UeqBHk+/9avvzEYfc9YEdyAhZA0gtCaRTsYyLy\nimoSd/ETNTJ2DaDzBK8DMCCQf7vIRsOB23AfJgZmz5RhJa8kRv0L5PezddI7\nvXWtABP4d7j0noTP0n1KIZffL82sSSJsEITz6rzOSuh3ZQiY8k1ILzWTF9u7\nVG22uNTrlm4d5LiQEbhstf2cbsRPExBDlWPRkE3OcPH8N/QUYoMbH07yYZWJ\nMSZvPjtn1cYL1udmrcf9YKX/ipHjOs2Wg3OMfht23DBATPj6BnSbW7hLLFf+\nd/b6l4fqxkAQGmkkm84icxGyycJag/7cklrpw8V4Fr7JOqwnuw7+l8y4/cEv\nS1kaJxoOfPbfr+gEDrOwcRK7WlRjdQwv+LeS7RbxvXUXt5rpmDbTtCx1/khI\nHiRcx9NweRMWDhu+M4C9IpCgCobbNJZw0jbqaQrqY/mJ6rXMyoX5UJGbKBFd\nUOUz\r\n=Pj8P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/density":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/touch-target":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.ab12cf7a3.0_1612796612479_0.40837475706567306","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/radio","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cc6f2cd71153751eb92b67850a595087f5b3b1b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.98db2c5ec.0.tgz","fileCount":42,"integrity":"sha512-91jxrqxqX7YcaHx4aBSNhK7oesCnFwwKDH9DUCyHyDL27hk6zSg0pbQ+rgRFEDyYsT0u1Cbgrf4uCX0EoBli9g==","signatures":[{"sig":"MEQCIFAS8G4HT67wslv6eYtZBHRlpjSMS3xai4f9FbM9WeMaAiB9ofk2WXvygfsrqeBEL61Af9sspmc08plzx7UlNsFh9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnlCRA9TVsSAnZWagAAYGgP/0aOI/59DkEwk+PBWt19\ntXMf5otfOOdlarFi81N9yH6dQjQ9gACPQsTDjrsjM7d8OJ/CZcBsAq7VhwO6\nyeUmEQktGtXrAaMbrjeUolFu/Wu3TRbVTpx/LWGTkmFsY0p33CBPKPq3x4PL\nM8t+7rzYFDvYVUEhQGfpGb0LhyO1TN8pEh7GHMyVda4R2nB28JOMcWmFAQsB\n4SLoaEf1t/1swBQCOLxvhswLm85NFFbSUY5e7+bSIk1Q+jrCg/+hP6hwC+41\nS9Aqd72vSEhP+5uOZ707s7YKEeFCZuN6sVdNCtXIyLSlHDgGHOBurHVKQ0i/\nXmXZpB9OR3RnCJ+35nKAllHj4Pyu6tPSA1nSi9a5vaB26yfD9jHDF9Uu0z7R\nhmqLI/kFIcotNrT99iVoTyOOhPFU3tnNRJtGuZ6SNyIwX0pPmDJxme+DjL2f\n3SOgtwyqiud5iI+NQlYVhVZ/nmKXKFOdqigMIV6UfbFCdJ14qU9YLZUF1Kam\niFDXm3BP6s7x4mQRjmaLlMtaGrt4sGgd9/j3SO9G3iyk9p8i1RO3kvBG3fvF\nUAYHzwzjFCIeTfdjtEiKJww3mwlSTc3exfHRum4tnEZ0yW++iRbh4iU2CCXT\nd5Gdp8SgCdlTVL8wmKhS7M6cP6K3AWQlivTwGeQXuuV3Zr/wJpWdv9VuzKp8\nT/YD\r\n=RBZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/density":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/touch-target":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.98db2c5ec.0_1612798436528_0.9969736072317146","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/radio","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a720e44e4aec035deec72dcc0cf5517c8e6e2d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":42,"integrity":"sha512-SPgqkcyhqtVLXbykRGko3pjSQBpBz9OXXh0mChN/zxsYXQb6tpVjS777/tX0Ymg4SerjRcp0LhRwyzGoHBE45A==","signatures":[{"sig":"MEUCIQDM9vnrq7LQsvrpsS1T0PyBlrDzLjpNuy+xaAq7HGMILgIgQ91juNJPzG3aIbe2aCmbMYe7FjIw+fEn1iq9yrBOsCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIRCRA9TVsSAnZWagAAIcYP/08CazyBb5rY9N7bD9gM\nGrzdrayTZp51X1Y5yug6eH8HHQLxzgh/LnUFXx9J8VwlH9mD7pqWUsy48SFp\n0XWoSWNNyj01CC91DWXsYCKN2uSX5m29RZcPxNLbIbh1hRgR3R+0a7RTQWtf\nOC+CN1CGhA3MyBKMymSLaRRAew7dIp1lhk7aBIUmlJ8NArgHWc4ddd1jxLfl\nyjDK49myrN4CT/b7C77qC73LMzVvm5gXqu0SlFFtHpl4dfunJiX/Teu3c++P\n0E+rED2EzJhHIFUxcaGrM0NFup7DgB69s/P5YHyRoQhoASZwGl6RcTvGUxp2\nv2uB+wrHpIDtRQB8dfIiaHsdiosnSVM3RwzBVlsC+SQNwmg0+WYGlPgVLWRK\nsjIKxASRegGnYPlnwsSkdTEX0OKl9/VgcWdn1+rGXsCaZlNncl99qwHS5+2G\nlx8CvXPcjvocRwx/nxi640mhjPbvhEa/7BjLJnzBOUhJVZxU0Oq8N7TMVHtX\n7NyvrKmuepB14usxnkXhCsFyW3/bVbXun2mwkKz/QlLrNwQN7L9UlfhH80Cg\n81fvfKPRnsqIl0SrFXNBgLDKjLwjAcxBQ8EQEO9A0Hlfu1C0OAh369YKhfob\n1vUt7imX82oqTTWSTK/tZnUDcwsV3EeJm+Nt7GJ1Ck6XdqrwUNyz6nFZkLlG\nIu/4\r\n=5NDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/density":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/touch-target":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.1f86b9f6d.0_1612804625218_0.3802548436271571","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/radio","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"903d32af95d1fdcd2af110a9793a9c5abc456321","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":42,"integrity":"sha512-z902ubuNleDHtzDxBDALEDiUqw36sNtxc0TVPaKwQ+IhdUuQSQrrmeoakJYqJ1fPL5TG0V+sTZs+6cKdc9JFcw==","signatures":[{"sig":"MEUCIQDI3lhwufoM+kygbgeGr2xo8B4/vXrn81o1UHKoSmC9TwIgfLQ537mLI42JDMHxMzxEwCjGcNnbysTynra/OoEdskk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxECRA9TVsSAnZWagAAwHsP+waXdDVezHsAjV5aNmsQ\n7DqneAcvmv57L7iyTVnyZeU71zNdFjHYCs8e5WOZMYI30bolqkrSGL+BsSTi\nhq7FAlKZG2LSH8xJQTaZ86uQgeDHpxOgn4DS3aRjpyqV6mn4yaThvvQlqKq4\n12JN2Z3PI+/3g5+J5BmMZOSsiXTVmV7Fcn5cmkqVKydwM1Gww0ptvfNIAvWC\nD91qEk6a8dpSdYV392OF+BDiJ89G/nZWoS9fwvsjHHB7FRKVEU2WaHHxKcpX\nphoCpHSGBF/jdVpxPl4WQs6C2uP6IaSpqUYpijug8f9T7Rk2Fz6gRnyETfJd\nXj5cP1lrJTawvLNzJT91k3s886jJdHiWG8BsUQZeWRQOAJcTYvSCHYFWurxe\ncBBKZTY76y+FfX/Bntfgobq/jtPDRUu4uDrJJZAmQTlfNLPsW29p7GU9L/B5\niwLDEHy6soBsQTZ5/x+ynn+RyPidErweTvqM08oQK0dlhL81ckYCeOr2LAZ3\nWJCRFGJnQJpxYIf/1JGjPMXJTQ05K0RVOyqyp17J6zLbR4mgRPTr8gtss5ph\nmNuzowTrLHxBGM97tIfcZ3dmKFcz+s1SAZOyVpLWc9TtiTRpZdjjRPuuqThN\nFbUlUl5PuVSHNYWz8z0ClP/GlUzcK2/CXMb4hJJJ2+gIgla8wQ/G19d+Qsk4\nAMiy\r\n=XMhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/density":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/touch-target":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.aac8f5d9a.0_1612807236364_0.6922257693123401","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/radio","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca1c2c5b0f4c693b11b7cc78c1d6911339a7e9ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.750e18fc7.0.tgz","fileCount":42,"integrity":"sha512-WEzwkga6D6kCGINofgV9MHgsYNHNpis+ZQgAVE9S2f7mH1he3JBXRmVA5e35hzyeDzUGdqDFTSzkPzCAF+Oa3g==","signatures":[{"sig":"MEYCIQD1LX6NFukVxI77stbzSj5bdF3jKrGD6jJspr1l4721+wIhAIpRiataEGb1WnC1trWZ2Sn589Nny+Fjbq8VnflnL8WO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/1CRA9TVsSAnZWagAAIWgP/3pG7SVO6hncJmhZ7Amq\n0ayQojW+HImMH9W/8MbRlsi6hY49wspdSrkKyDMl+izfxQYI1m/IY3zGBMyp\nLLbd6iBwR6S0LnVQL9KvR4TDrisK+q5DGP1X/LfFKrNtEM3v9vxY54OLiTBk\n5WZWP7P2AuOOkxNJIayTwQjIUa8ee7js0glRJBd/F9o75CP3Oy2Le8/ra0hu\n0A/t2ULMbUYaT7OvxUlWq4yct4ifg+Z5BiQZwGbKSH5a4RHqbxtR9VCAiqpQ\nUQa3ejxKZ2H2RuNtbXsjrHByjxdUKg4TvletkFBraWFJooTWd2Ln5329TqvV\noVt5555uNbrEQ+YmEvphAR9KIxNUnH5hWqdvGw0ubqEFLrlefRrI5E/COt+F\nJ9NtSvRXk3nFdqOHh9kw6j/Dht2Dod2ntm2Yx+ajYI/SDq1k3p69tABTrg76\nAKTMbnCSBEGK1PjBTYWywgZUrNv0LSUAZAcSy3dhyffxx+I7KXw6EEbujC0d\nVdK62cAKid4hSEqFdMYDPhJb6I17uj/b8s8VUa5XUu6+fhiR2D5AyDbZWTI2\npZymsSeWmUAiXje18NKF0F9gbSUsSPoW7AvVTkgSpgKlE5c4r4f9AlS2SwOE\nijwPg8FjipfpzX4q1emYVEwlHcuYIPO5hGL8Q11hXizbNodavUkgtRH5vaqn\nGXfw\r\n=xUxl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/density":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/touch-target":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.750e18fc7.0_1612820468510_0.5643483838302654","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/radio","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2570f03fc97a34d58fcda6cc2e7f4bf08ccdcf8f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.b62b1266d.0.tgz","fileCount":42,"integrity":"sha512-3efczFpeoQlWKb2B83zQyH2gLNocfQMKwVe5fzpAFtZVJc+9fFsqhZXMWEePWprPTql3GD9JNqf6eHzGedBv2Q==","signatures":[{"sig":"MEQCIHG0p/apjhNxoWwcGiX1qqYsIGKnnqN0e2NxUipUSv4kAiB6qbY50s3FhXw8VqxVJV8rhz10RdaVzVr0oHE+Rnme4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQbCRA9TVsSAnZWagAAiu4P/AtFXzgG+LcyIUXaLt7n\nOrRYGKDMKlR/nHsLVbifSQ053gkhGBnL0g+XG0qABNx+RBd93gNfCcCRoB1e\nvh+8MGdYwHmEuFF5srRhD8G0Yb2iohyqhgd1+VMHTTuQIcuXf3KEf2uEazDM\n4cCeFOmt5222y8jCjpuzVilYQEfNY6VDsArX8z3HkKlRh3MJ0eaf29943f/c\nMquRkopJg4uTvQSg4oIXlTOXfoAMRUedMSW7CjeFKdqR81p7r9WL7Iokb7aR\nw2KLB6bvkG6lEVy8/jAFOWD2b15EyxLEvB7CN4JAmwWNlkh34aPyrgiyOSEf\nvlvTCO09xnhWwt7A4FJwM4lI5d5lsg9eRt/GB2OlXR+R7bjn0qXkT00xxO7Z\nFBrfet2WVpkjnhOQhR485fRTXECGXhj1r55loqIEZUeWvBTaXpyaPo3Ro1Tx\nxcxN3qQDMFoLmJf0gJvuMDMhB/9W9pSl+nileZmzkNsoTIcyetRpnHesbYcB\nH12FNAkXIFrfBgKnk0K5xf5B+b02Ww1lx0R0ycD3V2ihpbVb+YF2Cq8ZGq+O\nbYvqZ5ZV3+N5X7NyGH6u2Uo2peKmpSTl7OEd9xDSRk2r9UStdacURC8rBeT5\ntndhZ54Z1Xfc6nRb0bTDLVqxxLkw43I5uDxIDMd4ilD+UyRwAJx+xNgOKXN2\nTenW\r\n=h1fl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/density":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/touch-target":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.b62b1266d.0_1612907546816_0.930672519517945","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/radio","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61125a6f8a616c9099e3552f6d17f0d2c1a942d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.a6b3101fb.0.tgz","fileCount":42,"integrity":"sha512-V9tiopnNDkYxox9I2DFEalnlv4AoB/sCKF2rY42pKNoO5ea93G2i7Ddtczw2KkKlPc/xur1uqueUA0tCJDKWvQ==","signatures":[{"sig":"MEQCIGZycaIrHseaHpMc+Fu0p+Oqnuc8NpwtU0jQpLxmK7UMAiBX64ySvMjLktTn8bN8J//v7Yqe4yFPR4Zsst2dWk0LFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrxCRA9TVsSAnZWagAAg5cP/i6AhVPBJI7vNtM+rqmQ\n8acG8HwEvWGrmphBe50ilKskoVQCQ4l6dKzEtnxv/uMjxevVMDwgo7ltoQiN\nGHsdTeTr+Ky8G54wBdvFDElj5/tfe0YwPWGwgWyFR4kgoCeFeANtgL2QfcEq\nh9dg2cOuW+pRABsfiH6Wgh+Gib5zCOoMB66PKGh3NMstunduY/w+CDtuv3uc\nvOpfuin0bE2PaNebZRvrCnqhGJ9HYKT9u37a9Bv5jvcqj1f9aF1ohJVWNOZF\n5TmAz/aMRTxvZmf9d8xCMvWU6xlDkAp1Xo4/ZmDF3cBFdfkU2vVpZfExtl5k\ntkbolRs2PHElYq2jvQ5hBU6Ag2DZhMuCistETnjlFunO0n7xOL/TyuI39y9/\nSfZnJMNwPtQ9DJsNgO6nWLbmY4d0FknS9s18/wu5KLaK5n3mXGqywXzG0isI\nd0DEknvSPaBf54S+t37aGZTLiMAb7g5sji76+eZwMvXhipDZG+tUvJXokrhy\ndpGnx2MYYwgDnwuBEUnJuuy5lig2H4sB9CVDrpxJLs0L1cXlXRrnboC0Mj8V\n1BsDU/4zvQN59PrgnD5OoYBnTSgxpiIG0z6P1ef4xWKOlH8A/IgsyeueFW+q\nfyvitxpP8wdm0BEpS+4avIyIA32LL2NvbVEzaDNsOY78mol8/osJYr4tJ7sN\nOCb/\r\n=RAhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/density":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/touch-target":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.a6b3101fb.0_1613085424728_0.4057813189183299","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/radio","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59d1e9cc97142ab6032b5af2109b611330b56ebf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.ed88df700.0.tgz","fileCount":42,"integrity":"sha512-p06RIG6IQkN1QC/v+9s9M86qqpfEMQIwaux3zqb25WWWtTto8Sc6B0+fPqLrkl0TwsaE6/bjb4a3NirIyd6aUQ==","signatures":[{"sig":"MEQCIFmI+VcQDZHU8yNnhMm910V17JO+qvSFFmudPMzz3xXtAiBjOeCFOMMiSwfRsdikOb04+yH9cVAENHJzisRl60ywlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaKCRA9TVsSAnZWagAAYU4P/i1RffyoYF4gESBQ/VLp\nYj3p+q3JJAQA+p5Yvvp5Ss8tAIQH7L6FM7tjHHwV/7YQ5eaBp6eKjDLw9oE1\nIxX3NblIePwh+hDeQ7EVCZz3PqXws6O4k4cdVsWjM71SBWZUmndGClBC1h4x\nc9gtt0uRFjIG/Y9Hh+Rd+eFUUEVPmpSMJzvuUeGrM2H3BgGlb+WiavL5myp0\nN5QoDWF4JrjmNaDMOzTdI+kr/vGTDfQbn03RVeiJzASiioUmBXwQyX/3QYMF\n5HF7i7WR5T3vyt++IaoZEtBy/X4ki3hxjofvVRhz8lDfCTnaEGBfDfz0xmAg\nv1j6A1+2XaHYlAXSpx8MDkruPdVhlO8OrpS+H1BPZl9zxyzNKSAdNlNlA5nz\n/NMmvS/4slaUXlueSsl+ahj7ezkrMB5Gmj2xyhdfLOs6pnuA/ay9tHE61vRf\nvlgsga2Z0ss3vwDCKwNkk+1scgaqqCK8Ly8Eh+pehMtu+NIoH1OSUrdYSCiw\nmVy6iR1aZ3FOmTzVAHurAfsJnfZDEX1FngEWQxmyaxxTp2xoawoWv7rjH55C\nQSHk4onTkWkcsqcwunRajkEyPTzlbFgvO1IG5JblBzAFCZDZANUcEpug5Di5\nz2FWMV+pV9fl4Jy7klaZKClPVuvfkzpFs/SDOnG9HWblZJd4mnI28OcKrme8\nxmge\r\n=Chpc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/density":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/touch-target":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.ed88df700.0_1613088393591_0.9899478958287122","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/radio","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750c3c74e1fc0f8aae789340135669e89bca255b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d30efe6b4.0.tgz","fileCount":42,"integrity":"sha512-GtgpxXseRpHOCrOMsmE9DAa0RcTLdEH3VmgiGhePF7dvNSrW0fs8l9NVImBWpZ6nLbCUosnWrCMyuMC9hAJeQA==","signatures":[{"sig":"MEUCIEYqbCpObb+2kjGivXUaH92QW251Clh2agtCjcwEhfKbAiEA6162RbbiWwA1RaW2gJL7ZqKpF1BbGmTSviVwkhz+4gU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJerpCRA9TVsSAnZWagAAMjwP/2Id5jkGZE18Y3r++3ZS\nam2Qf2q6YRz+nFbW2g0LX7AkJvQzHf5sMxGXeG/l/jcMLMeVDjUe+gqZlFtm\neQuis0FbhNxuaLJ/RHlgKlZparnhx01L3CD4guxWJ8JKy30w905Z0f5Brbu5\ni+MI/o33UPNeYIsxQlnlnvYTFHq25s0Aby5De77zccHkI+SNTgYbZwPOsGVZ\nSdJBjG3S6tMv64YBwQswaEEmCbv5owJm8N6P7esqWFaQ+qUO5emb7yPHTpcG\nt1v/X4E0f7Ot7AUsesynCCgBylKOAkUIr1fFY5CkPxSQFDWkdUIVhEn+bFlw\nv7T9rrzuWyS96DZO/ixQAAuRUUr9XZ/W/JXpPn+bVKFB1pioOlV509WvOFHt\ngEHy33RWPB4JubY1JLkf88EYvNNCWdRwguiq14mQM0zRKPsH+AEDsqLk2XeP\n3Ssi50mNi5bfjQD1vwr2Faii5KaadM6yvTiiq7L5l33gOq4LpcO1UDA1XDAk\nG+L5dqQAQHjsSF/rltDeV5Tzd/nYHApG/VvRUKGogQH0lRYibx5sd7pJWMis\nvL3qCc7HR5W8g2/lTYRQ7vyYOq6xada+DC+1Tqn140FY2YjAO+1V03DobdC+\ne1Taa/DKA9ane6HPJj39M/LN+b5n7IqGCyLRvkmiQeBMsHuNxKQ/dezuwnQL\ndAzz\r\n=m5Zs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/density":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/touch-target":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d30efe6b4.0_1613097704676_0.404617351719438","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/radio","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8ee1a7935edcc55fd67a18ee29e89a91a5b9b8a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0393bdc4b.0.tgz","fileCount":42,"integrity":"sha512-gxMLl5Rs36eX35biB1oNvCdwd2XgCGGm1EQcGrArSq8Z6sMDXj1YSGqolKVv8ci+cxUJ9AUgQmrwXZ3cSAQYVw==","signatures":[{"sig":"MEYCIQD0gS0dGDS/OT0sEtGcL5DL42z2B92ik9cqswQ6pfQrXQIhAKfKdocWAMCTBAjPYsF6l0zpyWr1BO7NcuXkvsKb+NeC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRwCRA9TVsSAnZWagAAoy0P+wQyqE3fa8jqmZwu20SM\nRL6afVPITfo5ZvhDJSXxtfAlNbT9TicZMQExjaGu6BrlkmZAlWyKk/H45qLf\nmdtXqEObdgprkRBbfGbwWUrTZCWQMHg4PDpQX4s0AT/NK17E349fnflYeyCa\nInkvU1cUt/QfJQ3yRAwiV47Nj8DINdLdSRGhME6wgUO75jN+RU21jVmRZ6q7\nQtOTgdonk6GhyGmiGnwElGEdk7IkWckLrYHtgbsH4pFAnoNLcNtY+1XAExcZ\nWJabyzFPOndTIaFK2p9XUD87mWJryC/dIMP5pMaG2PgWE1qK2OZWQyVxWvvx\nhi8byoa6UuLPe3iOG2TX+nr3/aduHa3Z90XSCmhDKGpYsup3MMj6lE3Ixo/6\nWiHpcwrcSHqjZEXvn+2+IhnFuuqpm6vwHItDT33rgYhYSMU3vLzpuVmbb/Ii\nmqqTZ4kE035shJXv25ED2QfIgRQzkAxOPZwymx1FxKV1EFN1/wKiOnsLWu+7\nIUhKu2GDyuR1O2k4AxjJ4vXYGSExzYIePxMxouvRNXg6PyQaCvX9K5EJrrAq\nptI/aJmwHjRv5NDXiE5KM7MS3aNdBMZ1lgvKxr1SsPL8HQMajGbO8XyCeldL\nshdgTkh7PrPVciEpU3Z++1nVfLPcDAwmLyDhTrppLydFSg/oduZ0HWOtOH2y\n+JBy\r\n=1Ama\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/density":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/touch-target":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0393bdc4b.0_1613104240248_0.5685966643555223","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/radio","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42a4beb67c807a476e52a0ddccfbbdcef2b27fb5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.7cd26af4d.0.tgz","fileCount":42,"integrity":"sha512-c7X/pdqbixnJ7nc5PIM+NT3eeh2jHLWtJplkYMdrqNJlxf4YjmUaHV8YBKXvPDXjmL4Kf5qKHiekjA3sQT8BYg==","signatures":[{"sig":"MEUCIQDEPARsgDQzyQE7WN3qtxb8VoIOAMANqEpffggqaKEzPAIge9ktpQwY4vH+ztezVuwHbEZ/5y1KHN8ERdRsC/PPgYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXOCRA9TVsSAnZWagAA9oYP/1oANpdQc0HtouxEKUyY\nTdlfsHFY7fk4LCPU5FQ6UYzwRJDNEoOj1ciw7NnQ0CK6Dpy7PhvLKEE+RiIg\n4gQ1Eu3aX4mn2kRRl0+ywE+qwGm3O8Bl00NpeiG3d5NKMKp3wU3NFA8kXiRa\nw1+WCWfaHpmZ+WCI0NWEPePOw7YLk5F+nKc23e52cBEjOmNtpGxq4/B7Dosd\nJQCPDqLvqTn8c0HXtcHzKmwO27Fm1W5/v09NsVXSB6OhpCLk/wWC8mtlOiR0\nwSHGPssQYM2HSy2+qagFll2YtsRpyexxUWxvaX/T1HVnaaCuf5pmby0bZ6yt\nmSpk5ZqAQTBKpHl/wyXZtWgEFX4vKUz79ftSXBwOFDBkqMVaSQzR0Cm3dVen\nJXPp+xfZ0sKVJUR4Pu0mW2MCOGlq5TbyyU3o+Cwm+550i75OcYXp3OO/jG4B\nGeIsDN3DASxGl1kJYjNaPMKrgisrDK3R7aa3Kx9xUZs/bCqmLAqSk6WZpkYq\n8X0I+xQmFFjg/GNFp6sYoGC8r/XBHRJOuJ60zAY3foD5aGDRtbpK+TtHtD6a\n7+rErHWvUIlm86Kdqp4jRekzu980QNSE6q1Xsv24GLnc2glDOpmpAqMAIC+p\nj1azF2oSOZbLkFXOsf4GuhuyGMPuFzXk86AswB/cuQw14x+zf1gcVJP02MRn\nzD4i\r\n=6r1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/density":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/touch-target":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.7cd26af4d.0_1613145549804_0.7925210946422285","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/radio","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cafadc5c2ab109c4915ab35c8f1a29706bab2f75","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.71fe9a067.0.tgz","fileCount":42,"integrity":"sha512-pgBwl8cOJ9WPygwqCFXOnnn/mjkUSReX4aH3k++BC2hANPtLHGhdKbAM4xmSRNWfTl+CBxFoYJ4hKNzqwEb9Uw==","signatures":[{"sig":"MEYCIQC7e5mS2AMwXt7/ndksWZxEm6v+QpCe8dJOFeAPKlb2zwIhALm+ehhLmyfoVbc4/oEQ+GGw/iUcga/tZV5tKRfBqMho","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1ACRA9TVsSAnZWagAAKHwP/1D7XMGu5p14FtTRFy9Z\n1/HL88O/yjWAcoMIrvCRtT49gQoNetgssyXXhHkfKT3DlZ8r9ASs03GUvuNJ\n4cT6kkCdZq5ElH/eavj1Hmudbenm0UjRx77ydJcw1b1xmiPuwTPxNzNXXOUO\nvH3JSSg/qphFIjqcgOscHfH6iEBptYivFgea4UGEaFqoVuiP9IgLvKkenEm1\nzsD0/V3tJs0mUjQRblqdm/7MJ2hEeM6PiCacrGlrbjtXp03MCkvoKTdp4Rzl\n51rjhaS7VbhkY6isEbuAeWIre9lI7shlGQYCVKLKRnvG3RKYB90IK7ZCbYLF\nsuRDHcNTcqWYwSSVrbV+Mu28TCzVpYdvbauGVw8sT945lzKq+Mv4akiaP9gl\n1BA2SPQGenZia2Ktmfn4t1nRZZUMrRIEB1AniVuoRen+l5eDfpK9aScPau8r\nxWD1PFd1khQKFaidFUKNSJXmYNYmHnvKc9KTuVB2m+16Bwk53F4Szoq644JY\nJh235df0Oo1h93RxcKM/jcHNWmlLMxamXyUoxzoYKsLtEMAd8mJ+uLZrWUuQ\nugqShvUIJ3l1abHkkkm1tvyHGqyDvM8olR7BNDD3x/ApPUX6gDbnGhkGIph9\n+cAJ4qlUSzfnmK0+hbv4SfNUWji/hXn+VWfirDnX2AnpVZutsWfItj6i+VFg\nWomV\r\n=vo14\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/density":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/touch-target":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.71fe9a067.0_1613147455537_0.5115541672412074","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/radio","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd65771f280eb15c00daf4a0da5d2aee3c0c12f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0fd56a86b.0.tgz","fileCount":42,"integrity":"sha512-E0WfhOHTQTbjcR9KXv2fSF8lMVaZapvocKmlEWVnFcebuzVQ/HOnfHye6vb6qLKCM/s3RYcMF49NA/ADQwCxfw==","signatures":[{"sig":"MEUCIGPR+TzsWjpwHHLwFTxg9m0sBuEqH6+aMFz1WRLiWVSBAiEAkz/luxAZKHm/81qjpVCuQeFaRU++9H3qrDAZPAL7EAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxlCCRA9TVsSAnZWagAA8GEQAJWQ5uxtEiXAxXnXC6Jf\nWGeqRnmF4kjDomU8XKRn9iYl4lg6/ZIY2B2cEKJyZP9U40N6RVTS9oqL6jTv\nse9Yich4EsgRhMoNheKT9MTBTnMc65m7cGO4LE1lerzOycWtaN0XXMcVqo4K\n3YXE7Ecc+qZrAyVxsn7cC/BrAUG0uygx/kMKWsWahXaaqtLz7rL/5lOxIZVO\n43nF/sZFNGbTdr9I6chtVTP+8cq1kHSmvRbRs5YT0dIMNcnf/0TyeOrIweUc\niG8O8FkiOYY4JAzfZ4di3OignMDjF5H5hOpIVda+af9XGPH2srNzhvUdHBwl\nZdhnCyc0LzxpZ3bDcx/+h0p/qOwVv+NggSG87+0uAWC0A/eYoLyeLivSoEI5\nvIqUBFerNyw8wysBZBJSomHfKxoqTb5U4A9koGMGtsEsB+w2Le7LdY0LfxeH\nZeh+hwiiQSv656K2B/cKqTraaaOnJj95OJyq87lChkqhW5lmZCyjYSeolIJq\nqYNNTQWbOfHH1uUq4dD2X8IkvK8zFAulodTsrecxGfHDRMzg0bEq2Q1h+QI7\n2MUc00nQclXeIGWDaORcOF6tsXLUxkNfGuCt5yeujUjI3z9FwW+FYRVzYj+v\nwV2C326FF5iNFr0aWo22AdzJ8PSpkk+TUxikyEe/lJTWuftc6tgWsYc6ZQfj\nMoFa\r\n=ajXJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/density":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/touch-target":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0fd56a86b.0_1613175106105_0.08450698630739151","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/radio","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2299ea9a3126b3cb68bfaebc98909774cdf981","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f19bbc4af.0.tgz","fileCount":42,"integrity":"sha512-G/y2pXXnGxDg3yoBNd9K8PSM62CAfQhQzl6HD7Pq5P4fosn6FJ7keOkxHOCKmlcso3UhtH07JjNzbw+dkM2T/A==","signatures":[{"sig":"MEQCIAxIjQQBJY35Q4UMmNaI4RUb0ps/7oA5LZGiqpH8w6JhAiAaEcqYVAzQiuSlCjtottvQhIA1FxB3bs3yoDJAGzJH1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQdCRA9TVsSAnZWagAA46sP/RIPLQBtGYqvrPahkIoU\n7+MaTa0YdvPQyC9gQ1LriOlq2TdsiKzmmuk1OiQXnNYapwqE7GPk9TFtei8/\nnWr2hP+cKvOgJe5UKYVu9UtZalU+e8OHheZ1RTBHWZxYY0i6CJOftraKYOs0\nzIa9pdL3tFfRoj4ASUMz15bds0Q0vsic9TpyvYcVDWLj7729PI0fqX7BVMHR\naC7UZ/ocORoP3tAMejpIILVmNDqLZl857elnUbQZEyIoWiPOO+Igi55tQPym\nZWHZXvV4y7KGdogB2Big7pmIcqCYkjWhDxuUdQDzh8tVPFLW0lmqvYSF2oSd\n7Ky9x7I53evlN5UXbFr7piBWNzu7kR1dJf+xlFOTPcmq6+Sn3NIg7cv0zhpq\nIA7Dc1irWvQlGCyterRZAuFTX3ITt0DdFOJPGngzrPm4CocasjyK/1xLKVLZ\nc5H2I2t3WOnZBBorCvLwMRCZGhaUtOGrbCk+V6TWJ+HjRYWlwGDv+mBGrgqX\n5T02umJWTQmnD+PRwio128sLZqSNjiLsdXVO25QUjivNvTENbgVnv9Jv5bFb\nidfC5IwlkFMuVho8H/cpC/SaV7wdXtu3UwmexKcBZUVaa7xRYmRzNi/42Pil\n6+crgBWtp456gw5Oo8nRHctqLb6nxyZk23RuS2CjQbtTFhrNI40v5Kp/MfrF\ngzb0\r\n=70C4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/density":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/touch-target":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f19bbc4af.0_1613513757203_0.37077581254862735","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/radio","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec22c7b07c9d8c3704bbdb58d4e79812dd0a768","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f9cac96cc.0.tgz","fileCount":42,"integrity":"sha512-cEn6rg1srp/jfJgvb2oIjTvXm8qUTkJ+elT7pXMBhzGgHfBnxyeXW7/1iJgb5Ot3iPdqn9vHa3Ek9RNg7BXPOA==","signatures":[{"sig":"MEUCIEF3ejGq4wx8DDLOmXrkwU9dnRH7H7vT9FmhJVtm3+RNAiEA2NyGk66hH5RQAbc3egod8/wDI+9+vDAIO1qfCAeWGNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/ECRA9TVsSAnZWagAACeQP/i2kb2jia2Ag1HEWQN2A\nIXLfZuNwi9mPkms4zbp75m4fXEJatFu/VB7Sl4N2KySYU1rhHHSLRat1QLCr\nepsEXzLb4p4jHMITBVOrG+EEhaC0fp35vGiGgmiiAEtqgR4qd7nxTQ8e2rDl\nSZVKmnEHhuYXqWn2+cYRWCCoutHOAR1Kao9JQU4pKOwbIzKxy1QQPHuAynGs\np58gefiVY3C84vFodN5uGvt2tFeCLNZHSdO40womOvlwDY655ESRntfGNUzs\n1xff1pfEQE7ODlq736VJzt7WQVAeCiPpV3pCBjEaAGiuu7cMXR4rxzBjhpx2\n7A6NFiKAvRy0eIlwKT4YpAlKdZmR0tgMQb9ryNSgLUF2vYjaCyo1XbJbUYSm\nGsAVey0QBo80hLGyZHShHanFKaZRegbGhmBdJ3UqzyJfDXXrMhf3dmvYRKm0\nYtVRhVpYBjvLbRtLb0rGaB5W/2YGM6oaNqtLD3aIvtFrmugkr1XbbDqIGujb\nHRQrtSQUabWbWPeKIp/P0fQdy2k+k9VcNpJa0eX082P9j6rUWIpcX2qnz0xa\np3z3qGQGyxSJiKcxnoaW4Atmnwnm/qDX/Id/cUFKJGj+0/bmlpH+RrHrvzl4\nrzHMn4Al6Iw3E7LOlx1eGv9dPfpX69ipqjK1213bwxOThYGGCRXxcAe/d6ME\niRHn\r\n=4NpZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/density":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/touch-target":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f9cac96cc.0_1613578179796_0.08212896662358249","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/radio","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29ca73e556b5009ab9845d6712a0c69e0bd68eb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.79ce0878b.0.tgz","fileCount":42,"integrity":"sha512-EH7hjjUh7sB0bd3u35BkjZbbLmJV+3Oa0EFuuDitD15LUrVxui5xs6FEauJzG/EpNC2h7xt0Gkzc0ZxxBiGRZA==","signatures":[{"sig":"MEUCIQDKjBCcJnJENXrOnV89CYWN20bqO3LRXJXfh2txte902wIgIioF0zAiJe2AbYrPKrdR6iiZ4lktluTgXFXSJstUOHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2ICRA9TVsSAnZWagAABvsP/i0IAQec3Z2osz44Rro7\nNZdVujqeByTtfE8F6m9dsAkHgEJa/gvGDtGEgLf7NPIALTC4v0KMmPPwnUpn\nC/Xfjr54ZC2IXDw4yGBSQY3NeOeR0BsaCpC4pPAv+Sd01qFBJ4en7eVxz2KA\nrmTjHTOyYAKHCkytMhs3WjaKOsldBlPCFOn4rJjLG/SDm6IcVyGEabZ/19Js\nLAcv1keYNPtB1whIFDzBGc8Y1CDfPj2ziJetsACbNBXB0gQ/LeB0MPNRoA5a\nvTc41JIMw3r8JD0lFRgRCqJWfDQKsV+Y3F5iEgFHm4g6K+xzfOAJeSl8Zlr/\nZrhfepwhEC9rxKK02365bhpncx3ZtgmM148eKKcBZGFlBHPcwc4ipxbDqlf3\nG3rI+756HWUXxoXpXpmuiWQLCWGePl3robWlY9MCEBB8eevWtHzfwLoasBUF\n8jANgWhw57ZszuaP07+iGLT0LQdTjzq1I0cshZtlfXdO8Hz1YRBuQzm3D5fl\nrI69zEGnMDRxVoogsoxFYhTb66rIhd1U3jFMX82eFuki4pRrVIvWYRBSKGnr\nMfU3I8O+nhfkzZR11hvZy5DOdy7RpJniQVoFGgtEClbu+/Cgks36e+VNw8Qu\nR3kJBk0QF6BMxlTjTm/f62XTIpTVZOqy2kqxzeqtMoZbCB4jKGjvZxtwTxtP\nX8Yn\r\n=Zh4k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/density":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/touch-target":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.79ce0878b.0_1613589895451_0.517068625614463","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/radio","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da49f4b744b90cb6f77c4a645ef72943b125b12b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d6e507b5b.0.tgz","fileCount":42,"integrity":"sha512-aSdJyVhuLkBoyuCO1bEVjfXXzXeA8Yb2qXPeDiLpOJADZvUV6+0jLErhj1iqmVNyblO23HT68KciVT9vGsLs4g==","signatures":[{"sig":"MEUCIB202GynNqHkEtmF9V8uN4UXusSzxHkWUuMIkXC8WwmxAiEAp/t50XavtnQLQTIXXmt7z1Wn4LIMxrnNoKWfxCK1ocA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVRCRA9TVsSAnZWagAANKkP/Ag42OwV8fwLWjagIpCk\n9N3gatsWlcFZWj9DI02ss1CYgoquqjE6llw0+qJBHgI5FxkbHIxn0fMXsuwX\nI4hnltRE/A4Jr3UvwlB9Dnz2DID233IjGFuGozpg0tIxGFFLWvStMI4WeUeh\n61nlHXq5HSSjCBEaN9PPCR5Kbjau1CbXeRyuyqVUnstccMdXopK6g7W2rnQ+\nnwIkF/fDY1NicOxNM/fZDJLTyh3XAvuIiywrASJWAoMwNT3G/COioNSSr9Pc\n7RSTnNFnM7N6/IuykuniDGqJmY52yylusOTDnzKvkJCCoNJjtpPl/pi6VlgL\nutjDYKGtwjalUAzs7C7I+Da8kLFaLlJDX+JbsGhFSol+lno56fj+7rNWQejX\nWt31aAcoXpQNYnmH9KZlAPNf5bDgFv86xSwOuATYmrCXt3p1dI5eMh9SOwlg\nPCEmlHhNhOWSIUD0EFjwTZ18CuDK3trLEnIvkQX/pwP0M/zTN8smzeugT0Jp\nzf/m7C18nImz1tDJk0H2gkXTYBx6EMQkvc+MAuTa2dUBNaePGyEmeglElVMn\nU5niCaAUenNsMge10ipdyvmnGJ21gRlc8oEwT+GSmNWqKM0Bo5ZdVLedQuKN\n86ruWHwkxxMhRxuNyxeWuyA1FT+OB+fROkmAF25GS1G9JW4pbEqAZvT6616w\nVKP4\r\n=6tlD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/density":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/touch-target":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d6e507b5b.0_1613591888524_0.0063698832958714036","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/radio","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a099a3d1f612fa1084975c6c4d2c776c2f2e663","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f2658381b.0.tgz","fileCount":42,"integrity":"sha512-9AkW8PSNbzH3grdag8CEtGLWLm2uqIgCdQvW2TGl4d9ly/C6caDLTK4vjm5tf/6VNk5VrDpYyGiCqHx0iginMw==","signatures":[{"sig":"MEYCIQCwhPHCan6tP1TCIe9J+b0aYR33QI0NnE2gYktQ3NW5GgIhALX9Yu3vnzJqrId+uJd7MPWOzZv6N8ezB4B3U6ZCDZvJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxOCRA9TVsSAnZWagAACV0QAIjuEDcKKOi0fOBucvWm\n+UCUErINttFjSIBskfk83gk3PIe9r0gU4lAuxL38qK7eyhHxj+KU+tBYyc3I\nmizVptDbra/ZTRosvDNEXd/6JAnVF8Z2oU5/KdXIGx7zCE07Mu5tmdE5qZoC\nEB4k3LMRo+nbBjz5CKQAEbVeiwXXW/qixua94y0JHDn0lFKrkJKIHZzyz3OV\nb2DHlvDlFGovnlaD19NfPdFa8LuYnbkolvBtgdOhF0/Hv5jpE0StcWtzFk1l\nVwQHSTyr66TYYcKtdi8ZET+2GYsE1LlQcIGjmA1YBh9Qmc6ldsAuz5On+rfO\nPbntcqYnrIi2Pjk72VxG1B7JSeojIF+vTAILb99Xo+Spl3tlY3cYZFt5/M/h\ntQ0KjZR5qylK8ZzS5eisiT8SYGcRTozo52CzOTHWOWO2Whdcqee6YyU9mZch\nx6P60DCBnqx23nrIJjJdaVSS92AqIBW+7jp5VgbBCIBUyxQtImLGuE0g1gvn\nqHdK+Ko9kcf+Mz3OFZRAcGLGkA8xvTqKrDERNVUdf95HUf5tTcdZ7dEjvF6q\nqnaytfZI3exI6nQi1z5fF+lsQcYA0adWKbOTw3jtkecmkmOZKS3KlQy/6Es9\n2JdksWotDaWzigXRTCUL1fG7XRKwLlE7zX68uH2nlfgUNK3e8vIFLbytoStf\nC5SX\r\n=Ihhm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/density":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/touch-target":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f2658381b.0_1613601870350_0.9727898989659038","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/radio","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f917627eeaa8de3673bdba17ba0f161305138266","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.97c4d4035.0.tgz","fileCount":42,"integrity":"sha512-AlqWsN7yNOuUkcxmpXKAiU1x4dZ3AY25paZOWi4KtpN5qLHdysCTCnNKJGyG84hP9puFq+rbQcwU4KTNULfzow==","signatures":[{"sig":"MEYCIQDygIosCRDUfMvLayicxyHlauLJqnAFOVjddKmdcBE5fQIhAJQxCaqxqgQEEuGKfa1YuI/SpzcbcA54I2qV+J0uig3N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJaCRA9TVsSAnZWagAAuGMP/3eY2OeTiA7q1kPss1Lz\nUtoZki5pQHQrq6GXWNlOzGxRGHz8H9k6i1bAMEpklMF3JBgi2JJbFk79+I92\nWpJ+VhhCeoijDutSmJ+9CA29xy4hf/iiW272uBhLb1NaSCVXpmsLSbLC8m0D\n23r9nbQfNHxqRNMZSegHfb2bni11/FAD3AIYnCNMk5J22gzZsn8nEQ9X5xfu\nnZ/NnVyHleh1oJVemj9HtJQEcsAlMmn5U4aiIPqJRGECDInPm3cyPlwIcXDb\nyv3RxJ2e2g1DuCSjrSPQddEIffucWtY+iquN8XzL6N2fyH6xse/D0cAN42fI\n0+Hy2PE0pdYEcBlXPDzDBjcropsGjfLDLtaon1993ZBTjz44FnrxxpqLkV46\npMZphHDx43UGN+45H9uyc4rqVxd0HPrLozVEtrRcjd+t+qfXTqeQc17DgpzF\n6MUnwEpLLl5/Isv3ffaC8cNEI8CzQ42K4RybWQkvUCyBR5x3H+TV0fulx4xj\nViDVZphr2CEkLigXSVWukhLq2kDBwhIX2Iz3sa+GErXAbj9fNrmDDP5qDxRe\nBW3p6lCMrK4y5fjlrCbfo5PIi8oBNpKYX6nqV024iqMmN84rRfERaGj4GAiv\nOWZUyTlABG2I4j7pD25qHPPgPRwMipz3v0XRTWYBr7rSaFdB6pzKWngrI8pH\n9I4w\r\n=4jmr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/density":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/touch-target":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.97c4d4035.0_1613615705700_0.5608788631220416","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/radio","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deabb68e59ab83f6a6d07f082d73aa6ed23d51bb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f5bb4648c.0.tgz","fileCount":42,"integrity":"sha512-+Yygvcct8TeTVs0IxSkvt3FF3if122xjIRCTi1ywqWZxANz8L8pLoMItkcNwlwfDh84g8Hw6kDmCbnlREu9Ovg==","signatures":[{"sig":"MEYCIQCbF13cHFoe4+Zux7AZvshoJKa0VeHjBGo/byiiL4gHYQIhAPaygFXFLn+bVJg17yyQ3iu3pGo9iriur8DAzv4Rb+tj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpAtCRA9TVsSAnZWagAAVqkP/j7yD0kuChKI1X404tTQ\nHuBKgV1HXTFHJLGdg4Jc49eNEcPjKdbZg61ZUhp3nf1KfI064RZrYA/jOzQG\nVfGVsdlOBbjreLCTkWiC0kSp4IjDmFh/HSFqE8papNLXTwQFNrTeuXH+lTYG\nCog/gPkb0jAEGO4OCHp7o5ro3VuMS+vvxkc/5misYpZ3gDmmChDViDF487XF\nOf13onc/9Qz0NU+NCahZg+KZcJCq7B4y+WMRpTVc3cBB5dY6S74qp3oqUExr\nHpvD3lgdjft2rccsnvixbkdGcut+IE4xheU/22Ef8UbfVjNaO+1naTnpbHdN\nhRjfMbX4/iOhWtUJcIHd/qTY/CkgzhZDcXUSeGblS0S23ImuMsNVTbCzXyuM\nwpVVmGbTVNlHqMKTdvKKO86f6tyeXMGDtCJYjPj0htf92VY1eqbnG9MEVKkm\nX4Q4+f9J6aikVEWrNu+Jro10GyY2O61yQnEQtYVUT8BYftKgs7/m47sWuDXO\noPSfGg2vOEADQ0rgTMZAnwuZbsFGAcKUfmd5pENQUYK0BBFLMl9rG0wv+GnX\n2RcY3veKefeXQnVCc2zGJzZFOVMyz9DG76XyRxHFusmec1qeobqG4fRe4VaS\nfjqbsT9wc/bI40wtUAW2r6yHMrkFcXc769mmgutR2K0O6aEcRjRHldakxLP6\nGS8a\r\n=hJEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/density":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/touch-target":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f5bb4648c.0_1613664301029_0.07172543495908013","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/radio","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c781f4dfb4c88294b859c91a7eb791ad979090","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.302c7a960.0.tgz","fileCount":42,"integrity":"sha512-3BGTOPGio5fIrU4E0CrUfjpd0WlFk1MwK+Mhshg2b9Lcs25seUw2K8MVNorsPkVQFwaSSaRYuvyeHTTqrm90UQ==","signatures":[{"sig":"MEYCIQDDy4nYUBYxunwssR6dxQdFH1vLKx5VjRbbFZk8cyQ0zwIhAOlpjHziSypGap5nNDafWC3mRDYOSVWTpUAG/YYAv4fH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPqCRA9TVsSAnZWagAAWFYP/2JQJA1gJB9ZQW+/o6Nj\n6e8P11QK0nolS78rnbOGBwCMHCIarlCXDtGNLvIDs3m3fOxMS6LrtFsSLzK5\n27XQyjQq3rUHdyzaKs1tfL6roPAImJJN1F1tAOEucrU4XN+Ey0zsZDMqztNB\nuz1VP7TA1//kKR22nKLDDY7XHkNjfiak5UEljQViYE0NZNXLf/tXXRgczLpj\n7AZt9bQluV2aQJ3PKGzqoLMZPhUpILIfInzYUb1A3824nVVYG7OL/ISOklGe\n8IiEFfSUmPY149av4gyW98yRgWPZeKaOaGs/iZMwEMqfWfRsexVsX/Tfd9Mg\nKwn/g0VobMa5abCFBhTa2CWepvuUTrcP9lJQz+k2VAUXMbLERhpN0zRVm//9\nHFNDSKJPe3HNrMBaswHB1zB6KhK3OvUADjBC9ypK16fvhLBO9euSr7yoVwcQ\nxh5xNaK8n2oIHBSREBQIwDnBXXN9B1IeVWsxSeqs54LwuOIsuQthTYmuDL9V\nXjFeOWfIHdVq1kvRi8ptw9HbOomD8MDMMZHfhqhYM7AMRC/y+La5JLQYLvEj\nzsCEYVO1cay642FOo0eN7cCaJJdI8RXL5DI4HTrk5CcUPQpH5rkd9SERjEd9\nsm+21rZNS8263PWv4ZRpgqzYLOAdlGZEBiNMDaLWAmslhJuq/IGiEJEYr+HV\n7SFi\r\n=/KQK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/density":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/touch-target":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.302c7a960.0_1613673450098_0.4390058670045589","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/radio","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75dc63c6a83ca04bb3e8390aa569ae9c13e37ed0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.aa0aaf026.0.tgz","fileCount":42,"integrity":"sha512-DrIZ2MkgxU5pDCco08sxpxSNDuDJ8x7BBVPQrZiJyGyZmn4tPaQsG70/rYvu4RxrirWkGaVofe/FHAPvNgG+pA==","signatures":[{"sig":"MEUCIH0Tzm0c9PXa25VXCSnJZaEftEWN53m8tCH2cnbLwRenAiEAm8zv7Qnrk+6+mRAeaprXn3lUroA03vEXZ8/dOaFWZ9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6UCRA9TVsSAnZWagAAPIIQAJUCKn26biRFjkBzXLgC\nOu5Qa/+ocP7XmNVeRxNscm5XXv8nPV9s2OOnh1Gj9t7C8agFN2taU4j2QWA5\nRUTXsRHnBeIEu8eeaBYuTJk8B+RIZ+tv3mDvyKUDOzqPG38emZGJj8H4HA14\nMPKPKxX6k7uRbh5Qdu4HMaX8N5wYottVvhf0Ipskq5RWvKC1LDQhrUzfJ5xs\nThd4WetAMAQ+KXfLo/4gxVN/7D1xDuwKBbAGFytdzJgs69Ndzm34/5AJFzAX\nwPqvG/l4zR56fyLUGf+Q9Dvr8nJSgSOLKF63DGylGKX5/AVVVxizMsAXZU+q\nKITMq2xFS8ye3oko0cL59y8rOjNCiXNyAy/LTYYYLX8+qnG9XW+8bizIRxkz\noh+DOfRmnM0iyK8fnNKTSsNOkyvN8Qfm+xSTaHnswCrHXsTZzW5uP80ZgQYU\nKcAwnoDKAbDqSRmq2hSH+pF9T9jRw8IMXc0+lSDxEuB5KdpOdvgf4Qwj6Nj7\noUXf0jpkQac7aJ2ZfL+03XLXaqoGiTmYOwcxa/awpbFI/h8sHYVKEkA2u8Zj\n3In3rJ9+P1fPingDuYTUpqbjcWrdgoqmUp2jmghZD3jOX3rcMxKnrSHjRko8\n3sI86+ThciNbhj5kYK9a1WcPVvYVfoMu5NBr/4ApQYM34C/44eYX5hbYZvI2\n49Zh\r\n=HOJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/density":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/touch-target":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.aa0aaf026.0_1613676180101_0.2913702629239172","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/radio","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bafe353c580d6eb4cb3d79bd756861b63761b4c5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.07ff0c452.0.tgz","fileCount":42,"integrity":"sha512-gEuQY4MqifS7SCcs4Pqsn7KILmFRgeBwNwmxRbD/xX4Q/bfIZfOFkcpHpxSNUImmxWgUmfb5rohQ0Fred9WR9w==","signatures":[{"sig":"MEYCIQCiKoHWp9ADeZxJLc/aS/MvaWphMnymPCY4ClCJocqwRgIhAMAFEoTtFrBRd6RArFoQn0bZv0kwkBAiDc+BzdBG3yEi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMZCRA9TVsSAnZWagAAjvcP/2layI4HYCT4GdYOusku\nf7EDiOL/7LgYFn3GMVVkf8bY1sW2CxHvz0W8ccGYGKcOCoF6bUMy5WeIYg1m\n1lgUIb4Od6q9iY7VbICqHgjxJg5wpGXofZ9xQWxTPyd7xU+aw/eL8fJHQoNj\nB5ISYKd9wsxO2uQZ3yOuGChwMoN/Zmpd9wVuPcrsmekE+0Z/yWXnMNIXX1ND\nPKkC7fpKgOLYAycB3Kju99u6uUYLhv+QL/P6TOnprw5XMtirZkopKCz/9Wio\nb8XgFnchwmJxCgKojATxmvNBrgq41qmvw/zY0HyW27mwe0u77QpAb3jrVt/9\n2+7tQZcPXayT9l3Dh1CTQGcOT+89wVGn/YzNYpUM8FFsidtvu0Jif7X9/7xl\nElwNUeq3m2H0pmzUwQxBKLOwC1YPP4Mk6RIAwffym1p/pz9ogB3V9IiFzix6\ns18rElyIZZfPkIuzmwYjfdQvWKniTIDsK7Gpf4J7RQAB2wnWyP+WBPmYGXTC\neIHwhLL8QJ35SJZ6kBDIrqrBjYnktOV8XFkEjpLldC5l7bZujZBREEy9iDqh\nYYMaXI602pIS4ubBApULovP4okiS5z0Ig6Esy0pvZ65jgBlBc0kyJk/FaBZW\nv90vU8tVlnbBDjklq9Pv7u7BXSlKJvf0wDJzOmXlDhh+NP5GmQcsG6csWtOn\nGRx5\r\n=ufRu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/density":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/touch-target":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.07ff0c452.0_1613677336831_0.759409513362284","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/radio","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2160815b0557a2449c6e3157d63728db6a20f763","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":42,"integrity":"sha512-2Sjtuk9AfEpV/R2xcaYFTbQsa0uI5nWeWXWXcrUMVusRcQd3geRUVM/WLwQhdYevu6pdrFm6uMFFYKDEBJw67w==","signatures":[{"sig":"MEUCIDiN0id9f6RHrZ4M+Mb/yxxnTYbJe6WWdLJCIM3OyvcYAiEA3MjR1QX9ygadD3j1CCcEQglfl6Lcso3MhY7pcy37STE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfaCRA9TVsSAnZWagAALswP/jF73VQOXG5jBu0+BsRA\n0dmBOKtBk1kb8lJLRW7Tp7EiO/LsqmY8KHpcCbT1bZvzNXNrI/ds72Gn9tyG\ntU8RflOq8mqZGbDfLY93YzPF1y0SgCwSPvKQxTXOZWVRZL+t/CiOfPYyUNCF\nrfpsWJLKj5/HqFNqBh+qWtsb7COrVRGpogJbkHuLHWlO/pK87ndgaoZFAEY4\ns8ntujMZfF1FUYINtGemSQFLFIRifztYo1nBExfv0RAyI9Arsh9NH2oqmv5j\nnuPU3FL0cvhLlHSx5wXDyx4AlThPmhZjNPtr7PE/XW6wp5PFpPDtVW3ocQbs\n7hKuTamgxFWYMn+xJdWkYg4H74Z8XdB7GkAhgOcjmMV1cmQTopqO9+4k2OR+\nA5NcWTtN1Zd7NDBA6nNrGRH5kAHZkMqLiYGuArItrPwx4r9oXYhTZbMBTK4j\noO9Kz481mKqtldcYvFqH0RPnPfD23ziiRPeN9AKFgkcf2KQ0icLHQx7osfqX\ndIX70qPsiRFhvn1Nh2Ysc2aYen69atfqwMjkHrsV+c/g0A/5F2Cup9Wab6Nu\nA7luNnyjQ2UJAg6QMwKhO5Ln7KMgXcuvgsLOYwYDbe2EKHQ+g1y3pcDIpRi+\nH69+VFRB3rM90qvcwgu/k9hHy6ObkOAd2nR5d3WMq7aonbwQB18y5kPHac+w\nm+Qu\r\n=ejqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/density":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/touch-target":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.bed7ecd3e.0_1613690841496_0.2932403679134632","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/radio","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8657f34a178f298b0e84a4882ecc9c0912dc2d3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.06dead2d6.0.tgz","fileCount":42,"integrity":"sha512-4HQyIh9VXdtPubM0I/ccTr0cp2ZJfZ5pG6oRGzJ8BOh1LKWZJbqo7M7VFBDJGpahv4RbKb4nOExf7341QcKKjw==","signatures":[{"sig":"MEQCIE9iXQ/PJWrImiHzhXrctzlSLiywlUrZsugjmifRPKSUAiAxwg1rzQKMEYhQp9R5iphEg/awVYZ2qNAv25SFnM+qRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgZCRA9TVsSAnZWagAAnjEP/RZYArEp9RmfEvyjZuSJ\n+wpvuPJ29nfos/mbjcBbDNWzdzZQt9rzNq1j6kp05TXBDvPzlqWNMEvt6lzY\n5p9pf4SPuvmKa9RjJgBYDul7nd8ccMkntkyqE4549KWms17PcvG6stSFIW3q\nuLYNN+qp8d2MGQ0nfmx+7iJo/yqCSSMk36NPmRlztP1ooXw3pQ0sEm+qO4nf\niopvA+XqX+uMGl8V0PcRzTO+I7tdDHwHubRehO+VoR+gwp2KJB8j9gD9zM11\nUv+l5VkrDAldJLNEUgbqvf8HEhYY12ABeP0AKKuQyPDDnSBF5nKZunntIKT0\nMLexBedqFglWQR51WLvTPJluE17k5oJaa7NHcL95zBvxJn6UhOBwda5XFbQ8\npMlrhsp3eKoncGpBiD4QunMQnwGaVORyyA+Or6a6NHTuKJ/T3fBxhcCKFG8C\nuIW5KFINGIsmFua5nmNnJQnA+6OO3Ggxe9GQgMXc5GnGNDC7YRVwzVNmk8T6\neL+tZqd/Q20jVh471YaDBeubdx1MPnO9w9mIzKcANGl7uFkzQpG7xNlAnscS\n+K8ozuBHtQyoBEtWIt/0ikGhcBOE8Wm53A6AMyG4skxXz07uOzGsRHyodl3Y\nnntnNdwiROS5bjyI/W67mrGCAwca0CVpzYT3WqyoemrIp8u+XC+8rzz5Ep9Q\nm61x\r\n=f6GZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/density":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/touch-target":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.06dead2d6.0_1613695000581_0.9506417152025046","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/radio","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20a6fa5f49455f678b65fe9abfba7680b8c51ff6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.cddb03553.0.tgz","fileCount":42,"integrity":"sha512-2rX3ZHC6/zWb0iV/WdxH9F2o1+pCwQTqwglFWjbbvVA/EL5GbZXd1WbC8aaxZ9TfdkT6mLI2C55F+vZUqr+PkA==","signatures":[{"sig":"MEUCIC4yyJrQNU8wgBlyBNSnwvsZl9T9VXdL5T1mWBGRLJ22AiEA78iVnpIW7jMup3gbrFOEBIUpoIeUWmk7Qja+839xcMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyy7CRA9TVsSAnZWagAA0aIP/RZJTgxV3dXMeA81XSy1\ngptVjop97hxhNASaraMAlPRYRlxC/K6b+qhf6k9GFkPsEzziurD02qpphx/j\nm9Bg8I+woppryi3KGRngK1teMLn4BPt2PH/raRE3O1l25G2EyOgP199M6zwn\nVx+7PptE6OHiWyi0DKVgcfnRn3qLPegZ7J2+AlQuVLgqmIPD7RUKFs0BT/aV\nqGrP3ydYd487T3CORLlo9sF3y2fFTKkfVgyhlmWto8DdqbBbetjPTZrVGrfo\nkvQEMi71T4cqVViSligRUMuK+isMNW+yL40R43V++GLFPYHsj4QYmlu+EK8X\noI/aTT6Eoz2S9Qx2oLJIV+UG+J2hr2oeGdOOzTBU7Kg4Ow9a9NR5KVWbfGlG\nyuWYgvhu1s78/LNrXNZOcAi6stCBNJpOrJZJrHOqZ85UZNLYENVMQtR/XjD7\nxPaMr2r98blyndh0UhXJqIOiDtUPPPH1K0FhO0qK2TTooizpyfNmi6vsgBwL\nLbydHVjIibZo777szlxd9AThXwWmjtZaCDm0xsuLCUYJJRGhu2oF+RUPoQsy\n9ba8JeP70sQ8mC/gSY7EEDV7V/c03HN4zSPyhKyGVKWtEwZDmu1TNCUMntle\n3mlU+T+BT/W6yBwLDv+/HF95977vnaxG88bnFtsL+h+E6XlYV060cX6d/HwX\n/Aso\r\n=cLh/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/density":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/touch-target":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.cddb03553.0_1613704379005_0.7780895826254743","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/radio","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f2e7d630692b7633c017edaae84a668f284b42","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d6d8d0476.0.tgz","fileCount":42,"integrity":"sha512-OnFTyXk7VyK4eAabeZu9rlMsC8CG3Q8POc/LgntlCLRTmpUDxUH356WOOCKcHui8qW7zWgbQeqzRoeWv7l/8eA==","signatures":[{"sig":"MEQCIG9WD60JKNl2rsIygLYC+k08yiC56GiIXu4rvc6D1FxIAiBXfJnqAct1o+VEe0NWLn55g/yVLoj1CsoFWTLKQXSo+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05UCRA9TVsSAnZWagAAOQwQAJd19euSTEYcpotgLBYD\ncillqfzumvjaOGEip1AJyQFzmnhYMUdvMRMa0SzamkNwuR6ZHzfeBdpZHfmE\nve1o9/tVUE0EsGOtfnwpNPV6rZ+re6vwXw8C8VSxGjcfz43eOSidBTA8Id83\nypKGYUr26OIqGwh7iNMo6yAWIVnmDO+5BZ5v/6ZFpa11h9q/vVYcW3TS7A5A\nTYkfN+2fQQ3QJlqGxcfBiCjXdiSsLs0oaWUFEbuNtmIxa6HAAnrf+J3FvJSn\ne5WOrtQSFsXaybMiYg6a4wwf8yFvynoyVsy8xp87ZFIPK/CmyLBgZbmo0xCk\nxGOZwsQgNicms+9+7rgLWKFk3XiGFKlpb9B3Sq3IKamlbw+IQNqEdNdDj5OL\neppURx6tObmSZOJqAUwrTFZOegrMljeLPJ7wTX6iw7MUusPsHmI9oYF04Cfv\n6UyBPVqLcFWBJh7Wb2NJhfrC/LOMQ26R+I7jSlcLKenw1B6jCiy/PBlPEXFX\na59uasXQ1pTfkYevuX0YBjGn3OeGsejuLH3R4711i+t6Cein4eHS5oxTFebw\nVUgo45YUPKmCV87WB+1J17/0MykmCa42EsXAX57FF2+rrV5eeamGOTxHqNke\nfMrDBmkhk4eC0+zATfeWpqRoeZv7i2Mzgjsf9g77yPwddsvzbLw5Ew4iAKnc\n/Fr9\r\n=tLXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/density":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/touch-target":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d6d8d0476.0_1613712980323_0.004931096020670767","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/radio","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35d914cfedaf7d331be62ad80c018d5d4c99e0be","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":42,"integrity":"sha512-2iix/zvVllfA8bJbKSEtxEpHe/3Yvqu7zUdjIEInGD9psHYn42puXJaPw3Kr4AZZG9BsEFhKdZ2c408LyeuVKw==","signatures":[{"sig":"MEUCICOzV3U646GxeketLhkJwCEdesCnpssjVbU3WLJkOZWZAiEAhVhuXH2e/xvhrTHO5xrh4pfXYiYjRPcf+62FLny63Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90YCRA9TVsSAnZWagAAts0QAJynmpZxkUqzmU6mBirb\n0WzEBvO31N+naBD3eM6dEW1ypSBZoJcpWjJFJRM+72nvZxMOV8ti0srGQQ3b\n14hhNQSZQnoI8EEOrj0im+vaPy4pbh7ooq5IbJsTOJvg/UFUy29GMTDrdZN5\nuAHY27SAmbS3l6X5YnbyawqPqSGhOga9XzZ3mFsuQ9vPEndEMf2zYv/lFTkr\ncevR8AB9FWREnT0ooE+eRQBq6AhOamThAksuIXlU1CE4UAS9qwsacBxzCsTx\nKwPCxIgVKBJixYZKQamcP3vGd7xFvGgTReagv2Dfg6IWMG6lXI+sYiynGC3L\ncr3/I+qf26qo/ghopy3lODDhe/a/bKVCkdSpo5V4xjvt+kCfp9DosRCLfU6v\nLa8ICoLsUkcoCl11vtDVGIIynmbxH0P2UsxrkbhpeNrTin5G67MON44zIbc+\nxiB1sGTASrMvCyOhFNW2OqD6J3qCPK9xD6BNwcjjjAdCl/7Q7u4DD7aJuJOA\nirmBTy+mFS8evOumBV4sddqxiRGL0NBAkGgDwaJ3uULu3zvPnMvS5Wxf3GBI\nZWi9urLkK9+ZufespncEf5BqnXELBDJWqxPTE3536StJiKKmzr15sJDoQkzO\nsv8N4j8dw8yd8qmAdlyJOOmRZcUCl8TfcEIU/3n27ZrHnaqQV7neM2OhmwOY\niwBz\r\n=sbP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/density":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/touch-target":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0b4a4b2eb.0_1613749527845_0.29312229624343655","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/radio","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421d6d18f6be0fedc50e3c5a9e011bdcac64f396","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.3201cae47.0.tgz","fileCount":42,"integrity":"sha512-0/oeODxyPH1hPvr+jcoeKPQEY28QPAQYbLr/FEffSPlNE7MSpWDzn4W9NiJORHQx//Ku5dxyW6NINdUC0fhSxA==","signatures":[{"sig":"MEUCIQCblkH1GqiNrMzRWITSqIpeFuQvrLWeuzY/7atZGRnE5gIgdn7ztgkvp59AypBgmKGJP15Q0KQm2ga0l8PdfaW7YfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMOCRA9TVsSAnZWagAA5J4QAKNcV1ab2+7sqWU01SAT\nsBNynErOhlnpoYuWncuLTDsIo4urJn2gDxk/dNa9UeUiRAF+N83lLzUVmNqM\nS5AQFmmydTtnwUbThEcvJuSDEr6CTeiR33YGqdRVIRKRlMO37K+n/dd11EFG\naU/ZeNwN/1uQPECRo8mzpDTIsUa/u1EkDHnVTksFOvBJZFOGDt7Lq3RzaW6I\nJZbNZk48uSrvlcYMg4ZTOmZo+qN3bktAQhLoI+qgYmTtkVfwCCnzEd6gcXzd\nAyywU4lAwNGFlwcp2kJca+tIPj7sfQbrMfbow+Ukl4H5TZT4gMBd/883MGHq\nhdIWdg/PqpsaO+Xg1TzSQ8M6pGnOX4v0cmUVvtCYvOoqgsH8+z53I4z5oN9c\n3yke8wjBg6VaAmWZAxXHyyjisYV0yD4WmTiUyEJFvhp+o62I3zUhXZwveFRh\ntRY8c5FtpKEFslfvJGdq1L6U8yQe1FdK5whfyG49w0xeRaeexcOj3IS93AMj\nPrtB6rwYEYSFJsQoZwSO2lLT0Q08Qol4+aNsQeCKxBmavk4lsu1GcF+6HxYW\nbAlQwjK55AzvkbsBa5BBbdq8UYvM93eCbGMc1Ftc++xGXZ8AgBJVPNYeO9Ej\nPTHYTRJAt+phLjKmiDn2PBzX6bm1utuIJLfpGYU8POMzPue9wp43CEQ8Tofu\noKj2\r\n=yRFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/density":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/touch-target":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.3201cae47.0_1613775630173_0.17460416617655317","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/radio","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8db75d0d519d693d969e6cffbdfac290ae36700","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":42,"integrity":"sha512-1n81jqMm/4kV6DIUwEd/0j6YPHbJcJSjWFfAjUA6O5fF1qy21JUMI//8DDaihwnNoipa02EoWa/XIzbqQZw1xw==","signatures":[{"sig":"MEQCIGSRwV+YvYBTB4nriu7sju2/+N0I7GqiJ5x0DNGjhGwMAiAoYcN01vl+zeEZK/3OPhFom949akWe5PJ86ZrM5ErxDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArKCRA9TVsSAnZWagAALcAP/2L1spdhq8UxvzC47GDj\n8bbbzpy1Ppn29EJXpx+3V+OOuqroVfhbOsX7L7V0Sl3suGGm01z3DdxmxtGk\nTGvsJAG2qE8hZRmFaXEYm4qV3fV+AZejomuuztKnIIjfJ8NXvmQDyTqKbcez\n+mpEpKnsZ548CxnBs+4fNIYlE7Jcf+ES1Fwh/0eRLTHtTlL4cq00FtAF//Hq\nPRAryMy4uYHorAYI/UVOvkDRTd7mG0li9RWCRqCAUathfOybf4MNH84RA57L\nURFUm5gFHhRpqIb0luvU3ZooawdReae0ce5ZYtA1kucIutF6j+z+QriSdr7+\nr85HIiP2rxoew3Eph9h4hXKidmgqnX4tX8g1AYNKDusNrMisAAg+HpMW51SK\n+zG45HYv1NFRcKrWr3Q9aZBBnxneDG9McUVMxWFsbvew3AkH05mAxjCSrlKj\nu8yhcsn/OxRuwQjVbiPmgZtlmVz0ec+dWIWPJrviMnmvBhAPTMk9X0A6JWTl\ngPJxy9QinQXSUNqgI9yMODs/VjIeDFiBV7rjWLa68iw/kCJrg0tRjRzq72ae\n7ATsttHDS0XJkk6OKJOpVBpOceNTA7U05ppRRezZnVX3hFHNSgGosUtW3EO6\niS9vB5S/2M2WANKr1qLIMT9kWLjvMk/XkT/64bBgZkSXA/sxGEMMMIwLBnKz\nvKCn\r\n=OHYt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/density":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/touch-target":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f1b1fd5d3.0_1614023369445_0.8392277316071581","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/radio","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c9572daeea412b025c013282cb09411b92f1d7f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.7899e0fe0.0.tgz","fileCount":42,"integrity":"sha512-nbC/B99AMNEWPj1uJ0Ql6/h+f0xYs/uepF9hhlKnKxKfWg+PLzZtMEnj0KlDnJTqXv/RnEl6X1mO6swCItAO3w==","signatures":[{"sig":"MEYCIQCibZFcm187vIxRSq8JgD08Iwmg8ZgawAdrtqLIy+D8yAIhAPMg9tK4yemfSnG9jHlO3ZZiuX5CgGhtN6lesJSapQTA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQjCRA9TVsSAnZWagAAdMcQAJW91ZgFd+WFdcF4Vjo+\n8H0OteIRvhcLL2F0sIi+yveo++tAcHwjwYxV/8DvmB1T67oExVDE27r3W4B2\nGkrYwld1TWUyqkS0rgUa0mtV8rYx9dCSTxnDM8JD+wZrHxJJIE/3O5PpEShr\nOzeo7vts3w8FCvu15DXJ1J0OrPRYx4XTJRobc02MaMRmV5GBfvmetcqKHy6A\nvNm/USE3ahV3DgylL1H+l9aC2yfqttFFPqZeR1otmVKpO4n7W2i4IQDaE8z0\nIKpv9t9T504G03vK5E6f7lbM8DlVlwQT95DoiSvpofWXaesFy5NuREt3JMvE\nTNMxiNjNaH9HGhJ8BtV/9BWFR+S8QxAwAiBhqkpVl9jT6Pnve9FMsA+vDWIp\nEyJS2Pv+Z4uz75uhA8g2a63vxXJ5cvGWvYF0U2ZhSf6S7C/H7fvWBsOezhYW\n+0RNzYg/ONlClzTwaP6qE3C4xRXhyoQzK4uebzjnDMoq3/kVdWyPLYpTl/We\nvbrdqYgep5nLPmkvtUFUxWbJXqBJFkM5mcyK68N+g21dzBbuk2n3TMUH3XqF\nmQwbnM15gAsYfo3wOvuIRfsbeHVNQRewV1bCfqG3M191neZTJwkKsxZgQnSQ\nGZKaLb+RhcMuu01t5OStLYMPYSZMo1z8SedpBvBByelCeRTJJ2zjsyzQ8oN9\nmsQN\r\n=7MWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/density":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/touch-target":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.7899e0fe0.0_1614033955261_0.675276828738476","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/radio","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a7e6930773ba955b0982b25599bf0b84d43ba3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f19c86d13.0.tgz","fileCount":42,"integrity":"sha512-3J1oBCvidS6xgO2b/lcoBwv1k8RIKn7+u2R0J1K4qetoNcKyHAva2aVLJiE8Nswk1GJdsqpKO7u3Wv3TIxJQXA==","signatures":[{"sig":"MEYCIQDi8JsrRhGS1M7Nyi3jLH1uvnHR6TQBDrHlZqozrnTg3gIhANbrUvvr9BuBQa1nB/yeSNcnI1skQEfV7flzOiTG/bKJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6TCRA9TVsSAnZWagAAfmcP/1zhN0LTGeVKziu1E8Q9\n3jTCFwEeGvlI9zNnTh9VeNJ6+h8zZeECs36nPeRnBWwubYPM6p0aVj0M2ziy\nWPFlyUUV+yGgxezTgow0msYQtVdsx3DInVKNdD70MbvCfzSN94aM82reg0Ec\nqXAVFz+Lswnd7SIdx9HxMnkNAOU7VcPllEhRtEfGEAlLxZpAhHkKWCqU48HY\nPFfgSWk+us/gPfrXxxn1nHvt7LQZw6bTIc9O7iQalAi3zShb8PJWrauztm2x\ngFFHkuA1lGYYeo+L6VnGNY/xKPI+art2O6+zcYxyh6rcUriAy/0FSTxahYcj\n3UrxnPQ/Sq1VORsoe6AP8dfYboONFM/UZvkTGShgAN5V4teUknJktesswKmb\nb2j1hRuuNnwWiVVV6TGS6xwecb9cle8Kknd7E4r4NdHTK7EnarjwF2EF3IM8\n31cRyThIVg+VCfYVv1bgf297n+kYQjnSaApD/OlySY6kWNUYDlReqRNtz2YK\nv0lQZygBpXryarkzw0L78ssEESA4zDe/pBRFvfvKWK09JXqIUXFnzoYlPzpX\nEcnN10l5E9VEZudoNwP1tbuVgRcGZ2/fvWetSGDmLqHmWXJklyqS8RsUGEG5\n1/fUUyofPWkaxpyYzFa+mIIQG5VM3QKqbsQ/DPrmtxapxkULXULTLI6U6pT3\ncfbx\r\n=9mQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/density":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/touch-target":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f19c86d13.0_1614036627228_0.3866607838598992","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/radio","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa90051df16d786ccb1d74ab2d45bd5c58a55356","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.60e892d79.0.tgz","fileCount":42,"integrity":"sha512-9g/jUaRgjJLQP5LtjKNYVbPLlBsu2arzjcrrRjCcNjj+DXp5wIG6NlpH98zsFPtbILB8b63prTeUCHI+t4k5QQ==","signatures":[{"sig":"MEQCIAIsWJ/8p4D586XPyvb3IQECuHcGgHV5DZjdRu6sovVSAiAQPXGDPUIiKW0ERb6fmDDEMl6Ymx/UD2ZcASdtbo6pvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFa/CRA9TVsSAnZWagAAV+oP/2x87ZiBLSq+EhNZoKit\njdewQFTGCupd+zua7WO/QDpT6NRqU7pFVkWgKbC/0A2MS+0+E50Ijgk9Yqcs\nGGl0BMA0u8U9l/XKTwTRiwNWnFvAwgo/ghwmxUSTDTf+jauWPXjAETAwPFWy\nQNqMqwdTSqvgptHc3SOLHRzSOEE87UITusp4s05lwqIR1QFBmBehMVuIyIbj\nv9nid9ixKshx6/UpGQuYxPAvPcqP9nlC7xpUb1mEVfnIZBTQtfwUzeTZPG5F\nmwTp4J0MIyP8zIas3KNBXZeM+QsncrwyH02IMnUv+ZH4gYdzsbqZqyjGvW8e\nk78JF+as7fY+2qxowdate0vJtXrYVPHIDYLjdhmHxQH4rukrm5bm9siKd8MB\ncpHCw8XAhW9TA7adEzCMVfZGRcMj9ZamqQKE5sMA8Gb42DA5fjndSm2BonwX\n/ZGpb2ruIX2Eajd/AIPs/MnBMhzMLJMaLjn0J0ZMLwZeVOombDGhxiJc8jTe\nVa2gecW/XSWX4kEpEasG1DkfXLHPRYY5KfwmeD/lGChIAiKPNN+kgy6t56Lc\n3TYWWpZF3w5MPvhNcs5fZ3ETeZnORQTzP1XN0BVKXpfC6dL/PitD1qYn6TQm\n3BOChsUd47vGTJ7UT2ZTKRVYAvljmjyPylQodgHZklSfMq82bYmDMkxNKfTc\n2wEK\r\n=nRBi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/density":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/touch-target":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.60e892d79.0_1614042815316_0.07912262713505247","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/radio","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3aceab29dfd4317983d9f70117196f8c5833b97","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.c96bfa495.0.tgz","fileCount":42,"integrity":"sha512-UPEiDdB1fkYhRSM5OXPLeYhjQWdBgfNphNHVCI4K/25K4tCtzZPs+9mHyKt3J3K2ALew7yIhAAzmKJ2h1DnWWA==","signatures":[{"sig":"MEYCIQC3fLm8rClof70JhsavJW/Os6zKOCBeVTXd9PguDqS99AIhAKOc+tbEZdTuZPr2P0L2/btD4Z9ISNZvPhDkPe4phI1W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhTCRA9TVsSAnZWagAAjFUP/RRP2XG3zj57xJagL/31\nFR186L5ovhe8TRteuPM6tszMRl5BcAj7fmJL3ge/CFCN6zmOoSqRYhzGhE/D\nEYpUUJCb34kVe38cnfejYor5nMMaXoyJRkmPHOKPFEvx5GHvWkUxfH/3SdIH\nQ9tmck2k8sKAsctneAcapFaBLF2LxFCK1aAa9e8hEQxg5aICdIrq4EV07N6a\naHPQ3wi/WVLctWioXVpoGsdM0lsFyagYZ5HrXq0JCQhVufdJhIISEE+A2mS9\nzWQbkyYBRH6jmpFDF/OQSZP1SLHdRtfMVzB9HxnkJgtEpkMrQvaqvuyubdWO\ndPVMQhjcq4pSrB2GDZr4uEx9Dx718twdAH86NT0Vm8FcY4cR81sFQHqgzr9g\nTZwwpQnuQ0JquOthIJGrHDRb04+JO28/MEo9aRx5mmz2wiGKDQR4EqWNxwVK\n+f0Tk+9h+XpdYNs8NCsei6+kyoe0K7e2tciulg4043e29nKvT7NPYJ284Tqh\nP1scSlWqdxt14bm1yEHuw95bQvCutXh0vTLPSznVK2LBQumF/jeCMOCQp4Q1\nD0zwcbl5Emacc6156gVDX+xV25q+kh2oe4rjvk4v82OBEL4hXfT0905aRJ15\nP/X5IwIdGpj3eC+AZmp+fnQqlXXycqBDDg0NTmfZfFN6KJDXurDGaQG30GBB\nNPni\r\n=b6eU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/density":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/touch-target":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.c96bfa495.0_1614108754922_0.9633776512163028","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/radio","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd412af24d73bab766da51dbcfe4fec213e3b11","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.fa9b59f67.0.tgz","fileCount":42,"integrity":"sha512-sZNxcFLSy6t3peyY0T6UgBpsCfYNiE7xHd1QuqjGUovVIcJdJ82MM4cMWs3wv1BqlVo0iWYaLeM1EzUuslAi6Q==","signatures":[{"sig":"MEUCIHTjOxGmgR4NmRW8v9sZDMXjOXFJH23gI8ovax2WFW7uAiEArcKQyHFiY0RZHySzq5ev0YkDpJfnCdeNlZ96yhCrNf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVioCRA9TVsSAnZWagAAdj0P/RMFiGaHkr3e954rNU9k\nBEnfJTmLEUUGGgHlJ6KVzEkGDDUjp8CThfbEI8hX74dT5tijLiXAWLDh0KSa\nQuqHuEmlIuMvoWUcIm48N4AwvEreWnXaLsXWYHI+JogTUqPvPEktHEY+P7Jr\nF1g/PqrFw77bk0IyHwS2dxwdRe+BmGxmRVDCLj43EjtgZqJDj/vllab6KyBl\nwLVPSPsKIhNj4uIUOZI0YslHw6S8dEKSqYCJdtcE8muqbFMAbdK0ukxFQVyZ\nYvfLJYEL1K4eYFrPy54T0QcH7BL9TvFU3EFW8+wo4rjiRpETe1akWKgZSr2n\n8Ja2UJCckNj9fG53WFT01HE0a5SqiXOxGPT6BeGbF4LJr3PlvhnFHm5hYmEs\nD7ZPtYEAqx3N1kT8uFxILUhvJjxCA8gamUx4EGDrnaQpcADnDzAtEZE5IpNW\nK3Ry1FoRwe1S/J46UQ9x0r/uygT/JarzQxKmpLXYj+9TLakANX4mq8owo1he\nrXcoDHAsDOoDClvxoJnJzGLA1SaNdVmRx83oY3j81YCuRkRFaNerUoHOqnVq\nqth+cmdyHzl3/iopL19QRFrVAziTTh4NoZvEGN5KgNrbJGHEsAO6Dtwy/ARQ\nlRNlWNRS9QL+E61V/Yf5bbtfCyGYKiNcif0rOb5l7DPvTPMaT9BcZWgCDtYD\ng/9R\r\n=cOHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/density":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/touch-target":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.fa9b59f67.0_1614108839599_0.1528919867710905","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/radio","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108a105a52d78c2177672673a815a46e8f1887ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.869e3497c.0.tgz","fileCount":42,"integrity":"sha512-XLjL8b4IFirfeEADRMvsMXMSn9BfxGU1AYU2xaoQoXc8XncAgX8DH4C3Qcpu8mGpgAFOwTPYaKxOycHCrX0Bfg==","signatures":[{"sig":"MEYCIQCwbeESZV/hrZN8ByuoneWRVse6WP4OasrzzjH5P9CCLgIhAIh5XmxZlMJDjr9VWkNU8/nOMuCCm5i5k1w6liY/nWuz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjgCRA9TVsSAnZWagAA7k0P/ivBwSDFXu+icfTu/gNF\nbAeASNz7EK3i2kx5eEHZsulrLSRWC7GDp9Yi5VZnR0zpnUrE2qUzRN56NLv9\nVxe/MIffjuscXBp8mMjbqxUZuPSZCT/vO+/WGRnAcglg/emkBU+lZm6Z4GHJ\nBiFMqcSVo+mVsQ2Nmj4Aa4VCcIhHkNd/IStTTxS9Ki0Z4LvFNIwJEXjJcdBM\n7rI2DmNUZBTJTzsVkv7SpZQgZNuB6t9QndK1Le/bYquE7nSi3GCaWlLY78M3\nRi80f4yzQLN8jdm3f2zwKlqGVll1yOJ/qsOgXuKaITfbC8mPGWhrqZ3KM3ha\nuSYODa2sVAqwHjLHC7ILgc9SteFoTNjUt4vG49H/Imfw416sTkA32LQzipiM\nO20G9XebcddI7HxHZiiABbcasD+lGSYWQ/61bsBNwcKiwTgHn8l6aV1jL+5u\nhMl9qn7RASsLFlmpJiGbjpoWTJNs6YAzmLG5KyGoePk1jVAPemvwVPyjIfE8\n4WbN80/0gkP6CYni0GBI77LBnJ0GfDSu64qJwYejL40VC2cxIiWKSYeA0ndu\nE8pGr0XViuIDFrr4bB880WNf9/itRmmeKKMj5UO6cSrpWeNmBhCvH+gpVBro\nJ8KTeB0IxPQEXS4b9rOsQTFyY8+86Bc5LQAj4hT5+HYpoeyeTCAFECrDSheF\nqfjn\r\n=u3lA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/density":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/touch-target":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.869e3497c.0_1614108896484_0.11125711056955367","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/radio","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e405f0a2adc63a10dfbccd936182748fbe2888aa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":42,"integrity":"sha512-E55Fiy5XX6lt6hSscKZqP+L6HftFFxVHRW9LnAwiKMueGNjkbu6+B+UEYmgDstKj7xzWJzVXkFG06un843+AjQ==","signatures":[{"sig":"MEUCIQD+4WvLi2zhygsGVF52W2Uhe7mL80y+/FLAgGW95fBR8gIgfyU6bkKbGy63QQ1uIXkcNX3JzzSSQy6Ishi+dQcQpBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVx/CRA9TVsSAnZWagAAN+8P/04ux0wgukuM1Sn6G7B7\n6c/jwbrR0LXsdc3vfW4BqRdhuL2285FLzdnY/GW/zvkrJ06Yehv5Z08viwPg\nWJyWhjWtbXjcXA3Xz/ff22G0bMRFPS1Kk7HM3psTUcen8hBxUr0rSAm98vIZ\nFXGOzyqieYBET8bnQRw81bKIhO6M7ecINIpi5sMilCaZVcjY2zaGHYiWJ97s\nasv9KvE7WDQ/Dl/TgnVEk8fRUrkapezRtd2bnVxe6IS+2WSQODNgnOG/G0qz\npM/MAgQ0WpgegR2hMisjn30V811RTP/yX6kPgI3ikNUMQCGILZeGn23N5zwf\nCLUhmaTAdWbUc2PD1WSM53BOFQp6knaQeXn7GXpChknldC9rrY+BiElnA/Y0\nWoNBBRegCyAGyEbXiuoJci4XgyzCqBaParIinqXxJX+QHncR/8jnLFvQMEdU\nhgY7kEX7jqdS9E0HMb8bEkZv8mNRiD619LNebXIm6oZk8EgU3x7qPjFf7v9Y\nC8Nku6B7cpgc4597pHT2/BYJJ1EgbM1Ve03cWA0t4kEMJowhqyV3wp7f/7pA\nJUAoR1//IaNLQov1q/BdUy0KwuzydPNvj/nBURqYnMgy+9uc3BLsXrAoNHbX\n0OcyHghLNoEEZdz8PvmbNtzUn/1pnlyvu3zFPHcospdcgUJtQNQWKdlP/D6I\nrnDK\r\n=wpbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/density":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/touch-target":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.8ecd7c9a9.0_1614109823097_0.23654355070201838","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/radio","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d4f17d66d7bbaf8441b4f580184e31caee0e867","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.9c85d505b.0.tgz","fileCount":42,"integrity":"sha512-Zd6ojqHPGeEk6Ng6xIgyklW0GKIhm27uukTCjpVsc87xLaZV5Byn8bSy0hvBtu33rbLxkRAdBBJ6B9jAOjoHAw==","signatures":[{"sig":"MEQCIDeZVxnwBm27Wl4fBOi66+mHFz7CxnbGqTTCYlelmVHdAiB4bn3DT0Fm798dtiB1TM9mfiaV09w2NNDe23pWTznuzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX51CRA9TVsSAnZWagAAcHMP/jhpDSrVs/dXK0Y1V9b4\nJlK8A8a05jHvPHVEsnskRz36B3AkD7bvUE0YCv6YlriHweNO5l8QdBaiQHKV\nIIkiLe992g1EdSj27Ocb1hUjBU+46k3+MxOaK1MLIHbavE4Bcj+Tz0BDKunC\nzzTYHnuH/yKds+wfAWX+XhD/mLmG4aZjGqN9nIzhEHmzbCgO2d4JZverHYfT\n+7Mc8PBeZdc/sPnIP8HXK6ld9yU2j8CPyOR7kF+znibTnUSy6iH0BlWM6yfp\ndR8vzr38qNyFMbhaltOv2yCSTiSzX+3JwY8oyVah+YNX/jbG9iJ2MNieDlEv\ndOrCwkZ/YqeqJWYQrZgeeBfJxmRbxQcEtJvlvGH349Ep/hgoUtNAk9IGuXWn\ntjeYFNWrIKtO0U8ub/TbZb/U0aUrSQ5kIGn8CX5qmJUwSME7LXvVfsCK9xDm\nHRX0UACpmazQMLtFjAB899l6fNk3G18eJipuAToK8OwrGZ2knjSvbIhqqnEK\n7H7SWimTf1fnlKGW9xgq8oU8lOiGqGRc2QLku8N2BgpSPOoH1g9bAAeaJzo0\nF9VIMCy+dOphkrBM2nLAjrsbf9An6F7ER5aqj4OLa7E/OBJEN/6cGnGgRSRn\nXeeUFNjtXzaL7FgEYwJgCXkVMSJoOXnNX12SysS3xROo8mKNdjign3KCeuYB\nPN4N\r\n=7y0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/density":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/touch-target":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.9c85d505b.0_1614118517273_0.46570536160678344","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/radio","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9453e08e4a5b747eb43c6d9f030169adf9546afb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":42,"integrity":"sha512-FQsRcIVDGcPNX4URgFkwM7dL8iPm/okP4Hq/2BgmJp8xHPlYVdEi4U94puMHh1YKk0zUFBmVObki2yvre1aMGg==","signatures":[{"sig":"MEYCIQC5IMaSFgT/pZGxUBJCgtuL7F/qxn7D/NqaFSNlrhpc6AIhAIRvsyjqzy53mxlQpH42Stz30wcmwzjEoMMK3bFoh30t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbA6CRA9TVsSAnZWagAAq8wP/3pBO3y7luzNmi0kwPBR\n1L0rdm1UMWirOeFAZ8CthlqJEbOvaIQriv0VS8IjB0Ub7dQZVxLCjvn38pcB\n565/dGJYqaRKDQXl1VzGG11Mqg2NW7HmDyBwOYRD9T0kP7oVJwdlh4J1kW8b\nzBTU0scwJRQWX0cDASemb3gao1knOdq6guyuyGCtT2K+FmOv47cRTQIXv0pg\nb6I6oFzQCoAAYt5kcHd4qceBQ04g6UhK44Gf/wEappgpHCF0Atzt+/mXKF6M\nEUixxHbDykD2R/Ufy2YuRy0byGyr/i2iRGlwqEGfOj6h9DfikAt50iaJ4hP9\n+jVrkd09YQOUyGvzQrTKdUnzTtnY15+vPVIt7S2jiKC+k+6T9AmZKwuET5UG\nvU4FZticZS29sMcBR+LUKexeY4hyZHMa9QCNvSPhbfimEh2zPNBHLtS6afNX\nXAnScG+eOLNXTE3VNfgvIRz/crOqDwdfegtzUZJGxPqMjXymbBf2KQ6xd7lp\nMMKno3Ql6r+WM3WYPgB9n1juCkJBH49FAZo6LhQ2tj5HvQQgVrurKLpWVDKg\nDEOJ8D+WukjdtIBoh1063N+fQlmevudWo8pMOiVTrCWTDC44IKXchoWCf5DT\nEnu9DCLNlVYMwlmDSEEVPZ7EQYmC6KEIzGNjXHlF7LghUHsOAOzS7IdPQv1r\nPOoX\r\n=NDS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/density":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/touch-target":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.9f2e85fb8.0_1614131257676_0.14167480575678737","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/radio","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff0f2cba699a85a401cf08b89665fc4e066c3f95","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.19c4f29ef.0.tgz","fileCount":42,"integrity":"sha512-5U9dPhRm4ENF9T/Np+qhJ/o0g+zddBrTLDoyo4iEfGzs66wrJHhDyr605p9iPWMsvCCR/e8cfgjBT5aQ0w1WWg==","signatures":[{"sig":"MEQCICs9TdfJZckn3nkXwMrKJ4xNLZLQ8EufI13+35jFnbaEAiB2twf9vs1lYn4zJ4EThlcWXlEgsxEZF+IClKmbPwL6gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jvCRA9TVsSAnZWagAA5jQP+wSx/w6LVykA1boEbfS2\nhEAnwnUlNcmhnuDC2btqgYIZt9EQ1KmrmGdDnk2n+UbpmiTAP1a2AThbeKBZ\nfMw/tZ5HEicruhSEKajZMB5FZFg0qRAVXR+OqD63ZDfC/lsv1CniYb1n450j\nyfLABtzcY1P4OoJuOq9Bz12NMdB2a7jJFeqKnsZljwyz/VYYoaKkVanhsiBu\nsMFc0GXFQ4bHEFEODKdg3pyBhSUjN6zQUaM54J+MWef8lWweeQWXhNokf3pE\nNEiSAp8VgIoqvqfxKb7hm4UEo8k9JQuWPK7aYOJ1i+LfguohAIrrlAggL8ba\nx2QAm06nzUDkQMnqpKB4WHJhD9PbGrDd3queMEfUsKWMRW3E2aGo+Ix50v7s\nNUu+9ZlKfm26p7If+loooF74NWWv2nKbjkFkHVq35R1/WfaEVwvTY+yl1l5G\n3dWrhzbjN6Uc7kv7NDWYMyARz9v552VNJpqPUIXZYFLj546wweAgmLA/nrKk\n3j05hKjg4u49qZG9q6XZfMzd7M8UYOZ04aQFnPOFeJhnVq7O5oarjZu9Kz7v\n4Q6ZUKgC/e5WJXN0mzZDPLfxml+I8rz0hrKIhNbimPKH5I6+Et2vnZ+tJA+p\nKgfQE15SaEOPINPKcJGbOX6/dhR9Hq8knzpnU0Jm6DIvkr2rrLJbdHMZFunQ\nv38R\r\n=T6L3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/density":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/touch-target":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.19c4f29ef.0_1614280942469_0.9281121034220097","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/radio","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e355a15921c1f7f122df9d325e99d0a391a6622","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.63df6e9bf.0.tgz","fileCount":42,"integrity":"sha512-EiKQ52GloFBeKAMSVPJtbwS3wgclmEz63ejMAgWOWLcd6UHvTKD1+9ZeDjojlQEaN5KpK0KdSjOJw0XxSoVcJQ==","signatures":[{"sig":"MEYCIQDtr9bZEBtvQFa/GXShIi2byIgRnaG8Au3luxqu6dr/jQIhALqjINmHoLLYUW6OcuyxGQXFS1d7SnjV7h8TU+M+LqcY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xYCRA9TVsSAnZWagAATCYP/jRVaQD2cf2TBOPQ1OAm\nsChMoZJ5LCcDKkIe3vzXukY1u5Tf4mzovabymc+YTdy5G/5rgwAGa1Ggq2PE\nhJS1yLspEQmJKpxm1gquSnSnENfWzuQv2C4ekhfeJb2NqnC6wb1JDqjmIs+5\nQZ0qt2tNSFLOLaW05two0B29rQm0DGd+CaMXwvt+1PnZvB1JM711DeC5Opcx\n2n8hC4I0qPQCt2pyd2o4R7DeHXG7Ul/WZN1JKczZTNZ6qt1y2xw7Wn6VDnag\nFF1HtFOdpeqcYzmwj6ubf9yaJHbkStOCkaQyuIgeTfoJuKLoMIq88bIiNQe0\n90emc4/WnQm3e7utxldzqubkotsdR/KAbO/kPVMd2JRyUYz7J6EI4MetWheH\nGqCMtLkSWLkdUHydreSem+jEa/S0oPTfLp1BV5/1dkIXxj39iIwnitQrOE7Y\n7T2DdMAAmpmY1NbIfi2BYDcS0JcB9ny5fbs9HqsC/szf9XVdfSxAjFUn87lG\nVwQegmLEeXVT+cnsBt0FqDMN4fxprsOmfgHwjV60Lk/MHT5VSXa8qbUtdZ0m\nGfu/TbvC9UDz/kTAEX1BU+b0dW3NCqnbv+pb73tq24We5FIyLIm4DmDuEX1I\n6OKVL/LXJAuCA2qgKvnIKQ/7Fkxbly8I+h12Kmt8ynwglji/P/f/vJOCUmFQ\nt+uN\r\n=fi1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/density":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/touch-target":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.63df6e9bf.0_1614281816174_0.42898184680464957","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/radio","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07f32a512d94e81def6dbbedead07292ffbbf2e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.981ad970a.0.tgz","fileCount":42,"integrity":"sha512-jsE2FGEBxEy/jUExh9Iav4OHIpKvutjJWM83pJk3eSxPjyZPzE7RdNK83FhcwfNVrteZK37CRPYLnATbD5DJBw==","signatures":[{"sig":"MEUCIEyGO9Hl2+uWifigWH79w8lCNroPqayKah+QU+mSjTFKAiEA69teplL6TVkp5tneZ9tiAkEwxxcDVS1UNpQB/eNGG8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODuoCRA9TVsSAnZWagAAVrMP/2czS4C9Tw9xEF/0DhCs\naB3TYraGfToxMjGqjQMBSBaXo5T5zqD0zApvIkqE+oE1RqEp7BB3LC6nJbrV\nBTPrvaoCB9FMxdEC2RNkGDh7hDYSgfPPiPnKtGPQ7dFU/j8eQIBKRRusNtSe\naYXqZW5wY1oQdpHWsLTR2Vt7eN4nbAhExpx7zhDlWCTyrLODVFybGwkdNAJS\nLoYZ0Crm+xI/jqu1elHOiRX6ma/u8TNWG+GRjEv6MhCaKWaxWVBb5B5jgQMb\n7Rwg+EIL+6zUWpuCFcMnu31bIlZ04h99m+dkOiwC4ERkMh549B1F03zvj0FG\nIn5yhKFdJvJp+GNWyQ4x0LpTwVxsXwszmSThnwRg9FfzHVft8u6EKNfwP0cd\nf79y2Isdlvqv0VmSYEFUiZz/OGIB7lFLB9b5iVRTnf3CMfkx1Hm5FBkWoX0u\n/qYFJ9n1VHAkYaWU3cRjI5cwjUwE70x5IwzKLBQ1ii7zqCYTRlOAqRCRAsES\nbULRNVkYKXG874n2aSM5Rl09ceu7+j5Wd02ROeanLTTkDhANcUkGu8MTKM8/\nNo9ig38QhKYRuxjXQ6VswsrN28d57q1XGtKzsxWvHVGxYWPqfN3kYqL4zwtY\nR6QS6t7U+FIpr3+Z8XRVuNVH+/DmgKnt/OztVXeV4oqbUjFvWAwq0I171NJG\nYeX8\r\n=7JlE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/density":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/touch-target":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.981ad970a.0_1614298023992_0.3299495235232306","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/radio","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7533877330ac8ca7e46287872ac21055ce412a3f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":42,"integrity":"sha512-2BWmgQKg/EItfx78pXKrLVdCOt29tFHKS9oCrcweQJG/aQaG+rI+tysgRLtvvXOXkuYFUGmtkODEyNbOHtAuYw==","signatures":[{"sig":"MEQCIEYEc1jD65ln35FuYic0q8br1Wtt5yGRCeR09vB1PMMJAiAbg1k+JrN2X3alTxvenFGC/llvVuWdJHUC0qjRhv+M6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUA6CRA9TVsSAnZWagAAuUwP/2+aQWO0VgjF2Ej83qpp\nUTXfPfnaaD9ZAxefdlx4Fc5WRG6evhDSlW2WNBCW+BJ3GvDuPxNk2lmz17S8\nCJfjHjqC5bpRHzqzJCyVftGwd6vz6UoDzsUspfZKgPDN7mCngpetJqzatgl0\nn4WDmgk9X19SWHKe5symjmONaJgJVrb/tqFNHuZ8zLTxl8W6rvqzKUAzDbw6\njIoYs7FyhqWNy0VLB9sgaTkXo9sHpebJs9+KGJfb4kzqNXICtu7OqsBYsB1N\nWQrsvwKPSH5wedRM0TQCYBwbwiEGpOwW3q2fPJQecJickPGManfJfOtHwOIF\nqiN1UZl5FNP9CSzUmfsyuuwLgmrYlVS/cxTfIke5jk5uEFlUF85fJFYZrzUN\nPK8jbVQX8NPmrS+c8W9BPqDZfS8h9ZjUPi8lVcud4eYd9vvtPKlBVEYZwplf\n7sb2G8Lr/RngMwuQ4oc+PSLiW7Ij5n6pK0cFq3VgiubrcOYRauRR5FhRN0+T\nvq+GcgRjKKZaa3QPRhZiK/jC9HCWES6FgMUPeYZSQW3q/oZleIynZCrzVj3c\nNHATgapKGU/ecwiWBLgntafeBpaQe0uKtLbhL3BkwLx0/Uk0+SDLLTBSXtjj\nCPjpEpJXQ9IGrVoBaUvb1tPneWWeWuFOG1lIp4xFvIX9Exp6rWcCWGwhWCQO\nThtJ\r\n=x3F1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/density":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/touch-target":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f9c9e39d6.0_1614364729703_0.7645166429591077","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/radio","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"566cba0a1d303be95d7ca756ac2a2c8980c95187","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.c97d7d881.0.tgz","fileCount":42,"integrity":"sha512-RUtXFw4gK6Kod/NGyhIKKw/Pz3zZRCtYIPa0tyUZNWhAyDWzh+Y5PBLUCcgiVNTLoTq3ILr+Zct6eEQMUZjbUA==","signatures":[{"sig":"MEYCIQDmp9H1zstj1kWiPTgatLaBEUjM7gKXgfxRyYXwZtfSegIhAMfzrGtS1b0EhU5miHOc8VMZFdMB7kB3hyd7xZihZFXG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQ3CRA9TVsSAnZWagAAsMsP/2qsUzFdE33089ZZt27h\nuErWiez0tnnNHpYOsxzGz8t/b5RN6B9lMxAMBHhb6Inv1r3aO4tBWomc0y++\nPrwEXQ+Vq3oCcaHg7v7E+0exWfo8D+1ZbQ4BX2m+jmiZpJLJ44G9Qe2bSHT4\nUodis8rZ34Q9GnQE2YhDst1FEUTlJeaMDQfziA4BL6lR2JSdUk0bndpXe9pg\nwNlaFFC8R72ld79muynJ2wdjkvfpxIWmbFXgSY/KucUPUfqY4DTuSSqW7DCw\nm8PdQNlnZW/bIkf7dvLlJBmuq0oedJuMQB0ofOaxASBKdaULdbxjhjKo0ckX\n79Y0IrDMptqpTTNsl9VQm+FHBgz71I8Rl2eQOBoQ+/v+zQNgesWv7h11nOe4\nR+Rx/0jX1R30xvCL1rFNnFNEsRiYrCRXCktuOgIhe7BzqNRmnBgqiRJsHjEM\nZ0bRrE3AeX65VfQs3nqhWCYHJ/FzYJSSoByQYD4X0vPWLhwYZE6LaQHuHlep\ntItPOdPuejuHybH0uSEpd2uya9vk5jPpjX9RI3AbEXFhXzAPBvGK/hjwhdGa\nyLyOy/eqEbvO3aod696p0/jPaRlX6aH95X+/rlm2Q/bgWORd/uP7inwz1/iO\nRfCv+aLXQthqtCVrGyJZwvFMRMHqL9bB7qqgQ+3c8OzOJfGJp9GEMEFitkzg\nKQO9\r\n=+Xgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/density":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/touch-target":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.c97d7d881.0_1614631990817_0.6502060428194874","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/radio","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"845c02f49143a12eb89d383986da11dabd2bdb32","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.bf670dad7.0.tgz","fileCount":42,"integrity":"sha512-Gm8iKNqSXTYNhF2oFx0PL1GKuItz1f9lp+JyXpmZfATVJzP6oYBZjLcMMusBXBQ4FzyqTckwxuBaagK92iG9jg==","signatures":[{"sig":"MEUCIDRZHdFw94YRe9jNI4WdDfnL3O4HEeG6OWd//0tH+Is0AiEArfmHS5XoQ0Vl6Z6/d9v3nDmMjPTam0hnVshV6hoBlG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZXCRA9TVsSAnZWagAAqqYP/js3nZCDXbR/hYeMEFtn\nUfk+PrznmWc8mRzRordbK8eNSiRG9N4S0serPezpppljb8VsaYrE6FpzrdTR\nnKIwHlJI37q2KX9iTWQRfpamYFvmjMhYNclCFzEsma1dAntnO5RZvd7+6wdl\ntVH5CEfm9fXaanUdbVgD3fmcwnlIhYrlbGHjaEfTFDqS8Wyp5YwHEhgflxD6\nmG4yqEwwnwGBjYjEWybNVmsTdFtsNe1/jjPiZodPIt/V4MAoxuHmVwgcwQ4o\nefwsrS+nO53+TTunEJSlqttE0Mo8p2l4KUQBkzpp0zUQcYZYW43gAIF1cWL2\nso5rzTrcdJvJ/3C6dN2IPefs9xoE12vbbvQv7QyNifOeI2V9hIsAeM9Tr/vT\nbi5CMnI5b3k92l/hrOTrsYVy7C6wu2tkw/AYTQ+RTRjWvtirdCW0caLqrnTk\ncPsnTmMt3MY4LZBO/okCU+0kU9otC8l0oApQJuT55D3u2+WWXq9G5RtGM2LF\nABqVtygmDuyQrMs4KW8qrL9XO68q20WWE9ZeAKmK5VbEZ/2CDn5x3X6xUrMH\nTp79NDwt73T5bCWxgb3Gd2MbhPD4z6GQ2FG/YTkCnmQrXGB3Dg/D2V6/onaZ\nUaUudZTtOF68rzi98h6AznZmmEvIiT6kr0y2AB3KWeOtnRayfeyRbN3HuyBl\nfZbG\r\n=9eZA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/density":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/touch-target":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.bf670dad7.0_1614730838903_0.14869308515235224","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/radio","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9712626b4db9989bc82223885fc2c3c52a86a21","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.c7d98fcde.0.tgz","fileCount":42,"integrity":"sha512-5JaBLpitem3Ad+++pIlFlor0XkGGCB6cUw8oTAlodvkZK0po0VyuV8s5f6TCCSgzA9I2AP2x9E8SHJyv0fYywQ==","signatures":[{"sig":"MEQCIHEwCLNUugTzwJnePKDoV8Ucmz3p5OARAdbRfyeR8YMpAiBGSxQxE9v5AFO+Vry3fl9yI+pFXw3Hp6V/408kvhnfKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/IkCRA9TVsSAnZWagAABCsP+gKvfRumL5jX269PEaP4\nJfv2XQ4m41Mom69NuJQR4Z73w9Yg0rHTyQ5BfdLt9Rzd08Qa5UUPeXEEq/bg\nfL55yDIpoFH28zOJpcBez6FDzcElOttszql5LA5tgyBQ/2o5VMt9a1donxlm\nqqZBnZQRDGOx54fA4MAN492RlE1uBn1/m46HC0RxiEDwlJ5/wAuCJ8Sw46aZ\nzS+cAwodRB4ixfnD+C6QiluVxsl3/k2iTXQAphFiSC7gFS3NhA/ii99NfqaY\nQDTlaTFpHjFyfFliLLMoZ9kLp3GbldvJaFg2wcSLwldS1d2iPZBZweMIsdZW\nm+yaj0EoI4z8I+4+FHvk/t+hfneG1vNK0z4GLeiCi7stpkx4osQ7bmBAxwDH\nr+4YSZSyXsYwTmYElbDfgnAYmiUl7ZKaaU+gTsJ0GXLloCbLLAlkCeM05bKL\npco4dtk9p3rsMrrhJMutsAD8YnA6Pq1sMMo1ApcYd0WkVYotbEg4xAXDkryd\n4+qHmdr7P4eNHtoo1P8chMDWrkTrSh4Dra+4FaoxBX1gd0bldQ9Ci6gkyH11\nh492f5LPto2srG1whbTfuBZ/Vk2F9PpwXtnofhHCocKxgAqdKHiyNxCU0EA/\nAo5/msDnfFTdI+r1TI+JCH4DPsZ7WLnX0mATBvtMxfeIgLaehjY4+XLTUYao\nH3xw\r\n=4izY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/density":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/touch-target":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.c7d98fcde.0_1614803491558_0.6529187966069594","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/radio","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91ef79931c89c3b290534f91a7aa61bee90c5ac9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":42,"integrity":"sha512-4t+YoMFi6nI72hY2pLn2O+UTAH3Jof+r3PX2K+OLkl9/Jf6iCTtZxnudx6Hga2DfuXQqhXlZVUXDIeKsia41/Q==","signatures":[{"sig":"MEYCIQDJpM0cNTo5FWPqrFmZKC7QJki9DI8ZuCOziRZJuofXxgIhAPhLGipRQ4e+3SkTc9Eq/rK4+0d2Vo/6SUc30fTnG6ON","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqNCRA9TVsSAnZWagAACsEP/jPGyoL6tDSD25p3a+aY\nYV5CoBzItb6UdrDBz+OBjoYDDRSfRLW2WPplS/KOlvHK5IwwVUREt/HPE3ZC\nz3s9b0OfkBBFwVdF2Rdl7ARQJ39yf0EImLTtkn3dBj1uhkolYNnUmNQTAnZo\n5sFJ9dMoDN7AqJAWuPV8KWVL58kr1xhEwcphYImaBIvJM2FBrN/BF1CTXlgz\noAlFi3B8WGWblMd6AAri4BMgTmmGuijE+IcfNFBIXvKV/NsAl8Jo6m3oo3yg\nPyH+K95jwLlHtsWwo2IUpUByWn+azWlligYXfhnzxn1Z5EW9pvDitADYoU9C\nUD00OCm486vDdMiClXoLgt0+F7YuIVuQFdJhsluuWbgrheYNxbfNBV1KDtNu\nH5PBjdrBeSQX1C5l8/hcMBp9Rtoxg5YtRpZPx0lbXgaK+uxKZpKJg6r0/iF2\n1PTWPgW7ZbykQSUfHpMykJ8rvba9w6hrJxLPOhU5MiscjkrVfxnGbUOXf4N5\nWOh9I0F4dxjy+DaCL7QwAfKLrSNYg+haUwsDK1ZEamTZPkne94EiJYelPFzq\nWWTwVptmLWbWunx+Rj3F4wFo5wjDjkRrIH+DtYMAlP5GgbrjcWfl3dowXQL3\nf1iEpwW9hps+r28RKz/Pefj2gzglmBlFwH+UVSSjJ1KCuE8FaR2VudLqNYgz\nGMMj\r\n=7Ghm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/density":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/touch-target":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.4fef8bc1e.0_1614813837173_0.750883937070816","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/radio","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b643116a3df38eb23f79327090c952d250606d9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.afae3a3ec.0.tgz","fileCount":42,"integrity":"sha512-voRJ2YTxmZ7uxYQuLa36JYe6bl2SJKFlfOQxjuK+UwkqRbFMfN987OjE74sFoKGWoGeJ+xpBr9g7fjwLgVU3hQ==","signatures":[{"sig":"MEUCIFP2jPBs+Nm0pOW898iq5PqUbXqaJBQugtnd8XmNqa6DAiEA+bYuRyzp4T+f2edVFvMSs3cSmP8RvQk8kbr/nqaaJ2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7JCRA9TVsSAnZWagAAJDYP/0BHb3JI1dtgr51G4FQO\nKC9ZtGwpSK7iLDG33A82Oi6U6BAcBAlalozQGoh5bxYhhRgUmWA+/1DJnU+w\nHhPkwdaCn0vZuQgG8o0nQ+GulHlMzT9ATU8mtDxl2NQ3A6CIKj8wZ5jvW8Pj\nJbsxkB28ukXJah9ZoRDIVGarCYjNy7Mzr20TGsoKMHzWonavib19Rv71ONm+\nxXyoZ2eEMQetMZjcxsLYcF9kISBP8azAQa62B9BMVjNSXrXbUMU/FkZ51cGj\n+SS/wJMD01DdnZEloo0xu1Ank/RPwXTdRGB1j2eIHMq/s8iTOdWRFg2orHT3\nYAfVvcK7Aa1bagcN2HbliUYcyNbHVKRVMC4GVk82v0sHfsbPnOaT4jEjqX6U\neaSxKZ9u6ySTAVlTlDYcvjvuho45cKudOkJDHyrauwiQ+SW8jr2rCj3EeFgG\nEqyCCgb0iecOGLW7QCEyY3nTDyTDmRPmosJryaN/4X/ppHvB+07iUnrlcL4x\n3qQhgkxLt2veqI4Lo7GJKbo/bqZRhakyeNYg2gbkAfE/FrzeB1mZFPbflTC8\nAWvrLrGC/Tbu5D8XNGjfMAFjhYFkK3IEXAyFgo2iiDZhUIFbJer8mCpcrKjx\naDCGeOUW/jz765E1K+oZG7f1j/XoVLV+6SoamNjgZO6FgAF6RPGMgJ0T0WwT\nGJk/\r\n=5ygJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/density":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/touch-target":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.afae3a3ec.0_1614814920879_0.3114551718655638","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/radio","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db5b4c5233ec592fd4da04f9c05bf4617946a49","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0a0b10f22.0.tgz","fileCount":42,"integrity":"sha512-+e+aMhm2w38MRRy0wEDFdUsU6Vhya/EaURcEtCxADS3+TiGz6bbUwhIFszYilBYi4+iU59zEmH1hMlhuuNVHlQ==","signatures":[{"sig":"MEUCIBhNEqsxXTl0PhQvwEyi1QsUf7JTITr+i2++Dyvd24zuAiEAmwBCjbQKg46znkuASY0FmZWQYeQX7PW9rFDFmSFGUUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCM4CRA9TVsSAnZWagAAyykP+gJVUNCesz7iYr1/BIEK\n+JalTcMggIj3ZFC9Bb2WPaU05X5DTi3ZQTyiJJDRZiyU+3qOLV/sv8xC6ibz\nQP89kxEHxTPbCaV5WjIV/J4B/lU1SfUDwkOWjIUrfbsj/0OQOcxusEKaw3AA\nRqMCIVILkbA/KdWA9ZL5/hIUFueyxGoHSttLiRQcAk2lQRL0zkjMVD7vXZNu\nAcPp3FaN44n6XDMHzyKojJMITEQl5Z5IdMJpmccAN6CDY4V9MV71agkXYVqx\nLtqkzxFfWElu2j61GAgyxUXO19t0fxa+zLnpafRe7K8qW2HSlDZ+MufiQCkh\nAjFjUcDu8IVhNoagWcKazdB4UQDGVdFHs/KRPwTeeu7nH7Hsgi2pVsd0tyQy\nhEK4gKGnj2HVQsC8sFQeb7DZE2qVuBNrLaRzxgEnmrRpRIwb0azda4EuWF+0\nia3R8GF3lIIwTjx26/DVn+bf7whJdFFhCYfNTzDfwW+wjp96movHiC59Rla0\nWbH8HTsz966R5SdAP7Hzk/YFlZ5ADakVyYtmd7WzZafZdb+1qNdcxt6lv9uM\n7SmTGU/guPYuuq7jR9X9o+wI3Y+0Y4VyXkkH09DTrWWeARG8RWzl8e8hr0ek\nBewfSJegrNadxNwfCu+/AY1A2uYrWhuCApnTzmyUbJKj6IlnaMm8FKHiKdUX\nksMu\r\n=dQwS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/density":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/touch-target":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0a0b10f22.0_1614816056352_0.6880373513104292","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/radio","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ae8509d7942ae81175ab7d65b7d54a597fcf522","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.6f678a91a.0.tgz","fileCount":42,"integrity":"sha512-6MQth2UxGNA7NlKXBoWUJRDGsOON5wYghx2oos89WvJQ62mh/k6J+nf8ogRZA6GjkROGOR9C2mq1JvmPkyiqgw==","signatures":[{"sig":"MEQCICek050vxvsqr+8cFKwNGgWq7FQbefJaHLefC/ttOxN+AiAxYaROI4E3N6phKXietT8WY9Cf1tjffUlpmQUduSsI7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSlxCRA9TVsSAnZWagAAwOwP/AtMz0R+9K3iNL3o1Y0c\nglgfw1LL7V/AGm9WJ2q2jxwOgtLK1/yi6svZap5KWK2nYWQlphODbQ2aAXo9\nr6PI+WFwIvMsL0lXc+o18/NoN6IAOpHATEFa6wmE1Nd608bxwljQZx92jFq0\nSc54fDwkScXaw99qMY5adfctWQheBEeu7vssO3Vcnq4S40MTRkk9lfZzrRde\nMuJOiyGjKOtujgUSUNzHH+5kNFy3wZ7yXAb4+sQ+fWUFKTY+yZksjKHhTSgZ\nSbMS/c8Rlm9azam0hhSYhWGgI2vpNAlr93sG6+hPBc0ftVh4jx1Dtlt50fW/\nw2IfMh8nIhfNT/hFiTsXacy5jhUQjUAwJnavqUCyj1YO/iLDPWZ+A6zv7W4v\nGk3d40IgPhTwMpo3VWCNnxqf+RiM7EODCtF9/zo0Rl9ti/djkiEWdDsxnRWT\nbAPIFhHClGtqn9+GaHIQO5qf5fiQqpLYpPaILcU9K1+uSHKOKaltLqf7JCts\n7KtGRdPuSf98WuHcwAUYzNRUOnd+YsGqWN1vwJE3VUIknsokASdUHgJe3z7M\nUlgW+el9EX1xNn6miqiuRuxCcRq24vb+i5Z7ABgs+2Wmu9GprTt4xSn5L9jv\n6Aj7VOHIeo0ujE4y9BS8z18Ngn8YhkeBQU2Pt17lNrAXIRoiSV7W4gnsF2h8\n+tk6\r\n=rPz9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/density":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/touch-target":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.6f678a91a.0_1614883184618_0.9820900474422529","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/radio","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a04aca2d8d4eadcab5edb26d121a2e2ad5f961b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f5f1b613c.0.tgz","fileCount":42,"integrity":"sha512-AF6kRP5WnbRdARMXyJyIIdiNOCJHPANlItNI831vF+vF7DKdCKRdSRy9qj5/DZe3DTGfSUs0js79jH6uduMzdg==","signatures":[{"sig":"MEUCIEHW66LbAHmDDFhvW0T12LArs9FKJ/eY2HyIVgPXai83AiEA1afIi7HG+Ckyczp68VjQDkxMBwN66b9UIJr6yTWOfAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfOCRA9TVsSAnZWagAAaxsP/jp49CHdOKvQaJqh32Eh\nBDa2pl5rxXvdtRzhUlZbuq1HfbvFme9c9z2uYU7/Azy5VR4D1tT7LBCL2s22\nqWHPhi0ZyaE42aU8AAsAuMT7T+gt/aaOUr02OAL1J110flumVRoCFFBXOfJO\n1dK+BM8vxsod+QlkwrRyrBXP6pn03/UiCXYYmy4XgVvkqjLniKBr9usdKvJm\nobl1oefnROcuUBNNXFujVsupmGY+6pxX3hr42Pcetheqyehn8L90W2lb79lw\nF0GskNBAuZ2T1QcmolZCTeIgxjwbNqo/H93H5B+lP7aQCiGOffafROoYC6ra\nt/JwWUVynWfrynpze/Dpaa+Lpg7CZV1wg9UFZceYQR4J44Nh/HXelDePn7Va\nLDsAFUqveWPOCuwtfUND7DFpuJFRXPhrQWavuvZLxH3ipdN/ZW7R1guj1yYY\n8Ubc5hdH5JFx+1+oVA1wOcFGRkKKIxNp3jJYBfby+l0wObLkA6LFX4GGRQA4\noPA2X4ANf66jvf2fLUYR3HHS2Jh8wEtafwfeeZTuz/TUj9jl0PTurKLwGaVe\ni/h6S96E+xIWl79z/RDSDOBauKFJOvSzS46X/2f0ZncdOMqoeAWSq8bkpcpk\nyWG+ZFSsW+TibKx/PcIH8lKw+HGhNfmvBYu4SYSMCFIvNSaOlTJOSgG7srfj\nxMio\r\n=8H8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/density":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/touch-target":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f5f1b613c.0_1614890957923_0.7986763488031097","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/radio","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e8652f6824e725d602fbf6b01abdcae64ec33d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.606e767ef.0.tgz","fileCount":42,"integrity":"sha512-WeBBI4SnzlQEWsQpTtvndhG0Xp7NMsZEudQ80m0cGvGA35naFRXD1FdRuQTk8hC83YWlIrXTHWmKGTGXQqZWSA==","signatures":[{"sig":"MEQCIFDqtkadlkBTRUsM6u4Ge7MUP1Lda7ow9nEdepj8PKnEAiAT1Qlcs6SBdTOqv4HQKXG8CDAgqdl0Uu6/paITPTKk6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTnCRA9TVsSAnZWagAAIocP/ArhcpikAdQtjTarv61R\nkftFS65ID6rD8hsxiNU9fsQDOaSWfFUasDiNwxn+liy4hcI+xhHoA/450GVp\nXfBzbYt8h0NndlYiJerVSs5i5mmuCPLUTBoSltyl7Z1NX2CXZesNWZUiu9Zv\nQaP2HANVborGS6ySokZVm/NiAqEbNtxhaFEgjQhhT+3I9Z8X3ocKrdl8NJ3F\n/6KJDeQwHYJjBgzy4n/c4+n+K/GUumTx9qbxn3i9wJ5osLlthpQttN1cHY4u\nyL7hx7tR/6gJdRFXr0dR0KKIg3IYVXcpv0zd21nwnFjj5riOBobP8+VO46pa\nz5ETiASgyVVJsqywnnqL2Dk8q9t6EDKPe5XPeV2sQg7q6Jue4mzay13/GDOl\nO4Uy0CkAsluUiyN8BV6NH7lK3inGk14RKcFyJE+QzqjhyciD2m4vny2w4TXI\nrkrbXacJ0CLkpJN38uyXJdT23w5VREL9UGfKmhR3gB32jSAuBwdPC/RDCDzU\nRArSKAOfG+OccZdPWQAOi0DlyQaYdk3fsNcLjxqzABY4YEfOTW8xDRJV6i4l\ni5FMsbN42T9V7gj2cJYT1BwQEKUHRBc4jWFMcmeVYZFfDSmR8OU5nm6j/cqo\n2T1QZskf0lgfW5kwEcc6Z9rfBTXvfxtM0/s7QV14UYizOB2n3ZmakHvtVOYA\nXdAA\r\n=hjvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/density":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/touch-target":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.606e767ef.0_1614894310418_0.9862318987664824","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/radio","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"911a74edd70ab92f596ddd5ba0b29c3c91c7d2d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":42,"integrity":"sha512-X7/BPER3RaZCn2Roz0Qk8QEyEeb5mBJL2zoYPQ2vioLr+XBdx1WJV6Mx8uiroSgqgVQaWumTnOXeAlqYp9Qx7g==","signatures":[{"sig":"MEUCIB97ULGjS7i4w5gaBkXpBl37DxTobo0g1YC37z3YM6JCAiEAlIoltQLL+koDK9ihji8J+mT4ujKazqDKMSFpFQdHAeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQweICRA9TVsSAnZWagAA4A8QAJ931AnBtdUc5FHTspu6\nJYFIe6pr77i4b4h6/G1e7iSzpHiYQfevlWxCnRk4W3CZYQ/oAAT2RkCy2/Oe\nz0H5u1YljuyZgwRK4FcCqkuZe/yD/Pk8ozwSyOlbEXMojvvlX5A1wpKL/Sp8\npQ4wdimYvJhJ+8NMCA4UNqrtDRGAdYJJBtpdAM+oa0ric+HMEojIXstRxnrO\n9ILdKITz38Pbo3pXNvMJT8J8Qsm38B21/z/A0vJ7YGKTWzApHxO/785YqITU\nQhl50kUq8qhcLHPoz9kT+USf0uv1/kT+n3pFpWhRU3/MDuDT/JWMtj4rWeNy\nKHqZuD+rqvhjI3bWY4PHJFpW9xEEBJzvugjlkl1r8+3Ot3vvBrqW6Ztc2xy9\nz36KkCuJ2r3jTnImSkAGt1xK1G5nQVteaHIqpYUG28Gx7qdOtoSJQFmNjVGE\nV1qrZck1ZAacsOmyBBpNBYzdrc0qQOlvvRops+Qu6fJyZerlmPelwOJA1Kav\n7Nh7UJEJZaNMium4iGdciFmLxwYHgHibtcBlosOu3igMzTBPeQAwCOtsq0N0\ne3+qm1AjBIwCN4EUKEHx7q6mF36A4tQ1a1KTwt/G62s0yoFPhQugENB0zcDD\nz2VzcELLK5FSgMRDlxOqvJsGI2Al6g3zvFaQHMnTA9fE5ZcuKXEyfMS+xoI5\n3taa\r\n=uxfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/density":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/touch-target":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f77a4dd1a.0_1615005575707_0.2004905457390258","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/radio","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38aaac22d2b28ee8b758ffa0a3eb38fc2b2d27d7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":42,"integrity":"sha512-139rHuQrx7krU+4I3BWQVBFBvp1I40/NZOJR4m/FEA4X4cOC9wekMYkYPzO32aJW8WOQTsbPRx6QYf/dBJHUCw==","signatures":[{"sig":"MEUCIQDQzGE6huxdFYoEyMws/7Ew0v/0F7c0satf3n5Go9050AIgV0fWi5GeEyh0jHadUQrMoRF7Mh/zVrEe03JybhU/N14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqipCRA9TVsSAnZWagAA+MsP+wfGNI3Elfu/665w6wGY\nFV3Wp4NcAAhVy/niUqB3mapRM4mDgiax0SWkCH0XGyovKisLaDxYJhMP3Iq6\nvfApuGQiz3Wu52xlNBgptohkuwzPjaQqxwkWOFZdU/TDsD2Cf+R9i0g+0q5d\nPjtuzXJ0u2v8+iIyOL5p/qzBWgQ6R10xnIRl5iYfNIbop5GuzHeL6gvyr3DK\ndJr61gIgkhKt8BS76zpfV+iStTu5IIwWWNXX1rNI1pa2aRRX90rkdby0CmL4\nO2X2VS74S2Cl2coaxIqsYL0RWi2jCvIsLmUWvwFQUdQgVrFydqLzNBm2ujLr\nWbCqqlAp0MOxpEhNWRRbuwDyBM9IcpjlPDS7+aB8gDNQIWJJV7S3D7JF0qNx\nZJCu4wHphMIH4N+/WzTnM8gv86b8q6cqKaxk4ODnyuxmENpI6VRzoWLsaEyL\ntyq7XEiU8Ccq/rBl2YMNNCTmZhB7ULXxQ4G6ojI6I9QE718pjsNIWxfk4Vrj\nz3ZgNuxSaGBgY/B4rOhK6a3t4XhMJSlmqwZzP6csbWkpTZFNTpXkNde8pyoq\nmswV2AiWa8CqgAx5ksgtHKhV0/AuXDGnTewNn2+gV6zJktY6tNm8OwYioFnO\ndLcRwRYtlLjF5+N0/NXkuPHILEV8ITN/bG8QMvEX/adhs2y2G188uowPlWmK\ndERL\r\n=IWIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/density":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/touch-target":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.2d6ba2c23.0_1615243432607_0.1600433678746116","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/radio","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4d2db0ecdd357d6d85edd1ce05318ec189bd1e3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.7522dcaca.0.tgz","fileCount":42,"integrity":"sha512-OPUGFM2skYD7qpHyPW0rREaVVnGCkxbNUiQobKWho7PZXBagLlHPkdNBVYxDZOq1RokwK60QBodmkcwhCpZQDw==","signatures":[{"sig":"MEUCIQClFPByPPwtapCxXX6mjK6gETpy2Dk0FSxae6yI83XZuQIgb3jSzwbnGHJRWJ/Teag6aodTz8fl81vXiPgLlp446YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDmCRA9TVsSAnZWagAAk8UP/AtKUbSeYP4AoOQsZo4e\nvRQzoqGqDEbv3SuNEPWV3bHLA1Sy6B8ZUe0YI07Xkt1td42DvwteMBEfZG4Y\nuMF7F7Ulefz2kdPlyOXZAWhUY3NWnxYhQm7uB58Z65vd5NFW1sZEuQ1MWJd3\nW5jsaw6aFPh/MaTgkbng/oOA5BstVZwgBzF54iow8LBN92m57C5qD5YjSDmk\nOilEiET7JXtQKg5nyjyg7ST+69SomO8+W5eK4udMqYeCAXMdj4o8jbr8xBH9\nkUTxvDRP0OP9xhHobWdC0a+teXbddasWU8V1f3jnNVasabyWwawxyG2B2+Lq\nDBQf5SKlBp4IndjFRIlq9XJLV1rv70+EB4QbDHb88OV8rB9bfkIRmo18NZrX\nZyUy0u8178MLPlUh+2GhnKelgTMoyUEteELlc51dgQYF4LoWLM4dx9PGej1w\nd9CYYZWtHByNwD6QraRNbwX+mFIKfKr/1dFWM7W1SHDXNtM8vsijuClvaUnB\nQVasc/XRPhMwzPMjTlLcTeSbHSI/YjdSqVvxV5396enbIiJYT9d5G770YvG2\nPtFnn6Z/dJxRZiqq3+UYEHjwsO2q4nhEUG/6qha60ys3E+4zE5uwCMczrNO6\nplJYD9XGbAXE1LfUSmeCZLeSvrHSkaSL+kk7W03ujJyRcDkXrZT26tAUhiWG\n7gkU\r\n=XhQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/density":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/touch-target":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.7522dcaca.0_1615249638176_0.35836312364538614","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/radio","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc3db6406515ba2545b879ede0d81decee7a0a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.5c0ab7401.0.tgz","fileCount":42,"integrity":"sha512-PHVI32gca+I/kgvZCrRy3p0ceAV8/qnLV0L7gbSow3igY1RwLVtu/AbrI01aTvRDyR24xEEyc5D6HNKaI5jcEA==","signatures":[{"sig":"MEUCIQC5dKzXBE9a335sIBfyVb6AtCCUCGTRvaF45VbqMwnfqQIgau+ZSsCiJbTvA+urMtrxGoyjrLkiB1WYuC+FmqoGyPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wSCRA9TVsSAnZWagAAnX8P/jV3XCIGcZ3oqyrKr1ur\nUoBixDCngxj9cwZNyqgdfJd6uuKzxLw3F9ZlkV+I/sE8tKiRSAOv5GvoEbfX\ntEOdKYtHUjaVv8DofO9EcplIXgpf4p/5EcF2hjolnn7IEO1l7jtDmRjziWjJ\nS3ruzh4Amord08LcGVuAqHVZJ2BvcjGweweUoZukXgqt8xPtbm2wv9i4R6Gy\n7AQLa+ibkWgRW8FoXalX4ncefb95xE/RlfpcdhXdDUrT4au8ap+iFs9Qm7zD\nYJ9J5oLTIfKT8SCuQVxBebPrOoG55I0IWmM/gJpmjHbKmHWL2KG8chg6o/DC\n9TXf3KMtbEr0CXL2fw7/qYncvi/HC0Cy+mIrlRSzdGG+zN2Us5OzPblHOX8N\nlPwIh9mPcTwApx2ggfuIkSknYAQoEij1saZXQun1CxeVuffnJiCPxcgH5jsM\n1t/gG/u0lFMcyA1Hqr8Igoo+SidCwAvON2fEIk/lqWajztOwtkyqEpqD01Nb\nCQbEDoYzr15iWesy46xFiMubbdCc3MJNdsTgPwr/V1eYMLvPXQ4NQdK8gGg9\n3GGs3oLRJZOFiJagjQashBizfmFhTBNKqQE9K+OMmhtV7smNHpG/PCRkh3d2\nkKNTmVpezeOp4Kx9uRFOjuQGPmgSVZLKCZkhItbk+HMdYckk+BXUUSKEofIk\nCS93\r\n=lFqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/density":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/touch-target":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.5c0ab7401.0_1615330322356_0.0715611195214827","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/radio","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"105905d832034ac1b11306f2c8450a7215eda3f1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.59010b6dc.0.tgz","fileCount":42,"integrity":"sha512-dMXv/NFjRcKEj4X33ZutjbjXLsma1Og8K3nMpQqNKkOEE4OE9vpgYEn4UvaZemDxZnCE69K5EEC2dRXSPq2YqA==","signatures":[{"sig":"MEUCIQDhq5NdNuE8HVFdrf6SjtAA6VBTm8UfCZ7yGElaRha6IAIgCOvwxImBnqFCktLhNzyMcsWDUks0XWW+P+MpNXe/BaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpdCRA9TVsSAnZWagAAx2cQAJhrmlv5vKVW3ylk6K6e\nBHxx5Czslxr1YbcHsCFMLmw9/f0SVsWpUSnhpRTkv3jXVL9giswS/Us/YR66\nATY67jFh4sJ02WQtaGwvT9COSeVkB0PmGIHYSdqz+ZDlydTuJ9jZx0dqPbpu\nzJMIDEStiWZlujowCXcGefYuBbo8iBvHr+jQmUFuHZ0lBtlN5GC6AcDsJo9y\nwvHIGkP6pRddg0XyOfF3k2/0xmRnlKzJT9SI8HgbjiJA47ikgDFytGUegu+K\n9iDAuEsCnhqvUoU4I8+KWUd7U9C1yY27cke4hC7+4FuAuUnHmFXHXkOVSQAW\nUe+uKYyU1ZyG1WxjKTTpBo5ZXewilEZ8nPcSYOsh+kwSzuu9Sh05duQk0CiH\nPu+xWB09yjuw04PyKZ7voSCHBRNIM0VUoeLt9Pq07AkaRQVoITE2sHspJ3kG\nBYY2e1hFfD4ZFRwZhJWyohbsybRVsYjadX3lLWcclaLb35YszZ0J154X8mcq\nvFMJ2612b7eK9gZ8WLA/SFbACNpQMNikM3d7RJSwhhNDzOXSbbRNYLlx/aXd\nF3+EE/GhCQJnlvKyvwvPBnWcXO/ypm7Ro9SRpFDMvwhw6FTBD/9Pk8AIFdYS\nsQHZpKR3xbvwGG2/Q04pxXBYAzK+Fe+TraVvNl63lZPpDvN2XYyF2MI3+SHb\nnm9X\r\n=1RQ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/density":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/touch-target":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.59010b6dc.0_1615395421076_0.26548169925199994","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/radio","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17479cba3151e3e9fd354813fc6928ca63dac6a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.9e52f5544.0.tgz","fileCount":42,"integrity":"sha512-sEWMq88ihrpha6mmWFTxf6uMrifukDRmlcEzb6yyn23fWE2ug8pU5rqh+D31qwDlDR74n0h0x5pAPQbmW74rBA==","signatures":[{"sig":"MEYCIQC4uiml5HG97pJq2Asf8YGakAEacLWLqwjQ9ANR4zMUdgIhAKiNu67ctxNw0y7E8S4BwGJmn4CIJBoYerVi/i/FtlH5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVU4CRA9TVsSAnZWagAADt0P/imauoaw52nOEuJtSGdK\nDYLim5fGHoCzb/DtnF8sRh8h5qIHXNu31IRUKZyV1igCgccOQYOpsXeTxC2v\nYNh0rWP7cHkM7FMi3RSyFo47ocHn7d7q74teAWeuta6yQ3Dkt2IzWBSxS/1H\n6crtGx9HYjnEBROUn6YZEMn+nCkA2oc0JDjiWeFAoAAhfwecL6YLHpswB/F0\nyVNzvJ+yEiRx6zSwd4pTgwxht7v9nS43Nrg1TK9T94LMMJdPJc37r931zJ3L\nPQ00Cp0nwNzbjPoUJE8zoMlvdc0tS3bCfMf/Fr6d+CtRUkGPD81JjM8ECnnx\nJYQsw/uRfMf8ZiJoK8zmlhzPm+YbPXsoeTUulNjmT8X9I5tSSJKKUMjdGb9R\nvLE39sxQ1RfZlnpRN9cJzJB6JhCa9vk8X10jsGEVT3MdkVSiZt4RxGTximRk\nUU1xXzyMtbIQhkoA1ckrhEmvO1mqcGg0iAMQYgwJhlWn66Lk25iQ29tn9co9\n3iqun7giv+k+O6wX+HheJuGX3pLA4yg+DO/VVQftffuiA/6OoUoIvIYQrgW5\ndLRCkl26jCBxw15Ru3rY0+BOGQQGBwSmYVZQECx6jwWEuwjksE0AQYBMddWB\ng67Domxt8BLyCLi3QOKRxjzrHATRcDbSoicggGPk6IH2ly6IJHEx7CUTPCek\nPczo\r\n=xqsv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/density":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/touch-target":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.9e52f5544.0_1615418680162_0.7944501988429238","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/radio","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f1d9a65a2610f577b2fa55cda4ab01226c0793","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.a678806f5.0.tgz","fileCount":42,"integrity":"sha512-ggA/9ePChlwZLydHaiRX2mZlCUTICSFZBRxSOLsqwU2zSRGT5XWNEubrSEeS2KqxtRhkJjTipWn9LWgh0sXPEQ==","signatures":[{"sig":"MEUCIDGn8TQNSTzbuyfZvUByCT0DXledFc5QGDcgGLQD72qfAiEA5aqZc5q7z5GIdx6cuLg1djZvieg7n6AAKldaV532VWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXc+CRA9TVsSAnZWagAAwzMP/2SSrkFDwWh/dJ76w8zy\nV/RuMVB+XpieECNghH1ykL9SVnVtY9DgCG+tUGpAbDRK5AFE9B0GOsPWGYfA\noFRGTztzYuyyodad8KHPVT43xyniL69keCWiK15+TfTIIDLIpDyH2XK0NBXD\nTZEabXaNbCiH/OdLi/eaC7VEGRlW9DItmpvaz6kfDWS54k+Va5v7K+joe0MV\nG5+vWci2Vo7/dInLBAeWhVFhb/HIYaw7+k1EhmZ2RUjZcNhJFA/Ht3lGMKQ9\njWyUCDH62fhzeutV778DBV75k6HVzpMaF52bpS1yrXyZhaSSrDwoIKWB0P3S\nR3lnoufbrkr/g9mIS3Pz/lkPPLuu/IlbYqmtxtXN2itT6JAHMqG9o9d3Ou0V\ngjwQIOIEB1YplPIPbshVg5Y1YfB77n2UNtiCl+6sL9nN+qBlXR0w12GggKFk\nPp7aagnqrlzQsp/DTjF3rL15tLEkrUq7H4/Uox0FRjwjIIzqj4Rs7wHSEMhg\njSVlW6v5YpxJsisxHAz2G9DQUOOr9QH4td98mlhffQko9g31yf+oJ6dKPWpW\nFGPSN5Vw5oKMck8m9elomXyIQJQixAhxpOO5WR46rxFkhejyFqq5vBptsts8\n+HzfqkS4d3QOyXGg6vP/lWBB/UUgFA8SyHuFyALQGA3qCMD7bOms+vcw/u7S\ntqeo\r\n=J2Dq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/density":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/touch-target":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.a678806f5.0_1615427389723_0.5861897534054874","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/radio","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c15c5a32f72c725cc1477a24eb08931ec3953f76","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.b2d22df5b.0.tgz","fileCount":42,"integrity":"sha512-rIRf7FfTiqtjvzU5hdrF1VsW8ymdk827rfvuhemfz9mQINZtKcDm1SDFrSytlM6LJmPeX6NYo4mPctpMpQh48w==","signatures":[{"sig":"MEQCICquAJdsEVpJ6XfQNtFBwBMiLGLn/NU95JDmrYRmSsgtAiBYbl5A3wU0Bct11c8oyQ6jwMw10e5n+aaKsv96WyFNJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0hCRA9TVsSAnZWagAAuqIP/0iLr44HVaA+DdhwI9AW\nsTJX6nG9IM3YCFJX4OUUQVGn9jmHSagH2H7xeTOTMsu5rtFa3iypfeCnXTAw\nf+vJenIEESynWT7LIG/pX/7A02oza2X66Mtu6vqQkjQeCFrmbekk8UYuY4xq\njEGR6xknENkNl52HPJuityqvU77NwhBi7Na3zx0hO6xf5EWOEHA0+3yHbMzc\nF+IAqltLSAW/SvVxU/Ni1DK6KpGwwQLk24iYmvY/Bu9b70xnvUVALkZybUku\n9kOhIm5Jv4iLuaEST071u/GgP6q5t/cqyCyFh7nqfNsv3n7ai4eT58kKGG/t\nqooly6ZmKm87hmmSXCYCPQ/64QwoptbnIWGJLVkeIjo0nU17HYxrip9lvTjb\nZnSXZFG7FAZlbzu1/OOQjORPjHkhaZkojgF5MaJx6b9TvgOf71tSppN1VKU9\nBgUhoo+qvM7D9137hYz29IoXnK0irg/TD562/HmRekXe7cxd2BLlNmCrzVYa\nlVF+mwxbgwe+Y/Tkd+vP/kR+97vah1cuW48Te7OuQZba9EHJPmYdJKZifJ2o\n0UVPfVfcIZPBiTQvXKi1l91jZtufLmiUY/vDWawkR9H/FivR4CRPMdAZ/Ev/\nFJxK5g54Q+SGIdd5zTlSLvZkbcnblo/U8HQWK5aQNbmlVtQHHHDJgQvwoK/O\ntD8l\r\n=ipA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/density":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/touch-target":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.b2d22df5b.0_1615482143991_0.10210264491780063","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/radio","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1214a131bca75e409d7198d9e4cd4f3309c97386","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.81911b707.0.tgz","fileCount":42,"integrity":"sha512-2mfrPpxTu9p2raUWLFj6itqKwPg+Z91fu8UC++vdLl/OmNKl183Nqid3HJGCtaIEco6yZI/1zhHl1s09lVSMbw==","signatures":[{"sig":"MEUCIQCJBYX0OqQug1xdS9T/ZNaYElh4ZD2VoVCbTkpV13XZdgIgEaQKMDUjd6SEW85b0AZMb89rM+3AMNpCUM3WakX3CG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAGCRA9TVsSAnZWagAANRwP/3RziNCufl4r0orK1lpb\n6u2FcHa5euI13n0pBqppQLDxoSde/mZ9c4k10bwasXA3XvBkItrrICL59FjS\nU9pb4OrOFA5EuMx9BSYsv+vnnyI2Zy60FuqyIEqUHdtHiRY+TKhwrgWl2piT\nxvoqmHZfz/0VIPR0C1Gxc87bm+cPvxmXRF/ImnMj8FRjCpDd61YsRhVpfiJ4\nCaIe7hUPXT3X16ya+R/NNMV7iBPCM8/5Z/rvnz5/23XKRrMWt035hSrGjhm4\navZmX6ueZhBXEhvEgS02kRHzqdfwBmvRA76P7IZ2ViulPLVGHtcvhRqTLh/d\ndX243al/v3HAi46qooCRxqKBOvkuggPeHFZHA7xF5KJXfBlOAhAH6WDo7L8r\nSBtWu0iK9PUhHBfranSEdgn/ycfNrHks/XW9x4VaxUd6cIfmeTLM4N48H51Z\nJyOa7ebCBaCECrUOyRoV2UZmvSLu2efQVZvNplB3dd1qpMbOeeqtyCw7Opv1\novY328JILWHaLJAYC0j/AA7BgbVTABVGuo2B+xAAN1wQsIKvDGEpoRFGEiQu\n4Byy3DCQIMjtZ7Ur2D/LwenrG9Um2A/B0dA0pxgjB5l0HKzXJ8vDhE1lREe6\n/0F/FW10ioptq+vH0a+UA/YUfnYodSjUOztkiNbocUQxuZRz/m2W2yphgS0W\nJDch\r\n=++Lk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/density":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/touch-target":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.81911b707.0_1615486981151_0.594235621626853","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/radio","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c500869dfaa11348ec43707dfd86a63dfca3bea3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.9eeb35c38.0.tgz","fileCount":42,"integrity":"sha512-l1GXtJXZE9hFzlds6Pov3V+FsVEVvWNIWaeaV49lykjo7XxDNufz0kbH36rkip+miNlDqC/Vh93iQCvXS1OKqw==","signatures":[{"sig":"MEYCIQDCgriMughbhW0nVlzRZ07HjVc5ttEdGsh823gIsLy6YgIhAPURnumKaR1bL/+sVmeUf43Fwi+/hZX2XrnnanxRmr9J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnE/CRA9TVsSAnZWagAAbtoQAIrnVq1opq6yP8EYHTc1\nIU3QyIXuYKyr+bazYDaTx+IcsRMjoi9iW7/SXFUUJ3Mb08QGoJzSTevrzGnJ\ndLao40hjaqP068FZiVAFy35244CapI/DJXUsfg/4zsqSHiNAtEo/ALGMcLWI\nmfgvz7Z+fjasz7pma/dznqv6wBkVpEf8GycWIZs8SjudaItT0iNO6Cd4At3B\nqPnBDI0PACE7jze0fWfRUiMLPvukJY1Tk85gQDziiTMfKmxhcu6VMxrQt0rC\nfRYmVknZV8wbjqPYMreJAa2fmDLjYi8b+VoxCSoIo2q5t09tEHCWV+dCxV6N\nWT9p8QpRhpoAiHFzwliI91YSJ9fyYC8okwVA/XTDTVmfhB/Zdk8LNlZHPCIW\nb9uvD/jJO0O4ni4Ly7W4dFLW0JOEHXTOJJ/iEQG/OWMxotA/RxZDxDv/pHE4\n+Msrag9kJVwWeS3o0pegRLZFlS+VgCbWRanWxFdKdpMZKRHXvw7KWvsRNBpT\nENNEw7r0QnF1MNJ5jNoQJ/GaifwXQtJuSkjXSZLtpeTmpyOlxal5rPlGcrPD\nGdlKdp0IaibHpVWE0pxYfn5YoltMvyeDw1DaZtP2H1lcF9SB4sGUzD0gv3cq\nPe/KPsC3rubs7ziVry49lx/r4/z7RRdyWXdNVJH0rI2k+r7S7UuuBCdRQUho\nLmMz\r\n=Ok8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/density":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/touch-target":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.9eeb35c38.0_1615491391036_0.7385347223002885","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/radio","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012fee4116a7966ce387652121c97757c0414a67","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.12be3e95a.0.tgz","fileCount":42,"integrity":"sha512-RLw9k4UI4mJzaSQDvFlIlzw3txSAacar9vBr/0asz090ufCZyg54ihZ43KBERc44606YTKD6BMPG5fwFwd5XLg==","signatures":[{"sig":"MEUCIEFYbiqbe0XzUNb88R/Ehn/v89Licypf/bhbShirAgflAiEAjjJqd+WkgyCpbgETPPIRt6ZjXPYqbUXlzzI7rDEn2zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncCCRA9TVsSAnZWagAAkFcP/2OoyysOZ+rEaHBF7ibQ\nF+NLVyDHQqVv5r6EY/JtJgbEnCR/qzJaTQ85ZTaD8IvmX/IXZHiCkThteqrh\nuJhddDEN/wAGItU6t071ueBO2flvgOgaxGMKClJjrt9oVlaBQpv7pI2OHnJc\nF9z7Kb87HKmXU3SIPdV60EsQ3LKPadHX3oP0udodxIFiEq1SxAwb+4H3XpiR\nhwc5/gyTnQr4t0b9CppXD4sKItleNjW997c17bvt0hxf5Dg9jGRgqmLjAgKe\nonPbwoeDVaM4i3P2Dzuuya7km3HGoUI6xoIPH6JTRHIGCjlR2pOMkUzm3iTk\nO74Uja8V/26oGk2ZTiUlKhDJy/8+yrdAB8B96P6JqYbjCOg4wz4dV/JbOimL\nQKDKCJvp6ZxmdT9mv6edL0icQvYRia/Khu7IzIU8P9epvhiOLWHAXD8wcfPa\nygwEwFB+u2hTmN+Mxt/tmVOcOF+G24FrEu8lFZNtl7OoZmaH4l5g+5ptO+cc\n+tzYGbUDWBrSTZqaVSn0UMYiyocfrUyw6F3LAZbKwAY3KuCaYHkjYECe8IpF\nNIf/V8Vfe3cSaliBNNZHB/POPhlPUAMno9bvQddK2vPUV/boikZHM3aVHZYs\nCGdCCdMMLpi3fn0EpVbzWtJFwKA7muJ0PCKG0nZlApJZ2uDQvB7M47WjxKfI\nHDVZ\r\n=4i/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/density":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/touch-target":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.12be3e95a.0_1615492866409_0.8432490850872865","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/radio","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b283b909d80d06a0bceeaaebf6bc7d7c4f6856f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.e683bdf4a.0.tgz","fileCount":42,"integrity":"sha512-nSVG+uUMZwUrfYg6Zf9+F+uutn+03MVP0/khRhBFm6CZemWSHlctHMrhRg5QnanenVg6OqxCznLfd/B9eB04nA==","signatures":[{"sig":"MEUCIQCEnvyxZB15+Ts9NYYx01rLbbpLCvHptEAi13z14aV59gIgJvKL4CzUsWw9PjpQF/WRT7gA2T9iRlip+nraM41X8fI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSni6CRA9TVsSAnZWagAAljgP/A4pAFFv9J4xLiEdbtoN\naEMEf1+O8NSgbsUrVZrYXN4Rjv9VEGFr9B9WnfVppSYONlCG7SSM2uTfEads\ntf4GXCzhGBIDSUHWsNFPaHeSU2P2GKcf/IFsQQ9/umSXQjX9/j3XiaFa+r7Z\n5lb4QOkxy787RMIxUxrrzwjugEzPmKdWfMbqMt7YdR81hzDdMVrEmMNlQmr4\n/Unip5k8l/jZcks3M2MzQl7W0bU5fIcCG9CSYuqNJHoTsnbtGYJebORq6Ot0\n5MVjZRytEA4wBPZJ0nI4rfNijF2zlygxIfYwVCtvuTC73kZuIJm3xpyopjY+\nMjF4nSHvXuSUL+Ac1PQPkWuk14ZRmU66qx6wsjCQzEgzh14RratAOGa5VRtI\n+wHJ6T2L27QneupMEjIF5vFtQaGKK9+W7E32b/0vZiRFW6EqiZBOGn8PKx4n\nUUr+iKYnpX5rKmxWNqN3GCNi7BY+N5JKPxRj77ARCdXF2SXv9Ejb6OWaBuZs\nJYiH90D/GqNef5VFU0xyu0drBvAHSdon90+qKuXrXG9y2FUMeP3t0URKAzga\nlI4BwYNHKIdPBgmggBbyZvWZ72Q7eH0X7TBJtKG6I649xGoLPKrxHmsCpxlR\n9noqWt1bkd7EL3VjMq31iQxIp3DHd+5y5mum93M2U9kj0ZkAVE+iUN9hA66n\nZ+WP\r\n=b1Z/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/density":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/touch-target":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.e683bdf4a.0_1615493306314_0.9453770410417219","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/radio","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2bdb32c3479df92d9a3bcd7c96785499ab470dd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.a07b6d486.0.tgz","fileCount":42,"integrity":"sha512-jzWaCQOZdw6sBx/Zbqh0X70c1lroKc/vJjhVmugTa6WrKiaV8Nb0lRfhZAxzdrvm7YfUwW+Ur+U00dTqbcdoEQ==","signatures":[{"sig":"MEUCIGPO3QEjW99Py1kY/x9SkWExQlK+N+4ZepUAuAiAEWPeAiEA37vHSv8X22hNqvJwBS3AFcHfGSVk38Mme1f+xOPBuEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5xCRA9TVsSAnZWagAA7WAP/0jb0kRcjxBjdfIodjLh\nrnDxpJTlsHKASYKjMtFKEo4pQRrCzSTyXroIfrgGeXYKryHFoi7yOqFKfvx1\nlbIc6957UfD2K0flSxz0p8USKualW16xan9up+mNBVAD7vwRJjUV64BZaxer\n1i8RLAtPR6kQiGbEkX4oz6OANIyJkZeZy9G4hu2Z1gW4mORHz3qEi20mNdh2\nmQTX5ChpqaQRPdVIo1P4yu5O9DLUuKQkTw3EUQEfqNe232UcCznv+QjNQxHK\nlqA/e6HwCYAX7O5+PpWXjO/9Lr8mPj44i94WE7Y0MxnDqaDZbXwYORTszza5\n/b0nSUVNNjIziFtngpvk1LrXKblaHijhYuwBbczSF/QZxY3G5O/ett+KmTDd\n3b2+g9K5AP1nHk8PhQzYTZplLJze0G6xAt78vi66/UjGwAgrZ9/0LMDpPYLx\nIIbQ6UNlBunRUcXAyrwcnvTx0rLvu5lQDSg1g54/fZSaM9FAPmd2GUg1Vf2N\nCSN21+rIcr0bCndioZLlMB1yicm76CCxB71EwwOC7iKpDTbmuOeJM1HczSB+\nJFv7VpPXRcEE5yj2K9BJezIyCPp1PqYm6bk1eq/pg1qUObMvHZJn8CQJ8Dp+\nG2BV3H0fIwpwdI0UW+dP1FKqb5Ekg6PMnxKAcm2VhKcF6UZF+CFw8iw9GyYv\nu9jl\r\n=gj6e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/density":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/touch-target":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.a07b6d486.0_1615494768462_0.7422518795868387","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/radio","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81cb43a2f1e5a9002cf69e728771602e2dd0c7f4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.1e0653477.0.tgz","fileCount":42,"integrity":"sha512-Pueosd5XtPrO7wk0GwZd74lpIS5HCjfFp+9mL2oExwphQGPX+pVVsRefvTZ6VAgooG7KGnr7+mGjXXDS0rvEzA==","signatures":[{"sig":"MEQCIDPGEazGfj5c3PzYcM3pen32FX4yXicJEuL5rH4WQ3a6AiA3u1d/b9R0qJXNaGFz1q8SWOzuTmYLAkY4JzRqRFP0KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoA5CRA9TVsSAnZWagAAriUQAJV+/Cg2BkXkUx5/m7c7\n412k+IJ0lfNDtc/QuzrJRhYidNgaDCzpmYztAxvwr1EfbmB7/xUBz+Ji1NWD\nC/JLB5up4OBq+F+1sFzpe4fqkGWa/aTLNLHB7MlicVpzieWvaXl3FLoOmpJe\nsJ+0XZxFQaOoabUrhPGjKpLK+ZrAaBjzrCghhGltF8WiWAERmq3UhlwbrNEk\ntbI1UXd2RU31iqRHmK6CiQEMdPsyl09aqaQCxALFykGZgTTUB1BgJcm/Nf6m\nNCIFKPQU/CQx5X7hUNUmrPrMlDxRN2nti3FxD3m3+tu461NTNil5rlVUVRmp\nyEbO+obXCS/uHQ6wlWB6ft3P+1OOsSq4vgkKfjHD0TojhGgSyIrXuVv5dVKY\nq8FDoQUGjgO3LjnlmR9gDzSFxXxt5yh4iYULi6c+kVQyOA2p1suYQTb8aDs9\n9N2msBCcmftlCl0yCmVZ6S1QZDa+kMqSGSTDoBuGW/e/CmpK6Gu3nOE5/lIM\nuAPJmPcLB4n82oxpPRCGIG2LBlzx5ZJVWV4zptAKg/kT0gDzEwCJOUu8NBRl\naqCoDdqm3PkZKQ2gMbKib/Pa0zEIen9zJAJx7NGzQ9alrgzxBjgwHRS01fqx\nhvp4gYf8AE/X4VAM7YdZPtvJmiDc5JNLMkz1eAqVcRPYy6zlgtVA6Dgwd4fS\nh5GK\r\n=O11J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/density":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/touch-target":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.1e0653477.0_1615495224416_0.1220601650041988","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/radio","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac037eb87710b244221940fe0f82af55bbc663b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.148e8cfcc.0.tgz","fileCount":42,"integrity":"sha512-CMN+SOg3dYRQEjnu0bKhoHOyZTxPQVUX2PPo2xUv2mwhsPauZym2l09Fi3JejoT/rQpra3SRmuaY/6eHN5QZOw==","signatures":[{"sig":"MEYCIQCRGkjiqiRAAWqc6wuoAz+uodUkrcuoXVjhFqtJTS5sOQIhANy5r8iLD8yVy+vAA8egsGIRbxarW6yjlsOqS/TcX74X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0qCRA9TVsSAnZWagAAAAYP/jX/Y6ihv1YW/tLY4cEY\nbukCazN/vgO9jbIHCzIQAzUn96lAH2RYH1QuQOG1VfgleeA3fmPIoMTFduPo\nWQbcRyHOWZm4o+I8uiN40anLn5UVfplP+rp25LLfEdw3dMNjFxquvuwPnqtW\nltXssMLt1hKrnQL4NG2R3Jx6JlotQLAFy4NyWZUgfT7Lae3ZJ4FY5xlSpkTy\nxUE0hKxne71q2tTRN/lcGiB1L81mh7UFwYFqiQiMN1emAqoxqlHvOzgjWxAQ\nbmG5lkLfiyFL0vfOU6QE4454xWxZle9fgjYAiPG7oamUEBdFIGeZ63rnn47a\n4UnLITzArDhAWRgEW707WKYfjNCFGI+82bEKwqvkK3TunVKWsQZAG+zJgHtR\niFAlWHIRZ3T/uW9Lw57ezjpGpZrdlXOkNxXS3C2X00W7SYEG7CL5Q3O9HRon\nXVR53daQHDqIMrCiT6mEVVLInRTBduaWxGm/BpJ7Deqb4cFpVPaCroXLXjH4\no62uATSdInhF2HR5YTGEMUHgwEMSwwHpqhYdKIRZRJRWMxNeUa/js/D8FjPM\nVDfgofbjh+T7VamMiz9XWbpQVdOn7qZ/LyUOId8LD0WWFyxag0rZz0KSi92Y\nUs8nltA+gMJxuits6saRNGYSTKBeY2AJu6BL8iUzC/qfnfHNLFaxs/UcsSUq\ng5qW\r\n=M96f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/density":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/touch-target":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.148e8cfcc.0_1615502634336_0.09663403921913849","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/radio","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f68c381a0d771f50b8752a613df7a4afa1eec2b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.73a227194.0.tgz","fileCount":42,"integrity":"sha512-3rvf3rRqXe3QdZDr05p5g/mrlckloXhST75kWuvpE/19D8Di78W7uHxEENHik8uwKpuTWoAKdPnNrQ9KBa57ow==","signatures":[{"sig":"MEUCIQDdmiB/CqjyFVA/P0aAtR7RQQNaDZt9b8ioM9Ww23yi2gIgDs5HU5hDRUOnuiDAIux8mf8Owy8fJ7oMQFWJZmRPwJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSLCRA9TVsSAnZWagAATNMP/2jySJ+tL0sTUaXOAM5X\nNEU5sCWuZzWvy8UsOJkTT/Nuy5Fja84P3sjgiQGENj674aVwRb/RzRHUxpBN\nM31z5HfAwIje66KGKcDJvjv7zDmxlgJquuJM9IAJQIu2q2J5U+1HZxGN2P3x\n/JKXc2qy28Y5X8Qmud3gJkSppur+l1L9w3Yg43ePyzberpDh3YQx8isnctlr\n2S6VC/+c/hXqlhiwNz+r1/WmxxoSX+Qz6Yc+uaM129okejPszlY38w6JsiYU\nqvwO1rmLbC107lX0VqPYW0owz7vvpNYGZsn2pef5R9d4rCsp9C4NOv9tB5BZ\nP5fE1LqF1jiDHtxS22G4qU2zcA7s1kpbNuwWc1VkJJgmH2mjtd4IIKXwT2UP\nIuNOCCNM7yDa5gAvxypHYjRZgE/LBBAC+ZN9sHrykDFSK3LNKWl9E9CCxry/\nztTZJIl7/2aCRRFt8w6GjTUM0uSacMUwawYI8h130O1Px0oeOgNerQteIzek\nuOLrPUg5rxS6qhfV+PIBYmfrluhpxtBkh/l9kXM0JOScdCLw2UObRE0NbDvL\nMqa8ofqlkDDnMgP4p+u6QqFuPynJikvOyAqpk87jfJvvQ1qlWda9JqO+5Nvz\ncWYzSHBhMXv2aocQCAlAGm9rm+SUPQEFUEu6iUGFJO/Rn4YuuI2KcHT0h+gl\nKwmi\r\n=lyt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/density":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/touch-target":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.73a227194.0_1615508618368_0.8266694396902519","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/radio","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98b768aa30a266b48441704c94895cda85f931ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f8579b7ea.0.tgz","fileCount":42,"integrity":"sha512-TXihff968wAA8lP6RJ40Wm2oj+4X/TjPSPhmVZCRnoy6PfRXewMWlneGpv22GwSAGHM0TsQYeOG+i/eulaWg7A==","signatures":[{"sig":"MEUCIQCFoS6HlEwe2/fKW8BhWfOuX+5Vxqnp99gvvwOylI0jKAIgcvYGNt7jLyoRqcsTXxg7HZ7zjzZ7/JO1G2YteIgVrYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1PCRA9TVsSAnZWagAAdJkQAJgBrUCOIEeQqz8Bn9IP\nFu0ib0pRExgxjqHq1k5fbArd2enZsMnhwaEnkNasRK9jc1etNCHK7uw2aGt4\nuOvnBy9BNLc3k/U+QO+24f5rR7AWi+O6eOAsZSvAxVxSE3j96V4xuetqKqxX\n+TwPB4vFy1JHqD2PMPoo2JfiYxRpQTsBS0DgWARLAQ0GkJ0J3wBcax5YKrnB\nCbOvvKO3V/Vqer6sfB7SxtaT0DdtZcDN8sjuMldQhhhqIItr9AM/1GF5vy9f\nTNYGGvt/O9Rme8tkeBif2x+AyGwqgkrEh0Dc1Z6GvEIEn0QdVU56wa+z4xiD\nAxxv609+wI87Y044heq+ptwJIH/xfMWZUUwn2VXinwX8fThGii15ShiUEqdm\nse9jn6IosxbK/1UjCQrN+sP1LR8ksy0L1iPh7Md5b1rUbBrn9f8xMJMkf1gr\nxwymrr+SaSfRNg5MdVwGlVYlyVUj+tOMhaqfy2fif+vb0LGva8p3VUixGAr2\n++acRzCIgf6qp8CsKLxif6uIfadxzP748rVJ3VPLVCAjBBnK+TFZbF3vVfKq\nZLbdlGWIyr2LhLqyuPAcKo1uhOq58x0PfLCtXI6EgTs0x6Fr65z7glzCkWQI\nnRVKCfJLd8a6iW3gAwAqXLg0yb2SkFJRLiLLj3E7MByL0WrqHQEJr7tOGQYf\naahw\r\n=/17E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/density":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/touch-target":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f8579b7ea.0_1615600972923_0.1599643553413732","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/radio","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b25e8c9017c53059bc968f91f07ef71d95c8b8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d2a39d300.0.tgz","fileCount":42,"integrity":"sha512-2xCbegJeiI4E4xzPOlRxs2Qe2duPJsdwYXJIwAnicXgkD/dh2mnJuYrL8rAY7jPeGvnm4CnbeVIs8A7xHxV70g==","signatures":[{"sig":"MEYCIQCh/UzIt6ovVsaX2Ei8wTbLj6p2jIIrTx2/NvtNoSyZFwIhAOiQJ8Ga5ZtFvTyOneqhkEDZOKRmO8gvvsVzLQCt/3Hx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0XCRA9TVsSAnZWagAAgI4QAIxN0UNeJ0G+WA3/zSRe\n+Bz2kWvVR4JmJ8RYI4dG9l375gfA+4ziZshoQMliad2nS+HQ/u20EjSkQZME\n7uVsZdTswT6odQQiX419O1fudlO+oc4qf9qaVN3W47libQfsLpl5vRwJ0zTC\nYPosRoWoBBK++dkV15o13fWcw+YOeNZwkuB0BypZp7swIwGFfb/XOaafwpb1\nU3WHMiEYG8I8yyB8la0HYhb0Y8WciU/KbbbWVDVOb4VjMNP85doiBp038tj9\nyHPQJs5xXtqwSHbWaTNmTI+ravg6dJtj9iAex6Ye5/e+3A2yXDyjbXJiS0M/\noXAUp0kFJZ5xmNtKoq+aItKI0CNEpYNOFy25pSe5XTdE+XRqxHDS3azv/bCC\nNdnn45OoDiGCtAsqvY4fSyLKOjnjH2TA1PSJ2TEkyi9Yg1+ct1PMe4bvTMI3\nMmD6QyMOe3zZp1huSe2B4E/YhA+D0TqAmJIZ2Sg1TlL+Gj/jxgnRPbkUBBhk\nrjQEb4BkO2n7t44B29fHyZtUA9eFU9jn35Yg3zgEA0kwz4/JxZZahZ0/9YoT\nR+HiUNjyvZxL7/G4u5Q6qh618U7fixUjwYsVDI/flTFDUM4Hv1oYwxefJHEM\nKiuuIV1WtXdMcjuqr9KvlaVwY4pszqeA1SIXBqOUMWEjJUs9vJ08yzCXEgdY\nz32D\r\n=uZrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/density":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/touch-target":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d2a39d300.0_1615854870777_0.5367765421219453","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/radio","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7527d6afb1682f447905b4285c59daa5186c943f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.7cf67823e.0.tgz","fileCount":42,"integrity":"sha512-2SnrcpPdafH1m7sjXvtJq73CuwRIEiAeRLC4koZvt/Nb2U05qtpGe1/LeEfzoWJTf6+OWl94MzamCvvXC06aLQ==","signatures":[{"sig":"MEQCICxJdqvbuDikXrbTPhgc5+VbF7K3R9P9sa93TNgk4meMAiBRbAotja/mGzaDyW0USPR9yX9IWpz9Nbu1Igya6efsbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPa/CRA9TVsSAnZWagAAENgP/iNyEiQp5SwmY+LuZqXm\nSFIPGrcLVsRjpwJEXopvUYKgJvNfOTjS9tKKMKMr+jxa3eDKU5lYgj/8chR7\nrkEO4/nH4rzXALWWiOmH6VwDfQvyrRk/d7lqI0TxIQFaXffBWke//BX5EczR\nkudcYBaQXjmQPb+w6Q72RD7mfrZxIHNV1gDs7RYk+9HKr0zBXFp19m/QMK/g\nV+2N5FkIAuPv3GRXMmUmXU/R+sSD24iMMBmLfp/n+wawpdnM6hjHX9YHUAP7\nvaEmf3RP+x2nwbsWK6FC14duLnts5inOU+jzlW2K2UL+sZ1WAg6KcQLOi3xb\nJ9zh5zpNP6qDslxJeursOMIooZqHLUaE0vgnNe9dOEXHc5OWMAXa95jyEGcv\nx6GbZBC4ujdQuqIZpgEAXR+iz85/IQVwUeCSlHcTlYS06xJF8+EOVeuo02f4\nGkDKFzQLrtQ3Q46axfS0DRdHK1WeGbdH5gjCGu1vG9/gwFcT/DBo65jJME4Z\nh+lqn/fSta/+Aspr1anZPWkitY2etkf7qO69yQ6B0ZERA4VCSpPyrVCoJsi0\neVBnoAiPwoWnDABLGZ2XH7lGNyJYtp8wbyr0M1vjeYGPJzmF8f266kF4A4QS\nRviQqnhEC6cyHWf40R7uxs3GFQTMSuHdhagt7dyDaxEjH7OnJuLKXfTwE+ju\n0x3L\r\n=urtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/density":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/touch-target":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.7cf67823e.0_1615918782649_0.9448695150953077","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/radio","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9c99aad3780283d906b694ddc70b1355ad0f86","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.67d780c79.0.tgz","fileCount":42,"integrity":"sha512-rk9TtQ/9Sn5g8071m7qN2w28t5BclPH8l4wnMvVolkIOi/Iy2ek36+avQ/G7CLjUuKcszDBkpCHl0ACirG2U3g==","signatures":[{"sig":"MEYCIQCHOESPVR9lrR/eQ36UmScu5sS28s/UexQUcra9FgUVwgIhANd2JUZ2KxiaFkRdpMcAMyY65ZcQvLLzh8MPYrFsxIAk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtLCRA9TVsSAnZWagAAuGMP+gKb0jLoei33j7mSB8EJ\njMs9hLnQtlZCf8YXWwgsUNMLowTRFvzS6TM7xmYU2nxDAxyU55zeS2ETqD3l\npXIezsgh3ecqT4T0FaSFxpK3uZRhCBBek4V/2P6paTU4q3vl+FP9QDxrsVTg\nvvHtTNhRJRmLCT+SgSVsjdl0HQ7trP6IYiLLgktlHkD5qxAYlhOEbqh7DV8v\nxJ5q2kumc5kKJ899rTLS/Pcg8OjoOTOiWcuKirgVttvbcy379YJIsFDnEm/0\n/t+JXIjqmfsncvaspwGQeJWj+8DEVR7qC7MkLK8EO6e37WnrqkmLWjEJ3ZtJ\nugwdz/Jqec73C8lnUhmcK1222SSYdRQKKSkqDp4fIAztSg9HL+qSd3111LT6\nHsUy5yHJO0lJ6C3aiEZ6bvNeK82kSl42oJrcIQVPqfdISd19F42EqNIHyVCq\n5U2RpRtdTL+UBQg9hgQ2eTwGIafsDkXv0fmBZIVDyNoQPl85wzSh4yt1AAbp\nWy3ELaR6z+DVJkTBHlqrN8cr+e/GILP9KccOzN2E2H+frejkoCK47Apni1gx\nprA1HwhFMzaHSg9kqoL7zgMDeLCNH6F9VB7QQKNTIsXCPAomthmn31BeLqmG\nKSfl+mXZG2xdaIfPFbiGAALudeX+TYWvDwBWXKJ2Yu/IXf258yDG3Ppmr487\nevoS\r\n=IYDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/density":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/touch-target":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.67d780c79.0_1615924042842_0.5274979835454827","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/radio","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bdbab28c5c4509a33fbc00cf226a81304cf1677","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0f358ddae.0.tgz","fileCount":42,"integrity":"sha512-eurxBW/ffsG+asJlGytxhsOcyHEqcC27YFhV3vUDxMB2vCQqbvfNE/n/v4SKoRyYPYkJqZijfCKAmtbHPj3ONQ==","signatures":[{"sig":"MEYCIQDXm1U/7xqvT8DzK5IwsuBcSCjtnQP3MaZn7mrae/Q8DQIhAPGaV5+yg0lVo5GhPEi7l8CD9JRY9/SQr8jINXRlKUUV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0sCRA9TVsSAnZWagAAvWEQAIbzVqZprKi9O17zdrRW\nzFu5j3U7AdUXpUYxE+6PtgNhrfjA5nJrHziho3xZNdX61DNZ6dZsRR1un7bJ\ntIC/sYvC8ORRuhw2fDnv/2ReuC5QGd0UlmI2M0e88hMRumkmjLSz86bjYs/r\nfrUZ9UnuXj8UoFTCY7QJlgP4rPNXrBwMsnRevEDAMJczMo1cYLOoQMwyN3+h\ns6uh/NOLE3pTkd0ZPNH0w4X8xNzvC5jrgbOvo0BHU7M9GlDqDD6RX4p/PpwM\nnET5exbKVQoqUc+5Zxjp003a1SITgvD9lsRMgE0jeiVDB3Poz4JY8UQZAYVb\nVDzPYwKJs4Ogi3eR19hEtLeKLIfr8sKkx3P2GmfopU/hMn3K/0Q5/TPymPcJ\ny55M6pJ5AnXunmvpN3p4UPWupxuN+WwyQNrGfuIn1McOjow5wV1rMAP+4qdW\n4Mewg7Hitbt3N29hr3sJGxlsjZWktxZDxkV2SYt1ogSTJAhRbJyba6BGsCdn\nJRIHBKIjUxfjJVVlHW785GdHhw2VxRl7L91b46sAnnY0q3/t/LRNrlzTYgME\niyvsybl1MJ1n5ddU42r10JkhfyVWDAaFF7Kiw/upP4tLgI42Fx3ZsYWOAAn0\nnFGYp/gx179yJTkZHl5TZ4jvaGlcQKXyqIlmKeO6T8sCAF7KiUfuPbEwHQMW\noKuV\r\n=3khR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/density":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/touch-target":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0f358ddae.0_1615932715971_0.3078765563336203","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/radio","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cd05086f66cab37c3931752f42acbcda8125b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.67eb0df80.0.tgz","fileCount":42,"integrity":"sha512-d2cjTEWmd8roUk+km/Peon28o5A8LjuIOOVzB7ItrL4MxjUG0EXGj8OV73wLLou/v4cWS+nA1Db/duNoUbpeJQ==","signatures":[{"sig":"MEUCIQDaBIxtxyA31pbQzqEW/ViriGNpZcQEE3+tKobG3JlDtQIgTJ8Cn2qyHXMRVi2TdJ3ilWnuKgw7vjxbDLtjrf6qHQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTONCRA9TVsSAnZWagAAtZwP/34zcKECCYxd8Ps3cKhQ\nMSzt4lhXqiQi0LQdsotr5u/wW9xLfdgcbpFiEChgRCd7iptljWkneV8bZhhc\nNEAwQS+IRuNvtEGlhQIuoXOotx+bnq3QhuC9bw6Kx0qmG6wywrO/egSXGqgT\nQf4AiafIAWp7W3/z2CqmIbGKU5Uc4w1n+p5MzP0RPXykfm5y3ADaenikEzS3\neKifHOhYy17IFyavn3PmFDZMMWsB+w+ZM2n+C8sZFNHVL0Yast4s5fzCHbp8\nocSHH0IEDZF/+pJI/rPCNgt9xkMZqrM+nDOVjn0YNOB2LVq6DmJNRgpX4r+5\nl5M0JTRMjwZJFpW/BE+0ATL3apC6G2ayPESZm6r6V353+GcyarHZ3HHOczDT\nNLRSDU136482wNr4+gJVpxNbVoHMjHtVaw+83ivuVx0c5ajo078WKdsR4xt3\nFj7S3hXW8MiLoYECga9IXkt1DHb8RlBw1I3c5cQSQWSwxA91dhPJke+uWWCr\nuCk+EAeIGApFZ6pth5nJf5BQ7AX/kCIbSl+kOxzRS2PUrryXYCsxfbReKRoC\n+xVgDKlrP4crOeBVfb/TN1T+a5LvSj6oNNh1QYoopZW+HxYUdBNRNKYPpm+Z\nkvDkuwAnk3jfEcPpzweyu26nHB91mhAtAM7/XOfXj47j5XFrF9IOuJggoDiR\n4na7\r\n=pM3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/density":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/touch-target":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.67eb0df80.0_1615934349046_0.15427803519947592","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/radio","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e31d83f523536405608c415e6fc4cbb1961f31","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.941ca3b3c.0.tgz","fileCount":42,"integrity":"sha512-fZrzZKTucVJy5SvD6ZbTbZyBzaqhQOzN/GUmqGb/DlwYQ2OGXBA+404bVA9Pl1OqGRi9wZChKCbAdCvQK+D8PA==","signatures":[{"sig":"MEUCIQDDXZmFf6JMxlUfXnmxuTueMvsiqJ6l0CYiCF2MKuRHjwIgD0CzSv6FqXq5rMs7wOXcWmWrwDgeZrfS68BHsQtV/bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTP/CRA9TVsSAnZWagAAG7oP/A55w2TfRnA17HbxD0/x\nv9m8vP9e8l3GRNroMJ8TjiauYCHWcWi3NeI20VuqgQGCqNJY9M2ePNX6SLm7\nfVWpyvHpeD3ubtQX0zvcK5r+aP6LQF6Iiu5IrTe8up9SEYdsTTCyR/eSAamH\n/j+ZhhaZx38sUgkUVjZceIP55j+MRvVdcBWoVTb1H6iaq8Qyehq9b0ItCNKv\nnPJrxeacIyFcpHcLsKOxOGs8bAe8JSvz+JhENnzAbD5kSvx6UAYbEq+M5U1b\nXHsSwj6k5stp+I5NgM+RpguBHa8xayzINJnkmfX8dSKVfaCfIvgzslVIa2B3\n1xeGuxLOHcnZgJQ8ceUUtQKMa/PpgRhvI0hX2RJmYdtGw/MyNmXph2DciXb7\nBvkOe9PF81/C7wFvxkNCYvRhVK0/ftEF1cPic6OG5E3UhtGANet9VYgwlHrA\nFiD4bdXM+C1Ka66X0yGxyekrdhvkZZYEV+b8J2MEyxMI/C0DD9QFQ5kAqe4z\nZVlofPd7X6yO6eR1yWHHu6CAnB/DH4FWkEeppSaWpal5xE34OX1wq9ZPfZ7Q\n5NuXrgspYMHbwkS1Ngmw2RIV4OZhs10ei1H+1qRbe07X2s1czzfXQW5QyFhx\n4KZxGJ2daIFCLsVXpkSn6JvtSndWv9s/kub4sD7jDfoxam1WJdZCS3FUWfUf\npRhK\r\n=TjcR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/density":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/touch-target":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.941ca3b3c.0_1615934462478_0.3042423483803014","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/radio","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46affdaabcea7216d47e8732f925e7c3e64b3b8e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.3344d12ad.0.tgz","fileCount":42,"integrity":"sha512-Qu+Ms+i5ugcKUia1Pl9e5XhGSr9Xs30GTBAR8q4oSmWKf2C4/mtIP16dFUdwXgRrFnMSn7Qj6P/nIlMyi9Dwog==","signatures":[{"sig":"MEYCIQDanh/iige+IY9Y6bwnaAk3fPx1EbAoWQlGiADhi57B+gIhANw9WjaNVI/lXMyCUFkuUt8A9Ymw7s873aD5fuUouNMK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNxCRA9TVsSAnZWagAAZ9YQAJHmzuSMro17uYh767Gu\nlK0sH6CQjZR5hHXIy+x4gTCVxC3WN7gbGbxtzqeo0AuWlIWllAkKSMVth+zB\nBCydwa9EoyKVceB8liKr7wb0bCgktSx7r560ggZzDTICEIO+0FSMGcESjvR9\n0hD5BujXz75ehIbRvoOQmHEKinN5hwwWfW6SnJV8DxpZnL7f9uYB9afBJDRJ\nSaWy1NHMyTY1lsQO4O3Bby34Da8iPXxBJzeiuTfQht5r6GUcp0UF49ICxVzi\nm4/ZHVCVigh6SpYW5jG2QIqaNCjMTUjU3GP8AEpS3FQTZaYy/RiPjJghYztn\nEweN6Oj0abtTk/max0TtyTjWYa6ulxovdAlWGraPH3zZvT8diWfopx/uby74\nr5tMyisIXJfNfcDWZUmJ30VwP+2CZ1HiTgTK8lduvvPk8NCPnBKql7CGm/Bk\nMFneuS6Gdli/5kL4xgD6dP9JKS9GycATe2CEl/bgbjB2+1PDu0v+I3YzdUPw\n0w7FW0ybMIrIChtpAOh5LNxJRZBQfoWbbgtCyKOxalVqbbjc2J+hk+1ZisiC\nrsPbJuOR1Gw6eZ6thX4EYoFALtiv6fLjtHL3e9/sb9ZYA9/S9+F6aVpdtJow\nYWHg0uXruwqsFcgRMfd9SrZXfW/CaQ70H+Ong+812HKjglJVZoClnEZ7NakH\nTcbM\r\n=6nhj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/density":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/touch-target":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.3344d12ad.0_1615975281131_0.22069412797526122","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/radio","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57415902d5fee2b81f97017f291b6fec80a18b7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.6072ed604.0.tgz","fileCount":42,"integrity":"sha512-TN0asGDR4y54hN4KMP4qngYTjsocsQF1yc0vYcxL1s+XIGQgjmq2307EMfEP5pjDivFJhwXyO1mfCCppWn9vzQ==","signatures":[{"sig":"MEUCIDa/f7NRcDy7LxlQbAr8P/Z2l4vPMg1MeGpjxehnx9fxAiEArGu7xm4lQ07xJDWqco5igQvbWR+jenxTiyFdBSbxA/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUom5CRA9TVsSAnZWagAAPSAP/AqVMz6Wnf6pgVwQiUhu\nJ8jvY90t0GC4zmqenZGWy04z3h7u50PeHw9Pc6ZhJzgHARasQ9HHK341ulxf\nTEku3+Lq+aRo+fW3+bV7BX3jgPOqJCsddlvsYv6KczEtaIWPC2rV/QF5OvA+\nauMM/O48HoteLvwe56kXdx1t4ZHim0h44gc9dRAwIWADtYWefzmcD2amGx4x\n32cAU5O8B+WderFdbBK4n0a//i1MPT8uFxPY81laiRoxSJO9UM3Y7xSZEvqb\nMwQP3KAgyYcj2kZoXAMG2SWwn/aHamZH5k4bcyfvMigum2odswErmGTRiv/F\ncJxjrXaFQJIFS51C3Kd0rfnou5QRgTxkZ5nFTkt8sbr4W74TP3jGNjpCMh8p\ngsnmo5/uyVHnSu9YdaHPhfjrw1L3pwUbEriCAzgEXhrZTkayzesW0nlhZ/hR\niRkgvBP1/tnobToYubPe0+SoJgjUEpjloLTORyzeBfFrAuA548KGOy7rs3eI\nGKwqoff8n5wkF1dgNCV7SKt0BlETJyCrMkdkIjN+EJ38jY+/3Inzm+4XaJNe\nGWeNtaWCdWYM/1r5QnEvS/rFMGR7ZxzueIz43l7cZkz9ehpKIJjLwTJ3layL\nvhm8OLZoFTNimqb9sce50MZoMfgnhQZKe5caUowQbpUUYULKJYNICcYKMu16\nkm7z\r\n=26FD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/density":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/touch-target":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.6072ed604.0_1616021945159_0.691003393482257","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/radio","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c8730c3a0ac3cfc153a10a00b18e96d5f2056f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d3a6862af.0.tgz","fileCount":42,"integrity":"sha512-1NYkSnUvXgDxn282sdI698KRCSo8SDw4thXoNlN5TPCR6MTA39tvKA0dLnCX+CuHToBBF+wwrEJC7qiYCCNqNA==","signatures":[{"sig":"MEYCIQDdttkeX4/wsa2QEQ6a9Lz8thHHarq7HiXVMgy7aHLkCAIhAJlbuutL0wK8foQg4svMpHGeam9jnI7aEP4IAB4+pO9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32kCRA9TVsSAnZWagAAM8AP/RG8ljXoYMKqtDVramvJ\n5/hk8NITJz2QBsHfKktc+XagJFqPlGrP2rGHi+iBCrdO7AsApZcmjCQ/BBIT\n7gkwZYQxFGZhP2erCJOzxz8dsX/1cnpzOqqo2WONlECGfpJ6auiI59Qptm0h\nUOmFCxjoaAWJ9e22rCy9Tt54o1QrpGSUA6XamkjtiAaMSIU7DATAVYcnGuv2\n6KK2iLS8ssfK2jeHbunSv/fDD2/y63gN1vnaQcm5luiLx6FZjDDHgEGfwOC+\nqEFqE8JgdeFv2Ox7sj3WvPems/+v6TSvPEVL2UkIL0QuW0UFrZ3AKvqr6pWn\ncuVyaWdxBhq8HzoS3kI3GJ+BCLNiOyw/Lh2tq2YhWXZyPliYz9Z4tHaw1rHH\nhS5bm/avnzhonFRYxthpmuiwJQQMKAUQ62a9cgbDma+mu9Qgy+m4TWRjFEuL\nlvrv4oQd4VLIDbwmZQlUhif/53DKdz6xq/sOoRwGhCySATTwKInGQZfHvlMq\nlHRbZZ3Zbo6QPPpN2Da1YcKvW3+OrnVwm+WQfd0zyRmDG3vYGiGAAoxmTnqH\nD9OBH2Buxg1ZF+AM9c/Mt/mldp53blRTDEuNsApALJxvtgQyHYfxOJ6Ru+UT\ne/pMpBikFg335F+wxKNXlQtBIlyz0tStI+dcQ1dmt+mMqoEufcY7TMu2P3yw\nklnS\r\n=RxlN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/density":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/touch-target":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d3a6862af.0_1616084388015_0.33291118857057156","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/radio","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e60b5dc5c9a99179a1f88347cbf3dd40dc674a5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.40dd242d5.0.tgz","fileCount":42,"integrity":"sha512-IEwY3fH/X6PQWn1sSA054Q6ZWyzXN/y+KlIGCeSPGampmf4VP7Ctcn/CH99SS9JrkzY8zlMegsPg7zvRmd0RiA==","signatures":[{"sig":"MEUCIHAG6W6H+xxcanv3KZBzFcfyeJ9sG+BtanlgL5zJLoHvAiEAxAatc/6Hp+s9ADcFMYcqnZaXdbKoPLWnngMrX3SyNlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NSCRA9TVsSAnZWagAAa7MP/itQE7/xxdt59pyfWI7p\nCEMD30VEbBpXlNJyy1J4wNTMSJ/z040lzKPz5z5pynYoZFHuVFLutbdhCz1D\nwA2YpdCpHWdXFxAIh8I+Gvgywz16FcBc5cq0mPAJEbLHasEtSnzlaMSkWxRN\nVe/7RgEKT0S10bOZpQTaeVc2veh0wdmGv6ItuYdDvLZCYHKfmeuE7atjKkJ+\nDMxtSm+a4lnjuNAMOGakkJLl0R2pSIdHtiuOTXjSIW3U3MpxgOf2eNhS5i5Z\nawxz2DitUcjBeNwjj5oYG9H44bXwnphPGFYZATMRqKSz+2DM8k0RENBVUkHa\nfxTd1iuP0k6HtGFD6dhqfv8HqjL15Xsq4bppbeQxHVOm+af8WVVLt/0Y52o7\nSJER/SW7qKujQNkUNKbm9PYxqgWgxwKBVO0a6nG59uVl3dmPvQ8n8JJ+3Z23\n7Y92YNALgMlfIxYAFDOvY3GnZP7jYiZNnvkQais03RDK+Mh6KI0GS/B/cOdv\netmxGSLgVkiJSLT+p64+qJEtylnmrSAUAUL24U4cE3b2H4D7IGiLQVFa4fJO\nTE6WL8ewwcv3CAphSe1EGqRolmF3yhlkZmPti/Ttl6u3r2QEakPneMF/yzpD\n+JMhcgkBY726oi5DulY8/qla4x8rGSeNHLAUQ9tycHa8aSBVLqlzOeYqp5PK\n1tNV\r\n=62P0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/density":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/touch-target":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.40dd242d5.0_1616102225696_0.07843441954390595","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/radio","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b69f477fd4923856ebe4bf76a326a2c5d424182","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.ec8f8465f.0.tgz","fileCount":42,"integrity":"sha512-51oNzEESMsCTnA8GoNFwsCEHl0o1GHPosAXxQenJVdWtpSs+SjKuwpXX0UjiyrLrWVuuWgqbPMbWy/fA+DCm6g==","signatures":[{"sig":"MEUCIQCCmp69Hw1nw6L4z6/XJcdGfMCkee/cHjErdOADdQcjdAIgCh5VPSaSSCOwx8DtasRH3S3j8c94KOmmhFUu7M6aFSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8mjCRA9TVsSAnZWagAATn0P/0/nSyeTzii1jXT4ejU/\nKP2oLKTf4MzrnCnVF0K1B/325JUvA2ajGdplJJIjyfNUp6q+3PCLg5eBtSQV\n5jhf33eCp5so29tuG1BWkIZiCmapz3305ClZInJWNpRs9okc6R7r2ablLtgZ\n4G48Qi7zHZCYoYTwN+qLe3lGBMcfVYWFjqOKE1NXBQ+oFTSGSUDk6peBlG7l\n+xzBF703RRzxmCDyr61QuEMtgl8hd2BS/M+ir2WBhwnvm2MjOln5hz5MZC0b\nJWN9l2RUcmt/7l4o+RJRKLdq/7Q4z+L9c+4SnzrOFouEGFlr3dmdujY9qBYU\no/WiTRNIRhlPKf/FKnZEXUfS/nCDRxjKfrZr2NqDXNcJdaEEMzcJRreSDLM3\n4FoGb5QHGogpbO3uA2AN1E//Ynb357QI1QfNjvacf+ai8YxQIDn5OqwpVPp+\nZ8+srAIraptTZUsG0ooWdBusuCv9ICwOFjKWaMEC4HDkPMWiFjL7keKWKvTX\nVfrfQfN+TkAbHwE6QuQlbZ8ytYD+OS090eqCLbkSq6STaHkZMIb61u4SvBNZ\nU9588ekbQRJGTpb5jJghaCSacSGMCpFXvZehmsKqzI00E142kXabu1IM75FQ\nrdXtqlWH8zlJ9QTqBOZauCtMZEpnyOJzWOG1qlbGmdPgmp7yIccQEvR5Tf02\nExX7\r\n=rmnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/density":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/touch-target":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.ec8f8465f.0_1616103842954_0.259049678525642","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/radio","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaf49068f008fce21b86104888d2b3d95b4cd6b3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.da38969ec.0.tgz","fileCount":42,"integrity":"sha512-7vT/XdEoYfQW2Uv3Z4uxzmjvpeECfZKmuEk4zedHM/hNB8tXsgE8PUlhgegy9zJ6bcc69hckR/YoEHLrPNgqiw==","signatures":[{"sig":"MEUCIHFCW0w3Zf+WAbQzsLIcz+TMoAfhfKD5teYJxPilbw2BAiEAgG7AMR74hxDUHVRLNmBtg2eLw+rKCwGoLzh+kXsaDbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GECRA9TVsSAnZWagAAyQcQAID714SW/5jSdyhhrG2n\nHg/3UJkFkk6QJ0L+LQcOzt/HVkqoJ7xjIrZXw/pEO1qcXOqywy+xjoicYrso\nngOowTxhQcGg4ImNp2JGRw4A8n7BZn46sCuKyrYL1Lziw0JxcftkbN3jElMl\nKn3VvBaOcmeLqFItriElvbjp1UNgiyKoFOZ5rF/+8JQ7vMkuDhxDt3rlDeNn\nFHEIZGr8rWrhSHinh6AJlTeyEY3wvp5GJdmmtAqIJ8mHhezeiliP9LCUxutB\n5XMA+lbqWvl9bHza+XlwBwpmOLtwObhygV01xWsdF+ltNJHm09CqjtW5ey9T\nawj0nVfeIibqw6ePSlfukagOliYRtKhVnZ+Sulmnl4z6pmQsvTnWV1arC5Pj\nlHlo/Th9cnHJf55mumsTnFvmDa9iFPPI+fLJXB5MVs1Ydu251JIyb+u/sx8l\nc49mGBK6kzetwZooKSR5L9u1MBgV7GtOvTPWzD4F9LAK+I2YCDpK1L2MhI11\nfugJnyhwFfGNCUJae+lpo9eeMIoo4ElCQNj/OfZXv1PlsiCnoA3/jYiyRVLH\nK4jk015fRvzTgzENzZbbz47W7zDAlxwx2vAnF20q8auWuXSknuogosErMbNb\nxG9O39itbIzfJ23uikh3tjSLYKeqvFdqqjol+FtZMsxpqWdSuHLmDliJ50Ej\nLz9Q\r\n=0QJB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/density":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/touch-target":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.da38969ec.0_1616105859478_0.24117141351683835","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/radio","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c3dc6d9419001a48a441d5679042f4765329648","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f5246264d.0.tgz","fileCount":42,"integrity":"sha512-O1t7hq31EMLUez+3YsNn/p3zZJ8rN6tqFvbaJUfzagBT5uo5ZPYwxr6AyGvPErC/LXEa7IDusfZ6yb2Wb+Hw7A==","signatures":[{"sig":"MEUCIFdNbvfMBsZM+ayZnsiyIRTSwgzK3BdFBcuSMNy5+eekAiEAytnCEM0jBN9CqzWbnnQ0p8cZBzLkbgl9yOJMXpYa9QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JMCRA9TVsSAnZWagAArcQP/2xr8SXA24p4QdAO5k7Z\nsDrJ1frTtXwRhit0Ot9MvB8u7X8oSbfmauWzE8bBiYV0HymTihMuE22IlJZk\nPPNiT2SF7TYHQp18Z4lP+9Zyaboru+vBiUZgY8y5Z6aLvzh691hsQz1MhdaE\n1gbdw4nrdzzllY58K63X5IxVIpiWitA1+jVuKZrjHGpTGZZAtXOi+tST8nq6\nbU4Mu33zfeU9scWa+L/kLtO2Zd/f4XSG0tw3I8Nuv1HJZQ82F2xbs5C7N1yb\nYACV76XB94pl7VQYQNIXirx6J3Ab2hkaujhrdxqfdrEy3Yw48TbhKgG9w8Jw\nPHijRridAjXeG9F3FQ8mQ2D0UF4S3K5gWVgdC+hlpWfeImnGDdGQCwndr6sg\nQwH388AQ9akRBA3rJ/34npZjbpRNsyrrcW9l+NCPhPGlHu8ylTN67gyfY06Y\nDeIIkFpma2vImjo20dCVx9t+hF2WSRekRyBDTO4ojhDejHHWjrSGoS3IowBk\njwSL0HuYg0ZboUmm/Lr5Y61l9HB7G2mABRX1zXaEA1O04bADbTLoS6A5ew4k\nvsubNnFmM7u4Aa5SCFFoM1CsiROCxBlkGa4Cxq28MctGVhM52e8QNrV2TMrG\nUd0XrBXcOBPwTUw+BZiPzs2HSl7qLpxwCKRnf7VJoDA2yN5Lhc0lvu1/N3Vc\nFBBf\r\n=IMk8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/density":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/touch-target":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f5246264d.0_1616114251951_0.1941839384260604","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/radio","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12a428c8bb2f1d57b0a8e6ab66f39a876656c763","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.03d34bbad.0.tgz","fileCount":42,"integrity":"sha512-WaBSd4t0Fv3turzVt2mc3hXtBxinXiNYEO42/9GnGvvu5+GcSLby0pC8LlqXOYkB2Wi6dPkgu9NApPJnnVBC+A==","signatures":[{"sig":"MEUCIQCADg4uBmXZM2nBFjj+x9Adm9Cpqse40yf/uCYoIshmNAIgZWzcQWTLP356QFdlahib+fnU8lWsQaepJKWmmzHLvEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VlCRA9TVsSAnZWagAAyT8P/0BeMPKjpXZOdgpf1/OB\nztNN5dcA+hJKP+kaDUUZVIaBwUXgsI63MJVPTYCoZsvy9w13KyuAZ8xv7nH7\n4DYX/n6MZD65GuLlIE4Ko/xiGW6qYXiZL7PeLDLdwdMn9jFiD5ye1nzhbch0\n75AdCB9SPZB+z1+y19/fMEXu4Clmgo0dIBeGrBWHjNbayUsZFtWvIB/N5b4c\npgKeyUaYt58xw3JeuphpvoIYy3liHnOppd1TBeQulYivhGnmNIN5K6ofE+ry\nwSO4idSY0JHoORsKiWyeoIGG96tNuPXM0VT0hwxOtsrRXKV8lrM+F5YNOwgE\nJXtrEBsancm9dWbhZTJ2qWnoRH/fAAE7W5ThvPhE0u3WxM02w6r7yT78rjm2\nv32oInFvoUmQTdgX70oJq4xt+RTPYEgkDy6jUJHF5f33RC/+vFWpoIn9gYgH\noBy91+D2FKNmL2WLgsSEFH8+YX/QWjPH5U5X0UYWc1ywkpBSyrGoSQq0sgpE\nQ2Hg+UUNpeusPVfxAIte19FLMtNfu9iTrwnD+HfEp680ssegKyUcEtS9ENSF\nVTUxRv6a639+ooH2cDM4nvqA0Xos+tBoY/89TMHHHOCOP85vYBjp1lIOPRoA\n7tACdRNUnXk5QNIr3/Z7Rwvr3vlIxcX30xOV4bIQjW1ylAtdG6JovNeguyHN\nJqbY\r\n=Fy2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/density":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/touch-target":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.03d34bbad.0_1616115045295_0.06036275421764503","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/radio","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"938858fd8829db8e959db63aa983bf58c94bde7d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.cbc57c600.0.tgz","fileCount":42,"integrity":"sha512-TvQDQDH72kZTN7MFcHiCLopFVqEV7p6QzInKkEjnoFLzueDeq4AM94xCBGnBnI1Pt1pAKMXeTJ7m1CemtNYmyQ==","signatures":[{"sig":"MEUCIH2/JKepKHsSYdWmqNrC9fZvdPTkhLB8Hu+x+HrWP9/yAiEAxwkSakBqyq1dQJYqMLiXhraiB3n6oKZ2jpn1Y1ZNhA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/dpCRA9TVsSAnZWagAAvLwQAIPCuBVZG4Z7Fr/HO3a5\nhhFUNdf3eLh90Vz/Mp9lA4zClkRUb1CWazMCjxMeghN+YNcaJpOaTR9OXP6y\nAozuMLsxaTTcdMc3gL058sd3SYAd3+POvRdkrl8D9GJYsn8kayFw3CtKtrRP\nJQtFc75AIxKYLEFmLY5vM99GB7487FqmrCWsNlr6vnOJ1N3JGkUc65ovOUcw\nvmEbaU0kX8fBpBkXPHuqAJochchy3lF/xs7fR/W2y99UHPoEKXrUhvW9/TNJ\nxIM7A64zX9vveKL1saIGbZHsWo9MVqUugR+Xb6rI9dUu214IZfdeWOf7Xyh7\ncXlrbPoESbdMuIhwZelkYdbpBuvueCtM2yrP2MgIUeNlPZykhZFX/tVVQa5k\nlu4Z2clLPL3OmF9msdRjewPUTMZZUriMggReU+QePoSYjahgSosFsGh4aYUi\ne5wIlgYe5UBt3WClP5dEDYc4e8qtP/Fs+x1fxHobazKNy7Ap6lyh2Co7OGEQ\n2Hxy4xwDQMYOK6Ia1ror5sdec5hoBtYFEMI1HKkiyS944NVNQLhud2szcrJT\njhsxVpqosRq07jEIgxUBr2pKHc0BRr6N6+UAGAEpJLeImQoR1HspKWMvLJKb\nzaHfladzqS+wlivG97j24j45sOd1xI9oPYdcxKUGZanXrmEvaAsMRjNTuMa9\nOcRm\r\n=kEzr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/density":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/touch-target":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.cbc57c600.0_1616115561163_0.7393521836342305","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/radio","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0cf8d00523a166f6039d01f1360dd2b049572e2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":42,"integrity":"sha512-HuGWV6zTTPNGskaf+n4X/w8Erqlfu5/7MLkBMGc5LUBuF5DDVvvBL2X+4egEaCdJ/0JCDXBhmuqVZJPzGJOQVQ==","signatures":[{"sig":"MEUCIA8y87QI6tK0iFycHQUY3hM5f8IJtWVM4L+QwY7SuCH+AiEA8as6X4OI0g+CIZy+M5T/tbhdD9LJYlv/OFnNLRlSqGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/poCRA9TVsSAnZWagAAEf8P/1CYV57tWj/ilUketdkK\nPPyKwKvxsZwWEab4pP9yVyVR4O9K2JHXMnRmWfLRnSwZgRyjUMYEjaIFi1xy\ncYbU5NpnN5ngLiQ8+UGZdOz+fx67ljnn/y+B8bS6CIOi7ltjJedl1n+LWpqn\neAdqRcKyglJV9icfot5hECUP3H6XdwWzwbEXuweDoA/rG+xzWhpUn/+0DBFl\nDc4hOB5htflIxCDmCXKeOR9RUREbnj00a/jp5fnsyPRlTx6cBxfsW9ACKns8\nsXNBt89jZg4GQefsaYobAKbxnv5J+tnmjRbdIbjDhJV3wQ0Z0itm7zefytzx\nvNy/mNYm9sF5PowF4AFuqlpGU7TSdtFPPjjoIrtopXI/7x1PjWEPOzX8kLBK\nt9PNHgjlel2EZUso43ZUbG6eknErNHo40fWGEo16duHxrdMTT/8EhPoWDUmD\n2jQIv5SLYl3sOaRNI/HxL5PU8DkZ4a5d22shma7DvKKM4P99JSkX9tltFdWL\nt7CFN/vbZbe/6FmV2C7l2LJc4SjMzGh2YXX60p5I/GmEmDujqdH37WVGNtQc\nBnpB8Xlwgx4QwknxFnh/JlYFgCtJb84LRUJQhL0NJrsCWQ5HBffAY0QFbFRe\nGFoV7bAG4b6VqOIqjcc5tB9w9sUdgcE1DDt8xwlnvk1nS5l5TLeYc4fD9ZIe\nesMz\r\n=P5zr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/density":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/touch-target":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.d6c5bcf37.0_1616116327419_0.49950747069374457","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/radio","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52d79e4ff84435f7b2f996a4583334321572a2de","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.fefc668d7.0.tgz","fileCount":42,"integrity":"sha512-WUHiRrhyVkVdLgL99t0uAbJD7HEco6nTTjh59BH2tZNS5MoSoxVgRgIIQIsI/fmk6924bwpkWJyaIUltjKm26g==","signatures":[{"sig":"MEUCIQCUKVj6JnslPMZtBy3bSeYhx6ATIkIGzWBq1IAHDmKl6wIgMtPlAG6mKZ1CAVZ0+u32TcIhLGZuxrTP+zY94FsWh9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9mCRA9TVsSAnZWagAAnN8QAI+KydHlFHlhc/2fLb2F\nu6tg3RJ6OgVFOBjNVAZ44WVLO3gxBHXMugY7zhsrdv6bU6AzI3x5OHJKoVTH\n9IO5e5igEecvJnzx16cHIMU0/zsHQg9FmzjzhBbibSu1lrKySY8RFwUQBGHq\ndrqBjSoBGPBYvgYV8zEjwtOrTEZ8qRiUOdaog8Vjf6lwv5YGiSxGBQ+v89SB\nuABsbeYvRZvn+clgLLm+3Yd/NUHwl5RkmSxy06UrwErThweODNa352mSgds+\n99sbRKNOqwLNZ/lx8FNS4Ohu5p/3hiIJMEjqu74zK0UGLs5vne0rHMgVJmxa\nMrfEMsoehntR/8G0Uv7hZEgYlwvK7kI8FmRFB5FgTcKseLLVq1fImN2qG/BS\n/StTfP/TmeXrcoolPlkeRocCNXu6RN2+3amaCxVUvDyV9Hkfxo1OifWE83bE\nOlvFesRWrEcMyFDJ8VjohLiugtwEcMkTeKO4j3p7PVv9mmeAypSanMApd3FQ\nx9LgjD8qPyr+Vp4PmMeVpmQI6YJFxW0qa4lFvDlD7eBTOp9AuXOntfxyQZHw\nmGFjiTuvsEt+MyJhfVKLNW5A50Y8IaKl/hrOg0GfYOKX22NLEbJATgl8z92m\ndI6RRh5AwOkEerK4Ef5PN493SshW1Fv11nEGV2xiKdYahwtK/JkszEerbKO0\nJa7g\r\n=+2H7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/density":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/touch-target":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.fefc668d7.0_1616117606260_0.9165263041558849","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/radio","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3ea5ba4359c9e8e533524b8301789ceeb8ab862","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.faa7d3226.0.tgz","fileCount":42,"integrity":"sha512-1CxFYfVkaQbBAKCsE/hpijMym7uqGC/aZQ/AgRMqXMIhUnUJ8eDvZBeEMBOpxqIqRBFrYQf9w1zf1EWL3rPWuQ==","signatures":[{"sig":"MEQCIAmAWWh3yaVxcr+g14DlAwypdYUAMFal+CeCIbFCmQIVAiA3qdXvN9VlWRmdLTuCKIdK9+v6CtZ7j31Pa24trI3wrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLLCRA9TVsSAnZWagAANLUP/0ec03ENgfVWzBVMwzik\n/dr5zTbR9QB2x1RIRTE1rmYuYX3r+ZBSZwki+tZAEJuFDikfwJYuqiaEzrMO\nQuQ16ANYa3RBKufYaTP7Bv7vUKsxoQLsO3GO6qWSRB7e2qO+nel7HDjtTlV6\n4h/q/jFdZVKvOXlRzvunFIIsA/qXJvpLA543Ncfiq0aO+SK3p8HA35554hwF\nbAxW0bTF6WPUWQ6EDHQL8lXsWMb0tKIoyu9TSKcYYI1snsRgTzPXWpLg8Auk\nP18o1+MYxNFxVC2VXc/pW84xIQkJqvVICSFAGc5NpHXx5KHFsK5N/+uhKyKf\n1NEpsUW6xhwt3No5q2wQqw2eDgZv9A96UIUehWTHQkiWoJvF/wYhx+CVg09E\nJH+Fh0yQt/a/sqzCLkpO0+5m8BjcvvPAoZ6ap4uL8Ng/3WeS2C03xrWqKatm\npKd9IBeiWulLyxWoXF+B3MevkyC/3VUgMI8Gy2P2qL2UvkFTPNu2Zs5U40mf\ntMGzt1tal3IqYeJtcJOwjxiZrWWM6+h1OPR6YDcqlq9Y4fGSY0/JYEsV2SvE\n7h5jx4xt0eTn8sSGpWuhV5S1TXMqBu+l7kWxW1oGxWsd73qwlK4oA/Fjcso9\nj4oACL9AxmgGR7rrWpBXNs72hexxvD98cckmEeOKalIB4QVZ7Ypq2ect4vMh\nPhUa\r\n=Uypm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/density":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/touch-target":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.faa7d3226.0_1616175819241_0.27033264240111454","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/radio","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c86b20ddb1dfe7a3264e87f2e25482e030ecfe4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.c60449bc8.0.tgz","fileCount":42,"integrity":"sha512-6SzR7ohEhvnqMB62S3NhPRT8otje+jPDkuKTOhLaVJr72ZlUDWPm3O5J9M55F7vRzaYNRszVqgk6LemTV4Tk8w==","signatures":[{"sig":"MEUCIQCc8NT1Rxm3tQy0OIa0vK+yILMzK1zL6MNj7ha0S0DWuQIgc+Kx0qOxGAvensrqmrP+MTO2ULQTuvrApVmX9l5BCw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOe3CRA9TVsSAnZWagAAoHwP/2I82e4eDnvJT9I7Zde2\nM/IlZaqQ32z09u37d6PwqjhUJmG5lAdczDfvrKByf+BSpxlzDSREjmT/HuWx\nibACQpz5WnqSYGBCA/FyIJeKicAoTioRyZNWRw+NlC1dBmfSodxkTS65scv4\nJGi0sW2mM4tI2RYzyketV/FkMW0wS6awrx0BT+cvtIPoc9LQbbh/JsNlKjsW\nUoEWJOatWEpcpNExEQDifJTxdZorduBjvd7Y+f1UZ5MyQEd5sp+whNXVpP1/\nvFAJ82fDE2v27HVjxjFYMy+HXxGNMv1lmxO1RcsDN6t5OPXtMP4Biy0rm/Gj\nRxOoOU1JtSdltodSlBuP1mdE3ATBXOcXEPIR92yQm9OQU0tc3sAtis2QP40/\n0rPr/Z9C1tCMoaR9bVaToIpvDbfwKNwNfxqHU6QMzI7Nu03QIr0rffMRiyFf\nh+8nmMe8SOd1tIwCVcIyDbyLk4qVFB84GnLLhUKGqrZFirDyfxw4k2Dm5HMh\nXQKS9cxrp0ivOyHQHwo4E6TNm4mHtQpPkEjpu+am/vv/6HHwsi9hVLsno7x4\n9evuhUW+W5Fd26z1tqQmrgC7d1OISaLYr4XMLcU/SfEleThL4bmHg9H1i8L/\nDf9ydl517aod2HxWnoDa8xFA+WfYCMQdVJ0b4cXSnpZBkDW559ZCktmCt6yA\nwLqc\r\n=S3Ba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/density":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/touch-target":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.c60449bc8.0_1616177079274_0.7579031861212082","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/radio","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f045120420812576b1ebf5f80713119a050bebc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.5f0fc444a.0.tgz","fileCount":42,"integrity":"sha512-Axnr3xXmp5gV0RPUofUX1Gs55VZc4y8JdTTst6xV8yd3Hppi8c7ZVRKO9aErYA2QHstFxN7bnRMK1F26yLfRpw==","signatures":[{"sig":"MEQCIFabiN43TkMH1cNSi+3SXrTaLfk9t7xHpk3iRIGleJqPAiBbJjli8UTgjrSfxawBYeeLR8giOpKSSr2uQJClU9x2Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9gCRA9TVsSAnZWagAAQNwP/0dDcti+idXfkeMfp954\nH2RBze/RTkqsOo1xDXDtkZ9eZS8tmB8HFLwpzRqHHnRbY84WGpIb9h29yGlL\nrfItUfQX+xQp9q33tOYOM0DVxppHMYmRfJ0A63n9jsOlfy4tZp8hBOMmLHru\nmCnLEiWGgNO9QEUfWR/iKezdAofVwOnvp7JZhpC09TbP0ZrPZIvATG4Ce55i\n6Ig63VibWkdviyf8c2r9ZmP6fr5AWsyluiNUp8zy1HsW2D3jg/tqUc3sBjw8\nMA9SaO5WGrhWHg6m1Upmo6Wa0P4LyRLr7ATIPH4cRVyYcpnzqFv1LGQGIljw\ni0Ad1NsasDMUMOKGgRc9ZfOmWCVA8EQV+R/Jr6ZHxCpUg0uP4F59laM+7Rxh\n2SdHbH1jn87eHrgrto3vShRRIx1zvEPCH2BJywRN3XAIQBGBOPya/SYtW7pu\n/JNqF9CSqGVAwEJ+pJaBagRpYPa4kKcQyaQuzTE1ZeBjTSw7SOXLxr8tjM19\nDuwCWf1d3aIiAqsEzYFAw5lEuLucdeCa/oGYbeAS2EriJYUbtKRJ+GthOD+7\nxoSCo+KpdPQ8zyJViGS1X+YTNpEud2uar7cietZS0FZiycBgDJY36krwT7+J\nQE5pXizYVPNRu2G4XFGAzMX1TyvOyjcMEZUJPHv7cTfWT0eiZJKYIRA7Qxe2\n3E9/\r\n=4hzD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/density":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/touch-target":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.5f0fc444a.0_1616179039708_0.09867181305542116","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/radio","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bf34aa13e1544793c5a31d34616e1196cb25b48","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.4567a750d.0.tgz","fileCount":42,"integrity":"sha512-hLI6kNFbl64gL7V4kd7UDhKmJDy2Cx5DO4K4BZ2JKOmZrodZwAs3yaMMc0dkyAOvP3aSg6U6Z5k3iVQXhMUXCQ==","signatures":[{"sig":"MEUCIQCwUF+BxnukEUft67SxoQdhvXGIa9TJkRwWiy1LeXwkzgIgHSiTA1qZncz82iRQk3axZXMCSnKamM6pblGOeLQIJIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjXCRA9TVsSAnZWagAAnwgP/2168IoWosxyRLkDBwfi\nsWQUgpHlVyPEAwlRIJjRnHHXC2pyCqT/EBfSenr2AdD9YKWzFv7tBVyETaLp\na/574cPyVuAtha/vbH9Hw9skPoUGTRgEPc6bITJS5XaGuNvGrOQhBD6kMaQF\nx03yXD4odsQ1N/Cyj1oJLujS0GqUMEJ0FqTtMAl9n8NgoN3hXzvm2840oA6G\n8tETMVKhTswuwz5dOnsU4hiZmZyAcxxuVEsCmTrorqmZP+B05eQ0iszQGVP1\npTIJYL0t9Goe47lKQCnZHHvrLQLiOUQB03gEeZRVcNOjP7YbpmsIYTYgijNQ\nOJdviTp4C0l9CukGEThoKAcgFiPQ+2L43iRUqNC1tlalGf+rKapgqwpHegTt\npn2A6xeCyyB4KuiYbMDWKAZyRjfM1WWjRCZqRdSd5FeN9Up+1sixrY/C6uZV\nupuyF089OcDqkUDIMB0GSNDRzBFb9mhnAYfsEGPfu/vp5uRFQSYe/4Fwjagu\nVJ0LGo0wsdG6FLWpmnKYXCXhyxD3ZgisqkgDIa/bUXCwukAODg8szHc3AM0C\nHKAJ+fPcN47uY9GDjVJ485yE8Rxjy4+Kcl5CbmMxpWPR+1CQ5fmVkKeYD4RL\nhUJvTAgkZyE13jr+2rlpJDUpTtnUYDNETWsJWUI24rRIJuQvOQNExwzQ0axy\nZHLl\r\n=ieXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/density":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/touch-target":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.4567a750d.0_1616206039317_0.9403352053085539","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/radio","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd16ed0df4db17643bba66d532bd098d822d7f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0cde52f5a.0.tgz","fileCount":42,"integrity":"sha512-eXa/4iC8jqHl1uJ6IbSnu3qayUnWK6CF2tfE0AelKnEePpblIiyuDycoEmxyQgMA69wDLLioGSadue3qIiZctA==","signatures":[{"sig":"MEQCIB0/iOqFF9dlwjIaeEn4a2Lr4SJE0ZabbFAHChUpV0YkAiAdSmdTVblkHc8e67a538Q1e8W9cYbs0IfPvTwdq/bWgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAUCRA9TVsSAnZWagAA1vsP/10TvY5WUuwVNkcIU70K\n8cggQwvr+9tXVf9CoAgTN8dhCfKxVeIQNYzGXI/REuc3P2A6ZX8PqEn2c5tG\nzrNvtBxXM46bEFAlABeU7YJjSiO36CpUALFBQLzY7OOtFYiOdHmPO9o11LIy\ne27veGZ0ntxISpjLUiHI8y9CBojCV+dU31ptNP7DG+0aU8zqcw34iPyXnOzG\nTe1wqJ9jtXsDzY7qqU7exZ0tE9GDe6C3SYKiGnc69kng6rfh9VX2HIMoll0C\ntTzfQsK8YjhBwLBHwwakYmijudrpRABzktBiHZXqKqjxJYQl56NFMb+C1vn7\neuVPOxzM2JP4lnRR/XFVBOdDIWbATIa1a4+GDvBydwhsdq3GS+/1yzF2Vk4d\nLSznWRtsTyQ02Rkgdw0A4Up8CrMdby0Bw3S4ZuvPecgfqX2PYwG4we+LoDsr\nKaR/J/6+h29GpxYoY4Oukk4GNGUa8DBekA2y8jVpCrp79aG0hxceJv2sMrJn\naAAlXCjdeJHFZkV8IUb8G5rCe4NcABWSvmkQfC7O58WOkLRs4Hh7K2VJmwCM\n9kqimErqGDudZQDdhQlZdpdPF/BjkkE2sOa2aSIzgaP5nE75eV55d8C7fRIU\ndGQqwRlhQe9sW9kA1cT2s3IHRny8OnScYcclYF0uJFF094dlBFcAT9ySPZm5\nUQdX\r\n=8YWo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/density":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/touch-target":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0cde52f5a.0_1616457748110_0.5282632689995499","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/radio","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5436a7799e35c11d5663d56292953c8931c4d4e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.48f4b67fb.0.tgz","fileCount":42,"integrity":"sha512-lFHCOCbEQaRdvaur/waj0UA7invov0UQGCb14IyZZEiXs8M8FcS+rA0ZKB+KsSpPxadnwqWEgbefF6y4UvYjTA==","signatures":[{"sig":"MEUCIQDRQ5F/ZfOEWpbhFcSzyF3W94reV4t48MGoD8ie6I725wIgYacjPGporhFY/RKWwWzw03M9ke4iSPjEJr6QlfvMim0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdPCRA9TVsSAnZWagAA/WsP/iVzShF4YnPbM9tVWXfC\nh8bVX4qWHJQ6T0AtVpQvGXVVoU2y+Yp7Exf5tOZrYKPAAvjzrHnWRvzU8zAT\n7G/w/9O3IOcvQ3JdFmIUy1XBWp+mbrz5DnY9B1erj2lhtVeDloUFy24D4Kup\nqkRAOFqYYTPQ/Fc7t3ckY6sf/QqJsZRY3cwbdueGlt3tECA+plqZLgDCpFkG\n4t+1n2oQponb3++IS+NiBvyA6Y/8QEgFtwdwqol3AhbwQ8RtOaS99thzI/tr\n683n+RKS+KLAdq0rnWPUfllGppE8o9gUtz16vH6YtO8CLujICUnxNIF2a4s7\ntNrdmgSlcE4TLL74ooPE99lDK0rT5hQqWj4soPUIN9CPtYxaOrn9Nd1zQ/Sp\nEeI7kmqQvLreZsQrVO3BPD5yiIeiosES13HnX4o8bl1YyWK2LzSePzmAJ5Cr\nayZXWU5H6Trrwj57AtQ7yIaJJNcffdU2li/LylvOOVmrs60NqOYKy1QoYHHM\n5vSwHAPHPbDp4ft3PP5jeSZFRxalPyPuEtP3L2rWTNzdGOkcMmZPif0+7Ayb\nLtNJvWgYvN808Z5Axr0xd/JduTAR/yHVFk3WCVmeBCxVMaeEx+cT1BFtnO83\nYLbjJE/Euo8W/rgWYRCATyj1gn19S8JNzvpPLk+297sLyTZAkg4UNpqkK+n5\nS59p\r\n=EWQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/density":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/touch-target":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.48f4b67fb.0_1616529231277_0.373210893834365","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/radio","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f1a9f6ea919c4bfabb1c01213d715abbc9ddda","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0b8cff734.0.tgz","fileCount":42,"integrity":"sha512-yBKvdVltDnBFRJN7QBbeqFBYJXK/SNFUjhQOAi6zQyZEkTBdBS2d8dfEjshVddo3NlNsw5YuL7e4Jgsgx464hQ==","signatures":[{"sig":"MEUCIQDJTNHnyS4eWnFP9yCSNCgNFCW0IOo7xyHsHISx36MsOwIgCLddkLrLLufBYbZ3/DhLn4VHXYqMK8z6kjhFrm8uPZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkm9CRA9TVsSAnZWagAAc28P+QARVgjj6ZD9LcX19bYV\nDCGUojml11jyKfvIyU0Afns/X1/TCtVXDbiJcVBYIEdYMef/SwfuPUQVKRhk\neESw+6saNupLEY4fo98EK64BKF58E7xp2pqOu8KBIneeXNfxblpBY9/IEwDB\nFUXoCWIgKIxLKNeQlhaxXtwy7/wvYAuItsluiZc0CaRvadA0YF47XD8YKpaH\nucNenTFbmLlXIagakQNf38xSABi3549WIGB1XoSEJRjRsbOe99mANdtg3krE\n0203im9oLi/PzBoGxiHscm5OfVp1BLG972HOo+mWWOb0cbIRwxBSHGFuYQBp\nKOyJI/VSAj5FZSFDZ7SN0XLHG34zdb9U4RTg+58/Zs/V01HXtSpqo8ViE97T\nh1o27dCK5Intp/MoUkO2kNQlAvyNSYmrp+XtOrDYl4ROgaEGFogPMwwkmXrw\n+nnzhZMLRYhQMRnS6fYcnbk5evaGYPowcxEmBqS3eTidMPioE9scL5sj0Wo1\nepzJD2+drS24xWbHxuyCo8cQuAiq8rTFmBAkP/KLwvGxyLIRKAjOzmaQDjZ7\nhGAVOQyAw3MukZPtWYmsJchdAIZauADzJn3MQQLTqC0q8aoDEFEyDpXi23yM\nVfjx5FMLv73++GsAPR2cYohVVGWRbwI6S1RTUOz8q5C+CP9VWrcMDCjjhlmM\nmaaP\r\n=oAbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/density":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/touch-target":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0b8cff734.0_1616529852665_0.363701958735662","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/radio","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81afc3b96dc380109845834b611d4c6b42c68a10","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.8943b991f.0.tgz","fileCount":42,"integrity":"sha512-dOj10r77l9mJXswpa9ewx/PkAXR9wQDoT3faevzMvHHeS4dsRQE0q67CEbn5qP8Ye9WHmiCvRMcdmHFZ1T/7yw==","signatures":[{"sig":"MEUCIQCFCbgAU49VZIveMHQl6sGZBtPUhYm9M/xSYpICR94nvgIge9HWZzZSPAZCG0ytsNIF8pX8VgpCenfG6tIKUgr4Zj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+VCRA9TVsSAnZWagAAq0wP/009sVBthGaGXHXdvBAS\nDhTknHb4Dix0DAZaa3fwIOsm28Jg5ysuSFf+bcQXt7eCTSPBW7hADUYIokoQ\n0/JUkwPPyO9MujE8d3MhhZ/78hj8GGP5Dt+JShUb0WihZCOvJlz66EvvZUvu\njehDhOrud5Ug5RwLiYe+J4xwB/Jcf0lJUrY1Trucw/9WisNjn6G4IFTdwifT\ndFPi/pT0RUiSFTIbmrDogvdmY2Yg3w/QRRdfeiLoq5xX9HQwfeh17ZWJAi04\nC4YbgfW7wBWC0DjRfaMIPPoKFFcigsFTc5iRBOD1NB/lcNqTa9+xsAfOWInn\nroG7U3NqaHxYSEIwdC8XyFCHyxHhqYIb0sllxiF2mRGxwbT9eWF4Mt60hFIV\nN9AF+XDM5hZPwsnk10HnqF2aBAJojBEE3O9QI/CxmmOcwoA2GeL6CPiL3JBF\n4F4MM8jDteUS7NJQNp3i1XnI1UQ1UjdzftQgik8HzdOCC0oYvdpbWQvaC4LR\nD9mJ9c6BFf/jfiJnuYOlcxGKwYxewK/t0G4bvlSL584OTvQEoz4N6UVddC7O\n/5rZ6wHByKJD/rf/Op86wmPX723VLKxauz0GtY/JkgNkxspxL7nPzjJjWiYx\nUIdlozKxsn49jK0CoSawp6kzPRwgn6ZgyP5DLqh+C4Dz6+D/EUHAfuOkojAU\npbnw\r\n=9crO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/density":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/touch-target":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.8943b991f.0_1616531349084_0.23628923212343866","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/radio","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91c11738f455803b94522cf95a305c0234d2ffc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.3955d8d3d.0.tgz","fileCount":42,"integrity":"sha512-477U95qbS/sI2TxTUEPQZIAQqh/nPT+m4e+QEE81ryriJguLkzPJqrekbh6IlxqYmMagBOuSWURXnx6rs8ViUA==","signatures":[{"sig":"MEYCIQDbPAXN1nVnpqmYwUTr76vFUvUGNTz2puPMrEwPGJe3bwIhAJ7LUw6vsBYS9E1wLfvEp0NddnqYpByC3RMV/sgNonA/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/oCRA9TVsSAnZWagAAnxcQAIlTOB3YlsoFRhY2UpNR\ng/yEj294nMZCPHf/4auNG2L6L5l2WU7KmRYnl8zf24J/jKhEASAHklpOHbCv\nczemMUfRMExw38fspJLchwX5yTJPQWNBjJfVvH6VegflMwvfHx2pwI/dp2hN\nMVTORVdPKlHcZny1O5kpbJXEs3WakztonT6mJQTuL9BQgfrEq9GbfAVcCWy0\npmcEd+lmQs/omh0pf9mQVw6w9zeGunQ4KaIi5vqPDw9WFJWP1vrNC6Y3G48u\n7t3jvwp/tShdX75pj7ZSbXVFR2kzW81Np+OvEdoNU97dWzvwsILjkY+3YOHS\n84qfF2Szr1430h3xjXn5ndgvLg7uqTxCzxTwifzPoa+TlXhZbMIIAfzXUTq9\nN0R+as/lmJxO68F1TlA7YmmFnoSmEpQRVvhaord5LHyainLCeQjMH/Hu4T9g\nUE7M8vdf10h93sYAYbFawb1nMfJWB6Wg+9g8f8Harz+QN1KcPdb95NkKyem1\nMwVABp1dE6qMKT9jNVgkvTrFgAIjRret4iLKAQ1xqsnSwdVrMP7Y7Dzq9d9I\nVyrntQbBPkGYDKeOgi3Guipzxfc/7gxbDvJ9qVUlee9ZjBoANzN0lN3W9AIh\no7mOEa1WQazXM8OUXCWc1SE/weoZxKYarUDwqpftvBDKwNkFYUlILFMVfEeG\ndDfE\r\n=ngWz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/density":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/touch-target":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.3955d8d3d.0_1616613352145_0.4664629612944682","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/radio","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b8f51214b6a7b9e86134f102ee01c66304a295","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.23ea2d85e.0.tgz","fileCount":42,"integrity":"sha512-mGhnSStL1zTlb6Eb3Cf4R86tw77s0YFec4Ooa9v/mlS68PSE892Pm9WSXN8twt34Ud8+Yto83S/ca7b+4e+lAw==","signatures":[{"sig":"MEUCIBMWTPvihT2n7S8euL1k3T3RmjvZREJ+D5FNEffS+f9DAiEAplTL/bZUlsg8gj7C3Rvbyr34IAssyiaY3looGqJu/pE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkcCRA9TVsSAnZWagAAjjYP/iYjjFU4y2JfwQxjkW3y\niUGoFkjO9wWuOoiSIHDymaux5M7wSpJWu+TyJWii4tvamTVeCjbFVRM8/RWL\nBzf+Yy6SQrNXPrqOveP+S2y+dPDlocVqivhHaPtfHsLKg+h3+aL/cFl8D01y\nyuWnmuYOf/3XPblPQ7ATeqyxc6rgWr5BQUM9qxBNog+2QprtAJMP+bJ92s31\nj2VuGesk6pPMz6wJ/B6i7er6ZO9OME6562tTvwAp9aMeN5DFTnoPyZmcU9/2\nytdh49iP5rqaA8I+3YZRiWFsrL1xyBR/IdNEm1Uv/hWR8EirQI1KMyqKWhjb\nTpmT795BLBQUA0bri6YeHvi+BPrjGVat2a7pBWjmKLBy0mNNhBMkBHmuHvuG\nBQDJ8a0EqzTmVxYX9PeRmyi5moCxMNTwhmzqimHWx1kPaWMBHEBYYfgr20Y2\nhk2kWVPJjCO45c9PtjKkFVS8L/E+Zy3jnjr5h1NslXGyLs+Zee8RTd3PcGRW\n4lTJILRV21rYUT02/tajyU1y9vqp94OKpsxlY1epFMsslAkrAVNVh1hkvhN0\nbKaRX0/pLjHKYlUR7sKhz0zHFn1db5ZhIPR4ygz/jnLL/iQPn4ZQ7IWlSi4n\nY8xHEk6wCzhbSwE8E8G6LFwsISoKxV9uwlUik9Lf6MWGU/mz7tEAzjE3e2fz\ntdcS\r\n=Zxk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/density":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/touch-target":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.23ea2d85e.0_1616693531680_0.430785228966845","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/radio","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b475d2acbf323796f4ecdee488586fc3bfed2108","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.e3ec22f45.0.tgz","fileCount":42,"integrity":"sha512-tt1Q/4DdNYx97gaE/6kvaQF4YwSIpjvsPuVZIBQRHSMk7mh1zb9ltiajQU2l4UsojVCk54Ql5FcwjuUkc1vGWQ==","signatures":[{"sig":"MEUCIQDWodSEkUX2zAOKV2FA/6+G7L8+wYmTuedI2R4NMCtRKwIgTvF0UIaLqIcLHvRiRfrLtqynsIJmMdubd5Hv0tMs5m4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6eCRA9TVsSAnZWagAAegsP/167+OnikuoIBGKTE9kz\n7YIwuNUG6Q1JkRtUlYsB37aivub5CwjeHLqGOwu1E7f5yjvMdoJ4KDvgqRhb\nJkohqSFtcbl+9atLWh8HelWvePZsuqVT/ULnCa3X6O8EEqn45b5szWIgOk5e\nYJ1Go6CH+J+X0wUYr7QjjysN3qstyD74gAsGbVoLo4T8AfIkpRGxI+1bUbrg\n+K6yTjcIN6HHV6tM3mIx3NYQ2cNOvZNb4LHLrMXHfhTH0gj0Lbk+fmDgpqsf\n55H/eWQllVgtiSE1cjUg3FrJJbRG7JUFrx6LznYcENBRtkw/Oiuc8Q5/+RE2\nNMRrPB+aiepg03g9Oom01waEIw4j6fbu+ievWRiZDaCIe5HV52TJ293Zrzsp\nKQJv7jevvfhL9dkIwApAGdNUXHYrBr87fQC/t3Pyve+CAoewNLwaHCfYBSCT\nRjUEfflep4I9PIKopR1yC6TALsbQGiLXWora+74Wa14h9ALDmbjl8IvoTnTL\nOzX2JpWDZZpL5kHVi9rEHQIYwwmhbpSF17sPXp62UZN19kdXi4hxxSOEkFH5\nFVhOAsSYlQLNJH2FPbVpyJO0Lx1idArTJf9AiIHYSM1KyWbjDuM/uZDxx6Bk\n4Ev3o8cepsru8Iz1wCrngiXPiYfSfFy49mu3D0YqP7UbdnkXsKF4wGXlUDk1\ng/oR\r\n=1xbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/density":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/touch-target":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.e3ec22f45.0_1616694941690_0.5777401114807728","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/radio","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcfdb03e9b606d942b17116c9cd1ebb23947885b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.4ceb42220.0.tgz","fileCount":42,"integrity":"sha512-nUtmWAVMylg0/SQYfyNEqHrNNlYGOWlFxVHbz1JRrulMhZk3GKqxzUZfb8X+AphyHp1Rkbx3EhyolwBJ1cmp1g==","signatures":[{"sig":"MEQCIGaBnweIc55SWINVRMhNQPKN9nxBom4rsXdNQrnpMD8nAiBqZEQpIBbfs62xGH5avpRQLYTnZ4xF9Yr+JUm0XkJONw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPNCRA9TVsSAnZWagAAhv8QAIxs8MxpTrRM6MkP3rdd\ntfULhe4YLm8VV/d3PM1nPvp34xmlAXFbHQmUJ5iiEEk1k4HMJ+Ny/WJcsq6h\n230l3oIe1IcxPCjWjKlAFoH9jf6BpiF9zU3Jqkpg0eef3zHUITROElNvPazF\n3keYEl8aFv+mXcDY6DB83kdbLR7sh8vU+eEsknRmIYZdqGMFFbLZhGB4LVyK\ndkLx2YYuPX9pyYp26q/iPll0TzFwVnKJ9nQgpxm7wE8hDZAfR1qHV/HwXGTY\nkdmVMgVzkT0vGMG8MM49owSTfcy5d0joFelvjuCuhqzAoOubjqy8iam4fHLa\nowrmglBiu6zOUY91nsj6tfaTydf2PtsuKxSF7/6xoZ+l6aN2H8mDceTJjDhy\nEldjXInSGsP09eMs4Y1l3OG+4te0em4thESXPbrbJKu2nRtX7WeqHXwlzrT0\nM158k5vsidTi6oY+gvmEccdVe+0YTkOoFX883sk+hf8qB2TxAbGiMCe54Vdl\n3H0v7/Jf+BF05+rfrNmV+RHDbSALankBOSNlhKixjZwg88ajdJHWLA+vm83T\ntMxcUZqwwUC2WF3MFUV2hHBDV+VvfLSXimGY+D/3ZfHMLVLk1YiVUyaNiUrI\n0P/1fZJxb1mlaTNhNib03rm462iw7CVWpwOEQLMSprLV6ieIbGvJHTR08QUn\n6do8\r\n=eldD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/density":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/touch-target":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.4ceb42220.0_1616745420962_0.4885784482590916","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/radio","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed2d68dac16d28c8b128d54753713d102554ae8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.dc9c84023.0.tgz","fileCount":42,"integrity":"sha512-59h21gbSGv0sTuwxh2Ad1okFK1vYMJ+dEyP6GGJaftGSal8vVPm4Tqb6HJAzhFmwOPocxvdErVBUi0cnmrgSXw==","signatures":[{"sig":"MEYCIQCiNoVhTSucmCmjqQUInMvMZR1Ajg11E9E6lvSTvG8AHwIhAOpNQwJW34jvH0TgIPmdRVg9sUEl6JjBYSqA3iR1zZGP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RvCRA9TVsSAnZWagAAHNgP/3CT3ocmMHxe94TRi7F7\ntUu2PmKF6VreYR+IGVJNjxMdfP4ryftl57zYyUsOee5RnfUEHLjMNhJ0s7Ea\njYE0tN/lu4ks0Rpvl1tk3FwPV3Z51D0A8NMzv6KoK/o87md5TEC/h1lQ70CE\nJsCGoT/HjicIH6tDj4nXPjBFmW6GSldG7i49ws/kdZ9fE97SfeN3OV+uS01t\nLdGhy1AJm3wU0O2DmjILvHBkZ3HJ3hMAg8EknothlCaPeexdU6s56YfWThV3\ngS5bJvg4Y+19GP6mRLd8EVLEUYK0+BIshziw9iVd4l5z7+AZSEMCXKZxgRAf\nh7m/YJjbmrR3ARMM89U0tH33FKxav6M3aYj/qeliwte0DiYgczQMs7dyBtFA\n0ZWAlaQSVc2d9w7tCDn8VxTA80w1Z5J0vZ5qHTML0p1cjUhrUFBoV4HQavo/\nuADm+WIDIEH+SBNL4NZwMWWRUQmFjhGBrjsMVt7TlL132gxjC450ADeGH4zR\no7zBaExVD98bLaGcfDCJvtDqmXX4SAayO8oXi+wnijqXggQSgr3TYi4k0ukW\nYyQAKZcrua+ovVscOhSqmDIwpuDsRsCumtDRMuFpdWHVZOEPlJiSykGkLXJ+\n4N9VoIBRbBmyPxH0PNU2jTVLXo8GhyIbv1xTkBM9mrpRK9L/rJecPdXthXFV\n+H/T\r\n=uEPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/density":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/touch-target":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.dc9c84023.0_1617126511420_0.4793954255120185","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/radio","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe6f264fca3bf00261b3cac979e451b3ef01bb59","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.56fc26962.0.tgz","fileCount":42,"integrity":"sha512-9fzZB9U+XGuIfuhXFY+UUjb0T7ZlsvJuXmUEVASM2hBCe0jK3znc3oxs1zmg8scYGnhYb3iBgCVfnP1GkwfF/Q==","signatures":[{"sig":"MEUCIAVMhGRU/PBWO4cFEi2Rh+xMFgydCUWrLQK2yQoXyWRUAiEApO37STL/5SCv2JTZTZHrrZVeNXLOVXcewLtmUeAl95U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BMCRA9TVsSAnZWagAAdWwP/1BJFVvT/lIDMMCKJ5Ry\nNXr/vj7RccfOP2H0Npb5Y1w1paYkVVgsgz+9yPu5EFV2qxDnFnLB4nYncjb9\nJJMhVlwjPUyBta5EWyedYpuuPpmAsXBLmWeeh6PP23aygaob2CSLGUkiLp5R\npnDm4b+uM5lbehW4DhG7UACYgJqPJCBtP8IzRprYuFq8TtwZsUlMRW641lF9\nmDxOfPvwR/mOLeriZfGaBtYN6blm4SiPexXRFmxZDZCVi0bB4ROV8dS1nDbk\nK6W5vncOLkOSFiRlWPQzq5KUZIZyQPkBS5BGqeU1GXjonIBxqjiIJHWiZa89\nVGYfOBbLlGd/m3DpUEaGNWPVXyvbXl7uDg09kv7IOv5P9h7Jd1oVHp7o12kt\n/PSsDJptVFhSaanFt69a19y1qTtTHAXZW6ufKVaNAw4rfGs10h9UqlEIa8VQ\nz4Z8m8zEUQcsDarmc8hWQdqoOF2bzexGaPVUfeDoHL+CUT9JwhBtOft5lj55\nyqOWIL76Wpj2xk9oGFJoM0FK1/j74YwmMz+e0qLYCZeypItDWz7f0Uh3dv/J\n2somROUlRUCfQdWI0j8+VdtOMjzhGkU4ZHkqyVfbcxiIlzxBuwgOMd6xG9y7\nQ56AznpVPd7LT6ExJet3A/jxtNhIqslXt/MEmXjrFeL2P/Cy1V3a4K+EgCHa\nECjV\r\n=SyNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/density":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/touch-target":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.56fc26962.0_1617150027693_0.8678219427958882","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/radio","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7df784d468b617d8db6d312c8a818a64b884dba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.bc318250e.0.tgz","fileCount":42,"integrity":"sha512-8l3+uiYuEjBvSHBIIME0w2ZY0sfBrwkYaVi5QVnG70FftWXk2H7hOUm36ryKQAYJXIpLPVOk05i3zHomGj4Wxw==","signatures":[{"sig":"MEUCIQDmk/w1rWPm367r8q8jpPA5yvYDDp8E6lmZSpJh6f3z9gIgKQ8/ca4xibGt6oNilmNBWZMeto7hahm1QsG4bkVLKJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FgCRA9TVsSAnZWagAA3o4P/iReoWLeWHcZRm4EMrh7\nQnljKo/K8lCTcxAM5vWJKXdhdcr0SOhOSj8ZGAd7a3EiIVdRVxUHhfX/fLKT\nSXGy7oO997+Eob5fVhokKk9IMPR4EJhvhw/9bgnECrqDiFYZ0Mdh6RYL3Vvt\n9bgKI83rTksdoOzVC+6r9oVppFDzIYdSyzxSk2j0uB1XTCt5EEynUIe0wKaH\nqerkV7c4mHoSxb0l6V/GZSMKD1Kuu1aaT+kacTZls6wDAnHntkcDh5uD/S+N\n+gYmO97En0WwJYiiQR467UOaJouFZUsAM3nwDLXmKJZBttf8vLSsebl1F598\n43kFnIAXMjj2nOf+UaZxNd0v6iw72ugEtNj8ITh+y2Yd/DcxhXmsCH+clfEK\nYhiEiZIoAAcg3NBbKKd5fTqYb+ABnLjgzo00qGcWc7DjA9OMT+eBGNgD8HVg\nx4QOYJQ/i1x12lLVvFjO7pZ7qIvzOdcWskcibF0+r7egylkk0YGtk8BxDy6k\nlCU+JoDvNtkb0sqg5ftyE8m8ue1/VKjAVZFiRqDn26WXaIfxvxGeirMxGS9G\ny8QJ1d3sqjH9TkCZ52SDhem8ThErjQBxEqPfYe3ud7EzEocGvf0mcBMC+nK9\ntdv7/+YvDt7xv2RIDUnDExu5EUrNefYOIlRg33f/LJIP/wK8OB+ZKvJwfJ7U\n/Ex/\r\n=XaEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/density":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/touch-target":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.bc318250e.0_1617154400356_0.7025623715628961","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/radio","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19479d018865bcdfbf705bac29f0d5729a0db9bc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.edaee19aa.0.tgz","fileCount":42,"integrity":"sha512-xnOfUcE5pVg3xOtuFqanFDkBB1yD6mFL1uTReLQ7LJyEtWkFDQjkx9NWd8ZFmHp05HXH8zZPoHjh5ThP7Enpqg==","signatures":[{"sig":"MEUCICSHByCFXhiwtzzHmdmNelvPpWxwAFTjG5zG+v9x0hFbAiEA6TLD3RDbg7V0qaE/V0C0nxDyYkdo/kEnxn9FcTn5qlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pQCRA9TVsSAnZWagAAKAYP/3B+l1ZVr8BLzUbcTYRU\nYBWCd7yvoNrgLPYZEg6ME/QHfTP/XQcxZBMIdkC5yFoLBNbO0FL+4d5WFaLG\nLckx1g3J7zxrfZn9SH0odJV1AZKQiLBd7VrMh151JWHyFi6OAcgt38XQJFfE\nkI1J5X9Ofwr+f1tun2G28fzheGTs2x+J0FK7pf+HkxlPvyarjUzr2JkPBP52\npT/KfEAvwwMaLljCDE5taiWgWu+l7EY4V5F5/9hlr1Jt5YM8XqJEmAuWhe1H\n/Ptv2rdjVhTC+8FeHPJyuzZ8pYex256bXZqT70g42rEFOOsuNqhK3mVFx96n\nwpVlDFgif/4mHKiQhSGpyRXf6uTpM4M8aq8uhXDMXayuDgY9ClIKvM/At2BR\nHz9G+2kZbdCVehN7eqEvfaxwhn1UeklAxNNb0u5YrGhYk/syeUX5tCwsp2KM\nldcsrF5OQ5lylnMtkiqP5lWSkwE8+bLgwpUbRFR6acVO9cX7biS7G7t0L9ee\nzkxJXFvYUzkAR34FcIz5benQ0s/FinPOujsCnPk+3KOBCy8WsNlb95NDuCza\nYLxzk5ByO/4DpBErtaSOkiZBOnovS8NY0qJ88O4OXdS+NcwLXW+NhEcewZxv\nGqu/OfLbIU15gZXvmaCu/uzjLxnkOYoJOPSC6m4IZA1ulME8CXTmSA4drJCl\nm+CV\r\n=yqOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/density":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/touch-target":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.edaee19aa.0_1617156687644_0.44396166014910676","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/radio","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57dd7d50ef2d47d3b842d6aaa8d4cbf26fb895f1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.24609b822.0.tgz","fileCount":42,"integrity":"sha512-xFk+Jn05AzxjKUmx90bFHhoXdSJKaNJl+3YJ3pAe+v2jVPqPUrDvbZek1S8fIW4p8mjbSbFQtwhu2NP8kew0dg==","signatures":[{"sig":"MEYCIQD0UYsLON8JuC9EUPYXUVOGdZbeiT00yg5s7H4wCfSJ9wIhAMMYuzK5CKSEd506kK7UaQOSCdKKrmyHTxWOSy2MKMnX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIcCRA9TVsSAnZWagAAwXcP/2A6d3mUYX1hGVH3EfKp\nwbkQcwgzwq28MnbPfjP99RHp86ghUJNcWbiSWO4EMPRLCqxxEA921i4gHLQL\nW61qWWe+V4e0Rx5e+TipgqrWrOnYZhsWSUKGOezze1woU+pYAx/EZlJVnMWY\ndx5ErXZYA/vV8zUfxdvQQXlYitgpr6lW/ZPUs38xHgOUQeLP2x0aY0oHY0Gb\n3h4sBBSEjUrlRMFKXo/ywnT85kxPisuwA0m9dbHbQ/egQYaJ5RdYF2fO9Ufj\napUm4ExAOviYBd7oWLN0ZSYXQBLdRQxaSiGNKXiZGPZJ8ZDWMWSTpSk3zDrs\n82cSYEDbzCCcsyGWuV/PA/oBeTpR48pR7BBiTEsmLbkEfmsyr2JIUgWTo3+U\nAMes5No5kIXNQ/zUl5s9cZ0Hfw7xEfny71EgT9NXfzEnd84SMW3r+0UqYWcu\nAl+jfoiptm0eiLOBVwDgoJjVphwoAaSBRND4CBDqujm2R172w/jxE6LbHTOO\ntqWjvZyPOZHEpslo70TWk5me/sabW85a1DduYV20/ABLc670Klhwyv4NGX2l\nbMUoD8Hn/9gkV9c4jAk1QBfKUZCNtff9CsE3AlNwwH68O2149cqxdHi++SQQ\nGC5iK9bw5mYi2Jtaju2xwptlzm3AgiXh6PkWmA0H4SOU4+AcW+GGdJGvI82M\nsWo+\r\n=5HGj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/density":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/touch-target":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.24609b822.0_1617224220251_0.9811497387879224","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/radio","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde9752f394457f0bb24bcca3d5a55d4b89c4005","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":42,"integrity":"sha512-WwkhWXf1cdh55pl+PAQGGFugT9WpTtGAOpSpJfxoQt+klqo1OVY3ta2T3aPvZLpbe8Z/9Q5CnnOUEikBKuJJAA==","signatures":[{"sig":"MEYCIQDqHqos62uscRO/6/x59rnAKVu10c0ZvlA5t7kXYBfMlwIhAPskA2VGzjSA9N/7BnkUYZAA/qByoxRZl/QDVhp0tBFR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEeCRA9TVsSAnZWagAAVfYQAJChZf6qKY0WTWphp9gA\nzkq3r+v8QPZMt5dqUj/EzeHVI+02br3XljPpwOnT9HXiOkke9wNi6DpJVr8H\nXf2XHvfmnMTigLZZvvVLaQxsGxSJl62YDZJcnd37ZYymZwhUy+RsDJp+5/k1\nwtrM5bArzwqAPs4SRg7+FRKOpQ1QWyyjeSTBvHCXZMsqeqlUlYt1gQTrnr0J\nrdpj2le7w8gJHYxlSl/+RgBMNlTz0YDu3A+aLXMiw3zzCcQ1czoEUVQOQf/q\nbRytH590NORE1Gmci/EliODYENlSKeGDsPBWWt8s+gzUkW3PFK5H6MUg8Rv/\nc+18IyDfXnmWbx5GZS/NKwAbcNMWLFbO+Pvvz8KqL9R1dKASrfIlmOJ1VuW4\n/zLxScxvwk2WykHzLpMOs7PfkC5YmMfG6ypSpDu/vNuPdAmt01VGWs4fyk9h\ncB6YA2VKWaWmEBPSrKK6s7ggtqKkTH9V9Uu7cMzQ/R6TZFtbPbovqYipHNWS\nH6+DIOn42Wa6ESXGjAmcRossQyb25uAuF4p/vemn6ZwGPg+/xEbc24XNEKXF\ng5IhlkYZUgOEerSeXy3nFyZeavu73d260dhnYcbIV7YhCynwfAyJU/JAFxt3\nlGHT4XYxrBvDk4h2f7dfVIHfLFKV21SV1ysBE0XpPUM97Fw40QAYg8WFqfO+\nUpjZ\r\n=Q2S2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/density":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/touch-target":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.b6cddc2b7.0_1617289501592_0.813117528492048","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/radio","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"586108dd74b13b8910173e4d3fea55b0c36c2cc9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.94937c78c.0.tgz","fileCount":42,"integrity":"sha512-GVixdoDRygTtBlBYHpD+zfiDJ+ty0+rcxkPhPT42ozsz/B7OQNNc1u7QgQMpbNYhs8xLMmUc3v/Oowlx63ajBw==","signatures":[{"sig":"MEUCIQCTjC1NqXs44HUACPMcfVaBL2Gghom8ka6YN6ccrF+gmgIgcBV1RbGokhgmyiWnevmRPeRcXA9I8wbR/i19v3kwYR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRsCRA9TVsSAnZWagAAUC0P/iiLmP5j8GCCawfCJZjI\nDQPeyvr/eDuwAItsTZ4b0DhdtPiIef49a/441RqXn2IrW0p2Jdi792wfibFU\nYyGj8NGUf/A47VZGmx23m/8SJ7Hy2WXNEiCIVvM7EHDhHHDZRi8QPJStWsl3\nWQEEmTkYRwlLIRIQkCrB3lrJpv0yOMfdfB8SdKF7cyHOdMRKmlYkvBpJN1GM\n2ddFIIvUK9yIudJuCaEIHBztrYhJQePZY8HFgc5MNtAgK6ZhTliaUKltgrMh\nrOtrbZSKKzYLxfiNjArE7xg/82VpECt8yVBCHSyawwBGzQ/+NZ5gsf17H9I4\nP8qvsqvjM5QudblzK9Cn0lZ7UHBqwhp4MTT0Fqo0zzTg+e7+DOV16bx3T5Yh\nSvQvH7ISqfKLCy9B/5Wm9Zl+3wO819k+fTP699BjEI3icy5AyokSzBv5mdaF\n/9+56743p6/2UJVz1/Q6kh8ZKV4GrA3kqNUXsggmVz+CDP1k3GsXDsurMDiK\nL1CQYdCw+ut+618leENDzCyo1nRZKEJmzfYBIHXISwXFKwzE9R9zDonbpDkZ\nIdfWl1n5Nseuq2tsW8rb8nButAqWVy0saN+K8eUPwuvXiAVGy1YmxAJfl16M\n+VvoQ6TI5ARbYrmbbDZPWUIVcS+xNx83sWqcVnIg2TzkVOzZZcw3efD5wsUI\nNxOD\r\n=CM4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/density":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/touch-target":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.94937c78c.0_1617310827972_0.11755218554994085","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/radio","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9435f85e5642ff92b9b1906ad7a5b9aa48122a94","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.e7202cb57.0.tgz","fileCount":42,"integrity":"sha512-8Hy8OlACC9RFlgiL/qaWNaWTuz+nRekPJ8SkdSK+FzWJimdY0VAjxqF44qgNbwbQJglgKLVjRn9Dilpbk6LZKQ==","signatures":[{"sig":"MEUCIE30Sh5rqhwlVfcc7qOX3s7d4kDJgv6sU4zE2hKEE9euAiEAvbPs4y9B0O33fxY+iwK35ir1eWn9Gj44rxmnHMggRLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1mCRA9TVsSAnZWagAAfssP/jjzKwFITylNWx4Loetk\nw85VgC1iSsV3pQTxS2X7w2XioGj5pgPFryRAS2wFbat4rrp3+xn/oG4fcIHE\nDUJcYnNxdt92OdepXiDWw5eZ0Yq2bIzKtfHomX+bXKKTw7NvdVchTO5b3eMX\naPWuXMGxnekzU5uO+ETjicK1tNOVmHl7xF0mh5ngjsD3LPTWc8NjPcmLMEeU\nqk2eSEcKR1MziryoDP0Cu6y2iGA5M3DZJArtPcroUdWDTKUfApU0Vvab14UB\n65np9HsbUJxMC1dtdPOwxpEcbmQtfitjMQt6pmCS0hzYsTwKu+rycY1vBRml\nzZvhcinrf0aq5PRT9OEHmWt+0x5vgXvhd5ppu9Tyfz3U3HMlwOZFSM7v+IhA\nMxmLHklK7cQ6BVxv+6P47e31JLzKIFFgvBQonhCr4lumpAI3tkwlBP1BQMaq\nCm5b93U3pjUKVoV00Bc6nxs5VVVpNyAOyenrpJkREmtUYpZQSJpS7rM1pzcP\nKp9enF7X37qVAgAa6QoJCbB6CzfSh7u/Sx3vz816xZU8uzXlfFtfPLZChi25\niPzcXIy9NQbeK787FpRGDhBiWMCOCOqZ+qcAql3C4Bz0D2XDZaBQScmY0J+g\nJhLan69CZICfPBbNt318NU7fSv3jrJAjHLmq7IXTJznkcc5YHJzFQ72Q2Fl/\n852b\r\n=Ugrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/density":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/touch-target":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.e7202cb57.0_1617317221595_0.027588128625326558","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/radio","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac12181c7e08499ff740e6bd535b4ab678f314e9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.1f636b205.0.tgz","fileCount":42,"integrity":"sha512-fe2qRx8Cbxpu3Czwx8mmgvhOg3YMOEvG/+MMOjy2EZHIu9kUcZYW5EK+IpnP9ts8hWFJ6EvEGsHIXJD6z5qf5A==","signatures":[{"sig":"MEUCIApkVTkz+WJFb3v8ttwHDnEIAiOhB/TQT/+0XHmaAM5+AiEA1sCU5ymk0gSMFmTvrR2FAe9u2TBiVu4gVDymxhyLMlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lnCRA9TVsSAnZWagAAliIP/1GHjVZ0LaM4WR8BDyId\nohiRWJTwFAYYtCKzxU018vmGwR0NEs43/a0WKmCPUMrGgdzhJ3snXohrnYSS\n5iPzzy6AslTnsXrQHkL2CcwEjh+cs2UptGAsLHbwn1HA3WMZCAV3eK9O3jHc\nWHN7kN4xlMG5giXq8yZ8FYP+l3HzgUGdGxwJGXPGgl/42WnZNjjLqv1GuuOI\nlDQ6kLfPVQCRCQP15ImWbrLmhtZ7SCqmAFREVOMRYv/OHHrsplLf1p9drNOC\n+n/9kWb2dBXC9D7XjtzMwA6ZfrQHs4dg60cFNtRc07lEHQnaQs8/SdKUjixp\nDP7KBkTe8FkJQAiCbPrrzkfoLp55HhLwYrUCFRApBsBgMErDYST2b+p+8L9Z\ncFaj0Rdax/+4h01QPZ8vHJwgB5vNdQT0ySFfW5l9u8B8+8I6Hk41ll6YwzFs\n/Kjydju2CkQErTxLpiqVZytbG2M2V1NvXS1lKFu1qQlVk2yQHfbf+xhmpyQ2\ng50tToiY21SLsZTjMXqsaDduimAc8UeqtrCJeFd2iYFhiSsMlggnpgj7Cmpl\nC4gowjlL2Xv2vNQR3VMiFpUeaZvfiPXQGmeknNg9wJabG9eYpr+OgOHOFW6T\ngGX4jQeQODiP7rCUJXsXpDFluN5rW4eg6oxxbqu0vL9DyJWeOsYw7wusMe9d\n8Mhf\r\n=+HFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/density":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/touch-target":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.1f636b205.0_1617402215050_0.12558609180774405","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/radio","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e8072cbedd231aae51afdd342bfcae24db92fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.94f50b260.0.tgz","fileCount":42,"integrity":"sha512-lBrPPvbln/j3UfBUI42KHLGbPZWTTpRcXYs1uuKZqrqVi/awrVuPMvT8a4Yr7AAAIkGxTbb+7bH6qlosMtciuQ==","signatures":[{"sig":"MEYCIQCYYxeinBhk2NJeKTbPgZqMM08c0WdQ5jGc0CktThIKgwIhANR3GGtHFjUU8wBhQW9XPAEl7as1sud68Sh2AUMNPgav","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycbCRA9TVsSAnZWagAAhngP/RaRjFk6K9HUbjSDi36z\nY7yjygoJFQMXriHWw87kDGzIwq97Zutk2AAhPP2Qp5DnfFyHaAoIPiNLDgU5\neLoAq55aUWNJd8loVdksdEdYCVFppTpI4pT1G3GBSBF9cyI/mbtvd5xcl8VY\n9waNavmdiuxZFLDL45YfDZAQPxq/4kKJ5kI++8Wf6kX7J6hSZQrfM8HY6WiC\nIOC8Rr2lHPJmGYBs0bQXGkRyqNt02kYr+9oJtPyYjqJKvn4Ce+ckVUcT/M1l\nA45NfGv0Q7WvYtS/IKHMU2RAa9qiekPYoRxMd4UQyz4ThBN6weIFhWLNY5oM\nhYWg/hNouVTiLpH07FhSJUNH9mlfs3NSnSiow58tK47jfBKE5NL8dEJ1PEas\nVU29Nxxgtb+UUDdt93LWBCmWnNioIZkP1fLUFSCYM7e85R/PrdLsUytHETtX\nXKW1b8mRe5IY5xwLvjmCxgGcQqQmhMfPAGqAmKIFx+uY/pV6GPCcS9prV+7+\njwDSNYJ4YmP70FyE+MHKohr6F8UftkKPTh+HC4E/gqud5DGgSW61vYT7wK8v\npvcwzMQxR1BJUqPqvfw3Cr/JEgKWwHWkUGyK9I2Vqyl1gyFkuAN+OQIaTjeM\nFdCOcYPZB/FVH1MJL1XGx6fTW9qdDDyb1Yn+Dgb89vWEsh8rINvJ2yeWjLx8\nN6S1\r\n=SNNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/density":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/touch-target":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.94f50b260.0_1617635098803_0.48874169051878","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/radio","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddde94dc07d5b626015c910c00ea145302df83da","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.a4009b80a.0.tgz","fileCount":42,"integrity":"sha512-nbjHjPpZyZRWeaJt+pKFcN69gprbWe+t/IwUMIWwPTYjqtnjn3Ey0spcdNe5tPUEaLmSVsHmBkIkOyNjn74aIA==","signatures":[{"sig":"MEUCID8w9H7LJdFAz0nsdyDs99EmfUk6qm425Bnzmy3GV43sAiEAvfzqIgeq9Vbj/HqYZNvn9jWU8oJp+0LgXJV2gin6kjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4h7CRA9TVsSAnZWagAA3YEQAI/fmG6tZH07W6DOQ99n\nlKC+LAAMf7+1kQxpKTPSmhDR/LdE/FlLRHp/vypaoDiMp8RZ5QUu0m5hP2Fs\nEUh42kzhrrlUn/5B7vYn2uwoi5UZrlPjLYqrQ65cfm6xp9BTF7j55Qew2tcq\nw/4rh7dU6zqtfOt9vwmYBreu6z/QFV9FhXwKEsu3BDxAfXv+TIBxoLsnQQeY\nKp4BobkvCYUqXfeN8Beh6MQaKdEiuDAluYBXTizwW1tMyPVU3pe91U+sEIp5\n4SlGH3Q2vrOrqAvFrEVxLw/8qcQvqXuvUCa/+7Rh0Vwf/+RR1IPDfn4sfgxK\n/Tk2MPVvobeSMzqbN/jm0s0YmAiqgMlEIay+kHFOP6/OqBhSgRVcddPIyRVv\nYpupYeIOJBfeDx8Uy5kC+E+U0Uv7BuzY+RanP9UQznBM/QAjdvVBgsTIkye6\nmHRipO+/cMdDpfF6sUtBKDzpe7NTtdNgHYBcGmq5iF8pf02tcUphNOWvtYap\nv3/DRiliRhZXFGVTWxOzLscSyuQuFwn8iuZFup+6lCLTx9zQgDe0dxVaJuGF\ngL+SmiHa+iQlfn0B2Wc7aHXm4iNT47CfSw5f9ySl449CAJgw8m0cyZmXD5c1\nNni4Qt3dfio7tmb/ImKy6X9gL1A1Swbd9kv/Lik96WGr8Y0QG/n4O6goEwKa\n4wih\r\n=PXwn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/density":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/touch-target":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.a4009b80a.0_1617660027006_0.14819599334901112","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/radio","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaccd568c85c639c3f0fcc13e3ef1bfaa4353db9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.15604bd0d.0.tgz","fileCount":42,"integrity":"sha512-CKS7dt6lSVCeVaGwPKRJqNBH99iAOCp1VXPqW18jcnVqIE/Z+J6+JH+3Sf+rz632jpq3OKdGY20+aDe7olZzVA==","signatures":[{"sig":"MEQCIAVbdPQwv89/evCU+CK2RJ/ui6TwafmGu2r9hmzEjWmAAiBxCUN0wJUq+hkrIxuZE5jHlKMZ9GgliEy30S0vWCdvDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JECRA9TVsSAnZWagAALs0QAIUb8fP5eAhdmqmb2JpX\nJLk41HwjFPvyfsVotS2VuaiQfXuUjeI3S/VFKaNiJ5KrYAG8r97+fEIJmHi0\ndl3SXF9pjV8vntDouRQBiXWnRDhJOoTd596MWYIuHnNmZNSFRm1WVNwxD9b9\nnBQh01EGwvIkd1xMeQ6iuPPy13JQBRWKzx0Zg8la3wyHmb6oGBe8vSnqhWFq\ngmeF/FBXfuOoaviD6P2ep7Ob2qZ80qOWgAGYmZd5mxyvQHPZmkLSfRttWCbs\nnV7BB3XYnCQMV4X9JEbnTrzvtxD+DB4IBE3i7PiJbihav6ObkdAzRHeBaMac\nPm65w+FkgtrBOkw9s3ulI72H6Knu32aj7Mk6pIS2lq0unPqv6eRVPUjy9hxZ\nJzutl9iFDv5r5ixs3/T862u4qHkkS4T1j4soU6kEwN4uyb1fFbx1oUcXxnEi\n2ANPkujRZBThu1o7jcIkkc2H3wB0aIrEJaXp5TbV9nJmJQoizMcgYP/aqXHS\ngrGocDQbSILlKiKuuQP6fWHlFyl31HaSDyWApxwounZ0Z5vqnPyAN976w6Cs\nC+ouDA2jgPbw0ot6mXvjs5ZAli0yroahtvEFA4kdfg4XsPIV+M66P5dq980D\nKvmxvqtWRgUpkyFyxI1vOQHrNJo+8J8g3kYnMfU9wptQewT+SG9SZMzd+y0s\nGe6O\r\n=gKJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/density":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/touch-target":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.15604bd0d.0_1617662531887_0.07316369553471103","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/radio","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee4ebc450235ddc52da6ca47495454e1bc6dddf5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.76da7876c.0.tgz","fileCount":42,"integrity":"sha512-2pGwNM/zDEGGZ5TbbGZxwe3bbSuJD6nVia7BpnZFOeLvQLLL+fw5o4ipfeA1WmR6trA/PfoP8+s/4vsKqlPzXQ==","signatures":[{"sig":"MEYCIQDuMW8l7wUu+II6/xHVn0Lrzav+YZL+SMrmbYsNbm4tVAIhAKDdWtKOplQ8i+2cnWGWVK3G3NBvqB4GSd6yI4MJk/dV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6ECRA9TVsSAnZWagAACW4P/3gEBm3fJo5Kw17oYHAL\n9518avSDVjOwI40Q3Jf0yI6joVNtZIMbJWsS/iAzNzkQ05blIsy/R40ghT3q\nGDsINHy6pb0Zocm9jjBmbqL5BEZZ3owdReI9aVn1aYsTzbrYffTT8oZevAAs\nVyABLmi1mlP30Xbr6oyBJTPNYaXvhZi5X263SmH/uAgVmdJHhsPNJoO/ky68\nM61QR6RT2ndBAweg8P+Hk2/Hlhj09y8A5+vRnYTqeEnbpsphX/pK3KciL40E\n+zYHgi871OjVkRk/3orsA7+H5EyoEDTr4dynNQadlUM+pDAJBRdJ3R0Pqqyn\n1T1l3aG/6qLeI3CgpTm1eZdh6uAHo18MrgShmtce2npibtBB8x6SpmkpMws4\nIxm2YOXR4gBUpwKbsYIUtjapz0ki+XWAuvFGskXstaZf+8UZU8ZO/kOFBHRD\nMuugL9Cemd5LI2ybpP06eYNRBbJAHFHvGUhDbV444Dc6M0YOLTkXQeXVkAGL\n4UCD0qcJiR6QB+Tj2zipZygQB0QM1q5OXls588ygepRVTYlhq5dhBeqoFmyr\nm/MuHMyiiiHm4WuEZDYAT4l6+lduhzQY3f6kYsBxdZUSh5t7D8Mg6aW560Y/\ndurZ3qBFB7x3aVcYNyabTjlLDeFeRXeRGBevMe4BHCIBM0ldNFTfwYycOz9g\nlP6O\r\n=FB61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/density":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/touch-target":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.76da7876c.0_1617759874988_0.8566066446144489","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/radio","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0101c7e4adfa129364e4e7eb7de470bdd505df01","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":42,"integrity":"sha512-OOgXfI9kWymtqqm0XMALnYQCalNjN/A5nMg60LaKGvr2E3KTZSUQ6Y0/0CoyharxRpi8R/EBY/LQtz1Un58Bcw==","signatures":[{"sig":"MEYCIQC2YmDjWpUa7/z9xFkwSGymqmaX1+WUiwTMudHIFTlkIwIhAKWge7i7uhx+qTwVuaP1UPHfqOpn9JnW9K2BP4JTpMHT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+vCRA9TVsSAnZWagAA3q0QAI3qZSE7mmJqFXYioCJz\ncI+WPfolUWcvFPmH05FaykfK6bBjilKz3HG9ofMmRIwEA8Y7ugeaurbvvUXT\n94wx+vNiU6V00sxpqCmEYVOjvGWN/V9teaEnJUXdFOUQ+m/Q8eDji3OF8Nz3\nIXYrXYeg7bqZMqC+HL/7sNqdCBmIr9NfDA6UfEBJ4pQct26YCPo9mePox4i4\nqiXJDm6fjo4XeG2EmfB4bsgyFtFdP7veo2cPoDsIdo6LSQ1lFJ/gcCNzeeY3\ngIatXkl6ZG0Dc+W+mfMtHB2n0NB/2xblAb4byoatEX7E2+BhRtMjeYy7e0OS\nJerghzeM60ktRElETAwfzF1p6p3hG0Mm1QmjUfDPZ3pWc/b0ys3YvDctBrkc\nEBYsMQDxFvV9mn/jPDcyHhY4W05xMks/tLKos6EBLrvj0hnW2YTUnU3Cw7QW\nEXhxYWNqhuyMCRgilUx3p5DaIrn87MlnzV3JReCU7Qb7h9orKDq5Us2JBU6h\n7arkoLgfbRsjqEBURRQEAjtlkWcBpOawITCFM0Q8Xut9TlFl0LRVjJAeLmiw\nQwm0woWnFptKS+PlzdcVSXnCjc/SE/cH1GMlNzuprRbYRtL8HjDIXS4g0Hc1\nX88jRjI5nBDiW74d33GZuJzghvBwiTeBzs9c2yz7veDh/sCMUkPBIYagYrId\nhDkh\r\n=hHUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/density":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/touch-target":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.6bcb6cbd2.0_1617821614742_0.9895283830360493","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/radio","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c4564f5a1c0b68a91500d2a030b3dd0063f7fba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.c91e8d141.0.tgz","fileCount":42,"integrity":"sha512-udBVrogm2S97mMbLsygqi7Wm6aUr79vZuyE1i7AeZ+r3DYgdPE6qDqEjhFgUMya/U3GLhxoiIURnCb3+2fR8Aw==","signatures":[{"sig":"MEYCIQDIjqQ/rxgxmOO4gdLDQWQGO7S+nNKOJ+/tUDpew7ZbtQIhAPnn4vgMcHCqK0FpRPYjAVeXlXPJfdTLRdyKXCUXI1zy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCaCRA9TVsSAnZWagAAukkQAIyAUQbPwPBZWmk/T7N4\nEe4zYwVO2v3lqF1Aa/27SlQ7jxDkYVF/MfFvajIncqxoElrYcDjvlVC/amZ4\nqBMQxIy9wX9LiUSpUSj0PX+xAQa5KXmljiMttofo0LQsdY3kVEBembkOdmTc\ngNfKzjv68esKuK1NgoHKqkfUCcjowK5I6JsdsDzrLnK0maiSjH3LORWSM773\ncvtyHzWSUmywlw0za1J8FRwBzosOpgOtISeYU5nH12EXnQXY+cBPPmkx36nM\nH+kVBk3R3ZLr+ZVXwn8PsUbw9KdxR8GsOFH+/5SJyel0ohvTONqIKg/QrmQZ\nHAXuHYXXY3BEcaL2dUUOdQ2jED5stIlEebWJ5MVy+ByIraNLXvD/kG56q0Ip\nVzlfM5jCabkYHRTl9AHcf+KE6HPxuhHTOxId7tlRiT9PlvM0OySFf4ufW98m\ntaa9qOAXu/Q90bfvJ/8YMrK5BPl6NOxwpqbpXwaJZ/ANG8TV207kK5s6su0Q\nc/gX8jSZs06cE/fXEks3ZQ2iV8WVMOrlLeH/KiSMQg4elzHvG7NTFBjJtkZg\nC3d+rVsaSu+9HvaOjo0VTgF0X+lMJmEF5wFYhjfrxLm0p+bg6qyp77Xn7X4L\nVeR5qeUDE6l3q0KVjc1m4avT+rS73WRlBrsXk5TEBjg8Yoqu8UqqDl6KMoPm\n7tbs\r\n=zCVT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/density":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/touch-target":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.c91e8d141.0_1617821849479_0.7726198354354048","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/radio","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66b622a2784fbde593829504620cedc03742badf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f77c50860.0.tgz","fileCount":42,"integrity":"sha512-MMMAbsLi5oPKe5KfgkQHyly3yfh3WwUZI1Xv/ivlppST4UnN9t1mLOM4xdLEK/mZZ4yvXydpsWu7E2BSCaNt0Q==","signatures":[{"sig":"MEUCIQDT6rg0GKvTIup5VPkVEZAc23FGh9fRsOOOQNBeJlIs0gIgQZRdqBCpQIIo2zs4TmaUxz6aWJe19ZydnenmxuQl7bA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLcCRA9TVsSAnZWagAA5asP/3EG+4GwJmQAXW3nlFQE\nBb2lwHHJLXf96O6spwCrxqwjtP7pblXRF0df/A2cSQsyQnf2ZHfGnROMXrt3\nA+8NEEe/97HEYQs7XMKDKRtIh/fAPDes/q9ysYp0+AzWjvJQLzSmH99SqyQ+\nrClNJz0ELVw1aGs4tUc+qQ0V23QgCX6RLzmH56QdjbeP6IJ/zfC85rOFZ2y7\nsqrwc7K17C6SZYR9I9GU9M3JhiGOvf+00BSnVSv8Pb8ukrP2gmWLbSNv8APJ\nGZswPCXCCAJxTgQ2z/3383kFZZbz5zQ4oD6HXYzoKQ2Qil8h2g861mELdQ3n\ngITms4z3f6/TkoWIafvEXekd4h/NitMrVoY8muqUVNfD64HgPhT6iDebNYFF\nJ70+QBtg5f221e1TwLP7eUVYejSe13D8qvo47colQ1b2Ow7ewslxsCsB0j0l\nUq9Q8KTcl+oqtCsbr0LRaQ7ru9H8CXnT4L/xxL5IITaF+wWk2WvXxaAq6i8k\nAbA1Ls9Ssr/cQGT4YWTDG+zzyZ4w18SQfwANC58jcxJGsgnejyMpOvD2dKlS\nQZRvQ4QWypZRmyvKXuKLrEPvGK8cL5WdLW/E1qdpFgwCFUTGMvfdpEKI5xnO\nL90IVGLtjg09bXM/cMFuRYPrKT/TivDLnNbQSKVCC5X2ydvA5vdqLeuwApJc\nE9Fo\r\n=BflO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/density":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/touch-target":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f77c50860.0_1617896156087_0.128191211521556","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/radio","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d13bdd925cf049e52e5fa4b56c31610bccdf979","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.367d88bdb.0.tgz","fileCount":42,"integrity":"sha512-evg8oqHSzzq/xIBjCA5wrwlavkXTQ7r6nDjntGLIhxqT0v6DKnJ516MatFM2BE5SR67840nRFsT4uu2mGcEpxw==","signatures":[{"sig":"MEUCIQDQD5llKJyamn4BcmHHFN397VWbDP4ngRsWozHr7sj0YwIgRfuwHjXDYSg7BdM/kXGdqTbjZFL3Ez65kdjdW+5ZDvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzF7CRA9TVsSAnZWagAACd4P/292CYt1P9ZxoNjsMEZS\nZNdwNTI2MnPkvRJb/LVArBF8Gr+AZYiRwXkoyAmF4igu7iWpyKZbXyWKfd/B\nXEfOLRDExqcvkvNOHY+XOb2UJIaWNQdWlmH2jDsHmSaR/ZEUeSksQ5+p0oHW\nWeXkqrgPOxFzoL1dubs4f5UAjaIO4Q5TSW3Tk93y9yaEq2E7jzye8a6fY5je\nmDV98mxjv4VQ96B+xRb9sMdMypEo3pW0H/dVTJTHfl+TMjhNQ6BOY0TXZzpZ\ntZaEL3b337965CqnY+gY87T5t5smBGJnkAlaIRgesZoyh7FlNzPw++k8L+lQ\nmauGdAAW3u3ylI6JHZ21dkZiDTHpLl7TEe3aMwi/D1WCkhpj6Qjuy+2JYBlG\nLkokI1TOx6+j6bxabfHKiUXwrUkwfBDGlHEjTqAeflIKtr5/5iw0nW+ody2q\ncj24Ui7iSuFnEvjiE2nUD8juxa+LqNz32sKS4xdDF3+XG1uqKek/soWfnHAi\neJjlhfTRT11owNkO80EYV+5Audc4Hb6HNXxmzsC9sdu5PePn+00LmNG5h8h2\n5+Wz5qb+4novZeHazG0qHZOH85g+4zs4fHuW4aK4DUrd+/p0A4sj+2KLLf5e\nCmbqlZb55qaKDHOITYR8oR4Ea37t+89qiZwDKCB0mkvNtud0qxnR8wMBILpZ\nJwsZ\r\n=E6QK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/density":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/touch-target":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.367d88bdb.0_1617899898762_0.6712392617429856","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/radio","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e4b154ffe64070893be33fce05a1ddf1e94667b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.0ec437d3b.0.tgz","fileCount":42,"integrity":"sha512-SVwlO9pc5Bzghy+bqekK2+/NhWq5EEuwzk2GpTSAIQE/1dokK46pV2npAWh+ggkBfia0FRHgygIWETzGTxcELg==","signatures":[{"sig":"MEYCIQDjvKnze2ez4vqC4GA82iUxIKvHDSTEA8uT8Jxk97x4xgIhAL60ZzqshokdT9dmUWdH+wafvC5EeTddtowV7IpPm2zc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1rpCRA9TVsSAnZWagAA4BgP/0HQdXcZi+Vu6Dv2sRob\njDBK/SQsP0VtliNslkJ50Dqo9cwkBWHrRBhaXIEfTQoxncjS+vwEMYSpfKUb\nEV1F43qxA7AJY9ah0nx66cx9QSlIhAMAy4P0MYAiAOqi3tFUuAnNtqdwiQnh\nI+qMMtqzmETeG2U9UYX5AposHjR5MM409PD8bo3JBpqb0ya4zbD55XrTLbYU\nu2K0yqd5kPTRZc6ejcjQHl9rZVWOVUcccHm9GSRV49Al8sgqhO1/9WROTuYx\nqKnZ+mTQf+GwHoBhN10FBBnr1K/UMk1dcjxAT2dofql4Iy+ZLKspFjdG5qBe\nELKimV1UweFu/w3yts4YW7NRqSSwHqbXrOM4ds8z364al+9Fffa50aQiQWWD\nWX0+pRv9YGGmIgMeAKVCM+DjaNU3WpZWZTNc4HgNYdKQwh81uCJbIsNWRMC0\n2RTuT95q0aUH+n69nr0fOm8A3dwlCmOG8iEZC9gJMMPr6R+021llId13Xoxw\nSaFSkgLdkQ4DOJ560GsxiNbFTnd0Dn273iVewlMqXqQy/1KYWAbHILTPyznm\nBJw9d3HsfkQg1unM93w1D3awE3auxJdVbktdemZ9fjn6q46TmCLV1uxRfNV0\nzV4YO4n3+CV2Xmy/Gj5oK3a6iSKhuQbwppemHCfh79RPIwRZkynxPjWpOVAe\ni2NL\r\n=UwrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/density":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/touch-target":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.0ec437d3b.0_1617910504779_0.03852127752100287","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/radio","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a6352789eca86a6661ee870e29e461cf60bb267","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.b2fa996a1.0.tgz","fileCount":42,"integrity":"sha512-LFAwc60b6QJPjCXcRs6BwM+NDpitkv7xEj5eavCHKwDysuXWI8k8t+QpDOShP4SGwCxTPckA1Qm5xc3wnv5J3w==","signatures":[{"sig":"MEUCIBwtcWLtEl45qKFCnAHL6rN5LxRNYpo6wSyT271WxWxaAiEArgsa8yTDP1nhk6t8Vm0Awwv2Svs0XD1Mn/q+qzDg2Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6ACRA9TVsSAnZWagAA7loQAJlg8dwDIOPX+BawJmzJ\n+VunaNk7SSIP9+GOf6TDxYBulDtDoZX1nGVgner1q9dCMZUoYcCbbRrhXgIK\nBLNSu8jteSx/dBU/AKVTsDlajxjvJVF/IwlzUIglxF51IX+YCBq6H9kPP/r2\nsM1tSevw1XvMy6RXMkDQuKC90JOaIVa+jUxcJxQS/KQUIOriBM0X9aBBEWBO\n++wLSP2iStUdkQx1jy46nKVZK3WnrQnNU89m9fUsLhlhX+aDBqge75ijE6CB\nUwTgWzVlsoNTAqGouiTcgAhcGjzEc9W94uYuBelTn9dyp5AwEP5ZcBk750J2\nAKrLnW7no9N20k++5ts8ZZfwsvsvUzqMVNJ1Nj2+u9cqYGbSf1u60XSt896o\nG+UEvUwfBO/iyA5SxT68PHxF8Dxxts1YIem0BWPg8wBrpmd1xJbHQGiEd1y9\nYNEvPx2CgMQ7cGM4W/DhZazebthpoRWtEuOEJ7/66JRqVb35fF34PmAUilKP\ncGHUm1uHUFfFITzl6vsrzolJuWlKAm9LJmbCxGERVhn4S2/Epdw3QYVYS1zu\nxtv/kZDvQwXnlHVi5yMT6s/22/N4EDwjbO9Zi0jC6GUnSUtMDFfHmzHkK+ky\neqTDL25uPDx3UTLMTW6fGzVUwW6DPb3w5ijSdOmz4/sVdwUg3OggSFk89iKq\n2cwo\r\n=Frwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/density":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/touch-target":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.b2fa996a1.0_1617981055740_0.7892476346859345","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/radio","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"622c3ff0ce3355e287c1a5fc4f167582e25736ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.24255c408.0.tgz","fileCount":42,"integrity":"sha512-JSKbBcMTETTn9H/mEuU9mTQlWDuWQVcgwGwK8jZ5jR7Y/Sl4F/TeXgFn7NdEIF3lsjIMuovgxZa6GDYYH8abUw==","signatures":[{"sig":"MEUCIQCivmgBtbf9eKhoHds/HoLsqO6pXOyCmOHcfCE/A+dovgIgF3RnO1iS1WzBP4tCQPUIjakuf6sVazsA3pnEF6iG9QE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUlCRA9TVsSAnZWagAAPpkP/AqqGExI2dD5NWqK6dZ2\nwjivhmS4R6AT/P5ppdhvaAoLyjQUhcwa1ZrzbzT8ookB+7/cKGP23yBxIDbA\nRWx9yPGgjsdL19HB9gwvEvlGkhv4/+7m3SjGm+VVHrqiebLEZh/FLeJSOawC\nvkyEZAPk8yY6hwVF9CCPIHtyxZAfR6lduu0n/UJVBdMT1zgfCQ+xpUkwsnjz\njWQI0JlX019Fy4D/Zdwbg/gtdLc+REBpss4belhywC6tf140muslJO8DL23z\nrdfAPvNpkRcsf0m63fHxSqaZibZ4B2KmyA0IRr42Qd3nb9QGmR6kYWhYGi87\n51TX3MacFOfNwafE2WgJIGUQJSqvdWMfiyFMbwxjqXQcMY6Od6ksXq+f+Gil\nsmcRwvJtrc861YwCU5ewnnHtbLXgm3w1POqzq01aUrZvNxz+lZfIVFK9ekoX\njvt5q4pGfMNZfEKcSZOfspO/tWwhi6CpybS8hnIqWqn4ctCF304NqWcLgYBp\no9T2mLcnN3VJMhAFTUFERLgWmrMTUwwej1Ztk1A4lRf+ExpTHjb6Fo9Ld1sO\nz1FzyZsrhkiOqUDvaihegPq2oAOeKUIT2voz+cMS442i9R34VMdFJLsAQjOl\nIoEzAzqLB5hHrEBJVwUwOmMHc9FHlbt0D4x6zGIwn3jdI7JbE7UmXknjUI1B\noHYn\r\n=2Fqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/density":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/touch-target":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.24255c408.0_1617999140199_0.7191129731798054","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/radio","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee46d9e817f0805fd0878edcf1e7d1a664ed6531","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":42,"integrity":"sha512-0BNQOUM0Xv62SvV7o31L3CdcWAB10nLoSzuQbFUuw3L4TUoUqag0jdZWWXg0DxhYSou28ItC81ds2O2bHIWDSg==","signatures":[{"sig":"MEYCIQDpqW0OSxCoYI5gS17dGc61eIu3VJoSJw0Tns55Opp7rgIhALQgbEsqlIcQM+JXVbHBDXgmNrD2/FsmgOYDHAQ0/C3I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNrdCRA9TVsSAnZWagAACcMP/3KZebFmwaac98H/6RvX\neKziFOBH6MurjHQCY++XrFTJq4ghy7u16ZeAVmTCcDD7xqiubDJdtAVqxIlB\nH2EPtpPPLxvJodleE5k8tAe00IN9tefFTmuecbryqwTIDBi1cf0M64Gqd4S7\nbg512L07LKt5j5HaYQbHlZWm0qsVKndE4cXYlqfbzlKqRcvgfierXYy3J2rB\nTrACCjuTMeFPRdCL3dQctqRkQcgO+PzJTW4+O9laqq4PtnpQNjlY9PweW0Jy\n4xOtACwDRp0GPHKkqWDEBvD9lKOG+GU2K8SugE/F399jH2G9PoDKkv0D8KWo\nv+5AxGtZDWxlzp8Rvk0Di5FHVzz9Kgn2kjBDRDFIeYqv6TRktrBJagNcTPlO\nYNrAgDqCSjM4DUcXKoWxTV7siQMxWV1GYQpmT5wcAneb3149NJij8Kt6ugvH\nlyDQ/vNMaA7Y0lrNVDMoTDVYSZt3Lixg8taFDdqF6SUYak8raATeCQp7x1j3\n8hnZF+3d8XRvdtzBPLvA4ixCLdVOHylFYBbV558Mja0UVzLulTBz+L19SRaE\ntkawbY/tpmXM9L4GAe6lJG3U8RnW6nnxUZvcI9OOQjwGXgzHf0dkpaGj1zQb\nq+aAiEwCrCSoV8DQiQ5G/Jni1hUv7rj9xt/0Iex6fq2takyLbnno9aiCnD6a\ndD4l\r\n=xIp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/density":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/touch-target":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.7d6a4bb72.0_1618008796749_0.07997012841729667","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/radio","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"005279d5432654ea64d346842c5f06ad73686952","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.352b295c1.0.tgz","fileCount":42,"integrity":"sha512-JMmjj96EAFV5aNOQsSavGJEskxFtBVaqpLCR03WRxP5DVVA6YmZiue3ggYBWK9G+jbobFrjCqBwXKvVXX07olQ==","signatures":[{"sig":"MEYCIQDoI5UXOP/7Axrn3JtVKDkgQvoxyuomGBknX7LMYfIdggIhAMk5F5mpGIcM/zrnEYZj0uwDs32NbgPSbTC20R1H3e7L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI41CRA9TVsSAnZWagAAWGAQAJ/Xi0bh3gtoHw03X8uR\nmviHPQLaS2lmrM3zL/GkSULbi8Sq1UYxDewEsAN8UFDIxS3dqHcZeSYKOV4F\n9f9tMd7KVbjzRjWCJmaycpAz+qWUNjh4PQR1jzYnc9YNF1eBmOUjRY6U6Iy+\n5DuXg4Xqa3SEupxdJ8LHGJwHdSAhC4NSgCGLiQDCT3hFyKgRx8jn3x4kxINC\np0VDkQdEhHbbTXbWCAgXEldMg6YMFs3fj8noDUZ5DrQFYT8cfUDPKNWgb299\nO87EgtWr6bOXo2gD9CQ5uM1VHPiu13pAwkwDzkVGxRy/wzSH/MRSlKmfiEcq\nnCmZHnUL/WPjuUkGk6JT3Aj4Vt5nhkI8LLyg1/QyS8bJIuM88Sm0jSaRxxas\ndLZtloPAh10rO6/Eh5KDaJ61al4eyLFd+htNB866ajcsvsXSGkfwsHuvKrad\ntUl6qw09xpAtkmkI8aiyMFaUVZPPOgRRLpqCN6akeRKX+L+latnhxxcjdA9V\nFfmRhQeeFdN0Smy4sRLi5J3ZdlD1fWrjsunkWQ4ZQgOCJsTpIQJYQ6WbDoGr\najXMwNJ6Dk9srsgk+uAX/iGjsdLwuWkWdwd5WmGBDyJrGShhwoUtSb6KLDR/\nHoTo53LjTpOJysAI8BbNDNWHwS7Z+B085ULNDMqOmshrU908ZOa6+4TXivjm\nzMrg\r\n=Pifd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/density":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/touch-target":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.352b295c1.0_1618251317239_0.13162598210299503","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/radio","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5af327003e95945c948ccba1379714e44d816a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.ab99b8064.0.tgz","fileCount":42,"integrity":"sha512-RWPm/56SXRMWFU1dStaRIoQewomPBQNjVL/NgV8h3nYgqVtD1/Dl8Yf12wYrDKYixdSSyIGlswbSQEBVT8ki7w==","signatures":[{"sig":"MEUCIQD1pLaRVQm3BG+v5bAQu3FabeEoHRoRQXR4+dORWN82gAIgU74B09Aw2pHOIwUiP/fVtj93BPEEBdlcoNAv+LF7gD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4ACRA9TVsSAnZWagAAyBIQAIl6gXj2isqcsKvCjOlI\nV8IkcJNCyLANbkN3JdjWvh/CRlSNxPrlCJoNR4g/otqjp0B7SWEep/yQRk13\ncRzULbkviXHHAUH2khIGQev90OGdgIL50tKaJzqyA7Wp02tJvDmn6x8exlQY\nACozN3+payRJmhEAsIJNwXQSNeChD5Iy5rFEllyglBr2JmsYoVjnskiL0XWo\nd/KZ9tYsUdv66QdeetHKo+iS5Qx4fP1sCP4Kxax0KXi/dPB2e4v5Rvvf5sgN\nrZ1p1BKcGFkwPXyX7JH7s+kOEq6k7irkJ7BdpM919siJciANH+uSWGAFUauM\nMKPK3AVQ5epLLEzx7lS88AjmWPzGRDFOoCHYSIjwg0OoQoVgHA/IfpecFqOa\nCJF5mErV2a1i2LlMlVHdUbShKsGxM559/LMypJAFLaaClL02GE7XGoCsz52l\naFiuejDBh558TGgTT4FQYgB9vBqH+cMDAdePij6+3LHRximU/FsLT9e9iUzh\nij/UTkLVpn1sIG2yB8GZ1Gqo9YKrYd62ubMZr+3MrBqEOiV0I6kqQFpinK7I\nXNHjimVSdv4ivOQvV63otUB1iBLsJ2Pijr1S4gPf9ydeOgxkzkdGQsD/6eqA\nYK1jAD9XvWnvlTGP4lObaaecZ+njvTM1q3SvzotbI9LkN4hzIw/a2cWoT9vf\nubso\r\n=9g+W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/density":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/touch-target":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.ab99b8064.0_1618324991790_0.28860143951535955","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/radio","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be038046735552f34276069c1f8412cc472e2ea1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.8f0a11e32.0.tgz","fileCount":42,"integrity":"sha512-7tb2YkXE+e2tNauBCcny20PYBVczR26j6vf6fPAYshhzTpC2qwTF9omNnEO2iwZtS2gRHWy0RYstqdWT2xSdAg==","signatures":[{"sig":"MEUCIBdlJhnJVm2v7I3Vr+1bNnb1yt/w6K/8iKkDkTMiusQTAiEAl8tRTjG205HZVPPY1enDO/Jq9JDYxRZ1wx8wnbOk+/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0pnCRA9TVsSAnZWagAAm7sP+QFXEB3ukiI4mZ+XsNjQ\nyyNdQpxwMv/C/7onzzJh/TCh/1+synlGS3Vj6rpnOIJd7SoePRKFrdXgfk5s\ntJw9RTc7cYMCPxmn6FNxPthtXx0jqtroaXY7QhBYYC/OgBR3uQ6/O1AQ5qVD\ntnJJbyTwH8EEuMTtvDvykfpycTsij62/G2usWWQRavP9ICr/mmT7xKjIX+mJ\ni+9dIl7oZ8+NZAQ6ch2aGJbryrsBXIojfx0FIJ8/i89ea7oM570YIdmQZ0PP\nvGqtEjmyWBEHQ6pUhwIqvf0b4nywAgvKVtNTYiGYQDGEgC7SY8t33CsUw53j\nufuVNTedzSbq6exOMxY0lm+M3t3o1mkcD8wyWPgwHxzuiMBmT9r6iRgviz1E\nOeWdNO8o/BM1/4e8DQO2whCdTmUvK+TDtUlFRzsRvdEoZf4VR8O8jdlVF5qh\nlIKty8fDioraLQj2uAngTokKuxdYX8aHiTwz/a6hm88ikry4cOFbibc6A4zc\nEA5jC9wFqdusLa8cnDyNi1T3Dt4vnkOr8OxP3qgpy0J3UtFe/R3QbV2g+hhy\ndOEiTq+K6bzBROGDJQctHQ+zfbM/CpF6sEbnwtFGK1M4ZSwSOKbHu2rn6IsZ\nxefOiTvuqCgfeWvIcdKkK4wdPKfeacVbtZR8RZycCZkHxORTM7Wn1pzTwybe\nkDGt\r\n=l51X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/density":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/touch-target":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.8f0a11e32.0_1618430566516_0.7431729166805148","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/radio","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86841395b5d0760f11bee5e5d0ba5394f3601fcc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":42,"integrity":"sha512-6LA0SLmZ2glTOMz0RMEDtkr/Si54opsEFkr6KTJ6MXVxJU60kFHH6HEXROdoTT4NfYlfFOEuM5od9GqyooEEOw==","signatures":[{"sig":"MEUCIQCoadK7DO8cq0LmdiEycWcvV4L1sCCRQoU1VczaOid0KgIgRZl/Y4VocFgwukcsKCgZj8VeGIRLHoiBPOtZZHP9/B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAHCRA9TVsSAnZWagAAf90QAIBIRTcNRlaDRkTUk/rE\niJCWwQSKwJJ9dlPPL0Ip0T71dvbMSDoXeLaZhYtyLEnhXfmEnbyr8X3bNraq\nLi7rjb0V68+fDIU/AxngwXzZ2VjTsrT/+RYPUNR6YPBSuwTllCx9ctJxNSps\ntvGolk3qV8I37Rpu91OpP1tJdxR+Ks3jPj3JM6lmVjzGXmxvz4qGr77bagnq\nR3dp+cjaYmEkBdSHw9Gss0lWY113P8nrr2j6v9ucwpV/kg2++e1+sz7wvB2k\ntmb9828ksbplLFO02ClyZwvbsfD278fVpnavOiW3Utrywh9yTlSRkfvPeKS1\nnB4B+h6KsuHaMlQdUWpjU7Z/GJSoD4M1p8i2njLjOKfOgDCjJrA4bvLRvwDU\noiBEV5aveXRy3U/0KQCAYedRImM8WgQ20WaoN+YBKgzbf/4+Eh5RVMO5Cejk\n8Y4J7CPjJLjTFJehUcBdMKxtMj8g8EGBW2PEffmVbIBvHWefbrO8zR2Ak4w1\nOJkAz/uu7oxP+J5/09DKyERKxeT+dOkg68eQghQ/ZQSqhf8JLrL32jxnzPsz\nOLZQufbqEiziFa+jFNotUiQeaWkGWIjrJ/yfOQbEW+e0zg3Sd+C4VxnE+ohN\nxTBcaZWOAoSbKpADQpxrlbRwMZQ3MqQZI2YyczQSyTQKV97o+oPPd/tX6wJG\nTDAZ\r\n=YGst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/density":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/touch-target":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.f5c6db8fc.0_1618509831207_0.34616020243209045","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/radio","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91bd960e70fb7d6303c4fe14dc1061e5c8ada8c1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.3793a3143.0.tgz","fileCount":42,"integrity":"sha512-dLRPT8lVfG/82xDBdDTVDIB3Rwz2jTuLE3gGXz0ahd7iFnMC3L/jKrAah2FMQPrsp3w4zoPRpa1KmMJhnQEOug==","signatures":[{"sig":"MEYCIQCOE14hHJq76JHGIvDQwbgwiAs9sY04jah2ALZBVOXF5AIhAK++8ZiTTDpSJDQuMm6ZaLXtA/ZzJK1Lu3jbCFbHJJEw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZzCRA9TVsSAnZWagAAAJYQAI+DE/kSbmZZnCF8xFsD\n8kVystSxUTmsS2ga5J0envunQKePNR3pHcwKfrS2/xfVEqg6/BZC1Ws89foH\nfbF1SUCNhaUILglZQMgDqNLyWy/KmpLG6D2FWvj1kcsPr0jIOK28TVfOWbEN\nb14cvwzIU45QB4HWoqyp50/2M5bcfepkTb/yAIs+Xr9LM5F39+lUxhuci55/\nrkG/f3ll973QrvbSrCk+IS2MrMc1ZeYSs9NEwLk8rTI2dCDPFAPBqpuXzoC+\n/KlSz7HOSnZjZ4+wpgOdcSmLvodEwgmQHXtNJdf3/5O5JVEMB4Ebp6rhhKae\n3N8K8xwVJNBB+BoVy19OG6Pf+JNxrk0wrIcTebAS8Im2FALar4oEAqdPxI0P\nHo4D/HRDJM01XcuZTIpVfkfNCXK9Xxm61+kMwpsHXUSnnSOU4IM9YMUGVfsm\n+C8y8dXsZO7SkCERkEE5PIgaW4IIHnNG17XHz+XZ4wIFZB/9wcpBrmsVeD6c\nxnZNMDubesf989hyOcR5CTY0kcYtAXcUO6qMBmNoISflypaajWhYB9WUjV+/\nG7p2H9BI4WAdxERXTL4+pJwGenMnjGXxxoqcZEpQl2tHjre+HKqAc/v47gwG\n7aH3o21C6AE1Q5LlakkfXeNXUlgDeCBdoOURSPPQdgmFPakG0l+UcYijsq4G\nnEu9\r\n=O88M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/density":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/touch-target":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.3793a3143.0_1618511474715_0.5350428255173878","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/radio","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b4d565dafcc5ad4bf30ec7249a5e234fca5f3ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0-canary.bc104bae7.0.tgz","fileCount":42,"integrity":"sha512-wfyi70lHpU0vBd7DL0Hh7zCSIprmXQpNc4HJf6qVdRXH8uEbFwteaXV2DBqQaI48ZZKc0YrjU5ttSDHze9Lh7A==","signatures":[{"sig":"MEYCIQD7uVmqw+fk48Co7YNkEAWFdEhRBosRmtlPuQ1b2b5mXwIhAJqLz/1A4kzbb6HNGLd7zNdcJ8eZLn4en+prj8bXCBZh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfwCRA9TVsSAnZWagAAUYQP/05t3SwO0+QN/uLVuzQ7\nKhpLA3iLKHUHk1qAmcEUaVCoSLoNyFKfkU+akGv03hmVQRGdcaAhEbuBRU2L\n84jCz/C9MSsdLiUaZNYD9iWV7t6bSEoRToV4dpYjLEI0aSQdjLr1X05UWYmb\nRbniRCCSueyrKFH7aEdiP0hLkvdGUV6nfu2KOpftosATbHF5VI/3HBlYQiLL\n9H1YXMvyrK6+0rg6BFEQOBZ6t1LdsoSOEUHBuHWZSQ9Yy4oVxScoPwCHxn8W\nHoK0HXJQIZhoj1TZ7HUNFt/C2qoPk3auUte+cdKcdXzjefRxdL4V3nL+MBji\nx/OPuhyxBl4lIvqFwyFdJofNLtYL3F3I0Av8UYlMUub/AkBs8XuWFO/3fsbe\ntBnIi4O6kl6ZRBzOZtTtXZqC+eqYAS+ROpc+0WTgYM+V6VQ+xWEtl7ly5Mr5\n8hgsZda1eSDqSZWFNxMq1lHythkuUdHg0whEFGN51+CJGr/k70hYQgWhHYzI\nB7mtkrOkkx88ZQ1DAXcmIawk+L9eCpLI+TNgkq/QBsi46hXwibtTG4ZZMkiJ\nrikl5l0yhTl1QxjdYJKlW1b4Re8v5GRy+htLCQ039ocGewqOO8co+Gh9Iof+\nXO6tSgNJSEPFTaqPwaNsrCnZojQ3q3WUgkzEfdjznTi/gQGQtU+Xgf/oVfeH\nap4k\r\n=EzrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/density":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/touch-target":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0-canary.bc104bae7.0_1618515952069_0.6967526969158764","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/radio","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"068d63d56741df6c8f8d94b3a93859447594e6d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.3f342c3f4.0.tgz","fileCount":42,"integrity":"sha512-xnnvcIDm9s6REhZFoXBc6ibK0PK54aIKFYlL7/6coFUoeDAMWpfa3zEyeItKMxDhLQ/V9EOzG9zIWF1/oemJ3A==","signatures":[{"sig":"MEYCIQChmauKhHOXo5bbnd1Il7L8Jq9fNnizcS+w34BNUjKYFQIhAILrA3L8xHtRBo8wZ474LsJN8p9N+o18cLu5JuaUihyE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQVCRA9TVsSAnZWagAAYmEP/it+nbc0TvHadUegv+UN\nSI89xWl1VOZYR2tlufOGTaglDygzrhlXqau1PEtUyniD7WVDM28/llbtxDVt\nQNd422FJzXm6lQbtdK9av7BQ1QjwqUyWfVG0fDpdzZLLThSpeo9aOCyBtMgN\n/k4PPlq9r7iXW0ViKHXfkf3TK2ODA2ML14T8k5dUbRnqVCTsPjgM62IgyCoI\nsELos4zHRIk8mAsHoj2lP6+QGcvJ9FGoXLbJebjQ0y+l6UoyDzWL+Me1o58z\n18olTvbC3BDzSFBDZybQJQmNetNM5Cm5VEFOG7DAfQaM4Kuod8uyxN0kF705\n4LC55o99HB2lYWP4WR7OWkyNz+NeR8yZ7Hm5W33hwbndWDR6kSaT0+vLF2xq\nriNoBIftIkBUOWOD9pE6hmiASACujVha0Jh77vycaWMDxloeFpmylix+uz9b\nZ0mGs7462S3ORfV2fTfwUQA6w4lLRCtjDFfsX/c76bHwABQgjyJWwCvDGB30\nl96ptNw0XOX65mkBKPmJ24KjfH6BSHXQU7bMclGYlNbK6O+FHl7ziPR3B2Ol\nFGzjPDxu5p3VvxulAbxkKsZIj5FYWGoZbKJngFE29UXKEEchHOUykiZAqGkx\nDKRRZnmkcHAWE3LKvBsSaPYN25ty7y8gmj3bl60dcZX4ZthC73JqLcHu9IGE\nOVvO\r\n=erTm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/density":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/touch-target":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.3f342c3f4.0_1618527252788_0.46135795950624314","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/radio","version":"11.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0686e94d57ba3ebdb856d7d263c1e21b89fa2ba4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-11.0.0.tgz","fileCount":41,"integrity":"sha512-smbW+ccgoGr6CW0Jjk+DZgIwZjVmeNONAJX9lTxSvmxZVgJ/3BVizY8Mwl4r1j4Y9jZj2ZPoAg8D1G6wVxO6ig==","signatures":[{"sig":"MEQCIF1mAVfPGCXVms87Ai/vbpy/AjnjtsngGU5b4hhyoZQ8AiA6spGKDoiKM2Zpae52KJo37VN6bcwOXOsJ1h/TBhBvzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMT6CRA9TVsSAnZWagAAwZsP/3usjE18cLlVcn/RXCPj\naRxZsVY/pO1nuDBM5GV3Q9nMXyf3+JdpaL0rLq64EP1qYBndhameMcvzqbJe\n7idnbnrm4ucCqiuutGVkYrOPzp8n+/n/Q5hY3hebtAGlHwc++bSHKxdUkV/6\nWQhFaa2ue2h7DquvMIWYsShwXIIBdd+fuCr0bw2/FkNxFxbd9QNYRR7CMkbK\njF4tUAm8UnjGbQtgPkoo7LXbtNF1Cx1+lW02qDLKbsfQ98x1t9I8Wi2F/aXf\nXvADoBK1mnXebu2YZkQC/Ti4aDHgyMWx8Plk56Nt/oEhyRsq2ZhMd7zWPs/T\nrjNcoJbv82xAsI9uRL7VRwFdkxa9MOnvf7I3dofRZeuGYhA7zsVACsiAZhI/\nAnU1hxtbsw1yqeZYq6AjXANeJNbyQVne4UIwUnC9MVOFhs0YFSL0gcJI3EQx\nC1xScSoV79v6D9F5qLNO+eKD/ZJzxOJNl8KFTfVPon/156Lh+6FWMt7jETC3\nfmjmVwS/zAQBBqm9b88zeCz1udy9U8uOJfCXCbLkDzBTonpDWd8iEhVXxsbh\nuJ1sLsZZxciS4H+BVqb7OqSJYI7wkSXTcS7RbtRy1Gd9Cuyj/L16GbLSaEIE\nimmUrW2n/j3s1MjbbwVbsx2rrL77QfjB+p2AkQRTooyiwvpPwj3VmwZ79tN7\nZEt4\r\n=nquC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/density":"^11.0.0","@material/animation":"^11.0.0","@material/touch-target":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_11.0.0_1618527481558_0.6529513858645875","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/radio","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5460cec60bc4488b745f90feaf27e45a8651890b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.2ebfc5374.0.tgz","fileCount":42,"integrity":"sha512-npCT1YH0epMupmn94aINjTO4FUTraxzWUd04s3uvyI6Qsw9Xx41nn2TIXtizC1JXU9HKT/hDzdH5OZEKKlmMuQ==","signatures":[{"sig":"MEUCIF3KeYJcarT8ZfO1NM19JlMw7skUVNW2z553LrRmZe5jAiEApLCyWGifVrZnoBXTro15auskUU6dn1XkQdDptLc2KhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefc4CRA9TVsSAnZWagAA/MkP/1zKGIT0rkjM7I5RyZUl\nI8nmHtDEIIKHWAHblVi33zMJarfuJx/uhZwnan3I+EefnrsN9vuF1GfQQLi/\nzPYxpkH2D1sdH9Prl4MCiJrZsrwpOPmLRUSWNqzP6WDo8TOlb3OGyg6oTjGf\nKFOyozgYad1zLL5MG+tSlpwKcg/72zbNYS1n55G23KNB7x5a3ORg4hm3kVBY\nOBX8a0IPOswiL99nHIKfUrXZNUXv5lCg8rnHN7KdMlJzwwiWVqOWg1bjVXZo\n3EWAhm8hCeGvluoUmlm364gGxL1OjY00ndOxMYKn7802mBpZnummgIpRKSFu\nPJ48Kh2oco9WEMNaVG87S+fOWyuAQi5jI5l5y9m9DqEXPRK4Me0u2fyQsyfL\nk+XsHYydGqJAS0yx2sMOkJKKIO+NHqgrYEbmhOpZ2adYTdum8irKjN4uV/pH\nbbaWGwzpBjoj/dmAh7fh1rwf+fUjfXJ1K5lK38bQeMJmgcZhjtyhP4AFMpUn\nXP52id1TYtIQ/yij7OyN/nG92NPy1SWtkKB6eQG0ZnoLKgz2FNwE2W8BXiBc\nQ2oRLzAT9Eqq5KWRHs2wCnmOZaP7gotU8a5qtdgzzsPrTZAfOKBmWelLwMf3\nC3GOtmQz//qmxtvWFN/bD4uQiok6SbM2/Z/EEQ3oAjFFYfgblsgAsCsih4eH\nf/SE\r\n=3nzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/density":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/touch-target":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.2ebfc5374.0_1618605879522_0.6112206332324386","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/radio","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aab5810d2981f89fae1b08c80a4cb1f4d9a259ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5631828e1.0.tgz","fileCount":42,"integrity":"sha512-j3C8UxagajKohVaVLXBugx/J3BPGZJyK8SDrwhkBPYUASWKdToThgHF1MwCj1PA/FNv4YeqeCeJ8/WTm13XY7A==","signatures":[{"sig":"MEUCIDZ3U9hoFFMm842661HBpRedKKYkAcrn0LsOSg5cs8i9AiEA+5eyddewFlrRBKk0fUf4nzrUt9l61dHZNa5nQPzw5Lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJaCRA9TVsSAnZWagAALh4P/iAwfG4AGTdsgChhdBGY\n5x2rLDekDpCcxm8f7pFdZ91fKE9x9h+2MpKZ1tlMsmEe5KzjVdZZi6SXnVr4\nZhUntQjw2rwRpGbsbTWvtKbl0jlevcbFF1b5ODGqaVgFTzM4N1WXg7zLDTF2\n8AANbG4sP/nFLjPHQoaJD+6M+vu7P9tSZXWfHU1d8LB/8mhpe3TvwQWM/0fK\n6VQICT54NkI1i9SU7UJ32L1wG4Izb0Ku2cCYjNq8j/Hcb7PEfShBOdLHd2pe\nI0WCQDvrqYo16pPoWKUIY+sVUdilLJqDN5AnHDhvWocPs3dR2YJpynAshANu\nhcBrhLWVuzaWsoggBCIuKUxpjZ/qWnoUYMM2INEU7INUxDyVfa5IhmBcZ6oE\nWWGmwKfvlWyEL1euUTvO2bUuWuG5x9FdJiCPXBGwZefjDpwYinm33dWarZOp\njmQrlippP2LkHIJk+llUZCrzoXU7+M44ctWsQ6MxOTI7/YYXSt2ilNLpjFHX\ncJYKJ/DTvg2AUat/ygmDX4E/JN6NY6UQ9l+bxQ+oXojoB2wP4EANruezJzlP\ng7tKlqQ8V2nqrM3DWFov8H0EQFFODjP1veycA3GW5xF0O9XqrphGrfP+OS+s\neGGKnYtB4DAnzia+12z1oKVpHTv3EolHteTtvlOQKr8la2acxQLz4GrOHAIT\nZQnB\r\n=QY2a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/density":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/touch-target":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5631828e1.0_1618645593693_0.9508293565937782","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/radio","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed04aed6d5db15d6100cb2980b4454027ac2037","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.bd685395b.0.tgz","fileCount":42,"integrity":"sha512-0QI6SSvdD3O1MVU+4RsMGSV7DrTCZIGj1WZpxqKYhYEwV8pl05SDKvnAsoTpJROwHi1ZLLWdSG4epXDpSSCxzw==","signatures":[{"sig":"MEUCIFYX+cSpjiK9NCwmPZe2Cu9LizIB0jardvTgd3V97EfUAiEAqVgCYMvK4xuIyLEbGObSmwAk5BI6gNzsB8Omwkeh7Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7ACRA9TVsSAnZWagAAIWoP/2nHGh31wH4V9eRc30mQ\nWT4YpuH14AgF/4bSMMx5zO36pcwuyJJfmoPcNtjC0wYqaOxCxXX3l1foST1o\npJaqA7aUzNO8cXGb0xwmxQ87uhl8mF/IbF4SRvuKLrDD/0dFfCSRaFGeLXZ8\nuDC5fhL7xrGBTT65Iv6K2CBGYojnRaqUbCps82LtiumsMr6KD7npRc9QA+q7\nIm6UCCI9Yc5tQcDZYIrgsQXBtcsKVqv6YGFFFwmZJ7SB+3H67AUTr2ssvTpX\nsCvB3SpBDeQ8NgCBN5HdJwF/anZpx2GfVNzA9EniwYT0Di/qaiXQmr1Kp7Sj\nerUeAnJkaJ50+Sc33z1k/2hbBrAcwC2SMGU0JNPgCN4Xb6wtbe/g/ddUuL99\nOIt5sZMm9GfI74BqsykW7gRB9Ap5Mn1KdI3pLA4SV/u93u9CaWLmvMWgmmSk\nIibGwebBjqhN9v9mFovdR4awOA7YtcPkrYIZcp8T/fiy9aJq7NeDlJLQxSV+\nf7nz6gY7gLCXWFXMR7QZY5yjx6a6ybA+zyPlwFXJdA624g0VADUNji29DL9y\n0srfEdPqy9ImVv+QwUlG28M8dGBui92EWZwJeoCHcqRXh/nJdCwyGMJN6kl5\nqa2yQsHWeZgJqZKWc0YLrXsnIi1TBKIpw640+vroWJJ6D/14wAkfVWwOYYaY\nH0J0\r\n=AOtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/density":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/touch-target":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.bd685395b.0_1618857663681_0.9657863607934523","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/radio","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ab320c1a308b346eaf730c4eb2011441d23e898","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b52196498.0.tgz","fileCount":42,"integrity":"sha512-XR0WYkBTF/5VKiF8qsfrM8t688kmhvveuUpa4eXt6Z2AAQ1f+wXMBxe1a5qU+QQ/lpWDaWkGDcg5PqV0s0wotQ==","signatures":[{"sig":"MEQCICzH3GQ0TZgPt1uBEfJ2+Hb7JK5CrqsEYSM7LHJV6O1hAiASqN8oVXe1ED9W+bKdyzA3syeQGQcNgvFH/MdM1MqYKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCwCRA9TVsSAnZWagAAdRwQAKT7ggT19sgYYFL43tE8\nz/uSY41LriD0cC8OvX+YwFV8XZO8dQTXpvrbwkwzBYANA/eZIOkl9HRKvXN6\n06bcdtVy3hu23/ldIANxp6U4rHZXjVeyjriW45ei6Yha69BQ4pLbyONAThk/\nRXBe/kzZZmkFE7iG/f2JxN/iNtMb6mb1l9tkgpCtdAL6mMVVkt1SmObnwq8K\nFkPcR8gd/Ua62WL9KjGRf8T7U37JQ36tlmoXeZNpK/3mRM23mI3FS89Yjvp/\nXCSr0hr2UxjxwxCOU+9q5vbxPf4tymWnHJNpSjonKlVhOCO6lcoShwervA4E\nWJ56+9DCQ7nHqSH7MmPmVmDi9tMuQESVOpD4dAtkk3RmiThhQp8Ay5fupgNn\ntYCN4NPNQOjAHYSl167zwYzEQ7AuAtQ5DnhrgLqIuecYhT2MLrioPwIjospF\nOn836r3mMihQdAbdtxPNAhZxV9oNyG/68Q69orUhMfmjhXx1YxgeboVCEw8E\nl8XlM14PmJ1/63iFyMqkGx7s8grOb7DQu0GKye2Budev/UL4l6UIvFnZh0eg\nFctZgZNea8m2WmVzI/m4Mu4UKtrtIIEnvxHZ+W8h0d5g9YYjMBtY6AmBFwFy\n+NGhliouDQwoFYrnLBg1NbZjhxm5Rna7Jq7K1NqwGuOAOmzc7r7fwgFQxbgz\nZ57X\r\n=kpDv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/density":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/touch-target":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b52196498.0_1618862256230_0.0660691469365362","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/radio","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1eb92d55c48f8c5eac35a088585b59a493803b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8ba3e298c.0.tgz","fileCount":42,"integrity":"sha512-/i3OibMulT8ITMtsTQDDyPnEuseI4iGFxGoCXPAUN6y5onQZ2sv4AFAuwaeJQqpv5F5TIcUsA9jPzvhZKd/Q3w==","signatures":[{"sig":"MEYCIQCr++J+SgW0oFGnyjpkjdsXQXReCmC251x/RQl+2IzwTQIhALkA5JUO1tGTsDLEEgYzm9pLYRH+Ao2TGDT39GVr+CiY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHPCRA9TVsSAnZWagAAfwAP/0M8cmK4SS0lXzFlfh/Q\nWXOER4gkYKxBW+FgWZyhw1uLGgn5HlYkoxmxcapif9cKIlcAneVlLVKkwVYN\nrT9O+k2OXw+wM76hQkCzrDY/Dgdxj5gm/UJpixCEjEQEKoTwbtmaMWnBW+Bv\nQWRwGk+TzGpwEbEi1NFPtp6NUhgeTDNwSErxJBs4iYW03fo3eQZvBPS7/tDr\nrWhB4pXQNrqQvh6BPHupj8PbrXVIzYdXXGgid02z+yQjwzpMQkbRg8ea2kaH\nEW3FN+/31H9mFJbcIU+H/CiTosrilsBrAmpxTMOvhaLLwbd4WaQJcXIXo3q6\n90JFULOlpiB9gr/pgXmKlXlv9fNHo7dzye73lOkakDYLE0SjEMoKoLKHrJeA\nNRAHYVhp0/TOr9cvKcCHGOezwE9Sy3LLsNMxjkmbvkFm9z5Mzvl49wiVvZCk\nqcVJnPoMh2rRveXK8rMLqNgE/hfYCWv9Dlcaw4lZud9KkXimfQBui93HtKTK\nIhvrY1RXCJ7zEaQF9q5W9SwA6fjlfmpvvfhEdJZXJYSTgHBR0ovk4KSyeNfw\nixVYXytZ0BGEhR+3KQdtLWof9tFHA5wkaWobnFshAJZfQDzo5zsgjWHlSpW4\nu/A+pXhZj4hxaIKGYryeGmOhta7A3tSi4+I43vYNaXtF3n2wCJJ+19reaIfB\nwtgq\r\n=9grX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/density":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/touch-target":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8ba3e298c.0_1619014095359_0.4605304078941015","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/radio","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19625c34058835761f9ff670dc68b4f817dd887","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c629eab71.0.tgz","fileCount":42,"integrity":"sha512-dSf9XD+DmC+c5Y+LS3n4qFB5JM/7sJBPYr0wi2n0HfKto+kSJXos/gUbw/r3VlSYbM5BRfRr3TGbIqiPIsMapA==","signatures":[{"sig":"MEUCIQDywcdEdrX8Q3oDKteOXy65cEaHMOmUJt9SYcG2gwz/WwIgD5R8NCRu61fQpQn9gGM4EohIFBxZSBTrF43m0flWjwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOWCRA9TVsSAnZWagAAvHMQAKDmj76S4gpCUf+s/n/K\nHOFywmEdT5T/1P851Dsnj3fN5vs+mN5zUXjKdVQABga3MKVYuv8awC5tFFBe\nxGNOf5eCCsb5ZKqKuzInUr2N5zeFG/BAEvOCz3EJQ8wnV5D9nAy0BItwGjUm\nMcuzv6cXU4gAUS1l/QhbypipBINzNt1etp+tQJsGY0WQlNQYeYeE/wn3aP6e\ntcwpjC53NQfW4mqqUf+J4zpbxpfKqTQvNy9qxusnGrsUd6b1QCAaXGKXxtYC\nOQc/x9LbmZ3MLevBxX6r2Bkq5Yrq4GRBuE1c3qjQZ5gsZfxBPQeA1MXFXQt1\nBeupEe6RuMWMgPKtO/xsxcfRBD6vt1KJeVNbB+QTK3mEGvr30JzBxZOPgN/A\n5CtUwJaHABdhT8LwcmTU6rogAmRmVHaKuV+oR1aMUy5Jm4HS3dCJyenc3J/J\nFUKkxGWCv02o7/OCRKnk0RjynOP2COcanqWBcn4zijAfnS5Fgus0ZUuM4D4P\nZUdYjFMOb+p/94ZWmXijENyIaTXJ1gyt0KL2u5WLTiMbK0HELHzpKwV92Uw+\n3xC8WsvDpbDuq9Ur/5bBFhosemrBx/b6iA4IdIgVh2mpBwr29eWbW8QqndlR\nW04WIGtgvyiuaCyJRibmnEh+QREZENYlMUn3iqTxCnj0rPQ50KySeKRKo8kp\nzyxQ\r\n=8/kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/density":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/touch-target":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c629eab71.0_1619035029662_0.8235303561292844","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/radio","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f31bb82ea637dfd55e60404960b16f5bf632f5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8ace3b810.0.tgz","fileCount":42,"integrity":"sha512-nyHmuLLWzWrSKGTmOGmjTJRH8ewcklifCDSEDMOVQLqv3poE8Bx0wh0dUdPCHlrMLDbP7B+6858Xaiwv6Enp6A==","signatures":[{"sig":"MEYCIQCVi+4UU0mIZN2CsL1atvpzr+zXQEpr8dwBbDbTpo3bhAIhAJLT4eZ1/V3Co5fuWQlHr3XdSEiuOeDfU6xvnV5CRbyD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0OCRA9TVsSAnZWagAA5YQP/1wtVx1+6E/bZWaC/7F5\nqAqU5ZQsSxN+mEYDUvoTC76xDtVPI7rN4S2eWTjLfU948cnPUJDvRXYAyyLx\n69d/K28p2evxl0Um2qS+GxH3AAVb1BsQmlz2qkaWPd3EBJdxHfpRCvtebTBL\nVdMiujY5efq9NF7slx5BMEIcfp0gmHq45M9UM34Kx1rvT2SX6bMhDFUxByXg\no9Od/r6ecsD168C0ogmGmMaxh4NRLaXHr5tkUXJOzzlxvugI0v9hPJQTnJnq\nbY02lcFx88xsXi/vI0FPvOcn6kowBHY3/mbUOZbaBQ98XbjCnW5RuUlTqsdW\nVPw4fZ183v/BGTYwaSEJtDe/mO3CPLA1JIUydPmrX0kfdc04yExYMrGcBD/f\n7BTURX1brLAcrmiuhcLIu05lwTxBLDvmBwqHP1ThOXbqSMCV0r1jNhQce3Vq\nqTgxkNqv2VXD0q1l+Q8o9WF9t0rswcR0r0/z1FgOEOwPewrLVXj1XZdp7Ems\n26KVr2zDeXN0ftPWGvTxiljiPKWhm+BxwnE/q3HH3UvRj8VUWYWBivZuHP0A\n9P5A8vpTGAfCvFOwmEhtq/UeCmVg5o3sIdI5zLRDgq9oAfhqTpIklCo0GBZY\nlziFAFsDPoipJO8tHA5NiNdQaRk1EBu7XH2/OzDUYJgxnVaJUQ7EMFuugc9m\nJH/j\r\n=83uZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/density":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/touch-target":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8ace3b810.0_1619037454218_0.20027494727666828","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/radio","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c2af67c5da372f1e2a45e9593d0026fe8089912","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.70beaf42d.0.tgz","fileCount":42,"integrity":"sha512-uG9fxcaGrGyIn3S1ho+RrtebxTy82/vSlALcs6s1XeEceBsmePP0/pjnfdOQ7PPSw4P9hP3ajEEIvNUrvto/kA==","signatures":[{"sig":"MEUCIFd0KJ8zdOco8vd3cNjvDjM1pU/D2B3YY59YfKyJgMedAiEAhbWb7kaxpJ3t9XxEHspPlgM+H0BJ8oFxbUqhMxYKUyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/ICRA9TVsSAnZWagAAAvMQAKEQED0wYTEYcwC+i/eg\nTVP5OIBV1KyUEnf4LdwuDY4jKFG+cTePfBdzbJiaOMi0SmX/cX6+cakD8vRE\nVOngWF/IQoyp9khxdA4PiqTKnnvzX2ulIlOnTPNOct6ecvfhiTjrNNzzaxwU\nvF8nd9Ewp15Q68isziXVWaPPpmtBb3pAfaj60ulQhFnmBq4Z7VxAgw6WnKUm\nlNF4W43FshMYN7QOSGIxoWuLaU8zXw6awgUfstCfNdKdN1NkOvoMeKw7H/z/\nnzysmsHyj84G4unJ+8T2FLPntNco6nmxaJoJIMRi58hoh0wnF5PVftnouhnC\n2sFRgt42b33VEt8FHhsAABTEI8+Z6TaAv4fY1/57VEGC4IYwmL6z3E9rp8hV\nJlYSfAk+2CwDQeWzDK4c9lXivscs/RnaOHFOTbLEC5VP5yc8yJcIuFRTP+zI\npEi+rVVFcBcCkz9Sq8+9ZOw1ULcQp4tQCH3kj95z6iz/SjcNRjU6Oj8c4dAm\nnwOjKJvdUJpKUwO4k+8hJpu9Gk87BSCPajr8AHq28MJ8c2cVUsJxYXxcNcOG\nn6wCnDlLSqLIx0/uKoMSdIGVYsVzn4XmursmdTYfjwuXuLJ2jeI/FtpW2Nol\nTdj+u2l5KIrn8a59VyeHZxjsvTDOIgMV+edlaGSyq5qDSu7mV2/nxdUZkzKu\nTBYE\r\n=vDUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/density":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/touch-target":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.70beaf42d.0_1619038152467_0.27176421864241807","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/radio","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"484b4123cbc96f166abc1692a549bbb52a7fc851","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.cad489689.0.tgz","fileCount":42,"integrity":"sha512-17y7ZAwZklcCA6Mu7PZczFQnAckrSYEaAIyXzx6bBeUQoz3VDhx9JRqiHQS4v4AuVwTfWLzWy8k1fqP4HX42sA==","signatures":[{"sig":"MEQCID41YGMuzYcTq70R65QMBOmr8eCBvywt+NsGElz1uCkmAiAvZbciLeIEtCdej6TiWb0h3nOkJt5OFm5xMhX0tcjUqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakYCRA9TVsSAnZWagAA56sQAJXzygdJDBzCDrHiMdat\nR7h8unsFvTyssBAQJgfw1nic9TshuWYvLhSNQBtk1UMV47zolo0j9SCDEh7T\nV1L0OKg73QgHj5hV9606jnjJPKXm+UovpnHcVrk17MZwS4zlp7yDfMnIWV5r\npLCoatvIrbXcOM6J5E3k9WT9vCdyoHg8XBKZZtK0GXCn52RkyxsAIdEz2qrb\nsBhRiT+3PZgjEs41MHBgZCGWST5VES1spYpKwtAV9HSEfHaClw2VrligrjiR\n6Byow3VlVQO4MYOuxvfRBc9sRFM+FUZFfUURqOo8avHUdbXnAni2YD+CSqaI\nU4B+GSUqjXoq6uoQEVEJyy9yNonTB73MYuwC2YVtqnBsDXLA6j0ngK2jBqyv\nK+VRgFX5KHMs9f8NV873+Dkwas7f8CZy5coD2KCY6aLDa76mDIVkoO8ajGf/\nM2Zb/WjcV+VqoRwtmx5pf1xuc7X3LFtIv7zSelOY8k0tAgqT8bM9APORtpqe\n7bY337LlQQRfF0Ii4mHCWCeJiT790ITdbN3E7RCRFNfMhoxN0N2jBu+Knd4B\nOCWkH4V+v9nk9znIlm9yWwqJCLURZwm+3CQWmafULv3cFA6YSAwWKive8cMg\n3r/hNFnNc8So4o04ERcXJPBd0gaaFoi88QEDPJpii3U73BIEDbZxPMhxR8yu\nmrHV\r\n=AkVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/density":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/touch-target":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.cad489689.0_1619110168255_0.5237154414047436","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/radio","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9566bbdc4699c903ef764bfa8f218552f04dfc42","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d928692b5.0.tgz","fileCount":42,"integrity":"sha512-yWK2QroBkpgOBcceHGo/xxjU0vey6C7Maht0Hi74P4kKasx2Zqc7xx87n+FmrFw0vCmaVryMJKWSZDLFAXVBYA==","signatures":[{"sig":"MEUCIGZ2YbBF0aF3y4kX7KjnISbM+n7PF6m2rNMwQ9MrGCmBAiEAvRRaWmNgBUbJ1R7Z32XQEdQl3Q0PZ5m0/WTfMNar+ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUTCRA9TVsSAnZWagAABxgP/ifhFLhXAPEkze0OzMkn\nU/FeqBF8r2RYG6Gk1YykpixCFT+pNKVlnWEqTMQucTr5Uujh3YxWdTj3NQMg\nkNcC6cionJT1iTGQvR6xKCDAjm0FlrC2hl0gMCM3amWXa+lqpiAjDwObbZ1N\nzi9q0vpzAIf1e5re8n4U98Vod7BlmRxk5JJtg9M91wmiycfkmyKPpdauvFJt\nPvGwvo9iCKNPyu4MCHReOCc4pN7gNqm2TddmPPOWXiXmSmfNarFji7Z4QRXP\nGuU6crLBD6eevz24JVN8szgOuKMa4yu10nzBaSn/HTyo+LjyBfQAdFVrOIhM\ntc+eWHEYUp7GDl9s57U/rfJY+qEcbQKVoa60Cchh8bgGtV5Fuz4vT8HbrncJ\n9jpPIm0quaBvUTBXZolcC2bDplJMLkPlWR6ncXMRlIMf4MCA9TzGQf2Dz3bF\nvO2TJCDsFbFhbwhmdFOBBFmvFJVBlqlb3C3yA4tzCE6eYgapjVJCdjsbN1tv\nyHzMBzhkKd9Ut85mh79XLMiTL5eKcxNeZm+QnfyVjuiyAlxqlWlyiu8R+Sjk\nKM/pW9/PI/DjFVspBNMtv3t8tT5gJRa2wIWhcMrwNDFfNCq+sMDwswH3/sop\nWLyGEnt/t4WS063K04GMb32Cv563A7Jo+swEgYREVy/vJvbagAWCKpQOzCgL\nPt/w\r\n=bmSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/density":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/touch-target":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d928692b5.0_1619199251095_0.18694079838021938","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/radio","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714d23daa928aaf9df674b6bd5843a3fc5cc836b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8f68de8f3.0.tgz","fileCount":42,"integrity":"sha512-6S9ChNDL1526xK3e5OyU3TrsLJ3Y9VY0cayVKOR7TorjiIQYuVYy1YiSnu+69sZnWQ9j9Mz6Imw+2oESBrRX0w==","signatures":[{"sig":"MEQCIC4nlXa5DCwWLdVjomYQUfR9q3Z0Q6PgMYL59fVfWeWPAiAJMFh1HFVZck5mVzze+QIrnb3vJL6A8fSKNkHxE20lLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4nCRA9TVsSAnZWagAAH1YP/0BsohU3ykaSLn8+tV5i\n1l3IG7sXEYTh86b/Evj7wwR2xTTRNB2KFJPTEiFtRB4+7b3JVGmOW3rUdUCZ\nh9a5OiZK/qVZ9UCT03YAV9K8MRtA6Pk8pAJtBtbl6ewgfE3qLeagGe0WUVhv\nmwxdiDfHbKFg9Bv2hNAuEIhQY+g74TQ0HwJkxKLRP7BZkvLItyTokgmuFhbO\n+g9JsRsE0OFG2WK74Ns5jN0ylBrpmjuggd66FF/RatixxcsJKNiYpR60Yqpi\n2ajukNgepddlaqnyjU4AIkPYXCuGeanSmBq9dUqyvYP0100FBtyoeEJJXRjh\nLJ9ShIjUcPbRzYvexcy/QRoQQsm9yefAxJsOawDB19QZeoUxWAk8wLi2HJmq\n+ay5Zvd//xHM2DgS09QyFuIo1QxCb0VqWeousYheYjo2GwP8SfhtvysavbIT\n1lmED0ija8BQDlBaubNXpEUo8v0XB2GZlXmoekfFFt//XUO/dGwsd42u9sRr\nZIvJr8uV13dl8Rpu8EcExbXHCW1XuBUhd2Hv1K5FxfXo2lSDT10rtigp/we3\nLrPkzllNyOJj4/f2Ai2pTorF81v18Oi5CUbLuZJg/cQ8621GbC/yqBiiJ5AB\nwpWSN4Eb1qGtLBmkrAVqdKuRjQlGYlF8aAvV9SV6uXHucY9rzbx8M8c8OvZO\n53Z5\r\n=+oPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/density":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/touch-target":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8f68de8f3.0_1619201574811_0.13821069756278193","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/radio","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e48530cdf94df3c136587f06a4b1465c2ad0cd8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.05753cf77.0.tgz","fileCount":42,"integrity":"sha512-tw+L+1jgcwF0ENTJoISq+4EMycZHCq7EdvKdULaPY7wDXzXnDoBYR224ZM4MTpYeoNbeWzbOV+UWy8No9dSNVw==","signatures":[{"sig":"MEYCIQD5aF5KC7HVg456oG70V41RQIx11sVAnIYW9kQKtG+ggAIhAO8M2h+C9W/AGpRdGgbMNftUojCnolbtn5L9sDkx+FHl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1t9CRA9TVsSAnZWagAAWxAP/3oG81VN3RtO/klxAgwz\n3gIn39tH0jcv8FACaavl+ktve7gPnbXfNZYAkTxcbvrBWFuJgywLj1bNgywM\nOLJpzl45zFT/FU4AIGx2GB2ipxUrH/2tLZ/Y2+FBXerSQeMFMBGhgT7U3G9f\nTWgy/mSBa64wMD9oafscQHo/QCIM0DbbAkLhgm5UT7T5UHRXjbV2J/Py3vNW\nnKEiZG9jRUW/lqz2QBTib+Z4KH6YdhyiCK7glsYUNeDKSpNx6b7QHMaKqDfr\nkmyzO6yPm8xZ0QWHuXd8IEQc8gZW9nvdM4KnsNVpjiyPBGbbz+VrOG+pk1K/\n4wPSFASwvolxwEJQTGpbU5zE1FF4nMD25nZ0TMg5PFQO8d+b5YTPeZYzV1fd\nlRb/49UdYIk1n1WW73xqUlHsS03t85UJkVuX9E9TDcdUq0sG25MxX49f3Gcn\nsLvSbwgtLERgcZjURGWRAnbzRQaIn9dZ6+uOC81U57OX0rKnP82qTwg4KwVw\nJM70xNMy4WuzHZ9xJMgiDdl2aYk8rbWjhiQ1zeUKmKrql6c7t93TNvTYkgvV\nma2dDswJoG5FFPGvpi/YWaAgvhi3fiXXBhwd0w6a58urs24WANwgqduOa/y6\nw5o5WUDvjT2ul8Sp0viJHDgeDU3oOYdJOnu+XkTHEkJvkbEv7TH1sPDoTwTa\nJBAn\r\n=f9ES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/density":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/touch-target":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.05753cf77.0_1619221372638_0.8390498259453392","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/radio","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4f52943865cd9476785fd04ef5f0c708071f282","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ef43e6d96.0.tgz","fileCount":42,"integrity":"sha512-8emC9OHxnN6JuT5X9p4upivoxkyLiSb0lJ4MkQ0f58fqgplYdpMWy7RJhBfoJ0JjuWntFlDM3nZm8tuD6Ma+Fg==","signatures":[{"sig":"MEQCIHm0KqoI3vZJ3Ex5+WS++p5ST8gAbU0h1sAV7feJKqUcAiBJ+ia/8gpCumhv9zaKdGVbbd1hw04fHnv8mBuzpE7GFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1z3CRA9TVsSAnZWagAAVAsP/03KSqB8YGCzzfxWbEgm\nP8X1IsJwt6diORNcJUQpGifsKF2csOPbTrCqk5CC+jyCVBcGRzi8WTtbqLIr\nWTY8K1+j/MDsc1VOlDI5Kj7NmlxNEDPMx3fJLYXbtc9hvbFVVWw/9+XaF8wu\n6R/2hKcpS7sGQK64A7vqwpbdZMQuWHf3uJXkWwZaHCPNZBq6ufvBHxiAEMpr\n4Q1Cdm4D7axNOudEwF+R7qNODQz/hl753YCP7iWH7npCarKXXtmXifxBjCYk\ncXFZ6gqLei/wsxrEycoZHxXQQUdwmCsiWzpluOB3ho0A3mkV8J3vUMxI31kB\nISpIrfKwtQBvoACYbnuw41CJ04bpLlZCjXPrmKRfF+slGXDKX6dMwvONCTp+\nJjkqbIJCalriqbvG8Mz97Zd6k091oTm3RyhDPxvlS29DZXXKKu4phAIP6k1M\nCVy0GkveVO71vl7X7cd+K/zI8jmSuOZjgj8H0w5jaMpA/AAkWmq9cWLRSWo1\nzx1JL1MPl7uFfoUo2FljDcowagy3ejadNANUgKDxZr7LjmmJXvVH7bvVfeg6\ng9NklV/PkJZruJGq95mYR+PGQj+CsqH9ICEcxq7+Gm15gzHd5QwTnc2wPKGN\n9CHJwXqoBZRE+xi9SP2RphTKmmXabTI5fh4c6UVNto8SPH+hSLUzHzZn+aCq\nzpAH\r\n=auwj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/density":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/touch-target":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ef43e6d96.0_1619221750929_0.10175996478223892","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/radio","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda3ee55e0f901bcd0c5b9af46bf3cbe52fc59ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.197f64fa2.0.tgz","fileCount":42,"integrity":"sha512-ZPD8oMsZWqIFVmBUvwWPqR3XQq62L8sLDU4frGIDe6+yY0vBPGISJac+3ribN8PMdQ/UNojLuV4q3WsHyB4tFQ==","signatures":[{"sig":"MEYCIQC67ogWDpTts5HdTMhmsTG90Ww+wOPKv23WCxqf1wpCewIhAPoQM0dQ/R6OlDt0bkYUG2gmzbkcUIaoS968CF47sxoy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPGCRA9TVsSAnZWagAA3MIP/1FkrOpYI8BgZCNrLA1Z\n0GpvI8x2cXUMqQfUeBl038rT3NbPprpiJIEHrFRd4q4GKhgcUl+krF3KKvq7\n3eYLHMNyaB+60NjeuKE7xthyCWRhYg5WgNLmhlWqZLKGFxkQFlGw7ErbyIuJ\nRqqI5I3K/ypoBk0L2/CU3VbHw7tDQmvQeI9BB7V1ua866tQGdRKdmw8/Pzfc\ngFLb9i3HZJ9g2k+Q9BUQ3Im2429fYJphFZkTMP+8574ssFuZMpmsjnnd3+Y4\naGFuPtATM9uD22OBKvRW4cq5USNHdgY7RZPBvnb6CICLg/LmXMltscAeqP25\n/dv0pWiYOksfLh9LPmC/2HqEXDSLrpEBnamIFfDgQjRR3PBChK7/XkTvTLMs\nQlJgUh+Gaebh/dA47TDdFiLFi34h/MruKvgzLrUGLBWymd1TjNECO1siGb5J\niPz/qm+jcbOJtTuNFV1lFzxsRJLOfx5GzJ7o4WE/NfmcJ6gOS39Qm2UE/ZQs\nM+g28jt6Kl9KO6e3rQkbTERQWwfo14CAzKPmAXUwqe/aFC7MsD+P2V3oMf9K\nnY9uP3EkZPOrb/zYJo8n8Gm7Ci2rXjTkuqljx6OOZFhGlKJlOqUKfDpaz2p2\nQd4ecjtXgblRZEI+eMEvXjsspqoGDrTpHSglO0Pm7P8a09pZE07puS/EOKzi\nX/kH\r\n=5itR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/density":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/touch-target":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.197f64fa2.0_1619456965962_0.5283688142062624","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/radio","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa5f3ae2a4c904f2110f4860d6a8e671c8ed109a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":42,"integrity":"sha512-7eH/kOUufu5HHuTo0RMHsgFTlsovJSQAOiEqfc3MyH143syRSlpW6tDkV8JOwOC+LwJybgJ6H3Sb8E/ffxidDw==","signatures":[{"sig":"MEUCIC9D0tjO3Up1HRBvQNUSyprEQ6pXZDlpt0ofkTaxIoD9AiEAot0ehuocdWZyp2QT9AcaC3SwW9kVG+l4NABuQ8RKp38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2aoCRA9TVsSAnZWagAA8uYP/2I9M3lduyu+0ZRlwgSh\n9Q8Og6nLBtQ9AI07FqGfu1Xt/tKCng+1/jVuh5Rqzkbc32hj+kKEwWeRlEjJ\nWK0+nMWPBwFthMlugkTv7n9B65PY1FpK4WcY4uD+VVwxIn/nK6X4neG8TgZO\nhhaLw/8DMyXxcaP4+lzCQ34jh8he/X/g7oyGLJc7ytbUfg/DIv16ThcjIT2I\nzn+PfcuT8hhpn9jIisavgUZGHQ0updvaaNJsJRMgVZFOBzQK1fjXv7YdNC5P\nImgQl97WllrJP6fjkvsw8HAK71Bc/Fp+AsdAQKIlrlU5T/ZyjVS/R6k6DC2i\npKnVxKQdAJzKFgYuNV9Q0ZuZcbc8/VR/1lZpHRb3R48mGPhJUkvtBeTCg/Oq\njruElY4FUxb57mADvUGXMyzRhL+gooGKDbx+yYbO6Sy1wTrvzpYoTU6IYA2W\n3iawX5UZdKYEJUc53u7JIV4ZOHfL/hSThbUxMx80YEL9Q1WDBT12j8GTc439\nprfcoypuOvV/JIHa67kzlS7fSHY0NDLtdswQ18fOGD86swj/bCCvY3a0Yot1\nrp5iZOVb2pn5TsDmFihK67kFa4CJZmNesnCH1KsrMFi9dZ30UWWHIQGiX4Cm\nY7FT5KxjNzWNDE3tscFDtKkXb1kM1HHs2n1a1gg3fTflwSDoLQdCVLAk4KCU\nruEs\r\n=1FWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/density":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/touch-target":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.55ad2d7d8.0_1619486376090_0.2460388212846074","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/radio","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd07b54004406b9f374d9e079f911552bb4aea6d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ec4ac5234.0.tgz","fileCount":42,"integrity":"sha512-YX5Lg0FIPtxa4Pu68GfXJBWtyrE+pbwUSusWcH0GPT/Y4hUnli5twcsTIzAqhJmx8fyefU/BsgBkrhiaXn+pJw==","signatures":[{"sig":"MEQCIDYV5hYCiJjSHqbkS34Jb/oJF2d0Jn/vd7fGGo0OG9FBAiBcivJgHnQQXSofUP9Xz2S5TLVRE9C1DKOVBjlR7Rvx+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QeCRA9TVsSAnZWagAAGP8P/A7qSHVd0WPzULcQU4a1\ncMvSLN5OxvoUG8xuB260cFQcFs2ByIrZmgbp9LN+tqNTxwWFTYDeKJMqL2lM\nGzaObK+BgCnMYWhN6OPRjS/mSxqIS9xLFUS45dTItZ/wYmqGX0lmy8Z+5Ng3\nfz+v96Lb9NJDX1M3/qSE5kcyWnI4qoOi2QDfhWgz9pLZTZKglnc/VK/XhOFb\nL1J64KA0+3N876PNlSppnCbnmFdD8DsRbz3wN2+N4nWYbzmZWiitOrJ3pP4V\nqOwQ9eBC+sj42e9v1/e2L7xyGbcAsYbAVNKYTXs7qKfyZXbI6Jn47d/3fsyP\n3wI12Li41eVI7Y2VWvPvBgYoDg//Exe4AbwnZKf+oPIzmgpf6/k+/p/QqmFG\nyIchXvitQh9yrRozdWI2X9yUe9Bu9a8AtO0O4A/aSb8St4q9pvfr45JY/1gX\n4CvQfSFR9M43FCWWb2xJXae0eF87alqA30lFwKy7Q6SelNysoocuO/sn4H4M\n0bxiPOhChUF0s79a633ZlVQ+fNRVWMmTEmQnErPSsoEFKu1em2ga/NEPrQQG\n1l1nVbo4uXh2KuHCnz5GdR2i61zHJpKHVa45Dg7t2lOwY9NM1+bC3uxb8sOL\nYISyLyZWWZUiU0c/kxge/Yf8KGaW3DxjgqlslJI/f0zMrHuBQlj5hXYZp5Yh\nPveK\r\n=72dq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/density":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/touch-target":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ec4ac5234.0_1619510301792_0.7139891767467046","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/radio","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37c9c06a137f19af80f26b23a5481b436ddb09a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b0579acdb.0.tgz","fileCount":42,"integrity":"sha512-7ZepuyLmr4sdcrX7/X1Nh9n9RnQ0HytnFbApl0DezFH2lqsKs43VkxsB2ngQ/jTFNnjerxa6grQ24/Cx4ttPgw==","signatures":[{"sig":"MEQCIGQIbW2n+cQxm9hDg5JooEe3Q06EcpImwzb+3I3P/O5WAiBI7rsKbJ/qRULNqhGbvuNXaLbINzsIYeSyFCipxpl0ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8z0CRA9TVsSAnZWagAAg0wP/jqNrFnH3kfYSwjnhK/N\nu+eN6DaAlO1U483rGm8QKT8nWipcKvbXeP094HgTqk9tartD/r3UvDLpwX6E\nBZKi4NryIFBWiaNg7sZpyyiFGNKTSpE0iAFFdKA7CXDU3MeYasFvRt8SL16y\nJ/p3EiTgNDKUphyzWgvfSQdcMzschozVo1ovDU6SD+Xg5jOY3adFgZy6Zmri\ntqFnIJmpls8DU6QS1hzHuYa6PhyGnfHF7gRSSVDiWDHDPmq5cUrjzAHjE5Zp\nNM4JXK/ZE4YTL5eZTPX+GawhUJ2+ayPBce5x3l3XMRhn+WVowMD3j89eiYPn\nv1vKiJE/NRSXH3mSnTYHSqurxpJHsxJh/M/bvJei57jdCh2wCcrgHVSFRmyA\nqOABfJn4GWWF6o5Dq1FjM3I5co9Wm5pebZ4nGwv24eCrM7VtcYGu1P6oYaj1\nlmuVQH8R70uIadorp3+VcDH0LTWPMcHejI28KiL+cf6p3baDT3rexrkzc1Ir\n6glwpw0eYbUyPhnEYo/mXhm16590e3TBtNyZrS8R5S4CZ1KGzT/G23LuuSg4\nzkZvb5UBAgLdX++ZuYr4xAbPsaKP4pDSXhZy5N2PI+7qvk2AjG+ss0g41gUu\nmvix3cVoz97sPXrM0oMUWVo5bhRtJtGo1nPUxxpnTuSnSpVCckiU53XXeEJV\n5cU/\r\n=p71d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/density":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/touch-target":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b0579acdb.0_1619512563686_0.5415804263568265","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/radio","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"779459cbac4e2011219c1a5d397d57bd430610f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":42,"integrity":"sha512-OXk3v3tk93pIewytnkLWhRoBlpTkYUfZmp/Nr9jjV6fxykht8Lb0WZ9dmEhiyOt6Vr1meu1kZdEYVx9wiaB+HA==","signatures":[{"sig":"MEQCIFq5TLibGHHS209OOS2a5AHcmIBkaep9jY78+mQUKGFkAiA6h7YcTCYP30j63ttRNucAkoqWsY4sVBWlPr2LuVQlFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHq4CRA9TVsSAnZWagAArOMQAIUgwvk/JZKx2eG3xhCV\nW3lIovwOFnG5qLChWSriU6ZF1xNMfgJuz1oEET8oAa+myFkYnWKyFUEo0oBg\npY5AxGbtOdm7cdDuRjtigbIBM6Z/EUCwCZ02BF3sILbY0m/76fZurwgSKkKo\n9T1jOTt6vjS165ImoxK0MDGd3U2Mdf/xqxXsAks2RMSvovu8Os0ZbZnyx2v0\nZ2QYbFJ7yIixRCN865O2/O4oFyLNl0KCsO1gh0Aiizum+fwg94ThMsMmnpND\n3Eweby/Qd4bqaJHGuh7vESHTkWUvhZE0OOBfTnYVYCK5wv9D+tWniCBa3ly6\nOMTllI5mhp3xZAed9lI0ZARNnBoX8pi/iCaGl6AX+kisWbw9ZYLA0eqQBLUG\nRl0IdseX42QHu/rsJrM9ptp/HsOHttWlusN0O8NQicL6CR/XQjplbrFOFR8I\nSHzyHHVe6e4/gpQ/Qk/hu9//QJX4Z0Ax50ZniFmBFBFalJ+86V3HA/x6LVb/\nMMjSzozuYx3Ns1qeq7739eo52I4vK+p4LZCfzp5G1L0CWCdFCNG+eYHRYHNM\nYu0BTRv4VrF9nHHH6pVaU+a2d27rtmRql/bnxpspxai3QcNjKImAfcS3KcDE\n9mD09kuyVyJYwwKX0c0fl7TUaM9h5JcpFVvJHjr2c9zQUJATdtm7L972pz4+\nDGyF\r\n=lgDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/density":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/touch-target":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.81e2d4ff3.0_1619557048449_0.43503945204167893","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/radio","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d4f0c0fd4ec63ba5bc6f2fbbeb2005301f3188","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c8edee52c.0.tgz","fileCount":42,"integrity":"sha512-QOS9UuNXJvmtUDnJCgcKjsKa5CYnnKyvhvEwshXJzY6AgWEKc/cwcGdAWrUZapDM3OfNNlLC9DFeKS7xDyrHdw==","signatures":[{"sig":"MEQCIFQgAlB9L+vpx5T9Itdc4dc1+gRebEs+hSGwhSdv4uGiAiACs2RWI+E1l7yHUr0sPNWIMGK4/dRaadCbIvqxOzsx+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYPCRA9TVsSAnZWagAAF9wP/R0kf04YgfendP28+mWo\nKSzEKX2g46EIxLCqg29SFBaqIHUr5IS5/builAljN0+pQ4gUfH/AMU6WNdGe\ntaSt8YYnrAtiR7FYlpXd82d4VDX7otpKi7BGCLp2NqQ4VrgHLfDGHEGiDjrj\nMR5ZIhGsdVmYGWEssQRirz0EndU8hBMEA1LenO2tiharyNeRN6nP5doR+x9N\nTB7+wQWnZZHWMRwK/N335qCc9asQ8igAH80OMyh545rk0i7qusf5eyM8dp2Q\nhgsZnA1VIxm6GCf4kbqpfTf8Vvv2QkpBdWV/NvY1NB3ig7v0nn4821m6PWvG\n0WCfTimx2jsMCSGGZixBtAOF4+zPDKEW89mB7MhzuuH6+PENbteuT8vRSKiy\nyVVWofgNbm9Ng7abtyLf/CcWh/bSPnhnPtoM2f4HiLx5FTi+pjnZCyX9e/ht\nubGJht5W7Y+ASzEtCKXU0vpqycW8qc7pqHfsEpztTQ/0+WpJ98+TMqzGuDBi\nM3diOa//MkWGZL2aSHwU96yB+OiHOI43ItBL77y5gpYjXtmMD5DSkhI2PrzB\n4YnNGLz5aHgbTCSB39kfwMQKRa1ZCYHXxcjKwiIFsd8BJ0Ctlhhg6BPkwPXD\nLpnEqTjp18Nt7CT/axyOHaPb0Xi421vYP0Qxmd9WFtl7wmPeqqCunet3ieZ+\njvRu\r\n=vRpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/density":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/touch-target":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c8edee52c.0_1619559950537_0.8076178283078197","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/radio","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e559aa5ed47502dd873ab7623a5ec969b2f8fcb3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f5b6110d6.0.tgz","fileCount":42,"integrity":"sha512-cXi32+/0rUHZhiwuuPdFaZhjTZBTUW/a4iP/27ohZKP6LQLKSuZ9N3r93nHz/7TqBgAu54Z+mjfSeJbsmwjVjA==","signatures":[{"sig":"MEYCIQCDoOJxyyyykyt28sjs6wIILq2E6GUgovGja3nVerdEQAIhAJAaAF8dooZL4a+pfAnEhnYlJcOo6W5eCRJjlF64AGGC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIshCRA9TVsSAnZWagAA2ucQAIDWpDX1Fop7LJQOFFYE\nNMaNM9K6AH28tfMkOpgFiqGLEk+OHINpw3fkqPZB9LTLG43s4AONWxzfHMWb\n4BTG6TVs7nJwV+GKwyf0LzoE+y5PPZnDwj1jGvTcC3/7GtjFYBj86BV2OQw2\n9HADl+lsqj8cbpCloxoSC/C3VKzmbSOJxm9ICg6Q9W4froWx4AIVvqWjALcb\nyHVzZ+BXx7XWJ2EKjrTA+CFwP8jlXy/rXibltFpQNLUaX1Ew4a4hZEC7lAxB\nJ5PanN3xkDn1uf87bjngqz4ot8RpaG06/f0lyEdcvyoIkTwgIBcdTsLmwGO5\n+6CPasR4EvsGvI4a1ms8rKDrR0Ha3WdooWU8yxYlNxNNkAKqIq3OjuqYTGs3\nFkm0eDqUflMPfoYtXAsPbsaFKNTA49x3o8NXWe30sp2DSstY6+8liMTWpqrF\nf+KpXuQB5SgHGtCNyRA2tXRDEk3YmHR380Jv/toJ8tniTZ+NNvCkYY4upckA\ney/BrbpM9x5GvwYHqyQIc0qzK2wY4fIbAdKyMVhPEHK+YWjygrOTQDJcucm2\nPgfmutUqzmvj7o1nXqHpLMjCIb97B5vMDayCubhL3ZgFeZ4NXA8cAKyKxwnb\n9mTgtlxqfcq72xeaD98MPn9qyY4qPRENRiqOOaQrRPoXYR2xoIDsucbjzz5G\n0M0M\r\n=cfQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/density":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/touch-target":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f5b6110d6.0_1619561249516_0.46887870660467423","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/radio","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e3dd7c0b2dc23009dd9622a90137394c30eae8c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.cee9b9e22.0.tgz","fileCount":42,"integrity":"sha512-HFwqPROxDqkzpiectCeT6jQzYNlsCtW+ELm6ZYsljdOzz5H44yuVJgS+0uGpl0XlVXSz+fS6H1GKONB9HGR5QA==","signatures":[{"sig":"MEUCIQDOF/3oBvzdxsbWZroOPSmS+ShxI9avNSvucU8WoQ+5sQIgQQCTIgTDA8WXjEgaBI1bMv22My9nG9TI7YnsBMZ6qHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKiCCRA9TVsSAnZWagAAsWAP/A2yfDsBKFoKwIgNtHGo\nx1BRhigHLVJE2ouVNSqGi/sdwAffJ2JEpDDMccsNX56sPH30qUZ8Wuu5As5x\nYog1VrYZ4p7J+5Z60GF7L5yZp35w92YiiRDWEqePHQima/jZ+7s33Rb6rlhQ\ndc8NXV+Eia2wOXUMRpGR+ldr/AriPO7JAlDR1Idz8vNHxNWhS+Ce/0rMcdDx\ne44BzC1zCuyjBgUGCnfve1w1jWGON2SetGIGyLCa1n/Iw9ZXPxDxqrU9t6uW\nFHUPQI1RMX1XQ2v9mm3HMNuY1Mg4Qocnih3zaLR7EFjLaCEvP/UYWhfx2Oci\nAKrdIWxDCVawFJkaDsB1lo8mlA6zQ/kihFHFsIEG3nLGpe2hdfFq8gn0T+uD\noOW21TycTdIjK74LRh2VCv+27WjF2Md5zW9DBTwym/3H4EQRRCbcED2GapoU\nGy3jpMO11XdGTR+eE0Aghs2lC2kjPIZVj/LTUgMxqoJuimSkZe2+Nfb3GAmd\nKIRcXtDsjOhTj5ZjUiKCM0K2GZVPiG0gPHHTgh8WygiIvtqi7GXw+d4CC8ZD\nWCDKWUZBw8nBt/f3fBLms3kM5ARw0OIdK2EV6kMnIYZ1k7UekZLYjH9KqwQj\nBG2t9wDc1Dd2WFmSkK9xTp+nN1BcA0O5b/L0aiNhfzWN0WeNgFvWldInUJY1\ng0jn\r\n=jqvd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/density":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/touch-target":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.cee9b9e22.0_1619568770073_0.7473468551363638","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/radio","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02208e655ea88b63f061b2038d89ad67fb05ea54","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.96e83fca7.0.tgz","fileCount":42,"integrity":"sha512-1JXZQisQpQ9btaOAXrihZLVBc6FU7wXDq7sbAq58/ClqaK5UMGhsJHop2Fwl/iB6UZargO8AW0T4OBuxVgekgw==","signatures":[{"sig":"MEYCIQCnxyRE/hzP0xhrH7pOTO9Hw6g9WWvFNKd7SVQvVbiuqQIhAIOZpVD95yVyxo1xsgxGqXo6YgKW3XqZE7p84zruuuBP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzMCRA9TVsSAnZWagAA4/IP/icfsDe+w6R5xG5st3lR\nh5VdRf9uYCqUYsPW67n5CAXNieRQLeRdKOODjfJ/38MbVebnnhDbj6asUiDQ\nDwp+zknLOLc0qaXYYxuwqdIvtGNbV4Vc8pGiiQNP+ZNuHy2ah2GAKypuXJpD\n88uRuCyAtSvzx4HrSO4oqlCMmtwKJG3aAs3558JoLD8IRJC77o77QtKM7eQe\n7LuVz1s32LqFFGrXD6cv+yFtECQnv571RFllkgbor7CX+vAWGortN1y8v/N9\n3r57t3p68YLt7Y31BTn/RVbiguZpYIZzSIr/ple2LjuGKzKXpxjnvX/ldC38\ni8noGT+dFafkzwhTZ15edPAwJMtdNKrhn9CTVxFbPne/ufU+ypZ85ZDTIUBX\nSFX81KwKryYfh8pE3ppTnKxPXK9xjJwU0MFzOZeNw/LWfgYe7FYP0EYZa5/m\n0EhfsdEhFoq2xUSHDbRcBZpqGN7/y515JUMRx4ncE+qPJrHNodvomqURUVto\n9O5l95HceLzOJ/Tf/eGDt0pEDDgSmSCRv5GEJPZeCs28vyyewRndvQ92dolH\nZl83HSNcI2F68rOZbnO4rFPxHk99O/2dhgxHUv3ei8DSXfhGDl9smEx38g2R\nFUInEMN71Vxj76DPPBniTTsAKhjHjsmwdvRcDDBvWL0swwJAVJCsyrKfZTNc\nBB6n\r\n=QEn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/density":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/touch-target":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.96e83fca7.0_1619578059340_0.1647216128488791","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/radio","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0095d8f8d52895b59fb1aab278d3e981dd44dbd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4c497bd19.0.tgz","fileCount":42,"integrity":"sha512-K4RNq/58YKHB82x6IDnONfJ+V2T5BHNLkuPD+xVUQuVt2pnHSeVi/pewYVRNLD+jnstpPAOnTvhKO24rkLLOUQ==","signatures":[{"sig":"MEYCIQDhs0dhW90L2s6yhndc61CEfMa7KjiUIIiX+I7fsUumSwIhANDgRJh+ybcEp0mIVodK8RudS65j7uH1ZcnEdI55o/Af","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEQCRA9TVsSAnZWagAAhawP/2YPc4NTFGDKQAPf30Jf\nLJTYW2ySFykskXZ8ZPTpn+sPpzge5DvTGyQOD421eadeEvNMF6Le3d6zpmvk\n+koR3fBDnZoiPJRfsBX8cKFTSaWkbJ0RWKbV+vpbSon0PHtbZ7/snlLjrm+J\nfz2KnFu4K2+brbx0gNhiGXpLIt/bUvITa2w4DfbFBKO/+x594dpQP9OVq8j8\nKTXYYR+5ScqEbPATv9hR7VVLLQ1yjteIFBrt4CQvdSk/i8gxHv6ZI211sIvJ\nr0HCxnIqvmpR3lyCHIyDqFNbHzoLxO1suqk/yZX24QepRNB5KfUBw8Xr+yie\nXvGglF12ywGz8KNb5yL1dWyynmtSxSZ32QvdXAom4vPGVBF2w059kP9PfUKp\nwQHKXuCPtQAnNNnIgjBgMBvOtn9irtcaEHhm298Z3bcoxYcnoAWLa4ozc9qp\nI3uR8Ga/UEIOOtq87eVZW5gSI4hhvUxmfTDkMhVRa3AIdv7bU26TICVQm9EI\nG2z3d6aBTd0A16lBHHEGuP0wupaoVwXDeO0itC+cJLGAXjdIfLBgD4l+g+vh\nQFKFX2m2MDsjvl/atmRQp41Zqm9kg077n5DFY7Nl4s2Z2qmt3tDsfQV4EJkF\n3CVhnII95zMZHdJlMS8As+n+7E8G/PZe5Tin7JV4bY/RtITOn5Nb+NE0zkf0\n7xj3\r\n=sdVd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/density":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/touch-target":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4c497bd19.0_1619632399538_0.26465416672117636","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/radio","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a28ed11e86910f3d36981b38ad34d2a575470865","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.105b15b96.0.tgz","fileCount":42,"integrity":"sha512-1aA1TwCueYWKm/lEu6pkZwsEsa5zvxVaxEW0lK/MlAWGWD4MIIia1s1EbBJrf1z0J0P7iAWRltMyqHHkpE9Lzg==","signatures":[{"sig":"MEQCIF7isht5e8UaWiWc8J2fqMHQYbv+JkizZQkRBzUvDsm0AiAPUDi/qe4DxV3aETAxrQCjdWa7e9jeBBHYWl2K+2LIUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidc+CRA9TVsSAnZWagAAD20P/jb8WozpsxyK49cqQ0Ms\nyj7O8pCtqHqBMnTf9tDxt48E/pYGo3BD+lFdDDW4B5YmmozfhVXvfsLq9zys\nnhJnK9mr4q8OqmDzJfW0aSPYs22wzRAGreEbqIfpkbhmU7wXuIRwHCOCwZ42\n/aYHFU0OGeDlVH0X5dfYTxqsVfmx70myCjd+rPAW4ChhMy5iZ4uLBm/lejdz\nrbq6b5hLROsxInkf3Qn8zwtrlMlcLf2q7P7bNOn0ZBuKuF7UizTaIBSTX+aI\n+tZ7ILNMUGs+x+z/xMh2zURsVZ1LLooatcftaXFGTDQW4guEIxQwHcCKNQfk\nQJ0R+GKBSIJxxsuH6AwUpt2fOzAbhNnWrW4WFaq9Eq3E2+Y8SIOjl/8r10IX\nGeTN/9yVNmgdb/iiBisBgbMQkSmXtCwgP+iMce7H/ozNmhihRjsYlednyTYH\nZKUSFCYD2SByEghWUuvqk1beMVRnc/eNgTLblBbQug9hWhKeSfPLN9TcV5la\ngapXlFe1qqDsjn8PvcJywhs85Q8MVm1AAphy4dmKDzaEJ6vBfB8XOR92+Hco\n7qCOb8FU+6uSqpovyG/D+CJyANx5TD753Ys8lw18a9epvqDHS4XNbcg68P8W\n+h+UaWamcccvWgatOMBLnbFieDh02oLUw4/ZucOteCN3qcMR4s9NGeXEKb4/\nDueo\r\n=hDrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/density":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/touch-target":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.105b15b96.0_1619646270377_0.4189551429908278","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/radio","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9772049c06da912ba910459cff4fa75c93738ce0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.6e20259e3.0.tgz","fileCount":42,"integrity":"sha512-TgXbm7wAB9sIA25ZIr1eaSDUMEIJ6tkm7vOZ6OKyobWl0AV5GtEzpzlCB5nkUpna9+0H7AdxXwvdzvglVkMeXQ==","signatures":[{"sig":"MEQCIHc6OTO8y8BCkRVBi/NUT+0aB1frsqEOl7Rx7Rd9LriaAiB5yZtMCVG41rGwgnMo945miH/Wo7zpqWx9mu/GnJSszg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhPCRA9TVsSAnZWagAAuwYP/1VrKGGVwRdxo7V3n7P4\nlReXuQqPe0vvW+dOiicNeI97jbEuaCrXgn54214xgh83ZhmhHK1866gBPVDC\nlyjuE3qY2XndEn8b4VDs7BompBoaH5Lz6TMz3Pm0POQqIUsBFUnnGsnV2IR7\ny9eZmuFGDkgMud03K6gMOKYarCvwwL8kKj8MofjnysEdS2TbAQl4RT14Cx4j\n/2TxEmn7OPEjmOrDwhpleUDxx5d94hoHEllJQdmUa3hUjvVnC4AlWTVPvV+M\nWw7AIwl2SYVlkPJ5U8ionFBp1V1u0TIs09sFlWnJDwV/LJzHaU7LaU7HHXsQ\nbq9sjgVvjge0XdXlPfKZqCdJmwd3aocwblsS+fDDdEJA8MpZJU5aiTpWs2o7\nVgjKOlZXEAxFnqzIy0NPssXJfNO7bGpZW/I0aoGzE8DsNP8KVqIqYKho09VY\n2DFbVPPdk8TZNTzum4b7X9A6fSKN/Ys9CTMmt+ujcSwnl16oVDBZtkKoDY5k\nolHe//FT0Bj+viOK7PG4wg/cEFFPqkYIZlY26021Kh5xGbP382QfAAddWJ3L\nCi6nG7cPuqOg+219zCnwdT0kKJBDNNQdAcwYBVi/ubFLKhbJpXO3jIOS2O3m\n2OWHWOPqAPXNQXOU4896SXwos2kekiyJghEF5/9y4UETdJEvoVI4egzPQMTq\n3cMV\r\n=xsba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/density":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/touch-target":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.6e20259e3.0_1619646543080_0.05586333457684578","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/radio","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81122c359ab4014c65db2d0d876095572169a19c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.0f79a5d74.0.tgz","fileCount":42,"integrity":"sha512-1fDTSK48SG8rTPppkzM7VSobPEDqaRgznVbS9n32iieVEnZdTTrHzKXLyIIjUBszFXryYRZ8W5cj2oXpW+1Jig==","signatures":[{"sig":"MEUCIQCXoNiDOZ2PsAvx1RqJx8S5jKcdxVvr7CXkbd8H5H707QIgBdC1VyAAIREqLMTAxPEhfuaNZOYf3+/8tZdL38gpecs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTqCRA9TVsSAnZWagAAxG0P/2OEaED0WsQUqicJ/l0C\nQK5WZcC4ny7N4q38HyXQf+lfVtagT2pVDgkTaW5SjNlADdOCIoDHxQbl1oaD\nmvuqsEDE7jiPpA3x/uYfPAItP5wqHOgF0IrlagGgMnmZpATUeMcXML4iQ7eE\nqnB6GwEBJ/maHGDL79Vs/olU5M8XrSmtVk44gO6W1s9/DvcN6hAs/gbgoOrU\nkHE/GmsKJr2Kcw2ND89IrbkJEf3mPuPQq4JXM60dJVjwhEtrs87veKClbTWL\n9sr+IgCC9OWQqFkuL+JtuCb0oXR1DK9zQsIeqrhhR+EuPchcuiyWcpCvwtbK\n3FSrE2uXhNRyrzcUQlKveYB7XFwEShTrNL4Z8S+LJE2/qm6IEk7cUEK9YH0j\niIue6Q6VUFy54j32TBJwlDg5QFpKBd/zRPmDXlit02nU9wSOczwwWfBCYPmE\nMQkfL9uU1srHKTt9HlW2+Q90R5hTbTDKRNX27At5s+gpEbVZV9KGk1XlnmZR\nBTP4+OgWg3CsPLuZdHwwyYgR6AvQnkmtkK+W9uIXrBUR0CHT8fbyeDhQ0ILJ\naBlRmMnXU7gbHDbrsjspINh8NWAeDivYSMWPK4nq9++MRhnnlmVfqb8/jMzR\n02asbun0DG5FL2rKQ9b0LBbHTijsFmxEnJBVBQSrJiuqWVOC4W7yZZU2gJHl\nuY6r\r\n=+D10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/density":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/touch-target":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.0f79a5d74.0_1619649770166_0.7865956878675069","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/radio","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7314c0b3eaf356c077eb3ba3a8e60d701619e985","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.84f3db9ed.0.tgz","fileCount":42,"integrity":"sha512-p5prV0drEfiX6DnLKJLr+n0q29RlBGP86Zsw+/Ql8Q1tHMhd0w5dhDktm9IiMNcD45UKl2qSU4h6c+5GgXeLUw==","signatures":[{"sig":"MEUCIQDACdVTXmqqgzeKeTGjFs4bFtHSpiwr7EMrHpJoK6WDdQIgRs3Cc/3HfY1e4loVwb0mkwoNzGu8f14/5ga0GKanbXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisADCRA9TVsSAnZWagAAtH4P/AlwUeOYhKgPk4HsaOUO\nfOi80L6nvmLcDTZqQFov6yLtDmYPHxjHMaxSSB2KdaldgWmr5mAojtyG1ee4\nrbhHnxKxgionhAmeuR3hBDQYxqd/UkONvjsx/MXI6dlV/EkI1QR5aleFfm6F\nswF076IPzaOzaRmdCy2cqMxc9exISERgiVzP9tKNkemcCYimqcmfyqKDflua\n4FSsV5Lx6+EdJWRtwSSpObhaw+zzRLLF/m7qXFsP1qilmP9uZ9PbF9cv6bDq\n1iHpJUAPredl01gqH9+ZkXHjRfjgmx+43e0W6B/m8SHOzBFr0kSCB6p0s1WW\nBa/eBu2Q77WimHBI5GZlyO5azfLtwTJnqZBw4VNKgEcjqPE/MjQ1zjDqJNx2\n4jr6nJ6KlD0fmJi18a+CjzLlNzFHpWfIoSom6IpWwKFamDC2jC3t5+SqYQ29\n9RrHXEI9zxSh8Tcb89rNa848YhCIfznQ+jQd3AKGvcreNnpi15XSnM3quDtj\nvrl/tN5XjfpSTJI1qy8jLyhco9RVWokuQd+R9WxqcVVloJnoatfM1R84O7rf\n+SKI50nqdkNHDXMUrgBBRm4/o8qgVZBlwh4NdnyDkCgVB8jb6sHdmZc4S1v8\nW5IOnF/Qi/Nxwv5YUOTxzN6t8roEy3ez3jSjKDNt48E5JocG7Bu7Ekl1SOx2\nImK4\r\n=n6vF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/density":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/touch-target":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.84f3db9ed.0_1619705859211_0.6291916247774552","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/radio","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c09cb66dfa01c56fb6efbd470c5c5a344fafbf66","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8fc29273c.0.tgz","fileCount":42,"integrity":"sha512-Kl4GpqF3DofwiEYs/NJP4bHSBvm03LL0I6I2KdeJPRfjprA7Ao/caEAdP5nJHf5/wzzvLilUfJJiQsYRISFZgw==","signatures":[{"sig":"MEUCIB77k+I1YkyTJ/wB+qi5LNfm4jG7dACv0UDGzka64b19AiEAkkFz+tRPol0H6yLG62Rt42qjTG0eDCBsHFj1SLVXZPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPQCRA9TVsSAnZWagAANFUQAJ/Tu8UEZwwN22AsDxA6\nidC2i480DrlQm6UYw2m8ITJm4tuuCucHkxkHyv97ywnNCE4JZhyyv2YM2EjH\nuXoDQL8OpRGDIhuk3EKzDzi04i5JyEYZY9a7oyZgzklurdLSsSiwZyA91UjX\nO7hkuV2qVBgelI5IvALCrBfcgoNSpNpQjopBwrrKBeNDIq0BakezR+EJm+6q\niqhCXwUb6OYFOjLtyI/bvCOb4LqIMB9mg+0SlrZBX9hehPNM2WM1ZJN9kw/O\niR79LUQuBdUa4XqDq3HrGUWODsUwhmsOKn+J5IE6gqLxMw4sm21VPaPs6/Gh\nGJB1ZV5T+hR+PGymjrQpnCXk4dHYdNIQDHA6s5SPJZpbnuxAiQ4WpoUTwVci\n0lxCjgUwSONpNhd6HSzaYepeJo1sIM+KUz4Wvjd+JSbhqYOHMECCsvyFJ1HZ\n6hX4wVyLf4VRYIv+UQnJ7nZ6HxjLBbduxIgRaMnj9EX4oTkaUgRJ5CLuD8Qo\nYEkgSN7EBclwdIj3FgG+U/m4BOzznieNKqiePMeRGfQLJxJR6YFaedp/+Wk9\n2vpjbDTvCpIayk4YbugOm9T/WRj2xO98OY1CYv3Q+qrakKhHVRYKIp9A9dYm\nqR4y+oBVJqX8rmZAnm2eDcpKxttX9XQkYyCXwCx6BwjjkPZ5GaZsLJejb0sB\nUwv9\r\n=5WOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/density":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/touch-target":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8fc29273c.0_1619731408517_0.053781702673183496","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/radio","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be715c784c69907fc1e8d13985a7e357bfedbdde","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c50d20bab.0.tgz","fileCount":42,"integrity":"sha512-jnlwhxavNxIMrAKrnCztQYW/U+eMAIZ1IxJONmrciSlbQaUFZFCntcBmu9Eco6uEesekwuXdhtXfrcybl1mezQ==","signatures":[{"sig":"MEYCIQDeqrDRwAyYv3IHSGCKgvCvaPMoQoUCtmzDhcyrBWS56gIhAKNBsu9Elx6jGDgBTK/N1xqHN2og+6mckb5dYdOWGyqm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizriCRA9TVsSAnZWagAA/FcP/1GuxavF9ttkcEDepSdr\nzr8cvLfZiKDLiKd9VJhfoLBI7nuN7uDAvmlawMPMucr0i62OQGhIflvRpKk3\nTojjGlJEIUdvSDcp/BnglTj5hcu+aCts8jyqzx1hns1NQS1htW5MhULT1JN9\nF4/Kd3NFhhcne8hR1jhhENVIDQoxS6WZeW7qLXm1mWs2Ai70dNpYm91tDzdR\nESVIDUBGxJHa9v7kCnsgxCOptYH5a2CA433YWVhR2DTnzKK1xnXOBhy2pozi\n9nSOVPOopWpBli+rqMegBrxOJGZfFYObO9G1I4xGnmZuHRP0EJUAkJFXX0Vm\ngZsZIL7u9ZnqJQPwAY9UhnI4h8eWTeBPEJY4+A9/zyaIAbSjl0O4vCvyL8WZ\nE/co6z8nDxIB3Etq5J8kZGthyH5ab2fyhVJDFvo7BkuDMsmre5GmBhXuV/ts\n4U/2XwbaP46tRyrvNG86m+yRe6mYv2G4CNURx1QfzuVdwdnpdyDFU7iWTBlf\n7GcIkUZpCeVDfQ1ZfiKrJ51kuRTT4X/mEapitVoYkNGUH5a5l2/7OFmeRYjB\nfX3MAvLUS3zta1R3y/diQXtaNtrBGP4eh1qOxXlRfgSuJGJefVpIcfugnkDW\nj4gkKelXDoey0m4ApYrIiQA28TvPXVxWPhxcc+b0fDOuugb+H+pASgSIVmwT\ndLGj\r\n=Yjua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/density":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/touch-target":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c50d20bab.0_1619737314346_0.5412337020521676","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/radio","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d35df304986f7018219f6cde879232f3e6f2209","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.474836ad0.0.tgz","fileCount":42,"integrity":"sha512-nEz8mhcax27Ju5DCkJHYWPSmNfRLbmjGcvKavLUA3plfGQnVYkmU1e6w4K/5WHExt4Isw36NHxAdqRkmere0yA==","signatures":[{"sig":"MEUCIEBZ0RSagzDsxNqMC3CdsRpJzD2G+z9VuSvqHfu/NpZPAiEA+ldTf2oH69eYIg85N9ParpCzgsHF+jpd1yTj31TBS0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMz8CRA9TVsSAnZWagAAZogP/39YRHVqnkvGwiPgGL8R\nKDtjlEN1vX8SUwMVrH/iQwsJqxMJupoLS10SgrYUdP4CwhnJ1+qBmNsq/nNm\nh5bN9x0REk+yAbQgkkNe5RHhrLyuKqdl/PbcqL5eBpMpX4Dl02rINYXKWqFg\npQM9TeS6Xs1Ba/AHGU/jdVK8pcPn5/uIfz9ITRg1BXahr06/PsVbgokrZZGa\nsil1W9YfR/OUBiigfB1P6wiEyqvnGBPSq7bGq6QwZ3X/YQN7SYEUFlwqSO0W\nhpuMUtnIst2Bp8flwixQEzjs6Vum43CJkM4Yn5U3e56ZDaAnZ2VLtRBF+49d\nNtxfMfHqP+2Iw/1C45VN8Z36Bo2/mUiKfLe/OsE7fpSIII3okCAhhYhgbEND\n8bXZ1h7VK+ZA7GtprpDZcXsQoNmMHiagQBUuJu8mQUGpUqigDekvvls7lYuS\ny2qhH1gIRy7b+xKUSlP2TLZ8uJzLhh7Mr50oFZO2E2FXslTuwUOzqOSWKzDf\ne0aBpFxdwoywEc7aH42GC3TjSiIUcCqPrKNKAoakjBj7srP7N72IOB2SnUMT\n2c7AcL/wRrZLRxW6QgaiFWpmyUaGd1MHz77MypHrdjPWhwpL1h77gN4Y34ry\nQQT3/Q3C+Gjk+1KvxEsQ7m77TQG3r/T5JU2fOFJ04KyoqydBeK87iZJqPXFH\nv2Km\r\n=bBJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/density":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/touch-target":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.474836ad0.0_1619840252059_0.1487808922112317","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/radio","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2190441cc00c93d9261ebac77ac1891274f4d430","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f5ad92287.0.tgz","fileCount":42,"integrity":"sha512-1fsZdKxxSJM/T5PLNXEAsarpw2j9iA7oOype8YGs0Zd8D9FGAItM3b/hHfqR5F9WF67cXo4YWmOWFlaDmz/uRw==","signatures":[{"sig":"MEUCIHn0aW3frqxsDoIjpmfp/bib0uF+kfAqFZ0xsEPTpmdtAiEArABR1M+sFMSpu1/X1tdL6Jko1LAbjonU4VV72jz4C4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9OCRA9TVsSAnZWagAADpcQAIsLNV0q4jVEwoPOlH4L\n3PnO49Z/s/GZp4S8Yi5yULCGfPnr6+3/3X7v9AsjqH2IJBl18ah5L1MY5J5a\nlPfkmU5mmAqY87sSyii0bf+CT+hdkAgCvab4cm8/g28w+CkIPCLSVwHV7Em6\nUE+cjsEjTtHGOmzQJwkr2CE5BeLsi/yRwGVZewAJFg/VzSWPP5OyJooq/BW8\n1uLcMuo2lcXOEDv57dO6voZ+AYMmDozaM9k/8fJj/EEdnT3uyJ5hl6K9Pady\n8nwxn1hhpNXJY85SlLYa/7hylWx1rlFaBBsdjx3gaYOB8OaEFUEC01CAVYve\n+kzXI1KTxCp0wLgCUqGEdJLEBQNKuMmV9DGzDz2iZDZEceZUSs7FE8S5uM9s\nVmp2kK3jAMRokDL7lyqr/tR1Dp2NQXPAadWuEGu1DYqVXZV2yggXikFHbq4b\n8uFq2w0KGaaR6uEgcmlOO6JEZarK/nm0Hpc9fagVRurSrgDFsuF+xEzZUz/I\nNZ5lzHoBhlvfII1vSR2dvpPc+NRhT41TMpP9mc4nRDam0ti+D5RpURA78qc2\nBoOufaVbOEOoTkpdkeCyMbX6pIJYQU0UbboeyZDMwpUwOobVuNihPVvhE8jR\nQLY3NLOsQa0fR9SKn2PvvS6ifoXP3XcvRqXeH03ajqLkJvO1Ybf3WQm2vJW7\nsztq\r\n=N7jC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/density":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/touch-target":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f5ad92287.0_1620066125545_0.9021576112408398","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/radio","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a13aa9833e2bff256096562e8b4ba8ac482ab9e4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.af453daf8.0.tgz","fileCount":42,"integrity":"sha512-R8C8obnm4lgjS9K2Ncylwk/YHammyOmEKqfBojUVVHv+F6Y7/59/DfEpHgMUgDKaxP6J596dLUZs+YFlNDTTsA==","signatures":[{"sig":"MEYCIQDvMCwmTEl3cSEy1MAYxFTfF+Jr4LDoqtbMlNKd4+XIiQIhAKTrbWD/WC6PdFVes7OIYLqtswS9jFZOrEEpfDY7DmnG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEacCRA9TVsSAnZWagAA7xEP/RSrPs6bLkQFiE7s5VNA\n4teOo6xpaugT/q68ChuUk9lCyAb/CRSfvasmgnw0aNxzPWswL3y8cswcl9UF\n2A4NRrk1SWxm2DO/KgGQ7I0cL0yBVVkztcMYrNv9rYvUdjB5azR5TM+3esuQ\ne425tb4moTouGX13Du2dQIyfCkVkWlYThTAM/JB3Dq1IfSMWE0fOMpFxm67+\neksVNua1G3ykYBefP15tFKKGMSkT2XdeIAHBGdo5bKAau/gsAEWjL2AKrqnL\nQrTGaQGJAG4H1aEOs0n4dPbQklHM44H/Np+cRNIpl0DHVY1g1DSVA2hHHeN/\nc4L16PClowXQ7wGOhNt4HpHetZuHb1UqPlQCesRV46DygH4mBGBkUmEh5sIJ\niNf+Sdw/dY2ELlL8MfQgs7coGUq8+BezNB6ij+H/bw6zRQV52mLOwdJ/Af9Z\nw8e+MDUjTDnHnTr6Wlet5ZvRd8hHsy1GPx+7Qrt5eDpqRysXUoc4cUeezAw+\ndOEdpoUZioG8ZogCQC7JJK5/ApfVA2DWYP0E1zv8S8t8gyUh/RdiqUI02YLt\nqHI5pfLY6fpf62bf0ZX+GEr833iCKXCLnyOMqpW5XZJYji97nHaAJUghr+4x\nG5SnL1kR1WHpxTTbzeC3ut/YzN5uRjvyrCDhDEiIf6MmtVZUVqr8Mc4RB2K/\nnaEv\r\n=s+BV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/density":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/touch-target":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.af453daf8.0_1620067996319_0.26626669836212336","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/radio","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da9604d1881a3ddae044f414648ddfea01460eb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.1f1918c24.0.tgz","fileCount":42,"integrity":"sha512-f6ZJRC3RU7uaWnfe9fjECTFNRGX8LwYHaJ5i/hcVIo1miJI6eHL6RmGqLfHXBmWqU+F3zqokskaSpkx2ZIVqLA==","signatures":[{"sig":"MEUCIQDTQHD029q6cCuEiTlqwFjMfFsbHwd4Qt/YbyQvgeNPFAIgUkaCGvXuS6wRyrxeSwpEiFgIv7tpTInLxyIAILTOaNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1sCRA9TVsSAnZWagAAQMUP/24gMHnjve5CmY5Zi7lH\nr4M6WGb6XEvqd8u+m9JzvKYZxkOZyZ6Fmupu9b//AYZ637cE69Ik17qlHKTB\nRbD3eMrypYwxmdZaDbNB6dpPuC4x9P4pVa3YWpUiux5YF4dQfbrOkXMYK3Dh\npX5O7hxIkcCsUSkQPDn9WhC05GFTzosqwCLa0QemmW8YG07xEh5lcusZCAKz\nzbZRrMWiHyoFJ4grbMX/qw3TNHqe334zKK6KaOjiczs7X5qEngyENlaAW70N\ncgi98guzqTH2qgcubL9J0+wmKIkLW///Qkquy0xtOHNa17mhXXGg4qYZByal\npFk/DjIo5dmkoRfvlt94TJMOmze35J7x2h3VPNp2CZDdIXrtpydQDNbo1EW9\n/u+zh5YcRBZj35riIHY+GRaiMkja2DYHBazM+d+7hRiPCnO9DCpcVvzuSpWU\n7PGBJj6jsEsMgbeqm6b1hGUBjEpEwd+76HiWntu77SF0OMMLZYHnJ1TFW9kr\n1mNjD7ybfS7kiYsjIuNABApOEI2TJPkJPK1JhU1NiEXl5erjU9hs8hWB+TkJ\nQiLXdCFK+kTJ63ZmSYPU/AvQKu1lLDXyrmc1wFcApU9yDVtc35opNB+F8UAJ\nVNbb/NoRwRME6ibq8IGCRX7O7qYKLjfB23UGJw0R9XkRqqqG2wttBF6QcLZg\nNZ4a\r\n=/5kP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/density":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/touch-target":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.1f1918c24.0_1620069739671_0.3594890630437475","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/radio","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd627331388a4a1f1015d47eacf46825a32fa7a1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.33148231f.0.tgz","fileCount":42,"integrity":"sha512-wkQl2Fz9FlEAqEeIAAOz3rOxk7HJusRRVBWBffEw+bkmotst4JH/LWNxw06cj/gV/x0dUUsDZaUJumnqPfK1Vg==","signatures":[{"sig":"MEQCIBdoPnwI39IQ4F8sDHLLjFkrPAroH9m4UnTFRk4Q15WpAiAcIokP8JDVxpWgAsM6zlCJ+5CZPhlOQc+bdvlB0bs0rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFE7CRA9TVsSAnZWagAAkJIP/jLtrAGtf34aVW2wR872\nDOP5stOQFhKgo2xzrSrmlY1/4LEdJeHCj3bFvl3oOz96U/f1EXvQQw4w4UJ4\nq8me7xirCUPO2jVr30K5JtMZGxmF463oz8FuHaSx6q5gEI0J1qBdg7Hm6lGd\nPyGaYswpQb5tYFUsdoMNiRWsy1FoNjjbLfI7YeSCstHvBwfLYHz0E2SPjl5D\nk6BiWeQOTVc7sg1/AcOkXzkHwKs8cserNA7zhEwwjJrVuHgEfjK2ZXDhZoEr\nIIzrM8sC+ICvMSDByE80vhl3sJravdQHpa7UcEZWI/jGSK5DS1g1Maj9Kxap\n5jfXRhoOz5H0bUQX6IEMam/sdeXsOx3yowt6wVo6K1BTMzG/12phoDigKX0a\n2QrE2OXe3pLscg8rKfjCU7mey53tMFCwRx19cBRqA963+d5zA/Rl3V3VKkHh\nVhh85B2u/s4BJNrM8ER/YomUQF3sehvBM6acVt8gOOVZ10YkKLK99RwX5bmr\nRCmAfd7z+k3jikjQbT+kzHjxzJWICAqYmgRzTN0rUlcwSwwWjuZrxxBsGpSW\nekbQi0lRFRyyqG+KviqeOS3d6i0L25mQlAzSVfQ4sVTBqhUPo1FrpFGRsilV\n3AUfIS/aU30ziJEhGd00o44/svr1A9GSFv/XpiEn6v9NjFIIxqBibGF+nYnl\njr1s\r\n=CuZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/density":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/touch-target":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.33148231f.0_1620070714857_0.017912246650780173","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/radio","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e852fae9781b8062070e8f0bff1ec2de61b9a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.06b76fa74.0.tgz","fileCount":42,"integrity":"sha512-8n9x3tEiK6VLNMGt7w35TX3oA/AvPscU25AYNbMBvryIp0zwKNUjrn151xhKW4sndJnEwgd6JmepPtg2pMrAhg==","signatures":[{"sig":"MEUCIAUSa9LuDR81G03dTt2QsjRvWHpK3YNGiiqXLG8tqsi8AiEAjpwObPhud8qFz+Feco49lIIN3Pz6MioR+AVwVhs4jSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFL6CRA9TVsSAnZWagAAfbQP/RfGUGU/GMdeKCdajK8a\nQ6wpkwnztfa0V3azV7owjo82SQvG6XcMa6PsQAxXvRMd23VYyThjAAGiRjDv\nSM+na4SL978cWt8vs9Ez2/iMVS8siGO3xwarlK8xt4bo/MmhjHECTx0LqpeR\nWsEPJw+TkBOMvkYn0JIPf2XQQ2hPb4tq8rLwvrdiYzXX7Nf6ZnJ/AD5vf/JB\nOFpaEdz0qDTniNEvg9vNOKT0cfEeXL6J+M8/KhcR/pBcXTfR4JutyVk8k80+\nAWkfyJoH9E8VpIyXzRTrq0ryYV+TzOjkjO4LOWRLpbv9EK1/x3XB+YJUsAw2\niqzSLaPlVKg4RuClcDxUyKevJnMP/6eS43nUaSvQK20U6EAJipbI9rvWwXql\nQJmHWcLWmewhwKvuTYfBvRxuWBw7FBb+JwKcEX9vgII9uGpaXqJxzNM3/ngu\ncR78K6FD4LZ3t1MJoLtnnqkJqjW20CuLTP2043zvOLeM4Q/xg0VELPoI0ZvV\ndB6b1fCqwOiwznz8DntuPy6B2xuVaT8qoRpq4IfbY0h6zLLrrpvp3b0+7PU8\nEm0xvrtilSI3WNIs7VosmmIOpaAp198RV5LU5CQUHELUSsPoVHr+OqkpOuig\nWy9mpdaTorEvO7aP0i6damv2b3vhODDq8FHYonb0G03W8dDDsqtm9VsDc+3M\nBlKd\r\n=4Eql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/density":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/touch-target":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.06b76fa74.0_1620071161670_0.02484983756068626","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/radio","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2e0f9e871cda9bcafe0ba295625525adc34df8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.7c5000473.0.tgz","fileCount":42,"integrity":"sha512-hftnKhw4e08jsaCeNN9Vbev0V3yHQR7HfmpNotx/YmcXndTF0IV54jyI+w4vZxJ8iJoij5oIl3LN2TzuwRxHBQ==","signatures":[{"sig":"MEUCICVMf3qTTU7NmaBEQ0Q3zJije9H33fOcQUKFaSIWkfy3AiEAzu98FnyTJlZIKX4eKyGqeDtgMULyPS89cTcQcBhkXu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwoCRA9TVsSAnZWagAANBwP/1YcBj05wnEE9i81QkuQ\ni7KfWp0e+4HU76rpbeN4pCJz4zPz+PEy+SId5sS2DSd7YRSbIrthU633D65L\n1oT3G/whjibDk9Bz1axxRarJoNaAMb0Twr+acqJfQV3xMDYv/7V7/L2ZCznO\nloxRa/RDndSFdWRugPjVcA+lxW6F41nFvCOfhsAgTiMSwSMUl+zKz9zy6UCK\nYQ9aonNKgAEfYTYacBtfATj9iecnKUiMqoyOq/jvi+JGsi5+2D9atqsp6xdf\nuuNlErseYy+rXqN44glYsconzUTQyoP5CHmerVSXt6Py0CwcOkW+2yDSxbPH\nTNwz1SRCbWBLyh4kL3hIhqW7PpPvmt+SFiTFGOPYuAK0QC+HE1zmbHvt1iCR\n6/3Pp31iDIgZpNZGe4vLsAEtFYDMGVRkle5d0EfZbzShOOfLjRJauncpsjoL\nUP5yooyuC+yMuCr5PYWYrAhqQtd1n4JHJ5huYlFX0tf0kDAsJSd2nR9JmcpK\nKtpC8MxZvuQlr24+NxwFW8oR8wVdzBsI/3Oudm7qIxs4rpe7TGv0em+epHCw\nMOYfZDDJTVc5Qv8DLPunON7YLHAUA18QH8blX2DSy0K28Smpl7ubOY+Hncv2\nPWMeOUEVzjHjNGlr5LvaRKZJE0fvqKJRvCD1zog2xGOvoFyd0gFC0iUyeazs\n2MIm\r\n=oBNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/density":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/touch-target":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.7c5000473.0_1620081703796_0.8679555265950805","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/radio","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2566400a5c36053a1bb212d248d6726602dfb25","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.de997644b.0.tgz","fileCount":42,"integrity":"sha512-Cl8X87JREvmXmiGa112nfByyLuCI0+1oT5gstCc2UYu6Q2WnSlg63z3oHgZhGf5tvFOWuWVa+Kfz+xpfAk2EjQ==","signatures":[{"sig":"MEQCIEYg2hsJoF2z+eBdM/v/rusriVRIFdzlKOFrWZ6g2g24AiBrXrNLDsBdMYUkeetXatq38XwLV94h6QD2EhPAlLsAtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQhCRA9TVsSAnZWagAAzVoP/RyrlQrLE1DQtQLIC7cP\nydW9waqOkBEmiEdbeneJm6fLhbwFxyzmgm79/wAtcwH4QEWYsJtoRFC+DUdc\nLx2kNqe3t3RtOK7m3/lHnGl13/D9TIPWvUpmLVkRQ88suw94QKRMFz4ZTWnK\nF0E0vxvMGyzoZqTMxzd/TiHXoaWFHfo5o3ztYJEkntCzbI6thkD+udj1KBNT\n1ob1S5NWT6sEzHZSAWbMonrmD7v+Vq1mQGwebMTBCuK/wvPkEdthmZ4qaHDP\nghqHk+C20u0w0pjh1beZEdS7IOYm403as09k7Q0u3zyzQHPWOliHGh86FtMK\na17v3h+4GffGYGursMxw88BlIJPQD2CDet/EFArbZHoDYoNW/FKttDKs4yO7\nsA++LxQMhhmJxz1JKflYDNIX6UYiYB0EXgKf41dJu9Otesxl6TYgVzQ2T640\n8U4pcTiNKy5OLAtM6mKCNETjo0KZO83eP6iPURHBuzaEGhb3X/yAPcSrS2aU\nU3xJnfASqxwQso+GF4nrUIjMpVS5fO2Q/MMWl/Yoseu5ifERPnDp0xDYJUTp\nJrwZz6aUuwal9WB5ogkeo7vE+PfH9YBa2q2O1MaVxLgcUV5fBS102bsXM0BP\nH5eIfS+qn1bcHAN6AkviCLDhMyktGBIu8M2/9OTla+ex2sewG6eD2gxJU3W1\nbebz\r\n=gy1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/density":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/touch-target":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.de997644b.0_1620149280963_0.7371140436920898","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/radio","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3fbd4c2ae6cd0a6187a379aa42b948b5714d62c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":42,"integrity":"sha512-yOX8nUeiDrRWxpsLRsodWksrQH6C0IKL0Z5GQXtmmsfo5GU83pwZtn6U/f4aDfh3z510ue+LQ2nOvaHKiNuPIg==","signatures":[{"sig":"MEYCIQCPIeEdCbr5J5Zg7KhkPCsXU0jO6aBmPhb0IDBMsKB+OQIhAI77UvCRgAlXyce2mHiitXcxgL8CisxsexuGsMbzknLr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYppCRA9TVsSAnZWagAAlRIP/R7RqPZKygtUvmrXiVHc\nnm1F8yHG2bmMNUlHnwpW1p9m4GDXmzEMvmgVf1inJmQ/hrqp1355LinXbVse\nWFukeDXkJwA/HMB8lRBiei6pAbcV9ARL0+n+5gOoszLBQeIU8YNksJVkduf0\nNs7DOrbJliW+sVQnXEoMNUs1UAYzADWtmVMNK7sdoSJRRaURkQcMs+cFCUxk\n23MErFPzcBgnFXP6VthEN3TiWHo4nJDtR32liuY25VENpchdNMM0ONfvRJ9M\niY+KOoARRrh5wKyUoqv3vYFlkvbuCkli8lY4rhl/htgPSXedBE7VDcBjRwmp\nBqRJC5Z1e/vdVZgdKj8C+ae6Ev33eWv71figFXFZuF7iXI0uAYzxK3I7ZcJt\nQdZFUeR7I7+QG0I8SLKyP8sqjs+NQyvlHp0uM038jM1XgA1V+66+mSJbDjYq\nT1aNWeOpbpJvoMiBzAysxqXPvEZSJ0zoJ/+hDeqAWYAsdTBK6kvLHIXWNOjc\nFuzRkmBdRmb4XaXWAqQdJhKIOXxKoNlLNz0EIUtZ/W4NZmmQA3R4UreZoYk7\nmKxMtI2UrWGPE0t9e+wxDtRRHLiCHkZXKtfOJLwsCFcZ7RMrYkSJ6RHibdQ2\nVwbyUbuDilmkiBMiauB3SsBA3PlHxnwxa9TmEmzRpbEHg0ofp3jsMgnIEVuz\n8p4V\r\n=w56s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/density":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/touch-target":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d4d7f1cc2.0_1620150888901_0.22829308109951563","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/radio","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61e6d638b2e2abf81f852aa70e06138888dc95aa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.be999eb08.0.tgz","fileCount":42,"integrity":"sha512-4oLG1rXdVlvPuJH5IxBqX+zRYBZwMprLxW7iwD/PRfDsVqqxuA7LxIgftvPeTXydyvrBwfKOQfMbdJxLAmoKMQ==","signatures":[{"sig":"MEYCIQCU17x0nhpEYJzWSb/rrKMMahvgv7b1kc2nqAp7TcVTFQIhAOMeg5PAwWCd2ypUvCgVurGKY2LczmB/oROvU8RxtS2x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYu3CRA9TVsSAnZWagAAe7oQAJw9Zhbr/QGZAv3qQvC7\nlAFFw9hwnoz1U5w+vYv/9/HpzWbSIvTGb5PsszqL7W4wDhYogrQXMEDe9nl3\nwNt6+zUcgGzSIlgbn6Sfr4XCn+NYJVggrqkfQp3iJO/U3xIgOER0vjwWFqYW\nuHUq8vGBPpI2RiGWv4E1nWRFinpndGVa8+nCK6eq7Tr8CXAjRaXLQ3PnQ4MN\n6zBTvXHmeAI8/NMv0EUyIdm+WDcPSCWDPNyukQ8OLp5mme651XU53FDeqEZF\nXXr3O9K4ye+TRzXKUPFsGP+5Bpf8/WcqCCQRoXnNY6hLpK+dhLzjmYinhhmk\nEjTcgLmRdPeSD8JvvbNwAKC3v52BDFXCu9Hx4HnpxkTNwz3U4mZjizfQDGuu\no5lfHOa98N1gAdXXHyV+wikswEfFmnTTtoe/SFBH0WFj0g5cGceOewFe1W5x\nfDsF/YEfiZkto9e+1BRbZf1DZU6epmQH/DGNL8IAMmZJRlv19OQuk6ozDXIr\n6wlM7sKyLwKj12l9Pulujs/3HR1Z5WaueyhsFcs0Kz39Kt9Ll8BgX3DZ2bIO\nJ8cUQkrCSZ3sFPfGzsfT+2iWPSytMTR933oIhqx8jfSbjP4UTcLAAnE1QLnl\n7nsCLI3MSuABqnrRJPOryFS/mkwjH5USqKQo9K0UfyjR49psKD0s+/C1tBgu\nQl8u\r\n=wWfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/density":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/touch-target":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.be999eb08.0_1620151223108_0.14087429349397818","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/radio","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56eeb6026f4190b43a3135cc6ae2bba2304c38f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.eda1705fc.0.tgz","fileCount":42,"integrity":"sha512-i52T0V6qsggMCdQRDphmfNUCATpIlbYwnpviUHIFnBv0eCZ36CgqMRctIw1roFhfBNVS9jm7fxSMmeqX3q9OkQ==","signatures":[{"sig":"MEUCIDJGIbNiEQfXnhfsMlJyA6KAfHh6nSO7wF86hL1lYjgeAiEA7zWWb4WEdzbndNG6KR/xdqkOupH01cfLTjdv4eekwCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwVCRA9TVsSAnZWagAA6YMQAJxZ44j2mh6pcibD0b4h\n2wC3iJBwfnZ8HWP8fLSjRxOrhDO7H7kgFfGFPmfIZAZG5ZW2JsKZ7aAK2BxD\nYFlJHUMVdQ5W4uCznyyk3WD3YoNvMAm/e3uHKBFIJEa9g3JZvlMHZ48b9M9+\nR0NTIGEtJH293UjG2FgZSNdsU2XtAg7i8M/wPAfU11xqZ1aUcJhGMCtTcFHl\nT/hDv0nTyldmEvMjdpEvUdiQvmPPz2oeIwCy0ecESV8laaHwBBJoOpspeESI\nnbahlAKGL7RfFiHVY9ycDciLAyR07ASOFPB2p67N6zGgv+i/NZoxEH/Aqswp\nnzg7fYgXc5Ga6f+WztKRFOcYhzox8IVulNMDr6k/eWXbVvNZIWpHcvPnk/qG\nH/5uMnTiNkZvcs34z1KO3IGyJHgkAcQN3MTvKj8uaQqoW7FSZ9Ml9S6dc5rB\nm0PjlmcRiPnFGWhDxf6MsamnJ7jqITXgbHGBY4sYKHzLt4MleTCfOgCOJgG/\n8RjOro6oXPcHT9OV+wAXNMWlTV3uzJkcNv8Wn+mtB3ramEXo6t4k3bj42Irg\nCPnebRc5hTEhlXzu5ycFVTo0MrH97c02MS5RmdxOyVEjmecXHdkYJnMwSVXx\nTDRypTIohUFwvva7HIDzj1jX/tQGU4QiQvVQyC0v+28nvFRbVqyo4Ivwmf/k\nshtr\r\n=ptRJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/density":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/touch-target":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.eda1705fc.0_1620155412943_0.7247146372886637","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/radio","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2b6d387645c7aeb6e0335515c34fb71f6c9bb3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.718c90178.0.tgz","fileCount":42,"integrity":"sha512-vpn0gF6H/PnDMv+pTecCJN4wG2LKk6R2TcrM5KQ4LO5aQgxep8L1ulBnASoALovU8M1TgKe0q1H8YyPBZOXoKg==","signatures":[{"sig":"MEUCIGxa8PgnKNjWoPOvQSF3CiH0vu84/IDJm5ktWxxOpQk2AiEAy+TPpzUZnN9Wc2MrnQm6U4jlAkdsXzS3lxbAqqHq1CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAkCRA9TVsSAnZWagAA8+8P/28dJSVuTl17DoCEKYcd\ne3ilZfb6qFvqAAA1673cypi5GNOVqBi7ofKPYKmmgGcMsyUWtF/jlV1OrPUZ\nH7OxA5cN7lnEHsWpMOvuCMWHFBXndw8ovxjrJZtWXWLNEAcHucK3bGA7Wj0y\npNQKKMRhfBIXaJ/JW900IinqqUM0VAsyxoIXy0/HxMtRlCYNtRSfNIwMgiC1\n0E8K4h4XeoYtnapTlmT/rJqgAPLkBmX1W2bYMvHUiK996Hc/dyUyen7sC5EH\nhO51ZySRIYQjORCPD8GHOfZOh5qniUvofzx/sf/poHhoFH6wxOo5VOOmIGNx\n5tE71fidT7UyY2HgDE2/Ggulnp2F8G+JWERmstNSsTLnjLy6K2vRCidRpA04\noPTkmTTRa41zkHiSqAtqolVR6ucDx0zJZpPctAt33OkTPuKTQAJSZWHt1lYE\nsfZjVhfh4ipGIgGaYvr+Zw67raCG53MvGQB1SXDSLo+k9FgNEEsg2hx0fOuA\nKxu/YyLQsSpHSx1G3bA2J7O/v7Xiky4MXrgKUk0k6Z8I4TO6i4rJe7d3dJge\n7YR7pMj2Fzkn0hCoOL2iYiJAd+BtRr+veYSQqLFS3YWQGcJuL9kWArekX2hE\nkwc4MKyDDg9Rx8fuM4dzHT3MiFvhPDEwVbc+LVrwEdpK9xCr3JyAqb982tCn\nZP/C\r\n=+bKx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/density":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/touch-target":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.718c90178.0_1620156452302_0.5437073450165721","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/radio","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5290847305d6464e8492596e77bf78dfac226458","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.0e3917299.0.tgz","fileCount":42,"integrity":"sha512-PAN2liFHLkSCArK3hTom2tPqXr1rAyy0+uOHAsPZJXhad8sCyrFvadqMVcmbXxg86oFIwuQXbuL3Z2B+MQH87A==","signatures":[{"sig":"MEUCIQDR+LYJO+sfZV+UhEYl9JpKd60wyaMRz2ei7OtYjqx/BgIgIvixgvBkrOJQHH9pxqvs57b+F1LDJcGP7HX5/VwOQVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDGCRA9TVsSAnZWagAABVgQAKDH6Q8QGZYw75j3cYIq\nFoYqRxavEHuWAodWYBmaVdXdEOkFiOcJ9BHY93SE+w4vNXjW3E4AmTEa43WH\nIGU/M4I0vL0aKFJnj8dwmOmZEmAJ04xvUxDnxBkSxxGPkA7q0Q2oWjSEHkLl\nJ/1JDAJs7z0E8oURILdOzt/Ekl1/8XDfhIG9jA3VNy+obi4FvHn5nA994J/m\nYqcMWUg5acwCQ5zb+u8TWYrMjXUMKQ/ReR7kzj26k1FbGG88XoKazQjbIVcl\n2Kr6DRRMO4cJiVY1vr4+d4OMqtWTLLsz/Q/K/ltSA35cCzQ5Tn1agt2FJOj4\n74IPPThInTGYufKzBuT09MuOLc9t2zB7mOKMATVp+65P0kzgE/tlcgs/A9vr\ncwQ00QbeTxGhnLArDIgevIGER+ehOc4MIV0a8A3cSCU4aFHjUvmD5a9zFOgn\ngP7vvKtvF+7yoO0a7ckv+CxZjN93/M/aXYepY4qaJ4I4kUBEUWtFArnNzTLl\npWYwc0XMS2iXZc90+v4K35SoPAcSLgLQvw8EpGdWSNvnsv/EOMU1a6aPtDIf\n2gbByo6ozkInMtF6YjRaf9iFgqXVpX7iBaoND0HmpGlEpuoCEYEzQvPrrh/q\nP7o+ZT34lwzdMRpaziGKPEfzqb1hlK19dkxIMdxud93fTDyFgSvZSLbrXQe4\n+OBn\r\n=oic/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/density":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/touch-target":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.0e3917299.0_1620156614012_0.7582197990879658","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/radio","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aeffc59323890d2a42ab8e5885dc714426d3acf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.836b3c7db.0.tgz","fileCount":42,"integrity":"sha512-/RGt/9+Vs9M5Bbxu6dwtPDKoe/6a9dr0cjxcqNn/N4ajygb9TI8ZeL2W2mQ6WDBPF+8x+yr78StIKQfr4FjDwg==","signatures":[{"sig":"MEQCIEa+ddSklH3amQL5OnIBDPHiuk6sp3yjrA2gFnctPRXmAiAxOdsFWUJkgagbBph3coMRvEUTuhRiqldqpas2UYkbtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+iCRA9TVsSAnZWagAAzRcP/AmCyCHaAiT3M32S1l9O\nwnnmJpJpTVWlIvzVqcOxsyn6SYR03hPqlUWXIuratxtnz8iulWcTf5txOjUU\nUEyYbWjyuRphXShjDNs7mCSt0lj6kt/kEka8f5Gqm1shTXa0ira0gC/asyVz\n1s4o9BXxMBUwHx2/46bKonINQogGfmMWDZq2VnYCmkrBwn1PRh9X4O0Utu2E\nl8IVNn6iw/HtR7HbFS2IdFjMGhr+VL0ksWqVrHhsusDYR1O+aodmp8H/74cS\nojMHoPmgf1txocGn3APHkpIJw9VW+wWjQSLA1Rz4xLO1HHr27D5VWAhwrkMK\ndFUMY0EzPuuD6q3qIh2Bousq8YiQhngH5dZPfKUH+SA6zN5uC6HV2E/RMug5\nw6m0Kb7RhlVX4KSZ8iQfLgivyQzT0bmBE+ZhIgCRScMc+vU4JeRzYHIcz+C5\nrqq5XHYM2LCIi3lU4yIdHKQ/yJnNZLxty+qXPoC3iF1av8xM4NNNovS7z8ZN\nwCSOlloPuUxehrBT5s/w/x5W0pfYBOju1dDW3liUUw0mLuFpgC/TjoijayDX\nO4bAUVhUx82dEWxC0C0HO5bLHbs7jt9wizk0dju7pSMVqIxDN20cpOcRxvOQ\nUuM+BCkQI43opYFIZtMyOM7bpHgcffTtUABlxLQB871aS7kjMtMx9V/CKU+k\n7/19\r\n=KUwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/density":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/touch-target":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.836b3c7db.0_1620160418133_0.03300761351777903","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/radio","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b036b5e2e67ea161b939ba233c6ced306766dd37","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.53d4e6d59.0.tgz","fileCount":42,"integrity":"sha512-cgmkxYtN+v4MzP8rEUR+W4q4Jk/ef6CFRhAPLF2wUw8Kwj+EKQWBLOSAEJtlgxDfZ+CQQGUMPiGuLHj0eNl3OA==","signatures":[{"sig":"MEUCICjKpF2cE9OGubanNpnEddcZWm2hDGstQgUaLLL2MZk9AiEA2NPJq0G1IwkkdzcjhZdt3t6YBU2OXHyxMgKnH5baoL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNSCRA9TVsSAnZWagAAcUQP/RNccsx+XBCDdE6xHjzJ\nnUjO1wuktDGaorG/igx3xHZ1ut7+Vc5oxPmdSC94xaAOgkOEnuC7bIWlyOMh\ny+kjhCZNHTsfFAp7iO1SfFZA88pmseGSZO9ukn+KWGytV1jgeub0Nc9h6NTz\nbQZqolIqlqzFV1229uLEdV+MFyQgeLyR9qB6j+iGc51SqFnPPTSHLZzOO7WL\nZGcglGY/T6hn84inp5A3Xitf+okqrNYDTSXnXkA/qdbIJ5E1GxgatyhIB8e0\nzOBLQxPfHOLYrYyIvRnTIZIbHLr0i+tS28WQM/dgAoCGaD/yCJZcC6pxNZV9\nxXIjODJvqLxJT71rGLilqMKf4bv5+Lm2SEEUCB3Im9+0FcJLKC1lMwQ36JFf\n8siK9nyIHtl/SqPDOTklhPeN+Aj21MAt27TfbidN6FiYgETk6HKZUVUBE7aQ\n7Aptk10xc/7mla6ABUYcPe8JGObv67//XBGDk5eag0ifIRWhhRk9cEDTANMo\n53E3+qAg38l1LSwJTsHTL9/IvXYt3Y4AlNIdyNs9i//oJ6ot+P1rDWR5CBMH\neu5WBsmEiHk3gSFFlbARyR9PM/5TRjCdSSZjJide4zlkDwYtANjwUy1k3lwW\nRtsWtIGHaeVv/ciIsPuntQ2GyRIH6A3mWrMbXR+jraZN2caAa2kc1NOnBhFO\niN+s\r\n=Ey0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/density":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/touch-target":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.53d4e6d59.0_1620161361945_0.09041423536959647","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/radio","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f67b0da3808d079c77448e425b30a1804c47df","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.18d147e27.0.tgz","fileCount":42,"integrity":"sha512-U2y3+Xo6yncxTuY4v9NiEtQnPiFmVcaljCrYpO57JjBfqMWouPaq+MOZRN3obqFvjxxDsP8NDMjhqoSV3aWcyw==","signatures":[{"sig":"MEYCIQCsTNYFd1v5GRKan87Lg728SaIROTLchX2UodUtB6JFYwIhALnkRUk58KqQJebP/rh0ZGVMjjJ4ys4FGruAIOcwh/fK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVSCRA9TVsSAnZWagAAv8sP+QGSsT18S8AxnyoX3jy+\nnc7piyjjuC8pizHizO3Q8dJ6XkYAwIMqKptdC/69PvFImkM+bpi1Ij0aAUAb\n3T7+M3F6vezON0D64Zz+H5DhbBWp5wRa04Ycxzp97MuyS6VSIQgdDdtMK0zI\nQgoNVXLWFT8dzb3hbnL+veyu66QusoIHbjgs+FdLfboBaweN1IPDKqbnm7P1\n6rCp/MwmkNeujpomnGR957Pk2qlo0GERPWCnISR8+0mVW/loEVDavXtDKIOm\nWa/aI7KyDXJy2KEsBWaq1elIGjLwUgFJ82DSlxqZXrjE4LUu7UFtcNzR6FUw\n4Z1gwN2t5Ot1JJrAPH9Wh50GoTMMQXie4qj7FJXnOhRagMMSlJW/MnVunqis\nrzQkjNCQJjxNMgf1EbwNqntRRgF/k2pElK2h0CQ+X12Jrh8HkLtn77a8lJvJ\nzWL+yuSTKxTwKrikPoTn4NiEOVP5dBqozfjSccQTlxSGN+sHgQyPQTIBegCq\nhcL9ImfhoA7BAeohe5W5zs88mhwQDz0wrRCK6nYTK3o7C7y9j3PuivToCDFi\ne3/+N8n4lVpPgMNhH9x9tziFFUfe40/bsFJMrcMnMU7J1jiSWLc+8cN8OUkO\nO5IM+pXgix6iB5Qm6QA6ZoiJk8VBAz3ZzcrkUvnvAtRqJLsuOAIZFytG6ViW\neu3t\r\n=CbEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/density":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/touch-target":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.18d147e27.0_1620161874015_0.23638825080352377","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/radio","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2053ed2383c21bb1a3d9cfa7af5aedec7780c2b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b9984794e.0.tgz","fileCount":42,"integrity":"sha512-9wcgTFEA66zJRFGRTBcV7qBzYFUb9xI3h09w02YZhgH56zAl2ygUUeYbci0ml3XCI60UehmA51Qfgnsr9c2jRA==","signatures":[{"sig":"MEUCIQDofYTU8byGaundvq3Up3RADAcJVjVGqFeS0thBO3i3zAIgZnK2uppSJ/LqHAqfW4Gv/c80QgpNmwyME++Pshf5SMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKuCRA9TVsSAnZWagAACUQP/3l4lbyFKciY7qoREwI5\n9xZmVkKw3fcUlZ0lhbVE7l06A5BWvsmJcUKkNaMDgF4OKBAB57QK9xhKKh0x\nbYxZhHlF1ssffyjOntMfAW+o4ABwh/bZhNKM70cvK1U4CORb3ByWLG9HdBuz\nJpYfG8MnY1weTIcc21DVzd5fpiJMCw5/E1tgEPb/eOPcLCsLv242T5hhl8Ka\nrTX3yoOp3Ueu9LB9TQ4SiQ4wK0QV4ddqLR/vqiwce6hVNBYEM4Yfg2sxcJll\nzyx3QygnjZcr+hQKQro7/1m52SyTUqasKHqMQ7scUP5ULkqX1qMjBHeEAwey\n8Uvz4azEYn2nuBr3J2RPRh2lpVRP+zzG3+sx5rW/ZobWQYQQaEAkhNbBL0hu\nMnOSVb8LvRoRR5uE4ck2E+KsgYQ34TqTIxKxEJOggZWeqm/UkinCT0hSOTCt\nWwcaYD7cHpUc4yRDfuf8WEXhY6EXl4F/1qKmazBbb76LQopleSBHkA2trBFM\npsca/MJ4tfPB8ZgNrH/9/PR2AV7PnIJDr6YDsArfVXVLwZE1WPUtc0wT9kxr\nYSFBgyAEMibYkjVNZAd3wEpZrEglfdGJ2QZsICROOHCAupFGvrzmgu5ua4ls\nYKiM49PV0gTUncphvz9WVtpYqtSGRxx02TExZSbBlGCQKAj3KQUFsKZTqp1B\nRtZH\r\n=GaJb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/density":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/touch-target":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b9984794e.0_1620169390119_0.14157438921409837","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/radio","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f089868882541d1668c04af8a2e0f4afff5e6f4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":42,"integrity":"sha512-IGvXlRxRkoFasIH7MXUskeIRwt3HiCsNtRmVXoIoUf8087dHAREnLN06yNFr2YbvXlV00YTroUYtFGle6BhOdA==","signatures":[{"sig":"MEUCIQDTEASIztQh3hdQcU0olVrFoEUyzUh8qGhCJNyp8/gOTAIgN/akAGLe4imjiSOq2ce7zXhKqByztTkoRZHx6ExNaMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdN5CRA9TVsSAnZWagAA8aMP/R/BrXvvsSbdaNHU1njJ\nDdCRlHB5lkSj9294Z51JrOZFH008qMYoAbL/xPgwBh1wX13cAGjxy9wBHyc3\nt1sa7A1FofheBdEAfHrQBOy0kdFqEGcrI9iI9wsPNaFGg0Oy6a79mtcLPcTX\nZ37vNrU6HUgwD2FFf0PckSR2hO39g3sr9Qq/ld4amBJJKwotLPSO/aycHW2H\n0vDaxEX/pMTe3njg2gDtb4nYcvuulj+3aFFnVCtdP7uv81Ml2yTFnypipgoU\nLudfl+vLOzNL8Z4Z9dTzglUjac1ebA3V5xT4mMk0gnCGAoDsGYW0l4YKPmh8\n19DTVrHnzv6ZslAReflUWLeC/oF9hGdJye+vX0WpG+AXDItUUh7+1U9iMGE2\nKImY8B0VZpLYcd9zoiP+Ja6zdF4Df5lvIGYsHNrXog2Yolv9+iggT8XhdJGe\ncPQJjUs6cGuBA7wdE/Rcc+4g6J35GVB4LG4AWJ8ptrM1u8ey0WPD6AYs8ssl\nOQ8ujsqFEnFAaGZpvWg+UO020dUMBLj1HqIij0FPH2TmtLhnoS7AW8bcgSVJ\nDaKnwn2PSjk7jORaAvDpprGHYU5HOxHKHw5RZqRijq0kDF6dkBTHoOVpVnKM\nswXXJMJSJLIARnf3bB1+p/TwDg22utyGJ/WfwOkqcb//bGMbZ5pyF6MaKCY+\nRTTa\r\n=XHZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/density":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/touch-target":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b76f5fc9d.0_1620169592589_0.21483395228354518","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/radio","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b2c5b47ecd25ca01f7577f3f985dc62ccdb2be8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.055d4f10a.0.tgz","fileCount":42,"integrity":"sha512-MbuTeWjZINPnMwSqCMzGuVt9zmzSLPus6FKi4/6Sl1uOTojcyRaKXhV0Ny0B8r306wXG4cMumPSoUHpYDl7gAw==","signatures":[{"sig":"MEUCIB7qf7UZOGcOQSk5jdksECgcFmT9sUuUDP7VG2VOCIkSAiEA5xLYij1+3RtvFDmN2KIMWndSKjbAwCIg+1Pej6r3l8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcECRA9TVsSAnZWagAArScQAIPp0o8RGVLwOAD2yZNN\n6C/BoKY3T0DpwGcF3lw3jQ2qaDI0izi67HvM+8dXdqgsl00HPhQ+eIO/J3GW\nB6vywM+ImRhcTgBNIE2wZCkx+qsw4gvvofNQMSswTfjImgu4C9P9/ffEFtxJ\nrpbxeBloQRh/2UZ0CcjVMW90Wb0CO2TgMrROWXaB7+qYB7cUieRg6sr2NQ0X\nhDsZaI2dn0RxI0m92oJvuQjnToTxOSpRe7csJTHBBhoikg0GJghURJX/oCdq\nddG9CgmZJbFd2KWtYulAgp5xQLc1VqOw0tdL/5tQHJcpuivp8nT1M7ha9+SZ\nKkqAHw3aRzjqtHIAFmk4f3YblRXUHfH++pI6VhFBrUtoA2Cf9uSgfwOCraJn\nTW2f8a0WVihZ4BD6OvVsw8xIcNrVzx8n6Mar9kn5z+dCTx2nMwy4FrufNnP8\nyVMrM2DzcgP1/CL8mD5EGSc1uv9Q01vLLa/bDJJpwOAn0nC9K0CLKk6AogqG\nbv4TCrcPaRocae4g9TWloSEWbXREC3d3nte7a4BCF4Z1CWxremLIvMM7VFgt\nWWycAOo7FKJw8bEalRj94dPoYvAXdw7VEkTun3ortCBvaBE8pQVFA1gT75U9\nSuZKD52C+oh360eNB7ChQqZYh6p0m8DDZD/tbhgt5T9u2ZI4o5CWc9M3ofyM\nNyay\r\n=fWA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/density":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/touch-target":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.055d4f10a.0_1620170499763_0.153930770764644","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/radio","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11aa2a6704352f506c59a38c08883f663202c54a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5b6a46016.0.tgz","fileCount":42,"integrity":"sha512-2yVkp0Wh+IAl4qrG/jIooM/f9fkGKTs/XgTbvbC27au7L8Vxlu/bZLJ9tNO0Q5wMfGXCHO1XtrbDsMSSGCanVw==","signatures":[{"sig":"MEUCIEyBoqgi8wFBj5oZ5AVgV+6aC3C23DRrUEIgn/ht7dp0AiEAufCJRMD8j6i9UBySyQHE6gOsEn2q9YpV4E9gBwdo5Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTHCRA9TVsSAnZWagAA05EQAIV+fOH6UogCFU3XrtUa\n/pv7yxb3wDBhywKE/0yd8uscUhO3rwoeOcFYa0t/20wqBsC1oOoxgIwsItUP\noQRcbNRDrnWUxwjJ+mvQO0g44XMAeT01GEFcbOKnE7DidWO0XXQq5ZY3AtFC\n+Ayz4YWH3YDAQSv3AZq2gFRhprybsHBUxYGNiRbbFFWWNtjyvb5wBv0oWOrp\nRAMLiJpdopk841uzThlXetW3XcUm7AUzanEAjlWV8nGXD6ghCtvJ69iRQFCM\ndpgv9upNjl+bn1ke/KwI/jfyGmYQR/qyQZIwyrGn5O+kn+3E2vztHVOXDV8I\ngWwQHEwZRgg+eKqfZL1VK2eePRl+qFmysc5O4DDN6KkESW/oj89pRAYqrUkD\nuRq4ZD3NyiYEjEZLjKFWH5+jF7HSdMjfIY6gaKDDzhbhq4FZXjavjr+PwELT\n/mJQT0+jBT+CP4tCdUaxLYZvMUvujs19bnAc+zh1ttNbXIyHFwXfLvV9YtBt\n6U/IfVW1f1e3BqcMyvqecOfPIQ5yKEEh1CtUw8mt4zTPCH2sb4/L/lKPr5fV\nlp0CB/rAzQ41PdWOnK/SL4yKL02XJ9XaXJihJ6xgb1XEtQFKbaHaQonzfnC4\nWFaEDVA9RL9YzTG5IC09sgymG6dJBpI5bmi4uYSPRWfEHWzkAa3ku3KANgCt\nYNq9\r\n=0Loz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/density":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/touch-target":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5b6a46016.0_1620231366561_0.24393903540190953","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/radio","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e27fb2776ff5700c496d3aaff539364b314b6e58","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.33c9a737a.0.tgz","fileCount":42,"integrity":"sha512-WzBVpOyV1YhiO2p1sIVypn03x5ODZ6CyKMqyTqHbu77hWJQaqFxteQLUDBwnTTm4PG/E9tcku4EtbyRYXBjpgg==","signatures":[{"sig":"MEQCIQC/vn52OnWtJ/8eF6H1CdHB02rzZcMeVLjN+oDrMqq4kgIfMxUGrZO25ODO9zZ6I8aAcWlf2zAKMHrttdDmBe7HGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVlCRA9TVsSAnZWagAAAocP/3N6pUb1beWtQmC7kLVe\n8j30ho90oflxbKZlcksWkOAkEOu3/7GT5rR+5xnQ6vHO4RCkML3yXvWcwQPa\nBDWoUpC8aSsmnDhusroVMaGdf3WdkQZPb1DterfgtQzv1kryIXVkPfbAi0Z8\nxyRig9GQ5PTlgxSVgGwulJvQUGHrsEvNedUREqtAljJZu+2av4yJzwn8hBst\nE5NoHp4DgJfnOhnBx5pNJdAdC4kyDH6NhnoHSGsKG9p8jlX9+N8jpP/Joc3I\nbh3YQ2ljhskMnQLGNnYAWlMULWZE8mDg9+b2CnxuQwqda1xNTeG3rFgaRvsd\nbhOtTCh7flC5IvKTN0v1zJbKCD3PsYb2WLDGYeyrQzJ/Hrx5Bphv0b50uYlw\nOx9/ehbx8coSrDgfJV8SUeGT8s+AI3OPTD7jnPxkdb57TP/uNN2KXP4mAlUO\n4+ig4YTg6R8vss6DcxQlxabcqXTZspfUavWGUdvdH848PCQ8Ua1wR0BC6kR7\nPxCn9UTWVlFlBOXHOL60hTMKimWmw/P3NetOnecZ8+mkcKzTrYvC/O3WqTAd\nA7IPhLY1VliUm6HFl/oDZ0u2vLA5/rrOnBkbSqt/QA2F1PlaZF+RjiinuMVL\nWOBOiqqh4lVkkStgsQU6VIdqW3R6WKFqpglN79hO0+kawyuVIfbidO+RhSld\nSdAg\r\n=MEyA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/density":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/touch-target":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.33c9a737a.0_1620235620558_0.760376135481728","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/radio","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b49788d67fb913d57757b8562ccf3aa2b34f63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.9bc0effaf.0.tgz","fileCount":42,"integrity":"sha512-UiO3qHXFL+KB8WuncHqIQoxA92v+oZQ4d8Kg2XYcEDu7xKL/fXqT96GsIRMCjvUIFpsUOhHU9JRrAycfMA5cSg==","signatures":[{"sig":"MEYCIQDKq7b6ggrO69v0aU5bhWb0UvKTRM0Tev0iHC4YNZd7/AIhAPDF8e4rumm8RQobO1QZNGB110t+ITHM/a6XU3OXMb/z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdUCRA9TVsSAnZWagAAkgMQAI9ySA7HTuwa4Q7ZU7cV\n35zQEGWxs92UpqIRClczxLkx/AGk/DV2PgKl436mvTxj342vX/OpOhoAe8TT\nXjXoGCBzFfe5KkcMwuGpNjJPulpbpmDgWEXSspq3fu8f4xBdh3VuuVALTAWk\nDVR+YD60ltQpfB12PLXscRSaXzTEdoqiikb7C8MXl3250m/GORb4dnoVbG37\nMt1rd1HOHHy8tBduVStfj0yN+vUoBOxPkFGv3JnLXAYjcMa6ovVlI3fauhoq\ntWjPFTQ+XNeW7kwgmswtZ2ayMGv+qdAqReKjDyfIn+7HyM9WhkveGGLjhJe8\nrdKmGvOVnAAfErETKBn5ErTXU8cWIjvt6fPOrxoA8DsHEgfPKShtcFRU8L1w\nxWPMRp8VRLpj2/m4WWubYDpYLFcul+9PZbOs94Ii3VEUA83/4bEJtBoc60Dn\n8PU6sf9EcfCQVxs1R6FRiCkJP3aMzvCqw7kjhUfmLJwUQGoxjGXOz/k7X9cq\n0to3OzOWqIj9y/uB9Yk9nCePuIkrJP0wwKKxH/92sJaL8AMqznoYJT9VbX94\n5GjccI3REJuFsQ2Bv/5qsOYhcZ4qhbWq8B+yJGmA6WdAV3PPEGlpVH1K9hVm\nOZwATgdxy4wWAQgtG7hPh2wqPQCrRi066lFQmZgixZ4/D+E7B/Cy5TlLSsCx\nzIlM\r\n=p0cl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/density":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/touch-target":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.9bc0effaf.0_1620248403953_0.17621783528677626","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/radio","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea5a88594a16b63baac99e58706c6c25c76ef1ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":42,"integrity":"sha512-XlUitXtuucFHkvavoKP1p8206bFibzGLizos0jiBAv+nu2dIyvXNnBAXnyecD3FxZjsJLKRii9yUPEYmnZ/S6A==","signatures":[{"sig":"MEUCIQDjLKy5/7PWe2fnc+EzqFyjyTzUT1xEZKfy/cPOZlEcYQIgSMwnZtf5whTsWK+910HhT9JwJYpA0dQUniWYwdut630=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDcCRA9TVsSAnZWagAASLYP/3niX9hXMWg2fcqhbOxy\nYvgdS7i/zcPYW8i5RshdCv6PtPhFqSoAJvb93iRYJ56JQPkic32vx077fKgF\nDyQyZKKUAkMJAW9vM/iMdvVm2eeLwzoPejsBHqa0txKiiJGlFxIfbwDtbElv\nQKfH0s3FAIMzilwhu32h1CUmCKh0pmG3CQsd/jQj3q+z9W6CIPf88wvg1ior\nO6OJwFxYqeWrcWbW5zSG1WL+t4MaRli4ZJJj54BsUwvksqK6RAmdQE2CcGVy\nmxrrE28sBUSu15rdkeVI/KpcFrwBFw5OCLU2BlY4WzpKCC6xH9EVDBBog49Z\n7hRfYhS/hCUgWBXlq1D6DmFMnHo5IcK+EYW9KnQvRs32vtov0FVdCMPzbuS3\nWEhWXEqqX1kJGjmwrdzeMmmedx+bL+S1/EN6BT+ObdU7q9ZDAHsURpbXsbxt\n0sPQMvKjz9ev2XgmO36+vOStUU+DORQ6tELMpkI/LydeX6ebjwLCWrDzPsVL\nw/5Utz9PU/I8H7X5KdGpjVtA3lB5xBO/MbPJ//P9/rIR8yzeRy7PHMz5j4Dg\nNGXZjAmPxOadm6a1vm20tEZmtJnnL/hT/5LfxR7v8im6MuMhtlXQARbhlocK\nIiMP8yEfOhrQuKqzxm56ry/NQvdyNwA98tDp2OTUZO8aN0sRe9IDnuGkXTtO\nBJOl\r\n=K5Dg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/density":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/touch-target":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a1e0f2af5.0_1620250843390_0.18857817287462497","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/radio","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5db3a24f2d6d1eb870b2ee3f71e0f95e3f1002a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.06930c96b.0.tgz","fileCount":42,"integrity":"sha512-woYVMf1RbAK5jYOSVp5gw01RdnOOZl141GWi4hNtnfSHd6vUMRDu1btNUHATk23dVmDRCYJjh90g+UwL42zFdA==","signatures":[{"sig":"MEUCIGg6M/JuSZmcGMg5OrB4mJLMlF17upj3/NUsnunKZ61xAiEAkPDXc3EoFE72FKGr9PB+Hx2o1mYskKgIntPjdWPEvUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyypCRA9TVsSAnZWagAAtUkP/13iprOLQAXKNo/TNMx8\n7T895z7VaS2tVD6EjcakrfiTQjUV/eFbnOGPOkrRp6Pc/P1Ub/YmT6gkdgCq\nPobyvg2wAqplovT/bi5JtxhaiI+fX97dEgc+pBH3Lnhnxciax7fvJc2ZqiZl\n55AsB81YiHDN3Akzznf0gtENp4ddiGYC/+tmF/unCDzFsEgo2Ihc3RlY07yN\ng8+ivFiqvjiICFGuFO4JG6XD13fetFjhg5SHLE54ycQjbUwIWTQzzXH1DKwx\n3+0ddGbrypoAiYpv1pSWqhilS8IvZwgZr4+SBYRVMXHSUUcstzOAN0QSJwuL\ncu40G5NDHKTigQcb1YtKqeRDSLDNA8TkEMV+feSXxrbbez4+TZgIJpIHV6wv\nTIUxf4dmsAi+V+vbmNvIYR1wopXLrRg9QA0sajAfYJ5BQGUauec63Iyxzg2x\nGB8IINY1s0YvVlWU7nDMKt1YIsnlgLOkakSQMnldkUpkcps0iNTexGR2VCDK\nQELtP0skxqlALAB7zGBUSGcBEOCgIQVTlh8fM8RJjZU7UFsUInhpnp3MTQl6\nupksSo2JGbLEoBq2EME4gLj+MomTRGskwBT+9/ri3ryM7BZpFc2d8oDq+z+0\nJ9OF8EaFJFxxV/l+fV32Gf2JlYMIg6W/lw+mLalpmFjBEKTeqetaLPwACRzJ\nahZQ\r\n=K+H8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/density":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/touch-target":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.06930c96b.0_1620257961007_0.5884820546592047","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/radio","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fb917da88ea0567f77590ffac57cf21a7792b71","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.03f525f9f.0.tgz","fileCount":42,"integrity":"sha512-vz9m+m5HLnpnhwIOO1x3Qwk4EYrGZz5AkjY6C+dl/AGbBDPPfiCrSR0AIZ6fUkTVeDIBx7QkEv82aFXLJ6ty6Q==","signatures":[{"sig":"MEYCIQDlTscjzltJQ0KqasmQcgTdwEhEyGU5a+F0fpvfRqXlnQIhAM4hE9WeomkJafXuWRlfScYari0IQ6T3A34M9amUswEN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzh/CRA9TVsSAnZWagAADY8P/1upF677h3UCBvbYZtHL\nc0bcySGOwmsyEeGQ3K0w/Epxyz5AAAaoWDP/0yCfmUjuycWk3E7CodZj1je5\nU9872j2S3rNoTUWIYlFNrVTWZtzzy4mnPgytd/opxZaLUv4grwuy6JnMWMww\ntvWpsHAQIq+qtzce5aLYWKjAsj0ivYziS0ogSzyMPCQHMat9YYHCSGWBVyEp\nbxw8Eej38DPZS9O6/VWEjHWHzWf08SLk2WO1OEsFDXLB3U2s2FTeTxEuK75e\nttXZezrWCNq5uGzDBx8GHRMxngu+0SAaTaN/D4O/Ecs8bGQ8lFCLB/d68VTR\nnxIQH20bZOIbm2K3aye/zCmbRomQHjARQqL8bQaptJDWGMtVRn/w3aGHCdmh\nlO7bGX79+0zWKLMDoW9vEBUdYb/Bt7j4WGLm//WZWbL3PKJ1JTmCFK0Ytx1B\n6dGZC4xpABVUZI93ZHRjDTLEhzWESiX0broI0hmJG0mp/0d0R9ytMrFvhMcK\nCOYkGAEJ55eQD54dM5GwaqoAMg6tZ9fQ6zLt4PAm1E4AN1waIBACM7YHLIzZ\nf271S8/HtTGPMVJ9dmNRtPD5tvuMbkrr0TQnINeO7+yV+rSeDWoc7Ju+Bdwi\nQ5DMxwM8yE8qeLbMahMsJp3xb0vye/hRKH6+csLc8s7uqcEQ+0pxsPHnbJS8\n5w2u\r\n=chz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/density":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/touch-target":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.03f525f9f.0_1620260990819_0.5715364674154539","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/radio","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f546e1cfac9b4818ffba217a626aeda3ffd232","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e82ba2a26.0.tgz","fileCount":42,"integrity":"sha512-y6tujaYUbpge7RhnZnH4nI/84hD4VaLw0NfYph2TcDVtejWLqcTOFqkQpbK+C29x23o0nmmDMchSETE27IePKQ==","signatures":[{"sig":"MEUCIDcDUnthCyQqwqRrxAcj8RSPxM/R0IEhLKjZqjwOuejNAiEAsCX4cDFyrVn+Hg6+VMaJP0WhQ+Ua17f8NULXATBPTwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGpCRA9TVsSAnZWagAADgsP/0NTfvyYePH0/jAfEHeL\n2+B5WyXE4ZdVUSAzhe/+HyxUvn5kETnVVGpzSHourdrWF9cCDc0VD6/7TyYp\n1uc0GsDG3p0kWIwoLJnXtIfoEOS44U7rUPYa3lwTBpzqE9QZEodmfOtIlewY\n96PVnglmg+j8HzcBKrxVoBtyBHhEP0eOJ0fcjt7u1xmEfQCbwIfShGRvhl5N\n+Lih7ChFhyft8ykWxCyun16LWC2J1Z+UENRXgAqAMpqRSFYAMyL6AJeR3ovI\n5e2l3reoiwEzwExkimxHknMCF50Q9K4DggvhdSDgYEEmdVZBeZDJ2MAgHfqj\nQXNQfe/l9XT9FkctLjNnjgd//0JvALDkWM4ypTAbPArYZ7wyp5To4aXC7I2e\ng5XJbX4MmTVhKNANmjUoXj9lPxE3KuHY6IpWsBaTALpjw9Bx+75UsO6CMEpY\nIkWS+aZDy2k6OZvaFZIfq8DuMuFthhX83tl+D4O2ggby+dc2wlEeH+k1N6jh\nVx2sQuoE563RZjZwCwMx3tDrjpyJSC2U5yPCxfVfbhOjqwTJpjhV6rnQtfkz\nto/37SG/EZ0+TM6PdK6RZ9F4BWPOxGp4p06hZZFu4XMZMrZ7xAYioggj/48c\n4vv2YRMc6rqQg2WtXZQpvHi7ITBfbA1dahEcPqlQLUnOT5ayRwMs/qip0UaK\nI+Ha\r\n=pxO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/density":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/touch-target":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e82ba2a26.0_1620316585196_0.9911822741105605","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/radio","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a7be0f4a837d44e9e36c7b5b5c247cb78a8c504","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":42,"integrity":"sha512-4qCcZGs/vew1OckBPqY7r2lgdmuB/IdwB2XfzFzUDTFRbE42yEyJk8+NXw7wZFJp3mEOEic6cM4PVRo9XOS4QA==","signatures":[{"sig":"MEYCIQCra9PFqMRkiShcpSrx9aQBoHeV10fPIku4n9F/Q+DwbQIhAOboxwhfSlSJ7Bz79ugkPNphPhQgGaOjR6/pcbrD5GMR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdnCRA9TVsSAnZWagAAAMIQAJ35hDzamiBq18zI877k\nwFENnAFC82IDMTquIxjWnmNf3jlI0EZPCsaTSzkYaXVMHMEJwxnLxH9iqSWb\nIgvYj0BW9gQL2wXTmEibjtFRIeyq+79vGostmZ4VwTt6t4+YiZJ7TRY7WKJk\nwjWD0x6x2twp+z1AShivDMI/rJKJuFDeuEBF5QyXAchX5xTnHzoJIr75I7Go\nGLO7+Op/QoaWqG04lyS26EC/4yGGXWA0B2prBtbnwVTpA+N2onw+ji+IC8Es\nFrq9nk4NVBIxlNO534jgCBHpxaoKKxUZltD2xoXg+G3eOGs9vAJ23HpSETKl\nVNEe2x677Galh0hsFIGrkCpM8ZwrIYcXrUvCQHYGNW3zKFUEUsAfGV/J4AKP\nN4Clirhk+fC6nc6jBZFGmUALDI02qqoCKz26ereBwBrygq5dexvRDDkt0isN\nYo7smiFh1vqzQ1eaO3+RqNOoFPpXBnEN4WFK1SDtFo+BsltElGfWkE9SsE6V\nQjZ97Oi5JsXCYSwo6TaG5jmhw8pDQMfcSEI20cpIEclR20nHKl/Ca11sah/h\nXqf6gM9wUwGkqwoKAC3kngfW+YwhmoHa3wOq13GJdVI1ZOrgkVxHf0JfjUnr\nescX4rV4UgMzedOcQRAWagWckswi1qqFOdkuTCTIaCAtNBzJUw1IbyJFkoyQ\nW5Nd\r\n=5XwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/density":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/touch-target":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.fc7c4e5ce.0_1620322151289_0.9390809516582574","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/radio","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"814a16c1dea170e89cee91957983a75e0ad5c623","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.65c04514d.0.tgz","fileCount":42,"integrity":"sha512-5tisX9Hob+F7UdUciJ2q4lHENk75IKWdp3qIHP2vpgnqbXSwThYxyujh9TXQdhiM4ojgP8eL+xO8N3QR5Z6XMQ==","signatures":[{"sig":"MEYCIQDlfyvIj1xTVFd0p55F7lkc/Jan52J+sjlqOc7X+nS2IwIhANZDnN0DQEyBGVVSWCcWepsc6du9zl6A3/4lD36orEmC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjSCRA9TVsSAnZWagAAF8YP/0CBJMeVenB4/yQxgNoK\nbt2Qxwx8CowRSkY1YDaWLE2OgA1LrKAUkiqMk4L0b6oOToSw9UMgByWPbm/3\nxyZlr9LZYgzAaYAO+Le21LQ1VVp1KEDU3unXekE6hpo+uvzs1xAFdgT0DKrw\nQM4Gm3EAh225Odi86inyBkJNPJt2IyyY+FJA1+gsh2FsC8wvMB3pXDU5Ama7\nJqd4Mt4k8Z1pKJAvHI2nL3EIp4KfI7N5SSD67AsLoSquTd01JD9gZG3HVCXA\n87i/Yspr1tfMtikNj+eup4mQdBgHr0AkzX0PZG8Bg544pHI/nrtbEdKR3rJr\n260YW+4X1LVtRoGrfFAn9TkdLe3+krEFD7ZFmhhYVUuJpiw7tmYgysAVYdDz\no6rpANNZ6KYV3LdbGwUQPI8g1aRpef0LCOH8pX3ZRrYO//SEXUtlsHs/as7L\nYJDAAhZJSFjOpswHyhUcY7Z5HnJap9qZEar1wGuO0tfhNyZk0P3pt+0cgfqt\nPsolxqFwZVba7KTpQbBGQp1K7RteMGeo3UdFkftAAY8w3SPpUvkGX0iEbunA\nVjOD16tDrddXRPqEv8leAavq7Ki94vBB4czm92KqKTWZ3bRqsav1UHcmi18H\nqdcTfWoNQ1DYvjUyLTjCMtODKbeqEmDB8/K/j89DeUTZ1QpTopyz0RK5Nvb8\nuQ1G\r\n=ItG8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/density":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/touch-target":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.65c04514d.0_1620326609722_0.17392667406107254","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/radio","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d85ffd649507adaf67c5f92452f921825462433","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c97779ca6.0.tgz","fileCount":42,"integrity":"sha512-j6lDrPA/+rEaT0Xtqs0iBi8XmQtUYFgNbH4hliyrFYc9+qAaW+PsfMAlZyFtglEOwh9Rx32OcygrjhjG4QPnNA==","signatures":[{"sig":"MEQCIDutZjP6AiBK8HYCmhI2GaPGxHjdAvaebecQ0uSw8IRMAiAFzm7kRTMQa1KzQUImX4fAPa7rjZZPAHFkC06cJD5ulg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLaCRA9TVsSAnZWagAAa6AP/2KOhM++m33dSiZMOaCX\nyfwrBBEe6pgZUlI1Z83NQMPFWwwiZTBHq45h4Gj6U5szvBxBpIv6KHUbJwuG\nAAR+B6zrBF7zLh/iZXX1t8d4G08tD9wpftrwUYkENmu2CB39m129SUjUmTpo\npupoEEx+4dhk7tFfhX6BCRxM1bUOwm801JE+YLXsFZTqi0dGkEI6X9ARezBp\ngEqgmVF3yvIH96Azfw2bl+8dRaMHXa72GLNOO0FcaBqsvr+WCaJCuDSmCSgQ\nJYeuP1Y1mZhR7VRDWqgs5wVhm1Ue1pucCIhS7OMOw6PFl6hiUuF86N/QpXM7\nlkB2r3I7DXIZVCouP7LUUY486/UdejII/byaEMLv7wQyjBEU0YJsevhHxNOf\nLIS+twCWWJh5MehkI3GmX2SjzfU7PZBi9/5hjdu/MdQbGFPVQ3T6/ihVtQqR\n3lK6HlBAhcnpF05ZyELIUJZtp4zuyfvJqI1TUD0OHDPDU2GOR/sdXCkp5Olu\n934J6Mc99sg/pxKyDmTqOAlVCrV196Px7EF3huh0co60Segk8DAsXbuJFvLD\n5dvpGfmzLl7jgCsX6o1wRhK7oWluORvAeTTVRHn9Gyvz5rX6mwpqgRnVo5xs\nvYX3rSyFwQJeK0h6hzEwwM33YL6DIUclEvTWuFSk6uH++OtTjI3me56h6IVn\nbBs0\r\n=LSB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/density":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/touch-target":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c97779ca6.0_1620337370118_0.05008164760885658","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/radio","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11d888e579d3df7ab4f01d3e3951a7545fde937","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.869d890d4.0.tgz","fileCount":42,"integrity":"sha512-V3FiK1RKny1E8y8mkz3QX1EpQl6SSgzBIWjM9SUTX2VGIm3ODI51iTRQL7Sc35FxbAv8w1g54hUWWKs24LBhBA==","signatures":[{"sig":"MEYCIQCAa2A+cpdO+luljId/BGl6b+UM3mXUvoq3CkkSL0dDYgIhAIcPmms89jqzAGZcXPUpIgP38VMnU/S+oDZ5mrITvHOy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpaCRA9TVsSAnZWagAA8dsP+wQqkPq72UY9xFCUOHOu\nVcAl9jxPdTtCiisGVt9fCQ+JzL0kwMeKDz9DqOUy8aekSVALIff9Bxuxy3ha\njFhdJRXmg13Th2nSzMXq4bQ3TPNKVhMvfOrJSV6YJxCyHVDXX1NYGZjeqpBZ\ntrU+1Iu0S1LRXW1XQwLbRzzr6CnLlg4vO1CSi95y/UweH7XeXVaNhfNlMVl3\nlJhXv65fVeo7h94OW4KiwKDSYAwpnLM/pt14Q4cQlgeQ0NoU5QrBpO6Pp86g\n0S56SjT1gkxqUtrrvvzdsaeKhL4qRy3ASRvK7A7YSxzNk5RYYkyg0Sjzlo95\ntutMv3xulD5azjTyVkehZiZRO9YanjshITlVrv8Eio3PXkpXQtpomctLYAtI\nFJgEpPV4QpreofkKC6PPLFjL2vTpUt3Cmg7Z4YK347IgI3B85rtC3jL2BUL3\n7yR85va6aNmuNKvnmy6I6OSA+DAF1Tday2eQJu0x8R8nqg9Ip8UwHOEzgwK2\nEfXUYPwEtljGtHHjLMRLGUOAy/gbd/HQBoG3zbDWzMF8jYUZwUSPeV6RGfUb\nEXHyCMRf+4vOgFhHMZD7mgWPZERVP4uXd8IlQO1sD36mtVhxf2npf+Kkb3Fr\n8mDeFZYcz32vOtd7G3Gm/cqkDOeX9SbH18WZhjBKQ/Th4PUKT9BwPJN+kyQ1\nYKnT\r\n=y9NY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/density":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/touch-target":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.869d890d4.0_1620400730209_0.7827707030763549","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/radio","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d79ae96c8bf2da9a586bd0f64bdde0d826e6712","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ec22e1da9.0.tgz","fileCount":42,"integrity":"sha512-MPFxK96UV0z/BECpBCh3DiqSouFnW3I/biiNIj/GTmd5fhpxeaAt17S9tf6EUhufO5MvgEIrWXJY+ITWfS7Vgw==","signatures":[{"sig":"MEYCIQDQtKAIuEm6h2645FQpiewpoXL7YcYJkQhj5chxnZLd0gIhAJjtb3cCAHI4mI3JsgIv+QzrN+DfpkaDvE4m8TcOiB0/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoZCRA9TVsSAnZWagAAl30QAJc3u6fM4aBacRx1f0H5\nXu9VAyQvzEcmAWARZ26r9ZR/dgUuF4GTtLQL/YJ35ih/S8XfjLRcu1snb1Mo\ndpDD8Wn/blRLduowKnXbMaUe2hCoX+n/6NByK9/f6vKniiybeDLJ9sI1aRlW\n8VZO7nD03ANWj2uzU/Z459jplfD+dXO3wvOUfQ8pJmvondm62fUdC8jLJY6X\n9+m1VWpjCk1pPhFqSq94DS7/KPpyWWHJZPVdGDuVHPPg8XMqFPs406vJS6R/\nqNpNyKkSaX74Coa86O6kVKAcl6WT/q/ux3uoSJdWCFcTI7SpbjsLCnCrzKn/\nwHAQQLiUo1355GQDz0xmh6U4mUPSnl43QvT8mtSt+X+5qmRFm1LkTNq50FrU\nec0xnsYrWRQ521j6mzoq+Kzarn1O1l89/JNgty6/qkVH7FR+ZcXgBc2tglCq\n4O8p9j+MUygRdvN0nf4aGlC7qIFlUMsZA5IEg/CqsSNF7ZNkQejhU0dmEvCu\neq8HKK/ckA0YJRmcn6h5+tWNf1wJDciBvwkulfbpFDUK0lE+JZEQMw165bb/\n3zyzj+fdq0F8YGVa9d7XXtbDDEi/NwRZvY9UHmBN1ILIkO7OyznIdIMYgzSd\nUZf8NGduJCZ3t1AcWiA4KbWJOph1NYxrAtiztGeA5yvyQsdUd25nomyfi35Q\nKVY1\r\n=sBkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/density":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/touch-target":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ec22e1da9.0_1620671001027_0.41598923009135325","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/radio","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bac3326aa8f0352180b24ea4487efdd181058648","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-nightly.7427449f0.0.tgz","fileCount":42,"integrity":"sha512-saYWgQAb0NP3mzuMv7cX3qXXX0Jhxq+Z0Xl4P9T+T2OkSrLFN1xnfYmbrBnhTvcjNYBFuvLfiyOJ52Fh73d5vw==","signatures":[{"sig":"MEQCICKJbR98OL6BH/y+tSMhsV6JMjugdbUbOAxb3/iR5zHQAiAHVeGZe4py3dypje6NFpD+Ytu02qxFhQMaZBzj/cP50w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8xCRA9TVsSAnZWagAAR3YP/3NGDY5S3b6ecsyaXswO\nrajJrgA1LhRDdWz4XqVu05JRLMrt38nBzoVpvE6Mcv3u8itrJC5EmwPD67C/\n7RCHQ2cdrWsOFykNR4HGQwNtCXq6wDYvUtXcP/fPfPx3ENVw5RF37oSNqroM\nkX7TZFg9iqAleSZT4w7F3rCh3xgYmzKEjEdk4daPJF1Tkzsrt64lVlRT/dY8\neAHEc9kGFbomSGf5CuMaMfXYa57TtyuloHyqzfYoU3BhDEhJoSkSxiHXu/Zd\nDM/Rn+BowpE2EKOH+MwGfNgQFABE9muIg2xFAID7rX4axNt/+DYyLya7M0N0\n+QFLUBoKTVXXqDGLHRPRTAtuNp/lePr7G+7JiczExyPkc2Mv6PV2UQZ1zviU\nYgUF8gXgcnc/tMhexnNvSjhjWlflwc2NvCXmOReN3Q1ATuNWsE+jDm4vb/05\n9jNXK6do4V+2lfQmgQ/lul1ngsdGMs++HwWDXuBjGVKlznqJfNIwVXHbF4kd\nyxjITVATBNhigAr9gNxJ8ZyN4tDoIm2ieG1ZvMSi+EHVc8gcgn+WbZYOak/j\ne4qlDJN7kkaf28tDL3YgP4+WijvbtWMKb1RZLjDuCOA0bKfaQWDezeogcDD5\nkVhKzDF68fF47kDG4Pj1maMNnHW7gV21scNYpaXzHX4eOVkmg77HLyocZPuT\noiMv\r\n=IVHA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/density":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/touch-target":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-nightly.7427449f0.0_1620672305055_0.8141309184713952","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/radio","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf9333b339ecddbcc6f9d68981cf97a5034e64b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.957cc3bf5.0.tgz","fileCount":42,"integrity":"sha512-D30TexLm8TGB+g6D3YaPU8eevjR3Fy1D3gT4khixfuzpZDaHb72wlXiCbcwbW3fyOWWMAh2u3tk4BtUq8UeEfQ==","signatures":[{"sig":"MEUCIQDhg886L4qoc3l+ztNPXF4A6ImrotlthgfGs35MgPCO6gIgPL3Rw2WcWvMZP5NIr2E//BvRXeK4et+UgkP3Jdq7t3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawTCRA9TVsSAnZWagAAr2wP/29x3NGvlNGQvH3u5+6R\n2zeq5Op0QTTJIRRI86S1Ad6LMF9/otwAY96CzBhcu9pmgEhEJ+/WRuBG0C/7\nAUpLKvRRwJ0H0eiWRH2brQFRJ2pBcqF+Iac13fprla2xIlb1nQwwKCdmUH4b\nuDROi9OQh6ywxuXY/6SgTbCRLKfmK+67ZRz3cC0hWGKAIz6gkKtcZhaEVlv3\nIEwSDdT1arOscuzcP74f5y63+B5MAkFc15hf0kLhTVo6k8e3sVNl9QB/zAur\nVx1pkHOwCA9grRtLuNgAhc4EJLw2ryw5UAcPSxH11FAAVGR/bTjUkaQYE2Mn\nDA1aQDo+xg5ckfMAMVLy27nPfFWHZdpEbhVcCEBbgaBud+jHHsJp/sR4AzJj\nENLtOKwnKkuUW5kHUmUxjRRJkeV+ayLSLW1ogqeTvBbsg2qtoKhMCf8rb7fc\nIOdiWMwToC96f06STUAAXKfY32WBHQygMZ8qtPgNVhZq6l92CyWdHv4pDjvU\ng2MgphgFimhE2UXnd7RIccIfhz+nykv8a+bVy+Ye7vhD1nOaRqFM0UtyDGU2\n7+lsMNqpalP8Kq5f5gZ9uvGH9P68ja25xA+svWQM9mFHdvJzsPVrBqs6VxwW\nRAlSkF+ckFvpwSlud9eKA5AbOfGqe9MR97PW7bpLrjmYkcV9JG6lFSFROhyU\nGqm0\r\n=xa+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/density":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/touch-target":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.957cc3bf5.0_1620683795276_0.0772178505948673","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/radio","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3096c553a17f2eb7fbece70cf6877f456b9c4b3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.88a33cd70.0.tgz","fileCount":42,"integrity":"sha512-2pkRDDnorHOLqsPM9KkBLlzygPNgJgL+ivHWnsvJTgvOGb6aJpQiNpCbqka6xhXqPWKwurVi3uYITolhHDs5PQ==","signatures":[{"sig":"MEUCIQC9h1G9JOd+VbK1b1NQgxBb0ju7FdkDYLb4Tmk0owmgKAIgFvPS6pt9eUrLR6bD9sswotbBp9BQY3BMREpwFIbB078=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsMCRA9TVsSAnZWagAAizAP/3js47Bo4scwme5t14RL\ngSUflAKDqemaEvZxUjItFODRWxCzT5Ywpcq4cewz35inxryqaJ/yVhwdL7jS\nn7prKfICRzpRN7p/ZI2zzJH5pZPKcTITT+9gTumztC6KRKxRrWBVcU1L9R7Q\nPGB3PlpS4uCxBKNQ4NVdxOMaA+siJQk55JMjPouuDLkDMJmUQsdsE6ELkJEb\nvQ9O6sTJi99kxlH/uoe0f6cCiwzfTDlrSPl70fp+eVs7/kuUhjJQvK0tEBRe\nito7V6/qshGQtxASMaAi5kSL93fgn+U2viCqUmgoxre7RYl38Ff/k6P4bf7F\n+yyvHseFeOgz520kNl3Mto4Pl1gF4SXfycOP3YglWTSolsWvSLJ9nMBtDWXa\nn30qz7F895mxIlKAZ4ELsSFmWfkG/Zavp4VPCpVodzphTUDf1FxssZTIR7Li\n9qd3/6+MRaSFu0NY+ME5rGQ49SiY+rzvgYZXpg95Md60hobNaq1f1KhME7lC\nc6LJkk1WNZNdPlgt0UCZ2iUTg1xg4BXvqq2+86PZ9N1TezgD+K/5V6Vr/BOq\nZqiOtI0vwlqsYFi1eCxoIceKXTYGgE4wTd8n7/DyLQPA/Kbk4ksxAUFcAxiM\n7GEA89GMs0DTAgDQ4BO4CcANztAXN2+xsAR3ZYOZC8ZzeaFB+cLcW7EBTetL\nVzVA\r\n=mnDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/density":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/touch-target":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.88a33cd70.0_1620691723681_0.3618112580261077","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/radio","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d5c31a400abbd73a6fb703a964cb36c47c05d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d20dc6dba.0.tgz","fileCount":42,"integrity":"sha512-GVDjSMYjjiDc3ZawwOXKC/sIncs6Z0bvEm/+Hp0ZwX3WsHsmSKZT/8iYANGfc7CdmmWdPS9p5l5UxFoFymfPrQ==","signatures":[{"sig":"MEQCIGVUi1huCwXigoP6wOZetXANJNaE9Ngq9Sn/sMm+hYthAiB8MCPrh/JZwOzA/OTH6Rv4UzK6L2qGBAS1xZqxrdcMBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7NCRA9TVsSAnZWagAANVEP/iVsVdOuDUrpLf/2wqwK\nAOhIkP3qTcq9k0xgb9qemr7RAdow4QbQq0wyRtoEtD8fVWlFFkgLcBzxhemp\n4cW6RlrIxARrBgBSnWu1yCu4q1sbgA7SLbzozdTmO7Qo0ql7e6McxWYY6nhg\nNDnAEsLHIN0Pga+rwmuDh7mhVmsC4aWqimiKjdXLUl2M2Wa1XFK78m9bOyv3\nlmNyhmsJ2bAylhvQsuCAjuXOk8Qm1fCsb1mCnm+ZXALhGsmnFMT4iT5rmcOs\nOPFKO2HPsAkTtM34brOjea0TJbRk4+06rjMaSeMZMc5s2FqsxnD3f4ES9oGZ\n++7G1o7T6us0x+dSAsHzTVW9CQMNPf7QyA1EQmePeD9H1SEiYUgEoN845ZSw\niZmgktAKXJ/Y8AvuzromjXvBLUKAp6FEe89Avz+Cyw4MwbqF3H3tT9Eey0Xn\n7En3xqPnB66LINCzI6ZvwPkRIOQXCquQy2KzENlvmTFWkY1+xyoLa1GSNMv4\niHxEFyeXRxTCIX2FCXMeNARN/nBVFE7YUxsna6OFkuWDLxq8nv59cAZZP0ck\ngBdWQ0qG4FaJ/lvCCOnKfde6dih2VMV4zQuH0riEmxd/XwE6wlXrev791Wgb\nY31ljTEQqwiMgVceS/nx2QwgXYtruRHXSBIwLhulGTSVCD+6qEMLol73XklL\ndwD7\r\n=rF3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/density":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/touch-target":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d20dc6dba.0_1620692685450_0.7923561270872215","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/radio","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b850a0c5a639b7b8a76e278d0d72bb60fea5ec8c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":42,"integrity":"sha512-wLLCVq8zIf9QccCUNgHizXFAG+cJ+h4eM+gy1luPOqgeL3GwbLsWlesDZ06XE3OK40eItO7CVYxtq9RYAKgjBA==","signatures":[{"sig":"MEYCIQCAVmVuXcYS+4Q9XbnHxihKNtChaI5UwSM/wY0+8VPhSwIhAJP6wJm4BKRSRhtPlpxloXFHHePJABHG94YmtMb96rhW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmda2CRA9TVsSAnZWagAAS9cP/0XIAex2P99znewkf2h4\n469ECHlrAuH/TkYFtSj345e1VDf2UppvHFbeCZQvr+rJmyu3hXfl+kPkGo15\n45MvxJDsg4FUK7ppE4zlRjTfM9Hehc/vE/OWNtHUbpesZ+pOsmhGC9xoJb8K\nCdG4TGhqduE9t9zwxzqjBRt6MZrDxVEUPSbNTI4Hf9x0fuZeLMX8Ai1fD0rq\ntG0Ui/TieMO/jGOBMpKIrfTr64bWcBM7U2DTuUkDVPstTC5PBi/3nQEz3Q67\n3gcDinASHC+M7WFxAqB/R2VLuyvA9DPW8sFjpHX3hyFk+76lMo0B3AUfZ85o\n8pJpeLYqXnjDFsOVqbLj+U0b4vksG6dAeVkOF1h3ZJgA3ggBWDpaB6BJjkbB\nGE64qJDuW1WUj0JxykeBN24Dry6+RxKGbek4g8XPaYvsKjG4bwW0Kxj0H34R\nm8Lu6Wh7m1//HT50e7la+wmgUfPKfYziGWrBuSjklFe2cOyFwDdFQ7DPw9XN\n/yu8qsjyB4CV0j8lA7MvZzC/SV5wjNKUQSE7cU7d1QIUKhDD8cXu/FQbr0bf\nw+x1i1vRnz0wBSkYbXZeayLSJa/aB1g3tT9doX1zIKtrFBACVcDf77rAxztl\n8AB9QkQ7G+d/ROJddtdyICMKKrPWXgX1F1E2Vx64Ms/4bAzD8UjI7M3SljOT\nUjCm\r\n=mMh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/density":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/touch-target":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.0ce2fdb02.0_1620694709624_0.9089234659095702","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/radio","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a983746466c89aa88a0771239768afe5ffb28461","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.cb162da37.0.tgz","fileCount":42,"integrity":"sha512-n1trK1mW8rt5/EynKNfUkLdrmU3aVxtvjWa0/xOC1/ZQEnj0KocIIvxy6cHBP5Qnm8MuI4x2oi9v5GyK1oFFNA==","signatures":[{"sig":"MEQCIBE4pV5bUYWpzlNNT0kBIxrlXa6h71KeyXdYgFjQV6axAiAOwl2/pVeRzwnnKNHVfShuEXUEemrmDiWA4pR4pOvf5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeS2CRA9TVsSAnZWagAAnc8QAJeCMpNuZojb/hHRQE0z\n4ggsfnC3TDodQR9s8wRyTJgdse9gMxfZN1EC92xECoR9YpoWc3LYgUrBaDCZ\nFuzH5MOw1uQ27AafBKPV5ooXq6wUADkXKjisSuA/qv7sojP4dnCzn/ZXKMMW\nagnotmsSCwccV6YPFWt+cV2P5iQUI8ygwz0UyBRvLzor4F4rD7wtlzFweoID\nAieq7Z/HJeUmpYzl6wg9aCVxWlyjFSHkHUPQz2KAynM8h26JRvivOMleMpKi\nLuY5HVwp6HSzYJs61Pd9CJJOx5yP6SVB2EHZGjwmNd13kzPWbI4dvOWJyYC2\nC6xIdTcdSwnmfq8jKUvq7h/UIMBJlPR9XbcQmiJ0mTU4WUMKYKanoBQk4EcJ\n7aH+lahU3rit3GTsiwADr5+1xeszpwvxPHtb3WR+KidEpR/1bwwaPT4x/+FE\nQi6TMaUQTUo/4+62rS9AlDN+WcYT5tW5vCb2Knv5suuX15dlOluCoqY6gj6w\n30GrTf15z4JIO3R2NafQFvilF4tMpeB0QAToAFd71Dm9Fj/IeVhdchgm6QhP\nKxtjVDNUlqqN0fq/EAomwQkL5iNXrGVeMfoVQtb3EYMuqTFHtIOUGLqp3ZGc\ns79fWJSTSW/X4KR/g/NHYU3bwwwVqPMJQUdGYDMY/Ey0IHeY8RnJBOA4qtCf\nRClk\r\n=k3tx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/density":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/touch-target":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.cb162da37.0_1620698294220_0.7785241423710492","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/radio","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24359f885c855786009fb5d3a9692826f4acf448","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.573dc7ffd.0.tgz","fileCount":42,"integrity":"sha512-239aZi2RJshlmt9gRVsY/lzLwlG6CwkrHaqqDppKgNgYr+RMJ7t8/5PYk6nHJXYqG4bXFtcEszOWzWb6A1eIvw==","signatures":[{"sig":"MEQCIFnQFNKl+riF1WjfQ3CapFNftDA5jzqGm+Ffh2CHgy3mAiBpup/raOpTCXYvpGh0QPXVv420KJNO7LuZnKQqC6E3gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeklCRA9TVsSAnZWagAAHeAP/R7vzqi7/lO+zQu3nMwx\nJDsK13IazRpOuyw0jNyjmQ6DTALkVuekgSyG+FWh1Z2m/BMjj4+tgpUe2E3f\nZgbo0APzirKyyS7/N5CW7KSs7Jpg8iLPCo5+Q4jkj5vPDvcOWv8H7mJhdnkl\nLBPh2UOFO0waUL+zv7cGvv0Tjibz6PSTxtyDsUU/uI8EOypcMA/cFffvJmgf\n/KSY7bU/Og4k2T7sCj4EuVZccHF2Lt85XmhpX/0oWihqIKtKFZMiBSeFOry6\n4yyJhUBg2QdsHP33R69mFVSqR2vue8b3ocq7Bi5RUjqeKMuCjuNlr790FdNY\nm3KglvjanrPzFtz0094hPb63F2PiiC8AWfdAec+GpQ6JvN2SzaqBb/LJFCwM\nWe0XY4kzPiYwIJVrqPda9qNxJvekqQeXKvvd9QdpYJv5FA3hI3OkThOpO7+K\nVPDk8yLCiH/0fX7NxRegX79Tjpc7q1yzdYkmGxhlft6Ly/IbJsp7n4RpdSqh\ntnluGdz04k91topq8vJgO2hgM7rbICNCgvIkIUT22oyX4bwm34O/fGJFYGI0\nh8tKryZ7Ddr8NhLLB0F4ObavlpqBk4G8SiCajXQwSQ5N772vPSB2N/SGXUOS\n0ju2+1xwnKlyd286KkFt033IHGUyfMjS3AKOlT9vccEKApssIsEptrZRc5Vc\n2tCG\r\n=Nmgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/density":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/touch-target":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.573dc7ffd.0_1620699428702_0.1277651275084728","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/radio","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91ca5c9f2b235d500c7b467e2b0eb0e1166d20e0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":42,"integrity":"sha512-HXMfsYMPW7St7Y4zXPDe0tQHPe/F51NE2u1dBARJb7uV46K7iiaEBjuMVy1LdqgIhFb/3dCXYnL9trYm922jsQ==","signatures":[{"sig":"MEYCIQCzale3/dBd9SMUZzBMvXlfB2QaJGoPCsYEBaoKVxHmNwIhAIrhC9VsHqujyPkxvKiMb3aKB8L9CtaPkcHnZSuGhMw3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGxCRA9TVsSAnZWagAAK74P/ibUz5tEgIQWXYj1A9G8\nUcqmwAT6MEVdMdvbkOSMMgkcaYkw2EiiBf5j6bYkjhrfGUPrkIlGhhnN5/SC\nuwOGcow5c9I5bSDo6G+pq8Mr4qdh6zjVMyHxWT9dpt0qxl2aZh/JyeC6sWPq\nm6WgnVb7WfUWmXt9onE18+A00ePefq262LpVRY4FYTSy1VJA5pIAEFAt/1q1\nm8eKdAzkMesJrQ0dDi+yxJSshf7QdNQieB6Lj7aVTj8bs6Eu25EWkSzHxp75\ng7avpaRteBTj/wvQOD1352kubeJAPioEWW0+rq3cZaZ1KwGr3427twHznkW+\nWXC7pcJ3PdFPsMLm3Wo4+mdfjwKZj8ybsF6Wp3IPl4hM6isOb2ScZxoCUUjQ\n5Q1yRYb/Zg3axQB4P1EWJqSLBMr5PzsmUe1nz2JohyP97NUC2Ax5AH6IZxSa\nlvTs2Hs98QDYsc+Ps61KZxGPD2U1sxOKxBA1gGiicdE8Q6f3G6P+I/rxEA1f\nnZM7B2v8A+URvDTA1J/Gp6Ht9OJUyzWzLH7wE2eCQpLw6pL1RbhGO3fye02I\nB5WADGP43YKeljNdNNwXOkigBxwuyfPSUo6mm02j8Pkx6WwNGx/7czdLgk+e\nQdNC9O1BfW5Xq961nS3fCIks1YOaLTaSVhhBcrOVbmKfYeo05TYLwc6oXXj3\nuvlU\r\n=Pshf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/density":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/touch-target":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d5f6ad3fe.0_1620775345190_0.23161362270839803","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/radio","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea51b1e4add1baee7d7cbd04be28450cd393a642","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.25751d2ed.0.tgz","fileCount":42,"integrity":"sha512-9ONamOORpBAE384To6msiReSyGa4/jOuo4DIcLCFglAtJcAHmzGWe+vsgMnU7pEc9OaqJdwca1r4dHM+GaNfDQ==","signatures":[{"sig":"MEUCIQCz50Aa633hfXJHGEjWRsh0mo83bmUShW6WDT80Ol54YgIgbi6WyN8rMnvZn2s4NRmPm3DpKwjfN2OyoSstk/S+M1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAcCRA9TVsSAnZWagAAE8oP/iVbQf6nr+U+duZqN6gS\nhn/H/xx90BpwSOJVLbtfOsFQ6kuQbvEUZY98u2cCvKelc4WHOEjVy1e0LbCv\nzy4J3z6BmboMTEiaKDLKxfsFR6GjT5/agTmkEeiC+n2IJADp28/vUu9KG9Q5\nuvDF+6SIWj+pzUQt6/Guj4U+uFnn6X7wa4d6ck17krr4myQtaW4QTDTzEx0F\noaK4a6StTcf+UBWkQdzCHOE50X+Hc+HKS7urUzsLvFsSaAPDPUfJO4uFVZ/7\nqG2K3RZUhvKfzV3B35md7xrDfgWAdsnq0TK3wamp90NO9DlLWsfdpbyKQ7BA\nS56Ts1vFKr2fHWWFXKvfKSk5rKr32Z4ekodPViefTc/OILsx++07rx59n46n\n+/PtKN3ymoygRgntfb7KiK9HtJQQ6Cpofcbk6RnMn1I2Jdwjbt86zDRmhKA5\n8us6ADh+6XsocHluW9Vm8exGAkvc5Ws7QWXXFETQ57cdA+rNSUt1zEKWtOsr\nEXIit7IHcBjIUoFOz9od3JFFuNo+QZ8SRAK736QwSttBjt1/ezCIGb30vZFd\nlOE2sy05s4H7OR7sfAee374ZEoDBK6sNGnAHix04GC1F2BplvNudlmwXxn6v\nJhtrPyYcf6nW2S75ECJdBtURwbIU8ynvJgDWKANiLreCAZI72u8Xjak5Ep4+\nSSlF\r\n=S6Ky\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/density":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/touch-target":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.25751d2ed.0_1620836380050_0.47172035031035886","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/radio","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9f8ef3a0d9617e38252207f83f0b9ce52851a25","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a23ecb682.0.tgz","fileCount":42,"integrity":"sha512-cneHu6wi1ymg2lJnSlSi8XtNgVZLOs6ionufl+zkXgDGxBa219APHmxdlAAFZkCnMfHefbWUtDFg+1LRDtovng==","signatures":[{"sig":"MEUCICl65t8qkS7D3ArzmRUW6AQmaPeYuW4Zkqnw8JUQFHOMAiEA0AVD2jpO0ocuY5QHFvSnFzMaYbSo+Vq8mQXWgMmD8XA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0UCRA9TVsSAnZWagAAnwEQAJ11N/TtdlyISrRJNvur\nauj/1cEB69QpNYy9OeWOXp3OHTxvNmQN1l8JrfqMZeVCl9dWQYBEqeAMcHot\nn+LhD8s8WE7WWMiGrG5lIPi72/HK07T8grH+W6sQhu6456OQyT0zE4+OLwDv\nS4+a8HjiMG7EixIlz5jXtnKOgZl1XGX9FXWPuPuXS1bDXm26pVKVWROdIqmy\nV4I5xSCzr5KSHEf00jk44K5sOdxfQkaKGK5TE9UaQky7lqXjjuVskkYP7m8G\noRlAYopfNfJrZw79u0aaHNs69Apqcqy5zfFFOA/z8dbToWu7wN1T38O5VjZi\neo77C9akWMGSjwVAR41V8rI15AXe6ZwpZA7BZLB8HPKm4K3OCGhBxOV744pY\nesUCxlszGzsJkqM7lv7wFyDNOIaTWQvm4EkH6iO17zt3XW0mDhoCUgHunGi1\ngfp7Yx6g3Dot+56woN3O0JgxK2R9m5l1YoXwmKEA71xW5U2NT0l/0s2+vUKG\nb9/iq4P5dYnhIV/BbWUK87YYhNE3EOZLFRSSDpIqvio8wqFu4c1kYB8sn7WN\nLGwFQfMBiQ9e+8zYO/4+NjRrCXB0ydQ+jOL7Nkc09SCVVfl6g9SVSIaAKJL0\nL9TT6ojtU6JN18TmgWJR3rX2G2fIqlwYDfrnsb9fa16ObfzJwc2kjKx8OcNp\nCKWE\r\n=1McK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/density":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/touch-target":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a23ecb682.0_1620843795600_0.11979999149780896","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/radio","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"963a8a8a0fa694b7fe3cc3af4bebd83014bca55b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.33a954852.0.tgz","fileCount":42,"integrity":"sha512-L+JVqkCLa9He1Z9COhMnQZsFrHE51D4Cxds45nC7XntWkHCy8BnnMsZCoZjSyIKLw5LwPUfEM5expz6VJw5qkg==","signatures":[{"sig":"MEUCIEFIh9g4lToy4QyvPTo9qvlHnKw64vhH4o+05LiMVaALAiEA+w4sslVUXsIQs00vkTPKNPVU3qZcjMgAAqTXr9YedPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCxCRA9TVsSAnZWagAAuBsQAJaPpyY0uI9x5dipu0XE\nciQ6YQDqCyLPkMavh/0b/VC+HFFB1PTn9k+QRFArEE7NTgVUIeXP1VESH19+\n6bxCxKrEkJ58w6iWSLd0edBaDZt2ZBKkFxgpzYA2ljw1252KWH8RR6TCw0zj\nCMP225UTOHCUxk9U7Owkus2Yl9UzcwTbEj3vZ6GWSWD2orLv62z1QJTeWG+o\nCtlpPn4CtQBGhOFHvW0EdKCt/GSKxCGHaRYzfD2JQCNvcgt4gVK5Y1YwUSCJ\ne27F8r16IbWqN8Ly9zSAGqh4OtetGR+C1pN5kkSo5On3d+1DCkum9u7fHfA3\nYWkXOYtv7WwfexisQMB6Lanu9A0Dozl55Rro+2O2/ffo+QMut3NdC5vLSiMD\nqLemwUK04MR2YikKjL70BlcP/nYwS0jwQW8vqXhIS5U0igIQCcV8vG8Qq2cw\nWnSmoY/JkTv3WDbLBDtB73hrYGu1Rvmu5/q/RKafYCopuxc8eU0R3RqTNtJH\nQM1PtMb8maETJhZqQ8uw/goA/bybjLiGrIakbKtaMi5EFF9LEIAhLzeA67cI\nID6JUvlbyKvjVFQOsjpbsb+PcxlAXqKvIfM81gZxFBrnVQoZOoj0D7gjU56G\ndz790cPxlAzTRyFkdGwRyYQ0ezoCt4I7DlUI12EC32KkA5zT8kEeQl83C0Oc\n6HdJ\r\n=lGOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/density":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/touch-target":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.33a954852.0_1620918449385_0.9308755143792347","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/radio","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21a355c6894720d2d0813348b18fea63171527a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a4484849b.0.tgz","fileCount":42,"integrity":"sha512-t8pzhQ2N1ZyW4S8+DAI3/VT+3QEK/ulRPoOd8D2Bir9gXnN0OtWmdLEOEZDWGZw43i2Bhgdskz6sYgN4nsr8EQ==","signatures":[{"sig":"MEUCIQCfdZj9MoFtmcs5nHU5LkLsP6Pq6uLjgZSE6EtvXjoGNwIgSoNnu5ASb2iLtACrPTKk9GkKTgz+FTBQ/DyMPKv/1I0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYnCRA9TVsSAnZWagAAm4sP/02rApX1Dgrj/ofATLta\nYulXSDyd4idOlJsNNqjLUBdzTn4ws7uCsHREGXdKdoYkUVpk92HjnOrXhSG0\nCyDzXeasob/RG5nBlklucLy+yEruPCOmgcYLfuQpKA49SuMb7b0YNot8SkMN\niIQCQC2thRYP40tNZeLU3o1gtKy5yR318BVqdDNRw0QsT0g3E5G2oFBJcOtq\nBF39BEEyvcKFJG71G23zbxhBPIuuKDByaH32zMyNHeJIofeWh8v+w05wJepR\njqtNq85yqElhrmzNLzLNeJGc/VS0zyNXgeElpBefAvPwLq4KIDhIOnhQVzKc\ntxNw6bvyjcr7HEUuPc5I2NWvtvpjghkNWQVwNUQVDjoJMfWA1Q/2l8SgTjAb\nopPl44DTukBSk8Qmm527en5bHU9L9q6flfhc86nzSL+3NlF708m19vtsZE53\n2J6MZdHOqSv7N8QmLA7v9aoZ1/Usnmd/q86vF57z1jr8ELGGDS6YIGOjcC7z\neL06evYW3jgXpb67cIuGClfoAWpVMRPIQUlfC7eSak/6m6s3bB+6gsNzHcw4\nXp2H0B4UJyJeySJZo9y2n/VoIMCK8kbPeOLSJT7wra2Cb4WaMj0S/Dmumjrm\n/czR5QD/zumZiTKG9+lST01T/epAYmKiQHsmhUGcr7RbWy0emUIwNmkAQdHj\noXnO\r\n=6yLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/density":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/touch-target":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a4484849b.0_1620919846839_0.3235603107211076","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/radio","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c49a7921c27be517d7518df9a03e8165560a7efa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b4c3f513e.0.tgz","fileCount":42,"integrity":"sha512-P+1hh0O1UdFL4vZPHYGYYjWXJs4cR0qW5+yCzJRzI7iWJdmCP10wTQaUEtMXm0svh04DyVAaaz26qNlXKuAKbQ==","signatures":[{"sig":"MEQCIAOkgC88XsT2CWoPCDWVKjZwujBLy9X78Fw+yuZQmIleAiAosgOMJLjhKZ9+jZyCyQEmpHXWC7mmQ1YbADzJTGA0EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7nCRA9TVsSAnZWagAAPW0P/1xEUiMCCe916rbYFCAM\n/3WsQhrafaxvuGNjC/Gzh65aAK8c0s3K5bbBdGpEjNWm/0OXx3vU4ZVMGyCH\nsQXdeDviZXBu265B31e2lJ6wbCXTMirXxsonyWOWI0jD+TIbNzOZXWyohwma\n0UvQAl8ooQOHkaDGxNFcJjcMxyNQ3bgdzIiIVRil5YseLsdd72w65NR0uwvs\nKnV7Zc2iFRlMLS0/07dkuj2amb11i0sFnLALvE5X8VNhaepQOFLnweRUOXZy\n3+HVjKWlb9Drl3fmA5IRoCCYwP64ksuMmD7kEdoP/Y7ezypo8RVuW3HV5rbY\nQU+pbVA3U2/wUEmdv8aSfqYMcvwAhu2R7Y6eay/OrHc0SycAaHzDOTV4kigV\n41q2TLUs34eKy9e5pVVq484Eb66yewPmzuUbskQDl0JaGErpP0jk40EYW+wt\n0mVs9OihZz5JrnmOJS4IM2htZBNEQ9JC8mOdrWVdnOOv18ANF1eCneIkajMi\nbOxKYDawaDEP/5IaPsu9Rtxn3PiSJy5gp2Ygb7Mrn/fUCfCDKLx1So0levtP\nyrOJi4JAx+yQ8AJ/Uo6x6XhsvwdUcqo0p+5hWAieF1lkhCya1tR4D37ZSTmc\niQxAK9RVrs7s3f0F3vwkzCte8G0XZ1wJHrMYz09dgOFoJRgKgiJj7VEarhxo\nA4ub\r\n=Y6/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/density":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/touch-target":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b4c3f513e.0_1620922087044_0.4046669304381325","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/radio","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b2aab58db5ce6f95db385139ffff2295c70d37e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.1a8d06483.0.tgz","fileCount":42,"integrity":"sha512-j7Af+eoO7HMlnSlnRf7D4LEBVc4s2HPcRxFNrZ87POPRYaKlFGa+1TTqn0E9m6dRMB3AA0FCfJk7dLZKE6wlJA==","signatures":[{"sig":"MEQCIGd6go7MCf0cgZksuKcA1tl9SqjMHmg4H9hdcu5HJqmaAiAGZz3vfz2xE36GqIBJCE0eNKZn2MxCBif4qFAVJ+Bayw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAsCRA9TVsSAnZWagAAw/MP/j18NTYPyi5fJyE1lEEf\n7xe+nn87tyTqymlG8tBihXY08gHl7CK37sFZKB3Y4ATrk0d/rJTg3aeSsDgl\njeRc82u8soakdAs+YYcchuRgQZCDYZJDUuVzW4ucODYPB75aEtWZAgwpb+OT\nv2h/318epM0rb1cv61Nqfgcb7CqcaTyeHESMxYKfLwygMMWuhX/S44d6zR3/\ndvQatPrhhNhgpzRpvB4YDGFhxZVTOLcaXd+4HbEFux8V/vs4eeWzChWaFAwn\n/afVzQrKI0NcU8nhCocPfALx0ahGJGL7S+epi5CXRNeX6N7q8pxr06IgNBu3\nToDQhEWweO3trf77q9d0lSiCZjfLz9E+mnVBGsLUo9CZmIGAZOZThdyqn9vA\nQqriz5/6DkYugr7BC5cfQQqt3je1uG4jTArfGaXUHEzdD6Klea/mIa7qBEOV\nKr0diM7vlKprYGAFiXHmJUYCFWYwWG2Khyw2ScaCTWqB7XPO59/waZGRTWQd\nwGv4Nk9lHncCXC201Jh6s+CzOAJtpxQ/tUd7iSMaIOlR+Px4YeaVJZX1AZNa\nXwqgjCCfc3WRxMz7glcuXlZeOZl7a/CNVC0+v9rLV2mp7epeWimn3Ku8zdnn\niirN+tKATz4nHlKuBODzA/MVIQUGoUluPahbpIv4OSVtOB67SDvQekb5/hKk\nQuia\r\n=u3x7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/density":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/touch-target":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.1a8d06483.0_1620922412423_0.01870935692384057","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/radio","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd463d97dceeb09106ea7929e02fa24ce92dac0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8e6081836.0.tgz","fileCount":42,"integrity":"sha512-AAFCrY89KesGRecK7T4btr1JFNsWlUW8oE2ZEr1GwCAVZFIwi4ihmV8P92lAvwsACGvMZKm2gsIoMJ3UMQ/FjA==","signatures":[{"sig":"MEUCIQDZD2kC3AnLj8nV+9HdmUzSI7xTNIEBEnRd8k+sNcsD1QIgZcU3oq0Osj/IMas9+j3eMDblVLA8KaDBblkNCVXJarE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5NCRA9TVsSAnZWagAA7BoQAILMPQvlmMbKX19XSAhG\nkf869nU8ksfpVmn3/axOPwbjeGYCf7eR7vMYHazqsUA9E2HTwnZpPd+3TBLR\n8YJbyO0bF7W2L40E4e4f9B5xInvhbUnlfZq+JQ9wjIfO+IEUAMmX+28JysCr\n8FEhUquEtAfqJzH4MUd/Qxvr8GRZYPR4n09BYtFZdWCFgnUctLqbyZJNFTvs\n+tavMZc7YeGcs8Yj9RVQr1Uw8nB/sqA/R46Pc+TBMHVlRH/8e2/otA7rmUL+\nbKgOhV1gftQsJxXY/Y/iu39to6pG9ZWExYC7K5wp7fzEyPbdKBY54sIQVc3h\n9A9y2+YRrzEfKYxR3q1vTG7X5TOxyz6WEm9XEBY8PSJRomJrc5jENF1disos\nRWAAA0zBE9fk4flWnEeVpU0lGti+Mg7FiRxL+D41q1JMYn9ypo1erXH9fraF\n71PU6flcffp7aavGRnxRpECxMsXu1RkmHUf1FNVXjakYvWFwa3YgEGF1rY//\nE3ob0a0zxm2gaAYmDF5ttaLKSLbfYqN94fED6D8PJmjNIhaIHLB5j2uh1aPl\nbT4k9MTSyENhsZRwSd7EWogVGGhnz4SZ/k+gJqIf5dKpNG4uJcqxkmqP4rSz\nmNvI5RlpKhV0GA24hE2UYPqrpLvGY+Wdae3LszK4XD0iVtA6nrw0IBXfUzqT\n7yZb\r\n=Mayb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/density":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/touch-target":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8e6081836.0_1621028428713_0.6735525853257887","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/radio","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"557b8b3506e1662f8fd906494310df0f7e77f7a2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":42,"integrity":"sha512-VGLNc6hSDBKCIe5bfRVEl1YsV8ZdU8dx9Iqpel8xnp60kf6xSMkXx4fAoh7h5GlWCBCq1mg1AlQ4Y6Ek/RojPw==","signatures":[{"sig":"MEYCIQD6Uqhi7UoWQkltt3LdZHLg2Qvv3t1LR7WYw2IRglUSQAIhAIa4xOfe+QRhiyDWB225LOj7jUHmBoC1K4RxAAIPvTSb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFlCRA9TVsSAnZWagAAb9YQAJoxDYhq6fmfJuofdJ40\nNZvVPjXHWlxIGJrtoEEeh09elTKaj1e4NwPD9bpwR5gG1ALzScHnTIjdNLLX\nVcxHOPG6I6O6pecZXhSW5aj8swRFRPIlcAWZ6fj6GviIY0QIOwaxpFZJA18J\n6qXkSe0/1LR2j/rgub8S8Ci5KowFcbRSdR7boYAG1pTXvu51tBq7qbJhYR25\nkZoYtOdAA+VniC+316/q4eaD5r/lvCqJSjkZKyRA0FucPvehruK3AeTG7zQ7\nQzOlqXBLF/Sn4Q3h/RGIqMDx1n5aLeWkf8G9OywpxY022Q9GP4Xl7jH4EBIB\nXYo+1rAu4SWB5Du1+uvI1SI/SwW3OAJu94CiSGYuYniy8aO2VOhZGvM0k7SN\n+e5pVT/YvrTj4NeJ06QaDeRwTTLDVkTXN2Hj+SCgMUOq/R6ebDDXHh2VS4tj\nGvW/yGQAlBA1s5ioWk0bQNZK6KWFx+xrC0dJ6ZyiDDPfbayLG9Nfaz+FXJzG\n1YpdDOvr/N+JpCIWMjbbxZp6eNs+3+HvbLDrxDaDZ5cCTkhJhdB5Tcsb940y\n4H9mc6/APPY6HvQFJc4P+/kiHsMqP2zAEE9c/7xYOiv266O5HLeSH125tFW9\nj5DYLQ1cvaRrRGCqTPGBGR2CVwM+OA0joqjxPVD7XKYBYi+yvQrxIMnSt8k7\nk6Bd\r\n=9hnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/density":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/touch-target":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a2b0f4cee.0_1621029221063_0.3351900165946826","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/radio","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7313b61207bcd8c3cf29a667307bc61c45e017b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e8e39ad19.0.tgz","fileCount":42,"integrity":"sha512-B7wdpEDcf3VGseBWD7I9fg7cfCPZEVG5BUyZ4flWyZQ6VvOHJRZ6AxBLfR7BaQyOmTQGPUiU6tWW0BGWhWnC3A==","signatures":[{"sig":"MEUCICUVH2r9pAHlihYgu/02aOkY5EnZE9BemxA/Vl0M3pmqAiEAzQ8soDTPOv2bskSk0cly4tLC+ylzlbcysZ9kcn0V0U4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/LCRA9TVsSAnZWagAAgesQAJY5nzpBoiDmlNfn4ka3\nSMJm6ilG8dRGO1EdUZHYqqWlvcgDM0EE8rHMf0XuIId8ORRuYNN8/co6SIIu\nzJ6Ra8FHYm5LNVfmsAZb4zcL2O8ISNkKhBsBBEo+2xXw4ozYnzwpUuC6wOay\nug4cTaeqKwDnhkQV1t1kfo0fQEV1b4kxdMiDLznLwpILLp5HYn5SZuXLohWT\n+6D+NjXO4qkvaXFjsyAPQOSpJr6t+JM99chiaHF6FStsNHOfafvSBwCVJ8OZ\nonbndV1L5PTjS5wqvWMkobxz1b+OvZd3iotqtFfEhVAAhRlRREeGCR18ypOo\nXWcJhmhj+oWrMATYvh/EuyvJzF8K5MIY6sYOib0SgMJAyI8+lRZ1+l9PlPOS\nlpRQZVPyaICSIy7l2hilTShuVjaV4lD63Vrpw/tvDE/hndrZm0lD+Y64Itm5\n1So0l3Tg3yAS2x5fu8sQA8kjB40Ze+3pSbxxHdziJJOqQIrKjkiXK664Q3fx\nc882opkOE3bgPF6RV8uslC0ISlEW2uZq/1dkDODFmqqRlLqtJ1R7Fd+pfZNv\nL6lLlwoxZWKY4jaEXE+VT1m5TmQZHbgY2IH9JU49SSSHNqe9Vlsnq+6P2KE6\nK3f5pRuznGjotd02K2UgakXe5CQMM/WQ7PDjdH1M5FE5zCZo+gShydsap/Xq\nw/en\r\n=wQhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/density":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/touch-target":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e8e39ad19.0_1621368778759_0.5235639770770171","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/radio","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cf4c3e0b1bf2b776b4978dd923ba0468b3deca0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":42,"integrity":"sha512-IjMICr/zVYTLOEwyflm3yf58qZPpwHjW6txVGIpUIzab79s/9zSdKCJn8H6unphlGGMjy2qTiycM4iKY0+zWMA==","signatures":[{"sig":"MEUCIAWLV7vS5ijb+JjD0YlmBpuhrykguOdQW7a6v3/wD74+AiEAlwgyFiUsWIo37zTrK4Xh+lFhao/Q36vKvg7Sh05seg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6HCRA9TVsSAnZWagAA0p0P/0arTVC9vGnvexL4jMh3\naYz9LnHneTrx7TnyHg8869s54r23klxOOOnUg4Fhi7bhjXagfyR3/hUx8DiD\nVTSRkip9HcpC2C/+TuLPdokNwyQGcnSsO275wSCWkwRJ2AqJTDskK9aXyC7S\n7etLllUqHpPeHJXZxG3hl0ZrVxuXlJsP74y0PEn7iBEEJ6Ei/NeVboKRkUIQ\nL+ylH8MMshVnWvoR3Lq/P0/fm9qLXZsbTSMjih9RacLHoBJyuJvGCqi9vKwx\n2irCfbb+gLt6274V/kO8qlSMGY8iG41SsLQWIG/SoSqKl+0R74evrMB2z20P\njSwHPuFVztMM+z+TTRFCNqxWa288mPlbldTX2GJwtClVJe9YrFN3UvVBeFeC\nU5AHiBTZT8goFosDWZxHYmTbGxpL81rKY/zvciLp9MwlPdS440vy/VYApxDj\nYaV11/5JnC/44pRQ0oTHzQu5cJNLGYHh9B/fNRBZFXCyqNBYtIqY9ct96hms\njk2oIdVrDxKmo2i4stbw3PpLAACQf6WMwdhVNVIgLJsfvLBu40KVY4vh4MUk\n0AfefIU5Xx6Bdgg05zj4hy7in5js4qNF28MEGerqC+mbDXUZjJCM08s3BZFl\nsXnRSFvoK4pztfPoOtuzfoc3WrsDeABXl+zK26GsgFgwxCdisWqlDCNHpB2R\n0VCs\r\n=eZHL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/density":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/touch-target":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4bb5eea2b.0_1621438087346_0.5400083664031199","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/radio","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6024c4076052559ff3f15032be8472f64a91e15e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ccce99cd6.0.tgz","fileCount":42,"integrity":"sha512-FozUZeKjwiws4y93OhXy/x92GvOiw/4jxbmDMlD6/8hfPbCyYoY/WJUWJ7fjbpFxp0mFF0nPZ7Ihv+4hCJZ5Uw==","signatures":[{"sig":"MEUCIQCzZg2lgeL95NdiUDjg0Ge9hqYY67WAFydvrN7qtcsbbQIgGbFmSPL03yA4FFd80U/tz7fQNAbmA2eFqHIHHp+86Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPICRA9TVsSAnZWagAA5IQP/3eDPv/mA4zdN2FRT25e\nwxunHMOBGIu2yZ3SwQLMw+HiOxHpB8G90xpdyPu5gWfXXMxEgtpUI3IFjOdM\nqxvm46tLRrD6fNGUUnk0nY0FAb6NJj/Jq3zlgCkn/E9XUSYBf1dDMJhqHG8K\n35vd41iPmXs8TmmqOH6njKOgwJ7Pw6Qxstv/iqsUyphnzGjiV5bQnLTgPc+3\nZkRWiHNv0SGn9lTZ4yDWOMkoSWfePd7N0xbUW3CszRs9m5vuMh+PMKThAVtv\nzBbuyLjHktkYaJdPrP93TPMZPj1XS0JoEKGmuOSmpp9Di6iKA/xzZiVa89Yy\nNiMrOMqvd2FyhpPWkwAbfFBZpdEtzvEunY3YHJJ8+SyzgxY6Ifc6kGAeQdRA\ncPWNTns/0YeD6AvXQZTH4Aj0iAjsoTjd+/xenjkfBg8UF6fW/n7xeRD/LXtM\nW+DKv3NBVNbqk79vulMgy/BoBCsVnZxZ98Rt+tcaqqt0pgDDd/+erbo4+BCb\nfWS7Ovj59fi6ZXwXtg/hEImPne3GeiFy7lgh8G6w7KSDziIJAoa8Gpv2kHAb\noZieJzL1M/boNW7F0QhNA9QbhaWrH78U4vYAS+o4GjP/zZURNqRwOsnr5DCD\nGJPqr+shAlBTC5vVMxY+xliBq7WQDVr2GYeE67cv+9Sb99kkBEyBHGdBr4zR\nUVwj\r\n=i03Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/density":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/touch-target":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ccce99cd6.0_1621472199751_0.4643270720205501","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/radio","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b2b5960ab8a3a9cfe6dd23d473f9317d242558","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.14767a8db.0.tgz","fileCount":42,"integrity":"sha512-Tf0uopbH3mW6OOx86cgy6OA6w9mufr66TYFWgWZu2m9TRHlL/H+7l6CUjoK2XEvb1dU2pIoaubpTvU+hqPywWw==","signatures":[{"sig":"MEYCIQCpWEArE9+XOqen5w8S+fDNcXpd/oE7jJKvz/7K9tVUGgIhAJG6ujzI+clu2AbG0UsiWWzTtZ09Oid3LgvD+qZzNv8+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsu5CRA9TVsSAnZWagAA8OQP/RQ/9S92T4clPRsJOnfl\neB1dDtbHThd646lfLi93kTZdvDxL4+nHCNXXyD0pqvwqjbc1nsErTBuRBOKq\n7erN5NM5RK+otvDlgEH0qEtib8SmIMFYZzP1mk9uweUkqQUSAChwdSgEAu/Q\nVd3sMuxKD7D2rPGMfuRiTGDTwnWG8W/Fs1BABCKr+8RUUHzFJtJFBdFJ3ePI\nrxmgkFt3GvdJEdURA83/Tuor4TR5DhZQBm2Oe1FDRcst567x8uwItaCDoaC2\n3az7z4IxIsR6z4xIqircwqkKtXfF3VMT6uUGE/3bpe0Ee2cfIFGapDiWVv2S\ns0lzosEGg2uBztmCC+22sRqQiy292wPK/2TkY6m050DyE5AxQ2yHcfg3eWVr\n0Qx3Z//xu8kJFfSgMNcKTXzpUDIaoCb19+mw/MWaDlTCK/VAGpA7k9IOIs1Q\nbF+fM1Zqzyl5/QV2Egh6N4kBHRMocFBC27vW2eS/Z/arwMI7x7v8+NqDmoeH\nfFN8z8C/5EXiegOIHx5gSLJTLqjR99o0a9B3bHJZ1aYAOT25t6s9JwDR40VL\nWAHGexwKsZJ34a0/Xmat1zqYSQJYRjs2poBA2c/NDTNALLGCfwyyo7vMNieo\nN0dSN6x0FWmcbRfXceg/X5NB4+hwhjYPYfkmCfZF4dWHqIsDL6BFvkbznjPe\nJcN9\r\n=ASWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/density":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/touch-target":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.14767a8db.0_1621543865078_0.4611311423493043","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/radio","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e7d0dbe16f37d17398b707250dcd21282c2d48a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.22c6dcff9.0.tgz","fileCount":42,"integrity":"sha512-0DjFebu2xnGdYr/OE0NTn8lyJAprsrezvLvXjahGAML7tzy7jjABLvBT4p7UAsCTD7oIKXO51958pH1tsUD8bw==","signatures":[{"sig":"MEYCIQCr0Py5djo55dNBHc2kt9N6+cxmUGokER4j22vCvn/aAQIhAI/xQg6dLPe1+rApYLbDz7wdo9up4ZcGl5CahkSIk1Ic","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PBCRA9TVsSAnZWagAA47IP/1RVKlirjh6Wh1N5rort\n5GF/4Ko0DRRENNHFMXcapca5sYvkyp9wVY6EBSSb7Jopgy4sDhlpOkkBlhSp\niTqnk21zH9THWCsqmzTm6+Lh0wSZL6b23xM+sy8cvcf+OvdTRyZ+UDsB0WB0\nl1Iqw7MnP84YzJo9sUV6enSjDjcrMTA6m/3yH3+LcZWerC9y7u9PBC4bZT9z\n5PNtc6f/TYCdpntsQY8hy/QAjFMT36DgsySDnOpn0sGeZ/UiXHos2M2/sMbX\n77sP+haxrBCcSZlrTUaywjO/fw0OwMymVL4bMJOJnHKvak1MqpdJb4r/9aLC\nTkahLbt4wYP+clVIsPWU28qs6zdYI7ObFp9kBkCZrW9xDMouuCndaZUDZ8lo\nXNzEjXYrXv5foFLwfMAefjhbyfZYshqDCSXmLjRD7D4B4xjQxs16SeBJYweX\nk51CkTDW9UMa3NkyKs2m+AnG72/Wb6IqwNre8LMTQDN1G3U/nnD0Hp3BbKDK\nNGxGT2qR7I5paRgujHpIy/vXGDPKrbZZE2hFY9ZIpkt/+78VY+4i779MtuRh\noOHz1wxJGzI6THOrMEXehR85BBzwMMxvKhMIOAZ8NXOn7eNTCYf//g9bIQmb\nW2VgUfgEkBOmWh1nFANERD+x/xZBCVN4pP7elSsPg0laSo+J6Q2+axDZ6TBX\nSJdq\r\n=bE1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/density":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/touch-target":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.22c6dcff9.0_1621869504670_0.11117531176542039","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/radio","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa705f08ddb471908abce576d97b52ed9f217250","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.fadab3372.0.tgz","fileCount":42,"integrity":"sha512-YZk7t4I5WXsWbDQp8cggQnjb0yFxEu2FlE9Dg0OHgbcCoPGqIuz8m+HnqGbpZlThN7C/dFHByRa8/wqTYD/hxA==","signatures":[{"sig":"MEUCIFWC4Tbt5sigOuf7MY3uMcOW7pFpgiih0l99vNlohp+aAiEA/Rig79hKQifJQz1Lz58irGxCbvS0XYZcOJFiegEzn6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87PCRA9TVsSAnZWagAARMMP/iAYy+wLliqukvkhGA9q\nhRzJoRPomd0CuccsQJJUU7unZ1pg4kU8MK6tApLqUWMwp7LT4nGgH/O+7m2W\nw56BvoNH1sL9iDUOBZNrG6UquojNUKgZuOFfTGofdrqI/SpYBj9hIVZAS6W2\nVVaNN+FOyygI3KtQ3JqHfXngdwyy70bEEvyOv+f78aXRvzULTk4io2IJb1pt\nnFGEoA32njc83QIb4Vmv+nO3rWoebhId+p4C2AVigCzRAAgcZ1SoQIkHVfJa\n8m3b0OzvIuvELMnqR8EJQvanRknUF6wSDK6I3MQL7EskDOy19DZ/tFJeJpEt\nfD4gmqg8uM4RilNbIgK50KyTpcDJk414dlzfnZ89VCq1ks1uDlvSO/iuOAPJ\npmX/WutrWAKPU7mmxQKsVfBSJlvrAaXKYGgu7t0Pb1X9iFZRETXfZt5netJ9\nF3E3Zh9YvhCx8lRSBhRbiwkGBsRU8XEaUeByBvctVNf12F28rIXm8/BBJzsV\nBuJkd7bhOMHf32TIl4DoS4waBq+JJKp51Op6QJvQwLGhU2Sbdk+G1TS+/oYu\nYfSqoMoh+g9O0qUwLxJ6SlpwXotqZc+ZR0PypUpIYM/Ru2g8mmtP5Qcc1nsi\ngb6YGAkbVcMBysUR9ZhyNTkF3hMKyCRnh5wPGZurRwlOUBIPL/ZorWEicpss\n0rIq\r\n=o7VK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/density":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/touch-target":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.fadab3372.0_1621872335406_0.74224021680305","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/radio","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e8203ac53e2b581b44f69080eaf099f5aa3f317","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.caa73aeee.0.tgz","fileCount":42,"integrity":"sha512-p6QQRg18eQ2O+WjoXgTmzV7DIUte9OvLywnAS1V19fqMc3W1WocEzxBBkrrIYANTth5cDvAhZhpQA3Yf7LiCzA==","signatures":[{"sig":"MEQCIARBvvhvg3Q2j37+nLEWy14R71LZwgfDyIKEF7jOAnzPAiB3NquCcYevyenL/cZOaJt3ZLGXg8xn7tz59KI5zifXBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQY3CRA9TVsSAnZWagAASUUP/3pcCKVEioIDWiFqb7SB\ntCZ9sXEWfFOMq4Pj/R7wQqy8IPKYj84TwyzqwQUFRJG0LRNU/a8BygTVE07A\nhvMQN4wRUnYyiRe61mKwBbenUn/zo9eEM4DAZxNDEj3rKtWJe2jZLM8XMrgD\nLg7OS1OOD5T0xZlz+YetPRfQH7GajfnACiXNG83DeY5Fl6sBm8d9DOlrAs+8\nMw0K0EPgmsJ6xOg9b6+UOY47TYVqetZQ+ll5IWXyg9NOC4dU2/SnJ1PHXtnE\nW0GnoH0PvpSW/Krh+JY68hgZb+wM5SCa2WqjgbhtL3ZVb/twwz+Ht99O/Feb\nh+Qixq0uOR7gQA4oD7zmXgAgjsKflW2iAeq25UPa49gWUFNAF7owXNX/EumZ\n6DYmq5JytYrMdSu6zp2bRIk/i30zSH/JQkVCrjb1KZZBW+3RKPQ/LVPq/xaA\nO/uqmvYLl8G+bfAQC0wPacBZTDFBQnJfvK4aj5ZZVW9IC9FlhT8YEFHtV8Ea\nRkcTcEuJ8EOWDWagqAAjK1/O4EZ8IyvyyxXvPhFCfbyQn83ZuY82b2BzMSIB\nMNiwxuftpTiDSdxKVGLykVuGDBY8gpjvGbdCXJWIf9fQaNq8Iw+425w99NK4\nac+2vkWy0D/VbURM87mmUMCe/U60DjRlFKjV0R4FHWaAzdpNRcFCLktwatcU\nvMdR\r\n=yKZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/density":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/touch-target":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.caa73aeee.0_1621952054865_0.36552128612654466","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/radio","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6d2f139b6b8a4697be8b267021017e97cfacdc4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":42,"integrity":"sha512-rf7BVKT3PrICWhBBgU7rFNS5ainGWPOegFhAgkADWNkqsvBFjkBW7mXfACdrbw1yeSgYclkKK+r9a7p7M7OFMw==","signatures":[{"sig":"MEQCIHq8T4bkCsnXq2xjVlZ9GWc/vKnE5yrhxXHQWM7uiUo8AiA/Yuqfb0mGHEGHlCY3vS5L7lOuoBdgTRTaYOP0dbwrfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+DCRA9TVsSAnZWagAAZrUP/jeS6qXOcTZjrHVGLxf2\nUcZ0t9FP3K4hE8TYARVJeVrJVuGMUDz5Spg9IW0+3nWZ2mFcDM/bQJpVy37G\nkY2BbmAZZ8FdVasluS/XPJc3O36cbrTZC3332pitN4ex8t5cay/QF4Zhm1FW\nCmDFgfGnjBYMd94VFulROtz3wL94ny1P7cPcAOmXrCoNhWonVTOHwSAxul0p\nZJOMw+G/EUSo1Ge4ahHGiOxaC6Jjnabeo+9ajet5oZkDjwQMtgd9yhEGhTbt\ntUgi5NprRZ2NRuPTmZm1wzlJwj1gD197LOgGyknCJcxWuol/ZdSqvJVxBYdr\npdX64eKpxu18Z3wo4RsnQiBjyj28schYxCWIRD2ZEdBARV9O2tX3pYRzRq8C\nodNacmWam3wE0qrolCufHlYztzaLBWqsMyn00O/sbCvkYjekizNv9YICt0ul\nit/dn7jW28j+Hrk+HIAbnpBixy4Q3Btg46JqDOqp066PfW5PEhtyUU+2nYZN\nZO+xtrjkIpcayA5q7kdNryheuORn3Gdt8MHe4RQ9RdOmYTg7jeA3Xhyk6xK1\n050CdKKf4rkxmf0SSDyEWZvYSqtGo3V2tyIqyp8JIl02fWQe9+RJtE6ZIb8I\n3sSTzPJAZTOhEZrQqMCSZlmDOQToVoq0o/VU/plJT6g1rCNgaUCYMwFWbohj\nkTiv\r\n=A/12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/density":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/touch-target":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ec31ae1ed.0_1621974914558_0.4361228459810875","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/radio","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67d086be442411d8f8dd11c7cac20dfc035dcd0b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8530d3514.0.tgz","fileCount":42,"integrity":"sha512-SYPTq7SF+mNAvqDgXLT3E9550f6xGBbk8OpHGncfivt6oUvlp/+uXvldCB3Oq+QDdLfguJDACecIyzgzdV5FOA==","signatures":[{"sig":"MEQCIEkGIgoMm+2dxNbNoAHVU2efpY2WQaG7T+h8Ox5aC2eqAiB2iaOJmpRGumOj1IiWVhMXCfsI3MwOtLvCVoswaB23Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MbCRA9TVsSAnZWagAAGGcP/2PijPLU/gyGDFkepYGn\n9VAjo1gA5riMoZNbBRzlL4ggINmK8topJZjenmywxQj7NQlYnuYTR3/uVFY4\nLy1bPe9l2SnZyG68czAAT76ojn9dsZhzqDwms4+Aplczbp1cnkCjciABTOVl\nhMf9L+mq3kJPzsB+avmPuE0tln57tJRS+8DP4VzWV7gS1A65Oelr2FFr1tjW\nED6cHBUVHTh/PsINahYyTs/0QOcVbg5yZg9E0A0EGRpIYeP8ODqS4amhQfa2\n6vlf7ortqBezIa9wCWIoOQlgHkH+vi7zkFhb9Gt8Y4VeyRcyviuRe1G5nvL4\nAZKj03KV/Hj/k0AYyvrj48ufor+5lXOlDIMN0Q+vHTpniMNYbaRhiJSbluyr\nmzQSTkz1ABdsfldjUfpri0xgUIZJNeqaMOssmrXSZ9cT16uCmZVRfpmpNOEi\nsvbl7GEWmdwPJ79zNDX0qO/tUbmUhOh31J9t2A52xCn87LQnP0atSGtCx5oj\nVkr4VBF9xafoi+S9oGO8Yt8LyIu61EO5Po23X/TJ6TwRZLC3ZIRfHkqjjlVY\nTwe8WwdgQVu3qgLiotgkecwSSMwOr1LS8Jb4ouvEWqiK3jaatTvNGqfCaP+Z\nKk9Ec5tbGqzYT0Rxaq+iQflXODnB0734LGd5hO2hmZyLUuYnY85T9O8ZC8mB\nsT+u\r\n=PCSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/density":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/touch-target":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8530d3514.0_1622131482403_0.12057051821281783","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/radio","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b33897dd7337042d9e7bc95e827215dc1e2a148","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.00b5899dc.0.tgz","fileCount":42,"integrity":"sha512-pUYXQVQgECd9Xgj6tMYB3kei9wsViFf0cBB/onLVFFTKUX54SkYWXsXC6md32J6AUbyv+jI3hfExMJ1LeMSTgA==","signatures":[{"sig":"MEYCIQC1ze+ZRsVSPiTqzRPtLxhYrRxJURxLVItkSpSpjIb+NAIhAJLKG2/CkKF62vtzDBQXKJmasoDU7eUHk7zumNedsdHW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriFCRA9TVsSAnZWagAATdIQAI8Lycldjg5/xIwHRYkf\nu8o8nXzNjs7k2iGeDQkcOeJjN+19DFueHzh85LYiQEUFfB7qRZCnsfxSt8rH\nMPsAkBSTr7e9s/szcfQP34776Axvo/dpDtVOvFXSt0a3lPsiA2isb/vWaCKV\nMEmyuq0qwYuKUrMBb9ofpyuLTxOTQxS1hmhtCzFC/8zc5TXUSkJdIV7tZ7S0\ncVWEnmu4CgGNfCizlO6s0ar8EtvXOQTf5HB4pRZZr2AE8RBMCuOfnomcVtlh\neJabv+807sp4CMmVig/ZFulULLr267n/1gD9cx4C3AMwQplCdz/A4rc0fACF\nASlTeBGayemr+HgKA+onK4mq+KKsf/h1NeinOwV3yVTl1OPyoHvcQLbZozYk\nd4oN9K6aNibK89AtP15Mz1WeUpkADHUsfM0S1wB02jz8uhRaM6/pJqJ8fK1s\nSc3e3ZWapqXYMKiqMoaA+A7imBHZYybeEmyPB0mcqKR8MaocbbVs1sNNrfgG\nCLyygCbZU12AnwEKeMhd4WygGDbM00wXyZKM+8EQ6Fu61WWF3A7DEbMuMgry\n7oCM5oTuBY+LA4jqNyzXuYuvSd/kpJ5bGViqQCdX0GBk3oOuwBvm6V80E0iX\nFl93nfKJv84UUIdjz6OU5awAXic6hpilLYN7Eol+JCcXZV1MwPpLwiLUCXY7\nA+Ji\r\n=GL3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/density":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/touch-target":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.00b5899dc.0_1622587525213_0.038659410833932206","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/radio","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7876291b70044e23a5edb228026bb6a88285da47","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f1525ea3e.0.tgz","fileCount":42,"integrity":"sha512-4QLGxg5pVTnloA4MMzCVugEflE5bwcBKcb0CbH8p7ynWyOqimtryFA3qbALk22reVadby0rb/SZk7LDr3QIILw==","signatures":[{"sig":"MEUCIGzPsW95D0MsheM0Zv8Syj/Q3dNkRoaH6qQlypxQt1NSAiEAn3ULpPdo9cCJBrYg7yZoEIZy6BfsxI65KTVZI0OCBmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8GCRA9TVsSAnZWagAAYbUP/17SKUhLu/ht4E8/Af+Y\nrQRtyR0ieSRFZGoXCGrnckZqzvQfJ/wdGOCrfU8j1u57VoSYspQZuXFPReKL\nBmn+taB+70LTOikkDuzkkD4KLdBNTRBRmHvg/rblbI1gpU99tpx/I+5tyzPp\nJoa5Fbex6UrgRYHM2lDr8qkSeKZewN0Bd+vcn60P+BPXUXLKMpx7hY1sgTCA\nE4oAHZA0vADoowe50MMokfo++ESzr6LNvnvEhCDcyRRapyyC5jYsTJMRY91u\njbXxoJc92cj0k0sGfrnD2lvY49f2/GLtJJkXTIaKjf44ZKVRH3ygtPwdfGK5\nHvL5e7dl9qwavlPqTa0z2OCRezhEY3HS6eJy0ekcInHzxm2zCbqxFoetc2KY\noYU4QBum8CI19ElEHaeIJ1bbGgmS9moiakYkn92KdRDN0tVzWf5+FM7u8o9s\nGqNuys4rLyH05k9hKHAnK7wVq1/ajNO7tG6rO7omEHLoFDTmU50fQasC5SrO\nAxD9+WWX9hbxF7XGKxBx6qamJJ4HlJtwE4YNB/mxuo9QuqeASlXkF4InLgSp\n/BNVw/ASLT3+/5jOohybEt6GO+lg8974OW8BMVfEfh2kIZfyrTw0VdUyY+JI\nkYjp0tpuVz/SX6M8A3I+0axHICOZC71X6OpH/OaVWrS2vZ5DDpRV7/CfDq3C\nkPN+\r\n=Dm/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/density":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/touch-target":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f1525ea3e.0_1622728454746_0.3046220784780682","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/radio","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e016edefdc1470dda80219fce45891ca61c6c86","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.464a00286.0.tgz","fileCount":42,"integrity":"sha512-S570Aqutk/3XWCTidfphXdKQGmZbs1zZz8K0ac92PsWQ8SEiepsmnoPQTQVQjPmDCBN0IUlcM2KqIj4mV2yOoQ==","signatures":[{"sig":"MEUCIQCRvZJPkMiDHRcGyw1DF658wc8y58m9xjA8tVhCGvixpQIgQPhLgX12d2DzStvR3I5EsLwXeSDGi+bi7CtFSxE6cQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsiCRA9TVsSAnZWagAAAv8P/2+CTppTuvU4y68Pdukv\nvy6L/rJWD0Tj85yc15qlzzDj9QvkESbXGBg8MqFhAdKWyQoJDjaMToWON0xy\njhjG9ZcLwiPf0YFhmmG5XxlwOUKazf4+cFKRgV0D5z+2BPrcSS53m8xTrpsA\nZR5whAJFZkaD11y74Kb8YHqcOje5/tIWIy58BJHSBJXywvH5KJjPDRWxNEsQ\nQKnnQ5JrPFgBdRO/IePtsMW2ynH+I41zNTsHwoaDrOKojnoF/iYVumLOW9im\ncW+eEE6WasWkg6m9Ab3zJ3MzkAisFSURGywYXmL2aRdQf2C/r1Wxk7VZlWsg\nG2GYLPlMOtNiciym4mQnu6FvzGDATtV2oiG/iZ5mqrhYK8HMHQ/UaFjEFha3\nvOjq38A70TmKar/T/w46QyyqnAXlYwY44aIiWfewTNyC8USMaWNOxwdqCElP\nU8rB/PgoDsjwnj/eMy3msAJDeDMTtGiW9SRxP0AkWAzvg24Apvx4Y2Qll7sn\npZwzv1bCbQldLM1dLd0sGQjFvl9jVT6C3GbdCWdct3bz/IWvjzBjBNGOwMgX\nDhOn2ISBjW5DlyfxN1BuU+ldB+keUMpvmRD3L5le7/W/M/t/UIm5UF4uPr7a\n+5xU5AgYgLQ/K8TyvtQOFblJId/4exRKklP4txHEvQx5bNVt0HoqFbXos4Ti\nQMim\r\n=L5zS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/density":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/touch-target":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.464a00286.0_1622731554265_0.7158525817487786","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/radio","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ecf593b2b5687dee619aa999e0849597e76babf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.474de7878.0.tgz","fileCount":42,"integrity":"sha512-L/Luntdw/i6fg4tLLp7V2iJxHT7tptthgu0a2TEwKpM/o3a4eV3JQsWY99ZnFt1GHy2OgzBGVkTlr1TlTuexWQ==","signatures":[{"sig":"MEQCICRkOyHCnNmjpsTMf+0ov9Hl5gobYZLqHAUAdpzZgl53AiBX6HlooC0rWtidDmfPiuwnRksvfnf8aHQ06f6uxFl1vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPG/CRA9TVsSAnZWagAAv8EP/0J60VgLpXvfhSJe9jk3\nGnF/abzWus07CZsm7r65sHmocZniJI81005EHjWD+ufSUyMLe7ELCoQS72q+\nqFyzmOOYcfdoHMnEU9YNElihlKLBLP6iWXSoCFdX4BGEKyghLbmdNRDytp3K\nMcawgxT7DpnH7knpEB/CJ02ztL1o9fmbDJL7dHXZ1/rm/FFHe5+ujF8SAQtF\niwugzjRXFn7Gq7GObZ0dFCvZNynII2LKb//n8gXfADymbeiF0+4NfFAxAbbE\nsLLlOBzXXYTMGXmgUISPZS6uv6LdcQz3uqFy1fwSd70AJkUwnhq6IgKP+4Py\nweC1qPiVWzX4U4F3ArOdEf9oTSCz1t6TIHhfLVdzi0q2poFLBAKOYfDCjIqc\n7gW0zs2KiEJi06oz3L1GeuCyP8r3iWUTlyM4dq0dYPXQ3v4vz/F1AqY+7GIN\npbcwwiwoLSPhdCCeNiKm1tmwgS9K27gkIjriyaKb/N7h5qLbtajO/BfImgo6\nkMPs4ZMm4quRLhompmb4+MuCM/Ee+DpgtBAzmpsQBCb/AoQ+NIYC4/S15qfy\nn27fCSF5vO5j0nBhyTn0+E6E50r8jnBtVfjX+Z1YNc7m0WGuB2tmGQSekYKW\ncUigXifDYzZlW4JXhD5WBTBFBZ+hhpySUIEwVb9mkC7kvyrqIJfxq5mX9NoU\n4+fV\r\n=heiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/density":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/touch-target":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.474de7878.0_1622733247297_0.5724473263074303","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/radio","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57333760125d1ad5f1dade3f0969a180d5966594","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.b87ebf74d.0.tgz","fileCount":42,"integrity":"sha512-c9lDleUAuszhXb42oyP9EVj68wG7Z8+edt9uf8P1E8EMopO6Yuk2gai1s+97dFCTvu8htjEHVPJiJvb9ftJt5w==","signatures":[{"sig":"MEYCIQCgj6u46K24Bq8Af1o0pnFyIcGmm6DIYb5J9v2WqEbcowIhAO6yDyLWVuK16gZgVESvIaU/DHn1Rx5j1PsLDolIeg9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVjCRA9TVsSAnZWagAAvD0P/j5zfRcc3OrSHS/oqhkS\nA6EHvIheX9gkedE73dNEkJ614wf8/3IOtl9cdV6Wd0hLtAaMqbZuzm0dcMBF\nFh03vZwFgKILfBROzCbuFRnAk1h3BsC7OeZAQ6PTgx8Akt0Sm6Fnbnj9Sw0y\nrP9KtUW2ppXY6HTQ/YuQBPSCVEEfo72fhewfXeYSOCHhRs+clndhrf5cQ3+Y\nk+mefzLTgO8SyoOYJ5ksnHsi6fOjUMkxYNcslXLu0NHyg229Kuce0BD2csoE\nPWZ8DJgbA55teThVbbZToO3fWVlJ3e/+WtSiktum9lt0EzJ2EaiDKP9+WEgp\nzZzP9OxjnB7xlCGCNlHla4q6xaCk3nbtL0DghrvoL+EZSb7rKi4Apvsg3jyO\n1RM84+rMsjm5HpkH53Rk2mWA5CNWvZs+Y498RwKYIW6CrcVCPsl91xEw3zBo\nRkTcfEgHeff0dcHtn+mXNlQzBNcR45++zPTQItnVYEthsdPXBpSJFBcfaHY3\n6bGxt0tZ2cbGa5KsfZrdKaxUbmbdiI/vJNS82MdN4LVp0Bvy7hOlljbW0dFV\ndwo6+XauZIRZ2nDBw9CTiI1kJmFDmUEkPLqkmi+36gjxWRMXomNVN7nVjzCy\nm/raoMkByPul73QPPrLaxZQ99Kj4bwduKrHMPXKjbZb9z5vlOMo34Z6apxh6\nWUMN\r\n=H69j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/density":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/touch-target":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.b87ebf74d.0_1622742371211_0.03769546792804457","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/radio","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6042df4d80d24cd150f4ff8af074689b89617b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.2daa49b35.0.tgz","fileCount":42,"integrity":"sha512-hZG/DM5b0CWBF2JEM+CgjE8o0mexkz9o7sodn+ySvr/nXnGBUYO90C0BA4AspnlbtTQR2nHOO0pl1BSM9LciXA==","signatures":[{"sig":"MEUCIQDphIlbZ50T44CaqWBAXZe/hNozGAWy5Rh7LZI38FIOIwIgMboUk/2T/z6Ik59q6dJkReGTlnoNfvOHr9REVpvZ0Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFHCRA9TVsSAnZWagAAJOEQAIek3L1YWy9JFtRlRPWH\n/2z59OKKuz9u3cGLR2QgFgGYznna62xS7NAvSIjvemW/T5JGMbCAbDVZ5ZaC\neCuDHJ8Ab4KgfeyruqN3VzksxnZeezuyRUWoPcct1MQI6Lr6kNITLyDxZ6jc\n9uv/qzundkI6geR3ryi6GHz+759uhYCunCDe1e51B28glYa1iS88VEhqf4NZ\nusrBMOItL867XGlt9UmIL4x7Eq4ONwq3PLLLVm8PVp7NrRIZpakP/PanFV+O\nvMxpVdSQ5GwFoEGk9jlkpZ91JvmsIV/Au36pnOYoR+epXjlgxE61k3s32Bvr\ncJpp/X1/ymZRs38i4dFGFCb7ml8YAYE1kTFywqwqinRrEBxvL235Vajl8avB\nTX0XwJ+HELJ09LHzxObVGeocbmBd+H7yEDe4P/W9icTMXVyqQuVTBBosJhz1\n3508Tbnh3ELiymONpCo013B9iRQsTr+/cP/Vj7Z2mewBEKrYfMhksBeQmezx\nCa5SuPpxBt5UoX5OXvxCCNck5Nk/kH4zXsekhnbVIMQd2lMkx/2cl5eaCEwo\nQ6Z5uDyBizKXGx5S9m8Cnug0UesTc+ioJF+Ib3vDVsP4qck3CHd+Zn+mAiBr\n4X64MzceR+LB/GT9qNk0SSTLS2fnpUKW0728uQvYPZRwMmw8LK5+n+aYErfB\nIhd0\r\n=xR9J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/density":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/touch-target":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.2daa49b35.0_1622823239381_0.9010915826204837","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/radio","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9972f827d9aadeaeefd493a98eecbb8c0058c56","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.08db3d737.0.tgz","fileCount":42,"integrity":"sha512-f+g5wHQx0adFXIGIcF1Jvpzb2EAqJ1iTaGBfzof+Cp987gZi8jOl7JwGhkxB6MG+/zSwum5K3d7YEYx+WzJ+5Q==","signatures":[{"sig":"MEUCIEbmbSyJNi1tzbtwCrNlW/4flXTJUyXKzDBjESdoUySdAiEA7HZYam6yZ5kyRHUCsq1/GmuyqfVZQYlaoZVicGOpavU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoH6CRA9TVsSAnZWagAAHaMP/1UJP5CFwlMdgokb4LGM\nZRld5MmG6J6GrIkTGyB7RMqKtfccep1DoaJstuC/REaliI3w5IENS0HhbYrL\nOWaLAHXc2znMk0XxUhzlwKgq3cb3dUXBtchivvdX9AD52sPbGUjXr2LT5Vt9\nlpGHoJbnGCoamJYvXGYfqrY0aZc8ddG2uP2S7QAH+ciKgkrfPn+GZuspRImp\nHXNkjIdiUzNT1QCIAoFMdjEPk5iRpBYXYeQdD6gy+i7b0LN0JXyNGIffLH+a\n+8Sj3/XZtTXPqI0ddLXlrRXcr0Mh6tJ+zUYSPxx6SUShnWsLwQQDC2ONiqhj\nxxLBRS/lBu/Zj0pCJFgHuDo5xMQ0OMItRPQZjsjHrm5HZnjRINcToQbTe5JX\n4qJRLdp43TEd2Z69L+4cTSZjKgHMsQWB6YHf7w9XB/fZz3PisHqcYjVyRJwK\nL5PRfXO5BXJutSCZs8ljINCEFsDOfd9SVOkIw5GfASvs9GO/kXixH6YgUN5c\nVw9C/LODLH0qA/KLcvsEcjeNEYu8LYGGQqTTZWyi3hYgJ4GTbWOFnpTpY2tU\neWoWIFW0wmYW6pdEICrQfGCL0xCuh2bC5G6YEwh7hHgyXJlqzE5pN1vGFGZs\n25QP/SxTvzttfoQUpJspgqHnaFUS8fvCURHRsIXVKCngDrhkTmvcWupMtFxJ\n9aUz\r\n=IV/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/density":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/touch-target":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.08db3d737.0_1622835706348_0.14254971831441843","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/radio","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af07c8b890a5651421bf17a6b9e99d798e99166","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5823407a7.0.tgz","fileCount":42,"integrity":"sha512-nShSuSY89rOygLYpplYKU1pDDTvTUE0+sjf8/1Rah6q4q4M/AFzllgBtywG7W2kirXUteNOw8FwB42quRdgoxQ==","signatures":[{"sig":"MEQCIBpGiyvvT6Vs8jVJYxm4oLg/vU56FeBfmZY/5u/19yo7AiAfeYkMmmpFHTVnL0ZtNImbqjJHdXuGFJxbOwSLtyBiMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5JCRA9TVsSAnZWagAAyr4P/1MuJMNalfdGLvFRZ/+9\n7LLpKJmr2pj8/QBgip4IeRH/XkHmZV2mXGc92WoEyRrc8Ji6XS8xB8HAzfTO\nIFS9vE5GQU/tWeUtWnM3pN7L7XYIDe1jUl5oVLAgvcULlxNB8UGfvqkZosDM\nK4aQCJCmnSuxfgzLZbq8LeW4JPYa3HLLcSYhpkg2bvsNSvdYwPDTVYXig1x/\nKMN4X/tjZ5dq5H6+/tiPA6/BYFVYH9rBB4Jpo7SbXAQKlOGaVhx8hRHRh3cL\nGzfk3v5AirlhZFlduuQHrDNOMVvIAPKH3NGxiaGDpRaoJa4fGQ3S0ogtgMds\nfCCzJtNy77MM6GlEMuv1GQ3d3ogLuflrIee/z8aS9RIgoY0/ZGXClMFWFM6S\nsfIj0MBAQRnCmuuSIti2OEmzBZ288HYoVuSgPHaRJAkNPqEqdTDbxLhaCC4w\nUy0YmaZgmSFU/au9/Hdb3W00+fEahYI4u4qrxs0KAdklMFFIQ018plsL67Yn\nWQflhJxV4bwM/JyGBOkRjloRHFUXU1mXMP1/NlF+TW2mY9ikJSEVrEsto5nt\n8I2f9Vaiqp8wWjbRwaKOb5hRgQEzkJtnf++phGY1Y9CmQrzMy1eYrXZiLdPG\nppDO5iLOaDFtLnaV19ddzmp/Aq8IgK2upDVYWb9ph12eh7C1XYTEurAMyC0I\n5/Mx\r\n=09Ec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/density":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/touch-target":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5823407a7.0_1623113288410_0.9111728546163098","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/radio","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c704b852cc3853eac5b87193578444aa51f416","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.23b0c5e22.0.tgz","fileCount":42,"integrity":"sha512-RHsXHJyvJGoAF6+ID6Se+Yzx6qyhcNyKHYFWIu04nybMH6zU7aQoU7bfPDUa1KPE8l6ymsQXGxxqIl5VmF8aZw==","signatures":[{"sig":"MEYCIQDSH/t1MLO0pRlvYnOEmTp2ArO//opK6u0bUMHmuVuK+AIhAKbBTaU8diDhnlJ3EfGlcpbmyF1Dr2mILBLnsCD8wv6K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5koCRA9TVsSAnZWagAAEbwP/2UAsIYGB4YCXuON9D98\n2tPmwwvjv3T6fP5EgmJNiChny77eBsqKuV5saix6FbNQYRGCt64+izeYAjkA\ndwJrteDB12zRSCLibx7LzEHEUcRp1X/vIvNNeKW1JoU0UdXrh9/p42jft3tn\ntCWm+oYm8bJ1EtcOIWsqOal9h9nna9rLwjsIL/uqLsO3rZMge/SzHgP5Sahl\nnWmNNKV4kzOB0xnO5HVtYHCusVZLkOEaUhKtfm6EcnyHKlMTbGQMsh3jb0Yn\nzQufT7lOKzcZHEIQqbCy8TsUdylfbj2ZHZKN/61j8v1w/KUC5A7uSPiO7McF\ntXgb1SmB0ay24QbpmM1Vl4cNdlBCnfaHIHkoM7A7wfaujHeElcTOG573LRrS\n5PGrE39/V7pvnt3VZc4keoL9u+8LoetHdBQITwbnNKNgi2cZ/7ppqsjBus4M\nHexn8Lf4uJsPKtZIAUKRiYaMxlyzKCHruzXyTEvHwt/CDW3e/hhYDdxmapWj\nLyKmhNtkOcDtFFYa2h2FqJ3+0rzJ6DHiXCHDCquOEkdcqz2WpWrzemIwo3HZ\nJKPrekm16QBrCh0Lzm9H3jA+TXQUlH/bUOVLZql39Zw9JlOCRLdr2QUqxpjI\niBKdZrsWCKm8Q7uDWEootVZKa6j11mEhgFzxGnUzYlx1LJKXuxNS/qUNwTgi\n61TA\r\n=mnkN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/density":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/touch-target":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.23b0c5e22.0_1623169320784_0.721539066502743","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/radio","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef71d4e5f9bf6c908dbfcaf9fddd5f3fd7ba55e9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.2952c6a76.0.tgz","fileCount":42,"integrity":"sha512-5vkldbLurMviHHI0dNvyVI1VCGYcq/1X3IY0DF5D36JDViV8GK+UKwRXAhpQ32KubRSur4McHsMsM2ha7j6gOQ==","signatures":[{"sig":"MEUCIQC6HegmxqlCe+cSS6294QqMUyTFCc3MBinq3zb0VcCMmwIgHZBG1mJzF2fWyU4/fmxXAgAYgz90rI9DXXoYhUVvyrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uXCRA9TVsSAnZWagAA1zwQAI+mi2dn6/eky712kiAH\n4ci2ujtrZiXuhmzhMnWE6howG9q2+cbqsBHuFUK6m9MD6XBvRtVeCiAry4Lw\nR16aiOmyIxhRwkRFg8aRjdU+6pPXacveMRHovagDMpIhz1pE4dQSDgwWcauT\nEAFhr2FSs9UeBkkCVPmU3Zvw/k9wgKNo5vKdNlqN/l+GNv6m5hiUbjGmzigQ\nadY75/gn8KFgrPsZvEOYO6mFtql+CeXND1bYGjfEaDL+058P48h4kpjIZtWk\nYiWo0ndSQxTuzL0vx3waxZoM+BRI65CmyBioV9COyD8gS0LyTtJPdoaQDOhR\nA6vuOvrXw6GQ0GvEEGUFRc6TwhPUbDbWi58rukk+lGFZ1NWRGZ2mAhoUn6T0\nYx4tSC/t+FDcYeH0RwHBEzI2SZ6ulVWSyrFOrMe4n+ZjfW6JxV1O/XW+E6ew\naZUrndREZ6oTeXuEEjj0roT0iWxUeQwyOHdez3PQlmfwxLFXyffz4V22HvPv\noN0FdjjfWXtAgs34HbJtYZiUjlAryMgYsNMttnWeFP5y/OAKSrGNkkNTMaOQ\npWRo6u5JcEWW6DqCOGDSLa7lZuK8zdPmQcnsj1ibVj4AUChUa9FVrczkEMyF\nCoiwe863zObARPf0mseaNPNl/4trIwFwrH4Rozmn0Q84O4lGVIGWu6Rg+x1H\nM/zs\r\n=fRS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/density":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/touch-target":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.2952c6a76.0_1623174038669_0.8275111672288828","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/radio","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d366bae3f5ee750577c248653e89378ac5d919","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f12425f88.0.tgz","fileCount":42,"integrity":"sha512-2sGQFO7/gd8WuiP7EZdzd1/4mDFj8kcL7oPV5DOKkVBkMWyH09cgjawHsA8a7Sp/8XOM6GmZav6Rd97fgIOwcQ==","signatures":[{"sig":"MEYCIQDdWkt06aPnhF9AFKe6jIYZLPn6nWSZOPamvphPjVmR5wIhAIEJ6bXKN52Pcq6JRahT6CoWBWWzB93eMyQoye3CUrE+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVtCRA9TVsSAnZWagAAp1IP/jQL2531ziI8pU0MEe22\nMoA/VBvCEDnopEDES3qn4OXkTeUrGyFC2geIFo7SxqpXOABKZ1UkNDYkyCak\nYNQm5HH4iuBgKWSIxVrpOGHMS71cud483rsCW4ozlMUyDW2ePFk5PEv6wPhM\nnKlnpjQkqvAE4l/lDezPQ6llW0sib/Gr4/i/4pIvrp8gDz/uJpurKIhkJNtf\ntMKkziVPPVkIBAtVV6+WzFmcR+DcnmRUM+LI8XtR6uHkzQHnc74GHiv2qqeJ\nZD7eUZohowY6XNEvx7F2W4E5LKgVj1ec5epaGtxWmliRmNxY4dCCwm+Kkjgc\nte8lfjSgEO3XkIhaD7ZtzfeDaWw2nSeeJm8TaxK5SwPoyN3UDWgdEvgjbBYb\nywvZZeyhuiZ4wEsiwghl3WhIqDm2ytHLvrvwqBNz9tY6t9k5UF3vm5NMyU+z\nSJJTzxS4tDCzQQvjBRQL+JCK41V9ktmBrBEYNs5zKxbJgtRCKZDHYbVAWlWf\nRVFOgaoz3zP1N5wZIWj+7lrtoiJ7gZnwBirvMFPlXipM+ZOS+bvmtVLXzCUG\nJt6Js4F/cFs3EZ118z/s1MsAELwlMRRvcsZ7KCAe1SWFMVBPl/nXPcuOECcZ\nrKYumJvyC7D/zlaCLmQQ1ugybIyrtBO5VnOD27iIX+4o5nMb86p8PZ0EpdIZ\n+zYx\r\n=ZLfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/density":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/touch-target":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f12425f88.0_1623287149556_0.37244557713361415","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/radio","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b8eaeb0bbae007a7cb2e5139470870a9156078e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e543628c3.0.tgz","fileCount":42,"integrity":"sha512-utFMNGmRb0hGpXizaM6yNdExw6l/tTR/29NbNXj2MVlTDqh4uD1hslok2jQjckApNikiScE4r+sC1LMNd8rDcw==","signatures":[{"sig":"MEQCIFQVR1X/ih8HJwtPEG1JUxPT2YDXFR8Ss2PT6p/9HrevAiAgo+/B3l2ckbH4DMRxtbx0c+Wjm167cRjvtuIP6LZWGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWuCRA9TVsSAnZWagAAv8cP/3uveKlSpmlarq4hTJ5G\nu26VD52kkL8fh3K1YY0jUy4huRQUF8840u30y9IbbFYAajWQb8FevkEYD1jQ\naRcx0Xvcsfc1Th0Q5cC+NYakUBeidvCE1ZPlJBmeDi122rdj4/cfZhxGDNRb\nRrbMVk2AD/yZtuog9w7xClR+boVrlQrx33BnWBayBMx+Jkhd0JltbzZn+eaI\n93OJY+Sa0Kyh+VxU0wjroX3+JCCnZcGFq78YhqsPv+qxdZkq6EoZ8r5kdccd\nMQNbAfEFsrhnQ/gQOIi/uXv+7kUHhmoisMuWwD8FfuGeWpdzagPo66XdFUdS\nYrS1UPKDooBtUo4PqEd9Sxf63L3A7njy/mQHiIwtczXcgkLtfCkhpmvI76ox\n4TDYhT9Iaoh/J5MHBqfq0mKC8IFvFl1CWAcJGWMRnCEizERIIBhhl02M0cyN\nQZ4Cx1ryP6yuP5hxqH2sIWvLwduANWlC8isbo7yTcvfWsoGNShaNzbqBki1m\navbnofri+TnCJt5DINl5xl60BaC2/u9BaTyRxRgzrjbTu+lZMbYkfwJ/GQ5L\nrAGXF4hWnyrIi/UMMqaWlzHD2auHPtSS1rAq1x1DLsliGVcu+U/+4q5bWCew\nOXuvHnvJUDSIhaG0/PcuUtk9UZUsMUeD2ToScJY5kLAHCcMpXh3OhCkmkoyp\nWUOO\r\n=hndY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/density":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/touch-target":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e543628c3.0_1623287214196_0.05825278278451251","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/radio","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84526f275c930882d419f1f42235296375daceb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e0c346286.0.tgz","fileCount":42,"integrity":"sha512-E21LWBZLZ9IoIvuVJNf835VGeHQG0kueWX2Egb/ZY2/wBvsw4FmVWXtgvSTsaasMlw8767VY/HVJBxwkqXyb6g==","signatures":[{"sig":"MEQCIAmZIG6XBYkpz8yAI71TfE2KYabcYYgWidiC8EtHNSC+AiA8+TG1HMTQW0uNcgxWn3DPV5YQJ8CeUNDu5Nw5TEYZgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9qCRA9TVsSAnZWagAAuAQP/jcCQbDNHrQMifyX7wN9\n5H7h0c43moyO9OK9T+aBuboScY/oEHPRYCSTJWlFXY9b7YdSz5WUSjGexMfZ\n+kKKpLj+AdWu45/Um/DVWjW5rAfNmQv47trVtiRIqb7HHeWSoQjHbF3gh2Zr\ne/4dbB2SzEyfaDKRqUpGCNNhC3LodGBu4iokaB1UsjqDCUNT8LJVxC+uORO6\nvbKjqXGrQwqq/qhqsb7WahlPAUf1TrVco7olibBWPSBtpE6nAKmXUZfFia9E\nrhSNZCXWmbdstNba7q5FVRPCc2e6lTYN/grWJDYp+u5Q5Kjl6CSHhonGNa7d\nn4xFrDk9MtBS0H/noIU03YKnlEcAt13dwfxU3lFkPhBWOOFxr9TdBRTCOxeK\nsHEuLpJ9hsUmcDIUXdKHsK+zpwxGhxgCKRez/ic0WLUtZ248C2Y3mZ+LeJ2v\n+v+hXGDbRI/4qnwNdJUnDa8EwjxGtGTrDP8BDaKWD0LP20VLL7YOO8vo2o2g\n3NIs3rHW/sGRCr3eZG9HC1AiN18QHegGuaL6xmvq+IFnLE+FIK9mXmJzbpmS\nwYhajb9EuLSnBp7MgPST8GYPPQhF6i5Aa47MkwJ6XGololCuZGX2ainra2fp\nGp3C6QKbKx5YJAVWcllBLQgo2QPKOtv0CqJBDvOw98eYKxmyqwRcLiWTfjDX\nQoF9\r\n=W7EJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/density":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/touch-target":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e0c346286.0_1623342954228_0.19261924116878526","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/radio","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ea9b91410bb0c61395db8b93ed938a0c7bf2f39","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f43af5633.0.tgz","fileCount":42,"integrity":"sha512-6O+WF8VBSvfQlo7YJZaUM9OCYUd8dncXGz6xHpHVlHzCUeSRjMawwXu4F3ZIvmxZSmv/dxKq4T5IU6sLtE5cMA==","signatures":[{"sig":"MEYCIQDvApB4ZFLwOCCpxjP2NPCJFKNyzFqVearWkJtGPA4IpQIhAMVeyP2F10jqbiFqY12eYAfAlUKuTsUp1WkiiH9dCs0Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneaCRA9TVsSAnZWagAAC2kQAJt/044NILqGXDU94XX6\nUrCUmuY0AEiHnhyWwii2GC3x0KuVKsX9Q4iiyxBwpF5qT8aHOhooieud1poL\n/3vAyLj1jRXr3BUhfhU+OKBbSL0ycWpYelsJg2cW2V42gssyFnCfvjuPBuZx\neQakplFodrkNLbYWjAJQKpXVVn8afPKpaXkHxjZ1UxgGViO1meAVNSkvdTPQ\nTAjvKsKJDdMl4g5FiahrdtVkSuedElbbsX3P8v5+RC+il49ZIdLdlnqWvKxC\nT+oQnxIp+6nqP9vAx1O0gznqks9zDcImL/3BItr5LnJe9R0y8Pf8afdVoprp\n+D+Ru2MqDEmS5jjNOT/NFWW7Uq4UKYX59oqbGllPS574Be0HT60K8jWRuasT\nYJzUjOVqu+Jjnfupz0483SHAjoG+9oxIiJA9331hpCjiZzkjCv65oQuY1cwD\ndzaj6+VLYnl0SP0Au4kp2671e8sqLmy3oUIZIKAYdznBMvrIdkwimVxI+CNI\n/q0K8HQFUh1+KZ9gftf245YNq/CiF2qPBIhZ6r7L9iLYILJl1GJK7el4NTn8\nV0lMeW+2cz3Z4Z512rnl+W0Viq+v+II9qb4JffaBXtq3SfY9zu4E4TNKe4w1\nzesW+gzm1IDe2VMs1ukWPnZxJXEYT5vxCI5tWRZgcyvy99ek5gI0Uqq3UMJL\nmJSe\r\n=woWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/density":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/touch-target":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f43af5633.0_1623357338820_0.33440743255664973","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/radio","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32abc6d8a552e94c2b6237350e21a6ec200e4973","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8415ae585.0.tgz","fileCount":42,"integrity":"sha512-pMqBszi6fqE1Z9ATRdLy4HWe+ZCz310kX2UWO+GtmG1fq/iZexnkh8drmrPq1B39EWCn3HE86tqf6zroqRsoew==","signatures":[{"sig":"MEQCICABSM+K9/zWfOGEy7UwH1oJC181/N0R+3XffbiZG0FAAiBWc5afWPvZCnRm7SHneY2hzBko3oVNXVPxT5mIoFtQ4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nRCRA9TVsSAnZWagAAIzUP/3sAcUmRJESQf1Yno9Aa\n7P7507QmPUMkPLpwVT1HstVBG7PSbkWZ/8V7BNpMRs5SSIeaOovK5ElF5fIx\n7h12josEVgE7/lM7JuHqCIZggwAYgAAZ6FRPqn0P0WPqp5zIeH0mZNaIdY87\nDqdaxzR+1Pj3+aQSoOVmNip++cbUbr0Jb88HrvbGncdTYisMuwnq+QOrYfsf\nru0/gajhGgZqP04MQrBR8jK5I+quzIJnGjpLnROifhqztUe6Dhr5AOMpU7ra\n2MHMKWq8pRpt+AdkvMufdBQwlLaRoz2/tpRHPytfwbms7uKMeeQQSMcx097J\nldF63fr0uXOO/f0+VkqpA7RpvghPnZsVqqmHfvdGplxE3CNRwmtw24/xpmcU\ntkdM2QcV53wymwvKD/XRs8eJJzaZyb3Oqgy7wycQVUeEI1PFHZCHlSbOAdsS\nwsetURm3nzBuTG2CBUL3btlJo7NdR/mSYeaFKAfTVxCaYU9QTM0RDvqHUbad\nmDncM/FdIAEjq29117FMMdzqNmleT6QbzQgSJCUEcbyJLG93PvYu8joPabwy\nOleT0Zh5LYSvuZNKcvbKTMnHoNS/T7+E5Y0bPmRbQGzPLc/sP/kP53Dblt4V\niqfj6idnSvXZg9YBcb8kvftPMHq+o7aBxJ4k6jMRcIPiGP8B9k2Y1M2nJHrN\ntK3N\r\n=6JIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/density":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/touch-target":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8415ae585.0_1623427537400_0.37805605485533134","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/radio","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dad34d08e9bdfaf57fa4ba43b6d92d4d50d6f5c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.598fcccc8.0.tgz","fileCount":42,"integrity":"sha512-TYcAoSQH3QoDReMyT9EjxSPJV2wT/8g9Se1+J53+BWmmGTKxXv9l8p0M506A05CjWRj9aF44SKZgxzGN+65B4Q==","signatures":[{"sig":"MEYCIQCd5RwI+w3ZDir3Hy4eavd8lSLCQYT6BgBGCFGKw8vJoAIhAKdK91mSpG+TqpHtWfenna/uYNTBixC57siBTJvgW4JJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9m0CRA9TVsSAnZWagAAaE8QAIWYjLFy5XEHr2Eq/6F0\nRymw9OhZP4epbns3UZLdog/RPDpfnzuQNElWhsQv3Mos4xIaX5Px/DJT/1SU\nRU2f4yQ18BvpVPd935pScFpLhkxmz3wSYju47pG4N36p1H+dJiASnKJmBTLB\nZ9vXte20vmP0Ox6uVsjo5wY9tW4IbMOewm6/5a/t/Vm8WhK0bMULZ4QrIo5l\nX/aGbcmXkAqI2zIo9J1SvfdP7znruMvGCXNKRB15g8jp2tGn3vG5iSFTgm45\nSp+DDhvWM77VjroJ8M2/I+7Fo2AMBwk8W80N1N3dfRThWIT8dlpRCaiY6VCV\nFnzJiL+5OJ5YGRdW6ay2FGfSefiKDo2vJaB1gfEL+SLP5YbYwUTR5suWvd5w\nS2XGQ8F7iMzlKSMN/sxbpq+nrT3vkU7ZrNVTLQs8ZorMQLT80FlCUnvgnvtm\nifvSHi4SxE0P4tr9gRZS3ksDYV1I+jDHpHTCRk5jJ/t0FFqtkvbpQ814ggN6\nkWgN2eBRsOpoBAmzeD5t87iRo7kXNxDFs/2YQJyo3upQeEfctk3YpsuzL6d7\nwea2lpv0s3hVQD//B4PJLZGHQtd4QV7ZjafXLGR9rSAKRvLN6gp798G4slDp\nhwe6Jy4pullx+0VGzZshVll80JyYgV00UFtqCKcpPh99yX+c+hb76+lLkRKS\niFiR\r\n=F16l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/density":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/touch-target":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.598fcccc8.0_1623447988120_0.9812586767971592","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/radio","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1ff94ecbbc2b4ab0ece0657dbba50f21b9c97b0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5d0605188.0.tgz","fileCount":42,"integrity":"sha512-FbL9z7au5NcTmn/57WBIatJa1JokZsTJ5RNBv8nRBKQRo1W1Z+/qZWpxt6IudpD4kYLfNHKUR4HdrhgrIay7EA==","signatures":[{"sig":"MEQCIE0J57RNXOTMjSPhPj1nEiLNjbUQra7AJayVeHPE3A9oAiBqdw1hUERPH0uXm4SmbgTO5d4qHk3HUvLMbPa78r3SHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5Q0CRA9TVsSAnZWagAAPToP/R5OPLJ3XrKhEtZ+4die\n7Gk59I96t7E4peZDlPXzfebCX927ULYcAqSN3bAawvFtrYPosSPAgn2HYIqS\n+sHc+p7/YeHWlmXL/9l2d2p0PaPzVWXkjhHplyYdFnyaUVUjvwimEoZAoTR7\nMbvrXcN+TIeZb4EL5pklX1SI714f2W8vcxheDANnGynZsumh10l2yZE5KrrJ\nOmIoUzTEIF3LSBP21AFioOLMm0C5ATczQZwfGHssHA0QCi4+qKVvsURs010K\ntJUzIFZXGY8ZAAJ3GNGPji3XIIiffePISw3eJ0jwqPY6TaCRNs+d599XG/di\nFjiGVCTtWtpwCWHszMSzsg+b8RRgu3x3FaSL4Bf+BtGyzGVjv5waVlaG6opV\n9ySh7h+Sx/iDsijtxi5FrjWX1gpflAA7s9Bzdasvm1r7Myk3aNgl/DZR9c0B\nA0vjf/GRQDG/mqiuKgwgo1BobWo1317iyeF41Thu/l02aQun/iTI/3Q9mULc\nFsQRaj8oBAb+ZcS7b82hzILHncf2JLx+QJQgVbJRi7xCfOJLSSAH7UsFDFKn\nIYq1nQipPzJoQIoHb0uOb6ux9ZlJF7cQPaDBYAOgVzke7qLxKJMuu9FbygJk\nlHAKb33uOlA9fh0N0l1n6E4hsxnk2Jolrsishg4rJFPi6zCNZqo8PY8pUDXp\njBWv\r\n=pIeS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/density":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/touch-target":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5d0605188.0_1623692339991_0.48372322320052685","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/radio","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7c7be33a2bab99fdfe4a5d2784b530e1357789c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f147a2271.0.tgz","fileCount":42,"integrity":"sha512-ParOJ/eLjZMXn8inw59qjeVSfmvoAwPj0hL5JDcjCuSHuYKRL52dqij0GNXD4V93tWxVYyL6t8CTT1gUsPhmMQ==","signatures":[{"sig":"MEQCIFA0bV2KCHDW6pVB37appBCuXRA4aXRmt+nNk8ABLK3eAiAZ4yzbOJ4ZR0JFLwdzPcCzr+hZkUwXZZ5DktPkdihccg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6tkCRA9TVsSAnZWagAAGlsP/RCYkF9x2HY7z41YN2bV\nnKWSEbstRVkE6rBIFms9+jgTFyWy2bUOwt+E0Hpv9Y3TTigsqzf4sTO7FPhb\nZaLtNyzjrVNqvFkHcdz4PeEzZ2/6jM7Lexzu3gJfOQIGtPYRMFhgLeRcngUX\nm0AQ1k5qgxBj7WPWH/eacHGV2GldfAE4YX5NpqaXGO8kOQ3mFS7D98Cw+IRq\nLZ+Fog1La0WBH5c1B2HVjA+xiM9ixUstmZsHu+w/8Jdl3Cw2CyprqDZR8qZP\nxyFHkj7wvm0c9SYH56dpGPaJpcGYCo8TY1r8Ivb2/jqW4eJ5R0zw7mp9l5JB\nih7D/1TdL6rATibZP0ZkQrXzttYhs/8CuS3l9sfo+B8AE0wf/wBn6o6oDLTN\ntiF6NNuYkapeR9RhjiBztVySNn6kkFPPbnxxcVXaSY79JfdTj3CKuYIY1o1/\noaQGMH9t9Aw8/ramAr/Xn8AK4XWGS3pwCoN5BQ+J7a7L2tv67Fuec1Q5OcXm\nUhC0MQ2djXcwuw+Vo7Fd9la7dEVyKx2+AGSCEmPIKOTKiygrrauIz5eWjdMj\nYbxo6unPjDINXQsSbnY6klk8qjhKqHYiamzckH5CWG3q8pB4zm+Xev/WSLdt\njjwHQHW5T0dnXBJvqm93WCIT8U5hn50t+K+rLLsClv5yc4qpaoK+qirfHOGI\nW7/o\r\n=LxKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/density":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/touch-target":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f147a2271.0_1623698276101_0.38376535040102566","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/radio","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbd645b8c3798eb61e75b260101b22cd00d003b5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.33579e00b.0.tgz","fileCount":42,"integrity":"sha512-ovhnlOPB+IWLzJJXo+26smWU6E6KKR0jN13qBnCqhq7jZj9YMSyifEKkgyPqrIErhErkiNXqs+HEAC3FyhFSbA==","signatures":[{"sig":"MEQCIH6hCHvnFO3evDXxCt6jEhv3cRtiX81+kP9/zdLBJ5nVAiBVTZI8An6qm5zvq0zjc7tOmCxscT/zHPPIHeGODlPrrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KeCRA9TVsSAnZWagAAKYMP/RQWX1Gf/KQV6wXXqbgO\nzX/YTSstL4rmJxdRmOT1FzREqG3RDKjYq1/JNuClKgnKodGMBwNyUCgDTREw\n+90tsGEcCppYPBU1vTgPPArnpFepNVIo9nN/ApkR5QJrRZ3rSdmSmHnPdRaE\nmw4Pl0s78hWRibu+/xVTBvpf8O0XFE0iJCY1TFelqA0xaUEM8bDpa/wAx5mJ\n0NPrASsL85DpBy7Wl2uR6ZQ5i4mvR4eJV6d9jjfMHiFGieEQwcj/vuBJeE2K\neFwluMbEuUy1mAG9fkEQjQE+gPpRMd8B2I9uykZ63utGGLUp6tB4ledOsl4q\nh99+Twjnl9AOrrEZWEZUdbwE4Xx+ARG8DoHx3t5bW6B9s2Hy93DqHnYcrLap\np8yLRzsLvleaherxFwY6mEbuGEBjafn9DqJnJTLT6YFBeWGvZ5JMOEU9zynQ\nSZDg+AKTlMOT0vxdcG6+wMctWKitza38w3vbXHXOh9247m3DIVjHOoPiDMpo\njX9hXdzsiPQJNqJ5JU0e6fC7TS3682QX0Ex73gkK5ZDZTHhNA5fI0HV3d1mu\nzeHWj+rqTldBrcgJs20I82j7/GmjkxooZ+3fkz3phIkQ8cF1ITfqlRUjJLjy\nm/iQy0/ctRLcoFLVk8RgemCJXisNOzG2E6N9L2kVW1dKP6+i9sQdv9qgWC49\npPpL\r\n=AU1z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/density":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/touch-target":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.33579e00b.0_1623716509891_0.9412367437436289","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/radio","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0956ed7d7de84d4479113f610b98e57e328ee248","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a6909c0e6.0.tgz","fileCount":42,"integrity":"sha512-qkYjyYz9FVz6A7Q9zo/YKF1x5NqtQAFeMSBzLvIWLeDdQz6oJi28JSRVM/8SHhSV2GJDpy454ssOVZu7Y8UzMg==","signatures":[{"sig":"MEUCIGy2PWMDL+lNklYxS03wiyiBMlqX0kEuh/5ybxmLX00TAiEAi8aDWVdkuGl2t3gyQIzM6CZsCPyjmLApdOghBod39tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGzCRA9TVsSAnZWagAApcsP/i1CXmJ5YCjKr5H4dR3e\n6qNlvEi2PxaXN1cA726e7JFAZYwGUnBo7hmhrWr5sPmy+yoBZGxS4380eGon\ngQwUedSvfaA0tNwCFK3YIkZAfPXMyvgKd96vsr48P3ld3q054rzTiHb9unfN\nCaVWZHipTC/R7G6IcIK1ZTWM3o3EK6yWyHHPkBJyLNJHn7UR5X9q8TjVxi4U\nw26+e5jBlmJPxKhIADepO6MTl++9KcZweSiuIriKvCkByHTL1nR2Djqm5QI5\nYz/JXyr/moVhL7cNbLMGuomA0rPhcIwpw2JymRyMAVG2X2l+XzAPscbSD5LV\npfR3VqrA5fQQb05PbqkLfppaUmeKQ483PPtXRlPcIv9WUFo5mxXooIKNs3nV\nkPl02WPIKMamDQ4oEbNboyvTfxIEjGLH2YGlRFjzVCGpkAqYZgZSmJKHwJLq\nHbNyrOTXcnsdGYJqiEvWHgwkemwi/k4C5J30zNkqQTycGZ9A6LkkXFyITFVP\nDdvtQguAYrviTfhrehJVzqL7BHU/Pb4vPDpqBHUaTQiHf7ZjucmtsnpK8pMR\nurxRG3CFC9ybWT3GdcbXGPG1WF778hAwfSH7ox+xi3huACajb96DsI/n8LB8\n5c5e+Zh92bgX4hlZt7kCZNn01x6DpV0ujYeDG1fuq/ZifaQWN8mdOv+CHot/\nrIGs\r\n=CZiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/density":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a6909c0e6.0_1623781810834_0.8801607633165069","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/radio","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e1785c731c902659d53b795b65d1efdaa49d30","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c18b5925b.0.tgz","fileCount":42,"integrity":"sha512-NcGKb5PH4w8Ek8RztsBfbKmNvbj+cCUPgNREtYNk5zlZ6/DdlLLCIW6Aw9rcCX6ydOmM7TWDevJbWWmnXj9F6w==","signatures":[{"sig":"MEYCIQCykIAGd0OK2spjdynkN0eks28iCr+pbQ9K3CdN1TqlUgIhAPNqgt5iZZAJUktShuYd+OIntI0Z42onVTvlJXq32Slz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWgCRA9TVsSAnZWagAAr6YP/0h2/47FUMnXjRF5dCqY\nIiLAclTbrjrxe4AZ/7940zyR81K5HpdrHnLSI9Vmpiva9YP3pTMI9hJNg+6B\n2Jkm8J+up0DPbOHQFAE1k3bDzsxFVh/9XQP6Oor5ylEeTfWJfoAIlLVSggTG\nxx5ti/zDCNYuZbmEhYH7cpZ+q0FzZAnV/p8L0IfMOXdVSMH2M9UFG6EtyswB\nD2948UIwlMfE0g5odn1fkGvi19GS4ZYN54+OPveIj3k5us4VBruVpDIaWEl2\nBzMCrgfqkRKPIsCxy+YhT4B9sd/t9ZftTXuJJpB9kIIvy5zWti6PRu3K1P/d\nBr0bOVP+YqiYsyYnULFHamrli6iQkyJt8CrYqlKPFbqYBeFmDv+k63k45I6Y\nCCdUwYB1lQ4YcqQdc62OfxbqpN32hrEPmpcv/vV2a/0dSvTCPagJprKH+DK6\nJU/mpwnf7QVLl6TVHIhjRfjYx4gB4DAfLXX754Uma5TnOvQiWmoFy5jg2cJ3\noUl3GbfVWgTWc2zz4StjyVhKc2t+h6nGDYQ4k80gLNb/VO7X90pHeIBo1un0\nTj3q3F9pbl5o1QA1/FeaCuKmCdzk8/jQCETJDwhmGo5FZxe49quwvE74nmST\nzu/ZcRx1d63YsFICuzl2orf1KR6bNrJ25wm8Zs9mPkV5Ha9/hjc/GL4xfPeZ\nPWSL\r\n=VwSG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/density":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/touch-target":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c18b5925b.0_1623791008307_0.2635086276936667","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/radio","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e83cbcc740dfb66305cf0157c23716403d579d2c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.7ea2e830d.0.tgz","fileCount":42,"integrity":"sha512-0p2bUgqKPhISnphkNDgviqwlCqeqSEhQAgORDevOa3XmVq9Iz3/R4065ZE74kEp0h2mjk4RBOizE41IUTenj4g==","signatures":[{"sig":"MEYCIQC7Wy1cVCT7LMiBMWAxLEU0jnslFIRh/irh8ug+bzTLgQIhAJA8OPROYOxzKYDtR7b0r3RuENkYs6prF7QAbsEr35Ul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6+CRA9TVsSAnZWagAAaooP/ip6ZrIVwUg++dhDZzMh\nh7mbbgdApruyutS2pSTGRp+t9CalMZq8qOHzak8lH7YrBHXTVEm5H0ya9t6F\nrXUt6miEkiRW3Z9IGz5u+i1cYDcyhWjl+jjY2s5pVYIzmhbwFKZovd2DkIk/\nSxNNpOdG/WtobWZnaV6+aBKg7doBwOEAJ0U2nvkTbnMPY3BinxE1KusEtlgA\nJlQklMWcw7OTpr+MlAMJ0mnZ7nhjqjgJsn7CfwBl4p2Bm1Ene0YCymhgDDno\n4e36ZF1hX8x25Rema+mg1tN8TNY39fYuRzVa7BDdPUmopEnSe+iq4rY54cBz\nG1ZljOfa/4iQPAiAMmOfB+I82baau9iEtDQj2TnyLvkJ9MGtVucrzpk++eRf\nEPGF2EorDgus/toUH8hr1FBQmimi30KUYwjnQzcr0GxTFg6CSPr8H+VlgzDD\ntf6NWH4pEFvi6lsCD1N/RP7dj9tDYCObbD+KKHgTdODk/h60hfiyX8+iXe34\n+wyRmY7/b9g0Bvc+YdwNEplCKMC7pqOAZM9G6mPUAL+e5aKIoMlZljPZQCuf\nz5T0K3XdJ6qdGEznln8gpE7+ouh7oWHqpkHJgFwvefCzgaD7/kof1z451LGN\nCv1x8Q+DDfPJXl2eTspt4+27Ls3Z0RvPr2LrGfO3MXFcYxmQIWXTvl3W5afP\n+zcz\r\n=luc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/density":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.7ea2e830d.0_1623797438748_0.672801883199738","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/radio","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac1f125d562a3a84aa7b43ca91b222c7501531f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.271fff902.0.tgz","fileCount":42,"integrity":"sha512-aoDbVzWN8s3T8zpHicu89cbyvXsNxxm+TiXM1RTZkWunDXq9OaDdtqVSaTk9WaI+tOAbVrWZ9fObvazdvs3cAg==","signatures":[{"sig":"MEQCIEvfGTQ9/nrdgUCfpTCaD53g44QuQFPAk11lRX5cbDt6AiAFyxB7SQPG2ulGs8dwp3PG02twwIgImnQg+Rku0NZMWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7OCRA9TVsSAnZWagAAPwgP/RREv9cPZM+VEsJ/H1t4\nZhcgIt+wnHB4V05OCJGkR2S0vey6PT1uXdgdAyo99drnkuL0TdGzfqM+RVci\nmpfmKzpaqN9u/Bb9zxRFFuNJjgGk9YY4Bm7SI9dTe5SKGa9LTkuzk0f9UThm\n4zcWwuDfjd0BzZmpK+9x/deYyK30CSOMX51ieegqyhSsV7IAlWZ+ZKmCK60M\n9cZsq1/zShSrxGfshDUPfeOZ715oDH59M/aeWTvIteV234lnVKDo8LlLu6In\nK2QTjHq3G7qiVkBMfB/SweekofKvzAK9NJGzntaLvgSK30vMwnePg6L08eHp\nu4XEFd++6askxcNPtfRM58jP2QBZ3mcGCC0UhpNrxaWQuCMA4tkm1jrgWHrC\nZr18mGEfhzweIxFNURXCrzDjHsu0f53wXI4+tLA0o7ytCZblnpaDMUJJiv7m\nuVLTjXfEe56aKdNRGwYHD2DSGaBqMtFWhU4HSSjspKfVXccisOnzw9hU/uqg\nRW4kg1unwZIDDGlV2vznafk+O8UghiAqj8fis1/HhFa/YoPZ3uGl6gSeeNTT\nV5ABaMDycNpMu6GadQUM0Y7B79457mpGpYa9mHM80Nek88QdPvK6J+og7HVw\n4vNOKr4vgyXkO241yut6Ohlt36UeZG9G9gEe1hg0q1J81Ql43+QMhh/EdTCj\nozfz\r\n=tOL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/density":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/touch-target":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.271fff902.0_1623797454465_0.6718336894980581","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/radio","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae5951cf282bbcb20a70f1a48054cb0acfc539b5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":42,"integrity":"sha512-1IML9dAF0/rwbfa2m/Ra3789GLYFkSHVOPqsRsR6eqtD/9JQ58i/q3cQULgCrW8kyTgaKscvKFiLZhTeN5jApw==","signatures":[{"sig":"MEQCICj+lsrqnM4iINJ6UabFx4t2lH71NqSCCrgBSjWYENTzAiBUMh2c3zq8vmqa/p2oZ+/i25bLIa0ZMg7UGwBgLw6/fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyme8CRA9TVsSAnZWagAApEsP/0h6GlyMvHZ2UfMvhv4v\nVupnuNxRPZ9QQWRD9VfVupRYu1sSeylLFox0zxQ8zgKUIZ6ksAbGBbIa4Plm\nIiQ7LMmsNKYt/Lw7UQSuXiJnBzwSADbFfqSFvxXfLJYfFSBvLdVhcFUzNOkv\nAcruub9MPl72EGP/bXcb3mxScnSQcUkRoClvxP8jlnROBlLw5bvGJR4dYFE3\nBr5mxVnvYCWGvGgeTPASV+vH8P9yR1o020/Qoxxn5JF+0MpIwLG40pSQwdks\nfito9zGQil5y68IHua7ml0vMOqnaM2AG18hyQK2zW42wJKHXlYh/nmEXQLtz\nPpUj03Dee5mqaPjX+l+1U+EeOwODdabPa+ZETC/uVQpgtKzxQfQid3fTinJY\n7CRwnEbHci9quPDu1We2ERuzXWlTb9HHfAwzw62+mlm8xvYdn/vV7eOqezz5\n1ybFmUAjl8JrMEk2Wtr0ccczgJdlKstNDgvo5+yLZE+AYBcwPOkfX6Zdltpq\nn1DOz1DuV8XyAwgWqfMbk2/owuMr0PPCkPoEad8i/t7xUdrHl9KNBfnDsTUY\nbzT+kNQoHRv4BsHkUU3gp2SGCZFPUOousXvNpys3Vi7AcpN6mcngVE4f8XzZ\ntYhoV6hKZ/7YwJdI3IvqNc92a7l7+7nry9Rlfn0RZBMkcp8rGUHo2NHOKtLy\ngUFY\r\n=lNTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/density":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d96f0a1e0.0_1623877563781_0.014805090494194983","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/radio","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b695e704af27ed244e78e27821b19e6e2caade79","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.a6183801a.0.tgz","fileCount":42,"integrity":"sha512-ex8m66xM8S8CYX0BQk/kSyeuWLSr9BLaUVny3UNXiJIOzkG4S5AF4csJPDL/5BbFPRCOukJ+Tx5n27A5mCq6wg==","signatures":[{"sig":"MEUCIFitORp3uKOtBEKUYmnZ84G3agIe7KLJ6BZSbH5ILmXRAiEA9cnGft/r99ri94QrxXQO2ry6+oMM1r5nYcX4Uoja8ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWcCRA9TVsSAnZWagAATk8P/3KH7M9RrOxW+nn6siTp\nvAQoQpdUzOj1G3UFmZ3dSnVIxGQbhLUGkKJimU13AcbXC1FgR6AoMJsKUtw9\nlAvAXbH9kYs1maEs+PIrFqCwSqaOz+k6DNHLLylXqolKgJ09EYyK7O64zQEi\n7xvKSgfDHZDhMdk4160gjR7MKg3+98ZrLsUcXdpeRIJBHalJN0xyaoQzzeQS\nreY8ZXeHCKXSZ3YLTrr9UJapT2WNOTltsbUcBZhh0i5zKB4zwFgM36LCnzx6\njzr6A8Mkcx+j43i5/M9U7ybdZMwx75UOrFi5LMgoPo9xmLOHTUMu7bOSizAD\nNPQCPxacxcxMSw9XBCHuho2vYcSBytleOny8OCXTUr0gRkIhvajPDb6Ptx3q\ngVPOC/nAIxC54dEFePumSSMPMNilrISgnAU9RyxrgScFMQIDTTVnkPT51CoK\nCpPV2y4drpHz/OPmUdTAkXmrxf8Qe8ISxmu4tAgZs1Lk6iOPHHyZxOL1D9pS\nNDNgVkr3byla7o0mTm7oc5RHJEg7s39VOfo5gr+/YNm7tacvwXc6K0l4y+3d\naNa57paQYhE/upu1Zxu/KoEoIqBHlvQ0DK5RlbohDrrO2G5d5V9O1dfPk4au\nzoxVJCctqlbwt+k3eVkVzKzz0bEWka8eMfqNyiEzy9qTJ6BBsPQs0gzziJm4\nO3h4\r\n=aNwt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/density":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/touch-target":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.a6183801a.0_1623881115876_0.28461312385652016","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/radio","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5482fc846cfadbd104da90822668632830313d24","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.940550232.0.tgz","fileCount":42,"integrity":"sha512-jaa852zOUIKZgNAS2LN7N/G6rAbWg5il6p/bDMJEKi7BF5h08NTBnhJapjces2hOk5nw3N2ujTYI0ZJZd2yD5g==","signatures":[{"sig":"MEUCIFume8/X8rQ9f4zSuBYR+IqzmnEoDTDLesWO8FlPXjtwAiEA6PFHlLP927wE5CU9fu6PjNnEUu5jzQrqDspmGO+tRNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6USCRA9TVsSAnZWagAA3FYP/1AmdlQt4sm/Kf0FmcOx\nDKZaUJ9CjsyGdx+qqo3AqTePbJSSdheERRsOmLlT70aLiN9CcsaR1aehPE4j\nifABHXjxOMZXvOwJJXxFkwp7RzlanR1qzURqw3WtVncvNz6nPCrqAYAdANOD\nnBqIEXhwuzjqYhGo3lihX1/Qhr3hv1rjyxnjnd24quHbAr5a5PF1rblT5AdA\n+B9DTp01n6CaDepC6cQiHGjB7ehZdV6ILDYb4luya8+vBQLrzeLdeEGm9/E1\ngC0151YO9JLMiu/uyAXp2CGoxrb2RFA6OjvHpr1HQt1Acd05Jmh64vY3liMg\nmij39b3fCdX0ky4zqHaQziru+P/T1r8eo6bceK9LELbhzw18deaIKhDok9db\nDB8toIRVnO5eCnFCxWXv6vfwV2dpov2zLl7eaYMfrMicjg+h/wN47e5FX1T8\nYPwfRLc78RC0sXhr2RayUeC9iS8szuvRGLb4YyTeFaw7oiOjvYFckT9f9W86\ncWRepUJ7h3NhLakxqzT36uVRHZ8uGb2DYkNdqzAcpdZstNkz247U+kHRcL7u\nDM6fdeIzeAey9IUE+JQbLw9ThEJYwk3dkvq8hjBsNEotfTlDtNFeU1yvBxmX\npH1CblhKF/KL0s3dORYFxeRVQgTXcr8aIs9yexb4kiNEp5Ti4HPqPOX5Ew/O\no40d\r\n=rfdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/density":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/touch-target":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.940550232.0_1623958801274_0.022539606821081914","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/radio","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb463ea8d33e8e6435154942bd217dcbfbf29b52","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.f705e8048.0.tgz","fileCount":42,"integrity":"sha512-7KdsChYfN3wQevVThkAjz54iZB77WZWN7iPaq695fU/lqZyHk4k4f0RkC1mZmDCrf2OmQIR6MPTvzWAk2T7eVw==","signatures":[{"sig":"MEUCIQCAKfXLX0eGWOdyLJJNozalb0nqWqjjF5DKU1Fy/MgdCwIgejQ1v5TR9op/kpHJIJ9nb531a168zTwNzWrIFosMFM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqgCRA9TVsSAnZWagAAHTsQAJT65cncLQiv4qbA2PSt\nUpyEoIgUhQlsCi8uH7umIF6POtl08NPxdq4mGUwD07/q1oCZl5McHGoWd6ZA\n7iFYFD1VMugKjBRm7dV1ERVWenKX+kpr7lE7ngF+0RgMS91oeZn0xSZO76aX\nx1gCsFvbyHvDjsPO7HkiE6TkAjlyfaKqeMKVvfLNf4K6lBcHqwcb/C8DEx92\nlAxQp4JPxjga2r9xwBZpCJqzBPYQAMP6kGdBcYZECaJBWysIup6Tgl813PZ0\nlgLfR4+lWl66rSMR/MqgIL0dYpdpbEjBQ8zzUv4NdHze8NsAbOPdr9uMAm46\nqj+Zpq6afpnsq0nUtlKCtBCMi6ENEsrP7SMHki+eBClz08f+txmiQZcZ86UN\nyPzp9Pqi/9aAeX6N02K3NPiML6zGhNxkHfAE0GxTiI7LXv8Pglc4OfG54S+A\nGsDF+gasy5hX6h2YUQHKpBakuTPTWZ2vy/SMUMLpZt3l/AQJQ5fbhUJeZFhp\nP01ugFpy5UzVnrvQsMkMzRKEPpxsepA/DRoTEQU/o7z56VI4lH8eksIj9O6H\njT+SI0xi91SEiifZSx3mvNy2iItnuglnWCzA2twPMrAqwFkZDTEFl9/TNEJZ\nlyY5AAni+0PbGk4kKrD3pf55v3BM3yXUw9t9oZoaV4fNDM/91G/2devd90Bv\nkcBR\r\n=Leat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/density":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/touch-target":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.f705e8048.0_1624029856230_0.8593024098478961","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/radio","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7462fd5a972694cde9c2d9f79a089450425a3627","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.08d791f37.0.tgz","fileCount":42,"integrity":"sha512-LWc9kQUr76yp2/DlWQR9TjeqYiSQpld0ZYRfxwceLYcuPDM58D07zXkEeuOGwmNZc8Muo+j+sxnjZtK0BhU17w==","signatures":[{"sig":"MEQCIEooYYhQmm+pEDlVpUJ5XqMwI7XCaJbo+bjAWlyMqz4iAiB47fdo5h1nIAGUvc8k1yBVc7BN8be0cAee5Nsg5ot+/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwDCRA9TVsSAnZWagAAg0MP/j1GayYdcII3zCcaTNab\n6PUX/PzN3kpNwoAijf4yyNN0vn9tWXn2CI5C5whYIeXid9Q1zLkbAidjWfVf\n+7Qmnkfs6YOBcO+M1l30x8TMRuIozvdyq9ryO/L1iylK3DIaY+Pl3OKWG/bt\nz5rqxrtNunog5qK8ljJkmKS8ptIin4v0iIF4raZ5RxAtnNGwFcDp16aJrxJ/\nYPftBGmnDqFjm3Qe51Wd/CjSw9THcOH5JFfOigUSPIS23+EtuoyVYRzds7f7\nA7H4Z4Bli8Cv5hbth/WmFuWN0yatCvfUNoesIHeby3XI60F0qHtaC9YtuDoP\nYRvrn4LOex2TV2i3h6/ILNVeo1yBvbmSrU2k5b2PViCsImm+KX9IGjeHskd4\nay31rUd1yXzARVasjdkAideuI57MfrkH2hiHfJy13CZKO79KunpmZVRKbi6q\nKNEXb9rqCDAoX5yXKevqB6/b33PfjxnEuilq8VNkHGy9ubQotJJLhdCXSS5v\nrfkosr/jfhWLuoY75zwXAl5aKtB/Pj2omGLq/hYpZxlB7zfT7R2r+pGbkIUM\ngF1YhmLpIXXLY2/8v2oZ4gguRV7dCYzr6dEL8kK9OpnGGHXh/ALAZJRGYDNo\nuGqlHfmHx+sZ8VFEN6Tr3PIdj2GuvJhZt4taKc497fH7Q+hmUvf7laHZhSib\n8mjT\r\n=cZT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/density":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/touch-target":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.08d791f37.0_1624050691254_0.5084673976320273","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/radio","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2e5819aab2433b303fa244073e16aba712320cb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e38d7440f.0.tgz","fileCount":42,"integrity":"sha512-Ge4Xk5hCaNs+kv4Z1Xdx8nS+W0/4rZeMbQ7Ww4OIX1PvPwPEdkwmXbxYVv7p8xfFUYv0FfCMnoTr0n9JxtazDA==","signatures":[{"sig":"MEUCIQDmC1AtT0BCcScL4+hDt2nIgK9zwC31yLrVydHdnPXAGwIgWz5RiTmxRs31bqoDRuJI+/4vBdflE+z1jsHNcIEvXmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8ACRA9TVsSAnZWagAA/uIP/2JhYs28aF1Z7/dZc4XX\n5iKleSw7JdynM8DEAeJ5UofqKIIASG+D3uTD6PZDqjQ6ue02AC0n/eMUUioQ\n9aKssmuVjn34pnnKcycaYagA4B4Nt6FZ5846OGUFVeJRrGZfJ24gsk/l8L7w\nWvGiW8iO9nsgSr8JnI5zrzlGH0F2bplu7t9f2dT8p9PnIXRk7XGEdn0bJjvw\nFXdlnYs8BleB2AVrz4BJRGY8EXOprj6xX/4B2lc47NMxZdklR21N50NdyLWw\nogNgR4bTQEHD3PLiTsTI8yIHuI2wPUiKf1ngcEb+1EncgtksxZcOqgMmzMA5\nroq6+A7OQcWStVqF2f2QXR1T7RdQLsEGqD9YtiBYgCg/x2tqQc3emaIsRMy9\nFlh0nbZLuymNqSm6JjjDL+iHboFVmNsog87KdA0kDPkfOoD4oOdQ2vGNKC/m\nubAKos/yAZly8ak5H/JYyfwcJy0i0hfoL0x0cRq7ykbJRY0YZcPAA9Hny5/r\nVto1f700OAw6aWxrJU5mPhVpX/n00OB9KAnoeEllW4QcClrOFIJd4BqVYepg\nQBm5n+cezcvwPI9u22aGzN14eXLCs2cxS6rRaRqYZpQJ3SoRoUC/SOk9rU4R\nbjAocElhviP8LBO2l8VI50UxGezx2IiEBZPqXNhEoTmtMnbvhs+wMXQomevs\nlTnC\r\n=YN8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/density":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/touch-target":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e38d7440f.0_1624297215695_0.9473267376614887","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/radio","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13ff9a69b10b6ba27ff17a4f0b9bed8d5751c0b4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.75900a5a9.0.tgz","fileCount":42,"integrity":"sha512-jDpZ+II+fImB6EiV6Zrqfs3UrXBZXOzDHfxsDtLRgp0qkeOBepxibN1a2FUY+8S9qY7B8ScZH9Yk5LkL+/5XuA==","signatures":[{"sig":"MEQCIBclkO56oHspT4f5fWtWq7ZJG8zOOGsai0mo6an4sxghAiBQMlaoWoutontRWcHEmPuBFeZFZBfVb9BjTpwu4BOe7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Nw8CRA9TVsSAnZWagAALVMQAKJ7siu7lI5fcnR7p3E5\nBM3dK1Rx2andU2Z6suqfJXt9rWGjeLYQd0kVd2hX6qjccGgFYodphN7K05VE\nIbdsOWJYLePlIeTDQiRevxhMj9wzB0Wmc4aIrZUCSTBrwj7zA2G/NH2KVqcq\nIH+9sVsIZIBlsd6CbKNXuTChQ2u3lD6Nl67Tv+suoGnWHdmABEzYwMG4FCto\nQmfVRcQ4v3b4RVLGGefubNUvdiKCBMwPz8PsfRuGF0pyqQRivMIrgCTINJ24\nkoEWATUhS/aG8knItrGN0dLrmeQWovaDyv8BwmNZzdiDb9Eo8NRgT2KQVpOk\n1N7HvulcYuPzDZM3ni8jCpsqFx5DqA8vn2Dl3C++EstNKvA+HHtGxmJ8+4ut\nq5mCYqFfC5TRx2pYro2dtThMrsZuuM/oIBo7wDdMg0t+745eu7ufStzRofUo\n5N6gn2N9saU5pSMJV0l+zu5FYTSD/L0I5O2StSjM7TW5tOoii+n0oQttID5E\nNP2p+Ull2zgFUg9yJMgTHttaASeNEfe6Jk0G2ADzSLUS8x72jHnRPOcYpjaP\nww9MuZbpA48yiovCnU43Q79yYT9CMClK1dS1xb9S2hv4e19Yj2UaC8oKhr70\nNbwqdJEq64zuxi9zNQhF/CMfEXD/FPezpmd7uun2fbOZKrLRm0C1WFdB0HBD\nN1LV\r\n=k+aU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/density":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/touch-target":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.75900a5a9.0_1624300603974_0.06832187377618948","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/radio","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08f15f0c54b73fdb6a048c66c4865cd82c4cccd2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.33e6f50e9.0.tgz","fileCount":42,"integrity":"sha512-DseLgZDjz2J57dDVkNydmziRK9mh0rafgFT88mIoyvBWlUuGB9xTbZ7jSVb6Sjw0u9/AvuDtI+PYaYpibNqDWA==","signatures":[{"sig":"MEYCIQDApBymFpTsJ60bdrzT6wesTVfb/nZBc2pea0nedR7bMgIhAMOK1tjxXP3tUtUnDhbGvuuJBKczjxBI7BP0Kxioke+a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxICRA9TVsSAnZWagAAlJkP/1uKlvrsQ48RzbP6lwiR\nujoNfxapw/pH7Pms2px5SzIYJ+ZN9gcSwPPrgn/kwVBEUNoUXKSf1KDc7Sm9\nZMEuPqld3T+wTqWbinct9l1sUqBk2pMjX9e7Qic7GG2siKFNo3HOR4KaHmXV\n1AS4lV4G67h+mH79ZIYDDmMQdrFQEs2JIZmp8yvZHH0akqaQ8Fez03s0oO1m\n+gvD+WMqwKdvDy9fTlGwKuiH0Lqttk5IvHWukvWBdKTYKutjkPIwtoMqnc4r\n4SRIakgQTRv73g/nXpOv2sNOghfZz8uW+F1hDzCP095S505l4T5boRxBqhqW\nfliHacRYwERTFIau09fBARjf1g0wS77IPt0aDZ/WvO6H/vdzp9ZIg27rcHdP\nlMvFRKnOvExk7nFIGfHiNDkLegDTvT9SdQZ4AGY3AtFsJozce2IPTirhJ0n0\nEXVEtuVv6mAVEkf2IrBDNBKz+59E58TVvscpOXbnuLqj+rGwqPKa7ycWPH89\nyVIEfT3+iirRrdn2PyG4q7MJz2qeed39F4csdS0zhkysVHGvP7q+hGInZHAw\n3QbTFFAnwo3k8P+WPXNw6nlq2NsxasVbtdUpJDP7nWdp8r2voZLVVlpZ2H1A\nf7mn8r/vt23j7BkwHiS+RiF+ofudUjfkaXIMjnqQBED9wgls6VjtkQAbayq8\nIsJj\r\n=FtC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/density":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.33e6f50e9.0_1624407112203_0.597037435501246","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/radio","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dbb1949989595d7c45527d04668bce915074723","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8c685301d.0.tgz","fileCount":42,"integrity":"sha512-VHHFmE/oi0/4Mv7SriT/H/9H/2IJzH4CU/ZomG2Njk1skCdAf9voVhteNs7DjWHqJXmBs4jY1DF6EURvWdGE6Q==","signatures":[{"sig":"MEQCIBcz7p1tJN/R64NZcgnv01342O43ce+qcwj3dqRc45r+AiAQ+V7TruzGzN22Gi20xB8aievTeXoqge2oVKfP+A5EyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xZCRA9TVsSAnZWagAAbuQP/2odrbgzXnaPQMahLmoz\nrEfaAUHGB0QAtZUkbS8hyDwUijbqnbua8EW7vjbsr38RYGSKkq7Fz9aSY0I+\n6HyMBpD830Cqtpl6zaUnu/y3HD52N/XdfC0tEjo1stSXrrKIwfuL+J3ns6NX\nGOIAlcH2s3J6s1jYKnFXXEG6Iwxkk10wW0p72Vj8v08oB1ZLv8/h3+FLCfoK\n03iUwiIdrFAvv2hoShTYFQca4GyhrLmlBT0/NZLAcc67evHyNQfDs87l7gj3\nJoHLpLAQsGCK+sZ9BeFx/ZoERng8QYhCnHTJTp4ZKXtMyVa8iD6WEmIewkKd\n0SU7Q+WV/S6RBkgofkdsuezclWMNKNnx/3iTy/7dClxTEbip/27DfjROY02a\nD8vLc5KZUJ9bwYraP7WgxiVp93dshtNRvAtsKGY5RS27FdF8KPVfiIn2CrpL\nnczvF+YDp545aDzNgLVp070Soi1DQLzWuKlCgEIPSfyXZW1CfixqXGAzaHbW\nNHMAR7QsFMhTDRCYXml+BlxPBe9NGY6L+8XM7UFPVeLCW4j3fSpQO+2v5uxR\nSFcycX6LhHHSUnMiUEDmsGCk+WG3Y+1LV9yLIYsTAEBcApUM0OWpS5JCmXJD\ne9gsecCA9o1f5xRuthD8lh+8WoMgP8fTrKglO2GY4yohjq/8JuW7oWk8JQpJ\nrTFb\r\n=DuGg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/density":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/touch-target":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8c685301d.0_1624472664769_0.9411433927951873","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/radio","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52c90a2a378367ef4b2d07958b821354d610fbfe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.8c7d994ae.0.tgz","fileCount":42,"integrity":"sha512-TBv2ckspKNdwAn2gC2BiA2lv5/9snfs8WNQzCrY2Vqe2QLjyysjusGuPEEPFbS2dAypf+hm1k1XMNiNpCbuJtw==","signatures":[{"sig":"MEUCIHeSVeGvI5fr5tF2w8J9Sh9PVhFs4WDCkLL5Fis+aFk1AiEAjEUin0QtunjFJUhsJHT2s6OUOFx6UTL7FamRjla2ot0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sRCRA9TVsSAnZWagAANu4P/i9Vh/RCd41BIhfXfe7t\nZrwR1/XpPi4o6D19CMwXbYg9dgPxU1Mbs3JowzXcUhtQVO+9We2DmA8l8vh4\n/QB/xReeGGsutYjkaHZsz2+KmD0qJRQ4OBpYr5WvDTxfs1pNDOVVnVPamZO8\noZSrjPO7dJcp1lunLyL2bFo2SbtwAdsT2sh8nWOqyRZK79YaWPmFffrlgbL9\nRLLMbVhjMyJeyVUbk2VfAQX5+/YyV36xvJznRKvQ6rQU93YtjPghp1LAhGL7\nKCbHthcrQG4CDWt/gzR5xGTlCpuBw1u1sW9lv6zYyS/AYJLSrUNH5AikqyFd\nWziP5TJ4wl/9QJFJPiTrmX4HU0FrDWaHio3AZmRY3JcnCmdcZ0EKidierDwl\nc+8zFf+3m+Uuh9AfacKRMdTEhrL/01nS/xgjiORD3hMHiZysxtjEB6M7jYlp\nPDXMGFNJfbWR0Puk/oPPL8C19npTwVLn9rfoiOkvvQryPfkLiS8fyk1Ysjym\nx0keSLdpg5hAWu1Cxvvs2HRl7O6OeD0mT7vhRkMDpw1yVGrDLEbZuEDAScgF\nuf85MTi/MRUiXQ+RFafCQ05E0PF4EiQ9x8x9SI1WkfLfY6E251V4T5fGbOoV\nsGf/PjATECQ92JkOTJ0TQNQHghFePqUYo6sluAV/YNr1u95JNGuPQAQoaW4A\nJwY9\r\n=ZbVd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/density":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.8c7d994ae.0_1624476433134_0.8942887640507715","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/radio","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17ab90fe83969cd1152d9467f609f80da3fa3664","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":42,"integrity":"sha512-uwqrMM0sKbMMgDjNwM0zhdq0cKlvtgptO0lT4+ZBV6mIs/rX+rY/tPIiL7mtlOAqoxrAMFD7G8DJ8t4zvoC50Q==","signatures":[{"sig":"MEYCIQDCfKnqugihqesTqdGi85QfGQkezkT456Pg338Y8jgAiQIhAIKt2AN8NCcm75Ts6PQWg1QKUHJ3sDdKo876SqrxALet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9zCRA9TVsSAnZWagAAaGIP/3bAgpLLP1S23JZT1D6O\n5Q+mc53KS6nIlCy7bZuaK5c7oWHQZ5Vk3h1tI3JxRcskhkXAbc1GkoAElysW\n1dLrac9KmBbPKjlglbqmoupcLHi/oJJ8vDtvTJnigjn+QzcqWrHRwho2EEQS\nCRgORZH3hZK1zL4e6QCd5EGi7qz7lZCCi3X4QYMKRv5UOIc3ifV/Uq8441+a\noke4iuj7Yu2atLZsA4oGs8xXD+56OTyWZVCuJSXkhMCa1utJjOZXNz0bAq7+\nL6sjUyMA9erSQG9an7U34uJqfPjZ7eqjrLxD2ArTmsdEt4eXNVK+Un+rpV3M\noho8rAtJ9QKC8diP/CWmtioN8cioe9w3QfRyOUpouevjoEdDYNmG1yK04o37\nvxxCIzE0aivz36B1vWP9X00fRT5neamtibfMHvpjmAgKkxhhOssArV11cOt8\nL+dnpbrNu9QBxMiI4cMbQZi3kCk8laCEPot/FY843D/Bt2ry+Xi8sLMiMeZD\nZtel9hOY4gAtJruBL6G2nflWeWY6eOtoI5OtfK1STzLjJmHEK77MU7mT5SAp\nly5YEtU4Pa7NtonCy2Ro5O0TLSZiAJn4C9BYstUoEaREU7dV2hw2mmPJBkq6\nefwIGv2rK81mZvn5gIgENkk6omqt1zVZATB8yrpSIQJ0sDF0Ff4rOgm1/+Y2\natrI\r\n=rpA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/density":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4ccd39bdd.0_1624551283179_0.2626822801355073","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/radio","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56821dcd5f334b0646713512d0437c7098b9c269","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.17553e9f8.0.tgz","fileCount":42,"integrity":"sha512-9QfeD4//BcFS8qL10M1za0rLXakGcWKM6007fLzjeWWd72xemKc45/qF1JKoHpq+KcddNW84AtV9jIOlcOooRA==","signatures":[{"sig":"MEYCIQDBBT+iroWvY0zY6HCt+x7DmIbXSllVzj8YIC9X3CsKPwIhAKMpVAsVQvfk0Mz4O5UDi9ifvNK1/dA0/iC6+FZH5DV+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKlCRA9TVsSAnZWagAATYoP/A5qlvuApahlasdapuk8\n/Rn31+DRbK8PLpc3ahXb1r4AWH8Ngt4WVOmNpNn+6BTaF43YDYjTnWN7j2Of\nSFNwyopWdEMbCH9EFQ3bn6V9lo09pb3zCUK22ICB040X37YkT7lYEwEmId30\nR5xrgvadxaNN6hv4arJ1ystWDtx5EdALxWTqHe/f0Sm6iExLF7bUcW/QIrRk\nVNG6bZU8wZNuTN3lSkxW4fS4Hv0KI3xbLdCvTpw/6aF1Jhn7kxSGFPhKkVYb\nuHll960IPbaNnkl/1jzvIn8ZbfKsahHL4xzOYntj/RelyMpijc2oDxcl9c3b\nZUmfDK5DZqg8BS9cmGL058gNII8MZmbpeeJvXbOvMxdrsw/zPtsLtuqLhktL\nxp9/DmO2LgoZbMoz950d5DAXJOIQQ662Zy1UoZ9TEnREYH4QavOWlM07M1UW\ndedwqPYsDrUnMShHd7HwTMpdSCgIMM+AwyvU4NJabTeL9VIw6/n2rzcQowhz\nE6I4DqZo8JRLOtqgBRWS7CyOF2a9gZOZW0C4qOWCAjPEqVzDs0cf5699jDWZ\nJLU7E4w/64fA1xxk3SOpAcJo+evEwnkSmQSvm7BxS3nlZYYSRgkNi27PwX52\nRbvfRK1k1AK+bKSMzZClCuKEDVrOQQW3F7PiCMjMPdDrcEyWF/y3rofNKYJe\nEORh\r\n=CEmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/density":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/touch-target":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.17553e9f8.0_1624920740295_0.5347458713225914","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/radio","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46bf1caa0d8794b3b64e64a615f4763eefeb244b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4c80072fd.0.tgz","fileCount":42,"integrity":"sha512-6lnH3OuBpmkOm4DIs8Ow6AawqMnPxX3ZDpFp0L/a+AetAYqLArgGaPgeL4HhvvaAWgyjfomZX8DxnX4rIXM+kA==","signatures":[{"sig":"MEQCICw4RX7HjSH8SwggM7KZveJWCBS0DRIVGlEcBlEab4ybAiBJsdL81CLXTHiUGO07B1YRaz/88TaVYOMMtN9HbuXQIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22kqCRA9TVsSAnZWagAA1bMQAIjW5dgA2FldFQl1h/0d\npz0VvAVnEVx5tWJxZ3sKncvBLyzpjpDff8y4QcCnLInswW/wWy+MNcqjmFDY\nxl0H5tgJVo4NDnR/Qi6aNLCKv6wBbtj4kXpM2rOtOcPtVKgTa21FcnxuU5S6\nsbwfYxrsTq4XYf5NZvRbW4Uw6cuUCxd8PWEQU6vLdZ6XTbx5sJiKbJeFpljC\nQ/bc1EW6sI3XYIIHCs+LnwbDeEmqR2nBbfzLIhG9FiuVWVcx8fBcAr5Rpwqz\nu04UxlXn/JDcQti0Okka8FSr35aXcAsSsjUPeZQZi4TrhZOj8Tp6yWFZr3DJ\nLU2n0Zm5+7w8yPSV77Dubj+1fID1P9+6T9h2+4bCRFmsQBMgra6h7Bivad9Y\np0kMFfokDIuATrEDKdeb/NCn1hMPMaoK6bbsBbZSnhNNhgpVSMSdhIiP2+Hy\nHHFt5rBTIiuBdtChgnPCUzMcG3D21xxQ1s504QtQcrYTcqWLxxmClH21zpIj\nGR7MntNN8zUV2e/oDQ/rBA4GPSAvUFZKZJr0Va4PDQqkhyDDdRMX8WFxKmWj\nLnVw15tJpNiOsTxuRkQAWHgnUacAQg50QIhPXO22wSGTcSDO3J9mj5TF1rG7\nKPTCq3qUBkV0nTBbVr3IrdaHMJ3rDiUZT+jhVth8WfFvmLIeGd8b+FfK/AP7\nePm+\r\n=o3b4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/density":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/touch-target":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4c80072fd.0_1624992042147_0.2540236315674953","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/radio","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8524e8f79b4201411846e453fbb4ec3743123ad","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.796811db7.0.tgz","fileCount":42,"integrity":"sha512-8e6t/FscUxdvi7SHopJzUgvxfo7FvK0lBD7oPtYn8CiSdwcuU3ipW0TOrtAR1CI2pH2zpcmjYcS0FqJdVFbEeg==","signatures":[{"sig":"MEUCIQCKM58b8+Dze9ASnIZdoVXkf4rbp1FiccktzPC8hyadMgIgcWCne6YG4hif7vepREt4ZX5Z0yh9FOZ0Y9+e3LFCyUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZPCRA9TVsSAnZWagAAam4P/Apby4psmsZD/kJ3+45U\nhpE6HlvwTZbtSrmYqI+h2SRhpiVtvfQrlBS0oMYBKBgDi2T4yt2xzzuY4EW+\nMNycAdQ+do0fny3MePH6MszAhSNXd/YRWczepvcY97qtPTN5aIfd3eWPDHNU\nDToHvHcEWBCBqoDDDuIcecXKf5JBbOZyfMfuybJ4PqlFqtyqdRtPEOyPcwwr\nAo9B6d5HG435zVROygmkPrIVRx+CZDSVXwcXevy5gDIigyrpjr3v+wWvR6IV\naN++f9cV7WldJWuP2/ir5T47SliXbMOVoIVU0xJeIPjZ9jhV1cECJMpQgmQS\nIFLW8hRYvEPGYg3Rautlv2i+WERzlDUSsCYzJc1LvIa51bSKfSbAsXDaQLbw\nK7MpumEk4mpfUQ7guuksH5pC+ntq1GrBf4oKIaXDwXNXlLs2Ms2s7VvfSVZn\nwVrju1pwYOFsc0GUcQMbMFNP9PsJCw0TGNBDiePULUQcojBN7liXxderSebI\nlZ8nTpXfrUpVkZpFR9/2QdqN9fec8x7/eudV+0YvkaFnqRHIurXAQ/SPmQPi\nB1VFQfCDKeXPTAnzkpc+QTK6BLqDV/FFd7UsxBIaGk9ZlN4shQcfbMV2nodx\nmVU4tdMgbMv6HOoe1A/5qM1iZyx87sTB7w+x4r7xBOSqoHMtbPwxaSotPeri\nhjfY\r\n=e0sW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/density":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/touch-target":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.796811db7.0_1625097807424_0.34002238891533865","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/radio","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"471451dfb467c405e3e5efc922e8985d8263d4fb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.70e1efdca.0.tgz","fileCount":42,"integrity":"sha512-thMHdvLFrZHuevC1CeamszZxIPyucOtU7biCwxsHDnbWRysD2EBu/cI1RcmN7tjX3gIHw/ISpzA5eojoen29gQ==","signatures":[{"sig":"MEUCIQDq0rItQ41xWT2tGpu2KPxTQZdqOQ9Z6A1k4arkIYiYrQIgSc7rA2P8y5SkFUUjwbkHIg/e5z/WZe5wib43iz2CmQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYMCRA9TVsSAnZWagAAfnkQAJNMdoX3d7uds5v3TGXS\nU/6mY/HlEDEEu9OXvF0yLr0eriqlYadO5O4MsHUiNCIJapMI2AEddSVenvCE\nk0PHeZ852U4/vjlhEhrK1OqiOb6r2MHxP453oIyT94FXNIB0D/lbVi3QGwI8\n41iasnre0v3NXFQuqMK16oALRli+Ew2dgxCtmsdBfv6r8+XTw8cKFxzvBlm0\nQbLZWmzGQuVTu65+DzCof0BKK2em8+WU7J98o5qV29rvCehFxR5CixrIcLFA\n3OLHNiE9tYAfvhGF4R1Tz8Pe9AMgPc/vvZSBVRRRRtCaZQC1lvYWyRvRIAoU\nRohAa+m+0BTIX391NV/4PKSCQZrb76YEjGMqK652bnUar4frE6C3uDLH5KTQ\nEn9mMYNTLRCQvC/LbYbwjL6ZbloMI0gLa2qQMaL1aR7bXQuXgCj+MIPk7GnK\n+jVk/HgifyxOnpVT6WR+ePq5FH0nuUWSqsn45o+7fg/b/W2nDfSKkln3p/2O\nJhGS2DyhFnoZy/NATiMToRJxUy4GRgGO4293VeuHjJ49lR6WtB7AHyGSgJE4\n5V5bd/ucGnq2RM1tqPe1Og33gPWJGQQ6EJUBGzYmix/6R2o4fQ7KGWXkKEj3\nuIo9lDmzqmd7WCBPCkCXYcCAMLHgfvdP9iF5b1QRLhZeurM7ZUSMCoe9D3rC\nQXrh\r\n=ZarA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/density":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/touch-target":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.70e1efdca.0_1625159180454_0.8722536631624422","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/radio","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25444dc66b013ce95b90516fca1c3be31500f6a7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.435866d32.0.tgz","fileCount":42,"integrity":"sha512-gacoDKAYwTA60gMgyHA5CPb9gD7FyjevPNgxVfU/4PRlfxSMLFE3RvSj9BFPk+oVTi4mYdCKPhVfyWw4y0pQoQ==","signatures":[{"sig":"MEUCIQDFNeJY2HII7DY6rf8uzUod4GMzFHXMemXNdp/sopl6LAIgIExn7ZdH47Lx7pzP6Ulstk3WfI5Oq3wxC6pdrd3JxwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kPCRA9TVsSAnZWagAA0yEQAINquMQ3pAliXO5fejpV\nvL3qt7E3ap8H/FDAGRPdUAvVt5rd7CfdrnnEMgQM9bpGpsvc35CoNBRUsM4Y\nXPWREAhGsDFJhuz8xNKJQqHqyxqKquBp9CQ3sCzFmJ3eFWv/FZOyLDoieyl3\nl7nxBb/0X0BQijYXYKUyiBiumxvUyN5xs92Q6U95iNP7WrbnWa9Jm823IFdU\nlBZzOOFiAdAvYHCPCyPuuoMu+TGh2ldGG0FcAtDvxNNwVCEuo2RZv1JYk01Y\nBisCNHTiLzCwMC/6ertyv2+fTHI8Rj+ffwzLTMc/3N1cYtuzfD2HFuP+QLxD\nPsjce+JcbEjfH6DpmLFA/I9Bj4fTSoMCIyCfbhGGWRi3BoJH36Fc4ZPrrVSP\nPcZVvHKhWX+QDzTMF6dt5uHg5pWFwZGSiWIdzKc07+x8ipbqGJrIPYPl3oGQ\ntzSmq9rO03bjH49PNcbnHS/qYPTALgHiuNUNZvvPIzNRPJuNczm6yRLbmxKd\nKPYRrSbdbias/VzxUO8BvK6JTG5hsmAj7styU3+/G8frkr6+MQJ7XsUpVtni\n3WkVV1tJ9z0m1cGjVxf1Kj3N9vXGAS3Ge0XGiruucAV7Uv4B7QBSiyzHduv8\nV3n1GTOxupF041bl4vfTc8FcGnFpzsgxBrBZGIVoWXPaD+LpYr4LFAXfdM3S\n9VHA\r\n=ks5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/density":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/touch-target":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.435866d32.0_1625250062964_0.6540706449533045","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/radio","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ebe8303859aa4011b4c4b085888174e9fef1cfc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":42,"integrity":"sha512-MdTYkOgO9JxdsDDkKiP8RZF0bEsHtWUcNL83WQJIHjJKVdwBLffRu+elUu/pGSRY+uUUyuGtDhMRymyDgHAcTw==","signatures":[{"sig":"MEUCIBLeQE0SGJmx54mTdXZpj3EHAH8WPwWqqm5Ac1ZqErKtAiEA0kjBiObZkqZplbxU8y8wbBqXeO0lTf+X+njoGn8FpeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36h3CRA9TVsSAnZWagAAUjEP/3nrCB3fO4ZLMLi3hOoA\neHskcv0yvHGdOCGLs7x69fUjRsjw1gi2iKjQfAuorHwq/R1YdZTqERi2OWcZ\nkbT6HCXzXnv6AFcJzaSns71zeV4oVhc2jAfNyyr6LLtjFSbDKG+Qb2G1wvSm\nS7AXIMWgNGDnCzWcKFpqXlCZKYbcmIth2BFZwpXQAqLsMCzW7FHICdRcJRWE\n7ytwZzClkerdqvNv6ejnD6rxOOreiWdHzNySqxonyVzMdiym8Es5eLkiie6G\nyelqGOKxGyDtyWGWhoNM8ahuUpMZ8+tK4xtxRwdaD7xnaTZnHylBvyBTqGkI\nN5whQ9/Q0GHpPPG/S174s7CyxAi8abZfyBemkokFSNy5h5H3WgAFPq1oOBJI\noqnNVNylsVWxtfCF2NJ4LVp+jTPlNna55ak0YXdmwP13utFeNfAB5rcmxHIj\nhWtgdJLUpMyFHbRIjqUvhLwB5qXmouVL+8F6/4gHkTdy/yh0q/hkzcb4tdTh\nkvSny2WlgWRWTOKTy96AtjO3zRkE2Yr7LsghOMgjkATMGxx8SRs8A26kFKvx\neRseamXOfURUCwcqSNRUJd1GakjIekcVUVXbm/JhdAwASo8gQ4BTn/USySnS\nNZmk73cVR7EFVM9g1NI5c2Q14optiUE56Dz8fNfbgLxZRKzFqJDICfOTGsuI\nPKQf\r\n=rFN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/density":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d0f9f3f2e.0_1625270391108_0.7052617286426328","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/radio","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ab52cb636acbf10ac48607075af7e22c4ff416a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.adeac0549.0.tgz","fileCount":42,"integrity":"sha512-lVQ1mC33ksEFVVAGyMrZu9m6ZamgTQNkmWVBM+kcvRaApz+Ts6uyW2WitzeDNa0d/URIBz2GOm5zPevfDCRrKg==","signatures":[{"sig":"MEYCIQD1olP9gMRIEuL0SMT8FX2eBQB9jeIrW7N/ZZcHsMIs1AIhAMkRtBpeJHS92h5WVWNi2GLNchHQuqPjwGYGq6CO+kB1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUSCRA9TVsSAnZWagAA9LAQAJLgkDBNG4+gEvgmNdED\nwAWw5tkyPJYHmOLOXFWgrMy5Q/vkp5QBWwEGRfpbvzpJuuT839tNg9anAOp8\nIx/jWX/SAbcx7XSWUQ9sr4cBYlRJMLOq/gN5cAWoWG9h/LjZdo2cfbrfiehw\nmOfLXXxCyxsCvopgCVKFZg0ANrE/5QnW7SvKP7mTTt3t4HiOTP5tqT6T+X4I\n/HZorffNXhViKOXKgJgZqhvVS4ujKzOgwBHkNYvTr7OrvLVI1tFnWC8tmAcd\nCznsD1+IyLP8/9KURY2jk0Y/PI+ieyzvhPixcf9qeEJVzbW+WQ1XGxZn9V/0\n7y3pjt4wb20yYHPe9R+MuMGw6m2+V2M3OpogW2I908qFGZNdBigCrt2XfMru\nr9vapxSZsadg2eXva9pHh269vNGniLa3vSC3k/LOJTTp7eHE9QmoYsQfanx0\nXv+j1TpckImIaZBQaDMvAtPC+ki6KY1t5ISD8rANTOTOCU45iGOZE+8C/D5L\njX2xzA/kbzFfppJJ2A8XTxrV+uXKlJV7ZspRM3/GgDyaSfvGWLo+yot0D28a\nG3lYukCS2x+1EKz7G0fqonMHSzGfhtRlUR0gbxs+b3sz7+SowkZqIxRsRM8L\nv9Ygi/afbUZHoU+Mq1KOLzyK0VvjE4sUIcAE7FAysP5QvgwH72Sd/0BIG5j8\nEb4D\r\n=0kfQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/density":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/touch-target":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.adeac0549.0_1625756945968_0.7948885081949126","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/radio","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d215a393314cec75cd07164f7e9ae37bd0450b73","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.068fd5028.0.tgz","fileCount":42,"integrity":"sha512-Q/ZTmQF87VsuXQJ1fNIJK3dYb8GPlXz288I+dhwMXjCutr5c4A2fE7TNqsLQFM41gkHgW7ILa4lhjZmIbZ+Utw==","signatures":[{"sig":"MEYCIQDHdJbnjRrRPJcezhRylcQaWhzIdV8vhzJcmz8XCNjFzwIhAPhaTvkv1NHhAstAVMGUlN+/f/T7xnT+51WMObd64Bnn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50v/CRA9TVsSAnZWagAAtYYP/jAVuBJ+pOmbm2STZZ5Y\nBxnBrYeVIMuIrcRxJwZ9Z2kg4ST2i23otx5pOAaNjl5WELIYZv19Z334hHz0\nIDX6IHaFf9neMRIVrrrub1lLpCpBp0KeoEb+mzRkaUCmGCxFG3JEDA5b28YD\nL7vF0CBSboK4Qg7tVCXzsDwH14pantQGderlAHRM/QXyaz1IgA8rk5JoJSEG\n03lm/fKhvI7zS7cJPYTAVg9RhkCFhFYbxD3fskXsakOIwnJqBBSp2jt7cNfh\nuaRe/5i6/JksGPKN+FP8cx15diSzpsBsy+WlBlEBLCTDqAwGjYg0g+fhE3vJ\n85iNIN5v+fidU81aW5IuoCO5ez5IKPGv7imIGmBYvYHM/pELqOcOP65WL4hP\nxT94vOhO4bTsVFSpFQ/PyD/xPUbE2rYm8FnLi+S4l1QhU4NSmm+J7DmuT6Kk\neJnOhAdmvjXrGwgPz4wTFRgxTucNjdQWz3bIqdUKEdKml93UE7QTcSeRCqlQ\naiinDkI/iUR3PPMLfttmZNzfssqgf5eRKWVNEb+T7WQPA5m4zAQAoo+nEzic\n5dw00oIyM90vSOn6qR5bruqcs74ri02MAQOPZj6+TVBzgBPj2k42sgiKZXtv\n3Ng/CmdsNnFVIM9br07rDTHoypIGVNZLYHPvd3Oea/vBttp/hh6ZdfXY0+ZJ\nVsAq\r\n=nuad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/density":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/touch-target":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.068fd5028.0_1625771006735_0.5970033298199022","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/radio","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce9c448ca4a1955b151fab19b7fc20309a294f9a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5dfec7a14.0.tgz","fileCount":42,"integrity":"sha512-VvZqtI5bRSJ95X2G5ek1VQ0NWyqRDDiJZv0ElPFOIV9pYQy5Iz9JiNE1m21P9bOqPazhIuqJAzh1sskM8VQirw==","signatures":[{"sig":"MEUCIQDrxSetO7IjN6LP13FZg4Ds9MOji8MM53XWPTT9zNcQ0gIgaj5KUbF2vbcmNLJY5ZF/GqUHhE2AKus482JA6+WYwaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBACRA9TVsSAnZWagAAUCcP/3T2gaYCK8mKW+BjVWFJ\n8y4hTncigNThdnaXr3jcJtkrEKdq+/WOU1klksrIX/7YsDBGoXm4sxDl0nKe\n70lxSil7uTcUpXHdW119b52Caebc7K7jW1LVmLz9ptDM+RlWhBTHkKGdflGM\nNTYCIB9gVxoYfHh2V0bDgatA57waCwlxkpoQ7MpKcxpcKOfsV/ZsG7f99IzW\n82uSQEM8j95XQeElBCzfwM16Pn2fIcx/EhAkvJ7S4jE1kw7bYhdzf329mNED\nZ3WzZm9nj58h0fF5MwSMgGPCPjScMLYtviXZSQ5wn8XtlmIjIdKCcShr4AC3\n2Wezcxr07A3j98kdRhTXm/yftn1PmyRfwg52q+Qvl1Rn8KODJLHp5Mw3J92w\np6H76aLvmV+m5VKP27SmpVvt04DAcNKPgngUyMRTqaDSgQrXXPs+eqNVMLpw\nMsPxp1vm4kPQ/ifVeImNpPJntkxtHr5vdpIuw0YHPiFUsps2F+wLOYIv2R2p\n9p2Tcx1Wwjpc3w1MERbVBxyn5qgDzpY4zsV0603sU4qQUkprcXolddVKlMV2\nrGF2ILq5Dxsby6TKBlYJ/GZ8zIKHHMOaj0cFKcTaNAXhlNnwFy8FNdprG8Yk\nJLLc5HNSifHC2eU+v3xyrk/bF/JVNDOaSfwRTvWSUyCAyBfH/MLfXa+KdAtx\ntPQX\r\n=Fmsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/density":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5dfec7a14.0_1626120255875_0.870769452958216","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/radio","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b6cd6c79f75b5c7ad6819478bc276b7f32f54e4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.07a73750c.0.tgz","fileCount":42,"integrity":"sha512-dEaWi7k2J4VVa5IxBYbJAjMQ0b5XjNr8vhsYHufrWHG8l5pJRQqEU9i7G0s1QayauefAsqZ2gnTxMYFJbiVJDg==","signatures":[{"sig":"MEQCIEqXjOIP6GNPJ02B822h6GkHTHnHASAcsVMmSkAXDuhaAiBm4pIqX0628AvTundvXrsXqhfzUH66+WSJMOjiCGqdtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUuCRA9TVsSAnZWagAA4tkQAJ7pC1VgQA1pkxjdJjtA\nUFGfZzNkDmF76EUQOxyx4ItTrhBXg7/dwJYU8go64DwBX0yR56ccMoQizGTu\nffSqqzmQXvhmbNY8HmMUzyTgZW8zNzF1eUzBxzFuAOfIMXXzZM2Zs/PbVmTe\nuS3mwu8jpzXupPimEx4VojsOwV3Z1fAn6uDm61Fn5GH/zAERvxGSBEVhAEa+\nbCjHjJ+KhJDfkF9uX7fuWvV4DztBPnZIXYraurf1Z2/e6sk1dD4uGeSim/MK\nixcRLLyvKV1f5+ievJ51oItRDx4ARZXaW4gQl6oy3iQCkWIUEE8b/vwp56MX\nRx/qjpaO7ckF64CfBqT0x5RzjT7q73Tcvj3SUNqALjfIB4ubYSb4RpMztpPs\nSpLRiI8Hao0/ycjCeJ4fldWMZJ83UlJTQ+qnXqRW8TS31pv7Wg5yFV5C1afI\nmYrdUtRNkBiDYrL8vceIHn70wECzDTQnV9av0QnXN2ER8jA4chwgm3jfVAgo\nQRE584hLBNBFEgm5aHID22WwKQh2W6W0cplZpTvIHqYnPrSVzJNEGbh098x7\nTkF0uhp78Bpl8j/GXJz9CZnYs5zswoopjIO+jGAdwzaucAs/BkGZxRe7Ljsl\nRFyF3a4X46CFvt4+7ipj8TI8wF7inCox1J07+BNkTRpOaAypZF6D/BxXt8Zo\n4wH8\r\n=40C9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/density":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/touch-target":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.07a73750c.0_1626121517739_0.009838187439782597","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/radio","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef06ea0227e8bd83d2f9e89c0e399a801ac68ff","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":42,"integrity":"sha512-AyE8awevVw/9XHxSPwWg4JbIQ+JtQqQEefJbkokKJXW3GhIZwwOAYeNtlBa/taAgt2DF3jpBkhUosIb8wNn4fg==","signatures":[{"sig":"MEQCICVIp4fktkSLcgUjdmvi+eVmiL6x83+zX4W6yC06FKZrAiBaqqCDkjc2CG4l+HkRh9uOHKZlKGxlME2xdEs+Ooz9Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGKCRA9TVsSAnZWagAAV9sP/1PrcBjxsHhXtm3OEncj\nl4G4KfHcLSAoYty+buW08AGaPBMp0wGw2YuUG2F2reVp9BagF9hzYppLacY2\nUwXNceZ/PrWd4f4h8Hj6xB1Ec5Z+maDd3AR0adkCS8XZIkO9zOe6vjSBHP6Z\n18pKOvxhPAKaS14ldSA0ekiVxQoMI1+mmXT2MgECRw7C1s79fbR/cZ9B5xU8\npIdmP9JopBSUMFmsxTw2tbch9CPQt7HlqfL0+FGC4+mn0w5c8eAcnKwLyKdW\n1eJjfYn2GbnM50spdLrpV/M1GusrbpW0ACjted/9Tp7mW80zBYVu61FXLWJc\nrZ5Rv1VVDSDyUwmH2RBGjqx1ALpZn+5nVCrTUdHDCdWagmoZfas1tHoR9aVV\nmoqdDNnfcYZyMIeJwP255uyHVeXrJIPQjj5HAKCkM0IN85PKPdEvRVqs8wfV\naSEIwIPnntzi5LXWxTesZdl/3lPbnBX9kShxWYRKuk7JPaJ9or4n+yOhSyww\nM4d//ZZBYv3BZ+M3xw0dm0X6LPbDAt0Tts9I5n4R761/hErrHPd+9mH29ixW\nIyAwj1oiEMcALUqKyBwEd5P4gT2JwzwfUfrNIvWwbbZ3OAUhGnMr+qiqgqz1\nhR/k/DlKvPdDNHyQy5p/6ecSYi8k934KWhwMvr/vPQwRLvjsp86MqhdmwLNu\nkRxY\r\n=mgEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/density":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.3e4c6dca1.0_1626141065842_0.5856789970713052","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/radio","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5774eb576cea79a3b399cb74efe85f9a038ff4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ea77795b1.0.tgz","fileCount":42,"integrity":"sha512-8MrQTwbck0IJhPzw9hPdvAO7xa6GLfHT3ZSnjUDjPMDSSCVEpWt70paosMahSTJ3WeO0KF9cmDFmGJ3h2oGEsQ==","signatures":[{"sig":"MEYCIQCGLPLCO+uYfwqs64bpBiHq7Rb+kv5gPsYVBIJZKVDdhwIhAN3iVYZcu4UMPYqm/1W2yBatuu+Cj0QmytsvmiCX9dLk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bX3CRA9TVsSAnZWagAAtMsP/30FF6FAHnrZi1C0WEAI\nzRQOwixy74PGITpm023QW8vbCxQykb136/o4XlcSVrmXLyGbW/cvGvGRL4GV\n6fqJdLsOjdOiRFEkIvA7SjPwH/ursLhhihalRy2i/B3gzdIkzTG9gYhfN3+V\n/NxHpFmirtH/2SK3Inalb6ec3oEObiX6/ZK87//MbVEHoO7e1T3pRgLqL6Yy\n/bKgsSqLg/yI2mUXS/oEXajIYxQ479tDlWYNGUKuL84+NFQMD8tOpkQXf8dc\nx0Cw17VFJ7KWw6Qi/HM/x66i3h0GAY8rJ+FpwlVeIR5b6JQ7VAWt+HSXeGl4\n/wvKQO6u/y3g+QffU/eIoedIL8RkwbgBHaQnj5afV0m9ykQuRrBVTNzNR4DG\nqT4+Iw9fwn6+d1cIO8fQ/mdLBw9LSK1mIr4Y04K+3P+IMEHz8NpfO1V0bVkH\nujhNTyO2guKuxL4B0nsON+mX5R8kZaM+ePj063PWPwMvwvqFTBA+iCkm8D0Y\nZHi1a76uKiAQdaeIeTya02lvjl+Dv5fe1d0b7RGgazMBaWfUm2dAp7u7K5Dl\nyqOi5IEpD4hiZYsn6P5yZK9lAhNX+s3FZeHzzG4LDRDmTdZDLYP3+8m6ywSn\nHAoKvrUBD73oRVzp/PVd9VI8kOssRlhwdpuqJOsTfPIc7kQR67+xQWVSVdMX\nGRWP\r\n=ZWNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/density":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/touch-target":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ea77795b1.0_1626191351199_0.8211825037542784","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/radio","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38f54da2ccd2f14aaebedefc0b30bac8f913129c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.15a179fad.0.tgz","fileCount":42,"integrity":"sha512-PDPLjmE+/pnNZBhHt/rGZTGvKPsFxvVeLuBz6BjCqBpzhzFzsY7cK0f1LFFpZpdD8HO3BIJTCcMhHZx27nSYSw==","signatures":[{"sig":"MEUCIQCE6CE4sSlMRtsC30BL1L7S+XJ1Y4HBUn0wDOENG8XrRAIgVmF435auY65NMvuJiVZLcywCa7QIJ8i3uaLdw6O21LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbFCRA9TVsSAnZWagAA5AQQAIezixnKTFzJTAt6SqDN\nX20WLXXH5Ou9zQEGUhEryDoPwSgAREpMCCSqKTjs0iFoV8+xWsMXbLaT68o/\nMxGeu6dAD8hOmhPUSFIMlFjh9zw9Dr8zL/QK+XmSVPsV97zbvTKbJPwNYYaf\neUjAVz0jXIna19RV0x0oha/TbmIrlFDFBljEyLhLH8xZIobdSQb1U9Jepo/U\n2OOwJLDDthRehpDz2SIkWEz3CkpOCTXbNaitXKNIqUPh7L9UoUg+VfNg29X0\nmJSQtwh2OvLgAkDhOL0TrBA+JCb4QZLZcBYjKHG68NUZtF5nUDnbDyqXbjFx\nZ0eQNfEBwB5qdtFBtUqosMHsGX19UF6gA5hnxCzRJFwQaqZBtk4/K89eIJn4\nkATblfQy4xvttm9DpI6yA8FSy5S8BcE4ew48J3cOb+xPYrsGEx4iuvRujBX0\nkEnxtmgx9dEeivw508cJfPPMnAbfCeButzyvXuH1iBVgEzsAL1jSLXQUYCqT\nDCJ5axTCYLpz2aJBamZW6MOLbngNJoG9ecfWis/wVDiTJflXJmItSrwJhAaf\nwRgdxBVtqKDz4eZz3bloeOsfMgloUJaMpbIk2aD2S3AujMUmXpmuGs4vbZ/o\nxkOEE7dOA+9BE+dbkmiBg2CDrW+AIjz3IwbU8MYKZbg610yWd2/RPLFjV4fv\n6q0G\r\n=ehY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/density":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/touch-target":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.15a179fad.0_1626199748828_0.21348123037543698","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/radio","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713a09c99dd36aa98a7da22d4245bf9459b90ab3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.c73142a1b.0.tgz","fileCount":42,"integrity":"sha512-Kiy7Qm0yIexhJ+MpynSIk8GSDwrcAvfKMdP+mV62+SZErwVgM9Y05GQwkSewHRb/xwe5IOC3aWrlB7KyKewmoQ==","signatures":[{"sig":"MEQCICzgzUZp6TzOEDZh5PuM3ccfAjyI1VygE/f6g+IPTMvYAiAvy+Rv5auv2SEDetfjWzQlCFAcCGKMI7hvlD0IwvI7mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7zCRA9TVsSAnZWagAAQWYQAJ23cTyKdCb6KvPKEmCh\nAzH89YkW1VIoYHgHoe46erF2pCIa5z5qA4IpV1UOZ49QFdYqcWkEGAOFE4fX\nu8zkUcYqPIOj74jCvnuQgXeRqLKh/SkdNyjCgHR1VEjlCQZHQPFDEX3yI9xk\nLHXBXpwkjcv6VhrDSJRrq2CpTzm3HHuNfejdxfGuynXOKiMJPqF71XOBCl0D\nenD2H7JVWWa/C6D0j3cwfu0dEciNP0RsaptfrOYnO9Iv1aBD9BuQrfoke13u\nTlFqzdDk6CZLuOQD9wHkVu5rteL4RAIK5SYAE13a0auYb/uxCPPb+RD/X+vf\njwjjXwxJICvpfqUcHCDpZjmjs+SdeYh/L+3Nhym1CEUFWsA/ww5oj15YwAJw\nd9CXWVarGIXC+W+1ajjgHs3hd5R2Obs7UD5UG1FS2FWtLQ1CeGBWdDVGQtXp\ng6m54MXyMueB4NY1cvGLkfy3hIZiQutdWZZnGgbcfbX3Ocn3jkewj762GijX\nbmfcUJtFo6FzOez03PzuusPzeOHGyYbj7fU/boaI6UnOHkqO8yybdaxdULBy\noJ/tJpzgsZxX+tYxq76dX+vgMhTuH7UzCdw4v7IOSR6YZ1+tzKclXTj5vmNe\noF1Q566lZct7qmN0ZahLhwvZhVRrUG39UthyEWy3PQkeeORFgk1aUKRw8PfU\nunmk\r\n=FDk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/density":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/touch-target":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.c73142a1b.0_1626201842535_0.8983530382885943","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/radio","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"101977bf7ff7d5b99a87c8021ca167f82139f07a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d923db73a.0.tgz","fileCount":42,"integrity":"sha512-cC0TLwmqkYbp/ZLilxafhb7ZyrsSbvbFQDov7CVqwEvASbr0Z/7TSdM4ZAcX1oCc73yff4Xh5ZUD3D+4UcUw4Q==","signatures":[{"sig":"MEQCIClMywh/5esmHsMd0SPudMshzIUfVYkHjAHSCTB4tc+PAiBWxG9C4qkJjnI2VFTOnDSavij/ByClg/NGlMeAansthw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1bCRA9TVsSAnZWagAACq0P/i39Hzq+IkedkAp5qHtE\n9ujcvHoXUMIQGrLefIqM/2zF0yjQR8ZRmpllpSvSaM6I7fCKl0iH2BeAoSSL\nvQ6BPT/CbOZ3ijK176P5G0eWDydyBDmxnPYUP4m1mPY4Hnh9qJd5z88aCSok\nvfBsbOlg5CjjaXqMhE6RJHvENgUiIP2+S4PT1T2Onw3tMMpc2oWsUGXs76eA\nq/nN0fvw+KsyaFDSVOybIP2lDuUKkqYY9oXX3OTh1dJyGcuwjmgrmmWKKM5e\nXvvDLd1jU6zRexm21TqTgP3mELw8SqcgVp6yMJTNTwT3YlDOFDL8QlytNddY\n3vXDz7MtJ9aUo8Oa+r3wPswk8DE/z0E03eRGX7/CFAMFvVLOacS6AuCtshPb\nHzOTrh2qazHftKkBtqZNl1AS95u/889RxGMmTIiDWlSof2PPWKXa18AtD/ee\ndmC7+D12WHyOrmEGIaSeTLCXFELcHTtIcySv/cMonVzVQIi0eXGkGR6b4HUg\nuyqd3LNHnDPOS8rembMYdvDM76D28ZId1y5nJ58GkUwu90LKk2fa7pOJ5VlC\n8wZLjaySWMgky/BXquQjbeqV25s4E7s1pPuzPLKXFNBNECnPbZOMEDuT7rvU\nbxwUnAy6EDPxC9pk0pSIQl9PpIXvY0U4gganRvwxFLE9EsvScsYo0AuoAygW\n6d1z\r\n=R6qs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/density":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/touch-target":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d923db73a.0_1626209627033_0.21321537132252977","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/radio","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7466a2caad601edd26c532a1507ebf8b556b1d6e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.22d29cbb4.0.tgz","fileCount":42,"integrity":"sha512-piGy+6YEtW3odicIImRGnc3uY0iD42IAe4+pnVo36KsfHLm5peYuEc0jrLI4zdmOPYlRxSskIbAAzfMKdwKG1A==","signatures":[{"sig":"MEUCIDN4MItL7KqKEDt6F1cechq+aessR24HVK33agNJhXHpAiEA9CyU2gpmw+c467NEeGjCDxAAWYFFHJZ2QHVFIKexDh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiqCRA9TVsSAnZWagAAefsP/jjQcR8lm8EpntIPv9Fz\nQ8esi7t8N2dM0EwGIUNEEmd7K0k8dcA/fqFh/bZ9lMYS491qgcl+GqICCMos\nqQ/OgCpjnh+G2b/UbzeOIH14YrHhlqHnYxJwwc9VzNTkrfUqnASufdSnhc4m\nY5rKiK1uaQWM58ZmyrIXlBF98Y5G7d9FuiVMU4yGXJVYAsCkKGHZwKFVM1EP\nJBXnnoW7DmBtFSQAJUd3LTkqGOyls/eAOHhwbvT7h6OGLeh+BbwmEh06Jx8a\ntc1kjGR0dGF/jpmjEEur+bHrL8Q4ZmKQvO0uWVioW/XUQ3C+6xAzkzQspVs7\nXBiwk/hWQMq7o6ubKHuK+bNYAWgvUB8DCc3rQGMDdNekHrNvsUU+X3sKknqi\nKpcxlF6vheDdCeitvayZV6M6hf22nCYDcljQUC3WYs9MXg8Rb4ytRI5qycxt\nyXLCn/e0kxxeGsjQLwfCRks5hMOgkuJeUYfZjmGx1ie8EUNDw3cKZtQ5b/Tq\nCSfxpTiB3LlQX4B64pYFcEkOAk3oRI+SDtad9Q2HY7RpQMos17yEbcAJr2gt\n1NPQS07jAaWdsf92rBfdFo6b2rT8fOetzMDwVqUpBUFIwc5uteTkUk1hCu0Q\n4EWQlI9nUfoIQ+9pw2lkMQPfvAlfW9NgSdAoXodHJEAxl38pw32cTqMcPh7M\n4j3l\r\n=x/sE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/density":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.22d29cbb4.0_1626216618213_0.07364783465620128","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/radio","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b3ac715c9b4ce8f09979e32933ca529eaffd9aa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.2749604bc.0.tgz","fileCount":42,"integrity":"sha512-XZFWAYUjYe24IqqasNkaoSSC2BE/NZP254fAsQSyI9ZFrvg0zSeSUAAfs4NMVXjNJv2PvE31AlMafG270TiCFQ==","signatures":[{"sig":"MEQCIADhfZ6nE+1vBDgNfHm0oRca/4qzPc7g22Qb8WfJQeyxAiAV2SkKVWazT+YzwrU/H++TLf3W1tnrBtXirmbfQmhVpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w82CRA9TVsSAnZWagAAm8UQAJIgpCST4h0+oYHoya+7\nqlIl2s/8bCMwNyLDFRVnKkMtGDzKxQEwRtgAidRbnI+DQ9krnYo/9uICPMQo\nMH8X1Pjz9IXxT54GUFkWr6hmdlvD5DmNOeOC/md8imJDeBNaLQspoQkLfSxt\n+NMLr2eE45SZjhwwNAcI4i5c6SoGpGMuZsAr0ujan9bLDr+mR695gU18STgG\n7L1dqDtVjE2fAAIFvjD6xV74Vn1PkQ/f+R+rdVGjcHcEFN3qYtDZAOsI3HYI\n8lFj8hFMgfZzZrKb0JN9Rsb1txT749xVQ1OPTKDezBa7D5eaQLqSD278ObxD\nDJil2bfXZsWtMRj0cdvkQGcuCDymYxhlFLB5hhKSyLHI9VpDm0XV8eJBmf7K\nB3GCs7w9fW9ifupb5MphVh/dCOt6UUubDkUs0w/qsVllYJd/QFwpxN6kEdNp\n4363VTYKTOFb8kl6IlVgyP2j5GRk/XmU6p7649r0hJi2iNIXl6Mbo3jTQOs6\ndTSN0FIbffNWLnQTl5xIdq/51/NS15M3PDcnjDKjru/dpSfPLmeNxnPKYO0W\n9zILKgDZmQdantZg0Ws7xv8gG92eCquLr8QQ6R9TrCJXVYIJqI/iBH4w+0Hu\nZsY6gY1Lxq8K8jj7RMCYblnViiXa6iZFiwOEixYD5h/ve99mqi9DlWyPTO3J\nfq5Z\r\n=PhLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/density":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/touch-target":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.2749604bc.0_1626279734090_0.8984239267367282","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/radio","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b12dadd8cb0ffefb25dec9b06843af9a76fb93ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.e1703bed9.0.tgz","fileCount":42,"integrity":"sha512-af5MzskjSmazgjQyClv8hn/XcIbFSx9S6PLurpnVNRMbCGLfIuKgqTQA6MEaQmGGcrVm9VXEjmgm8DKVFkrFPA==","signatures":[{"sig":"MEUCIQDqojK1hLqnzc1rWCvS+aovaNOYZe0Oy8jt3ELEAtx2XAIgTp8+2XODa4TqkW6yxAdzV8c1efSjBT3FoXP+1OIuDZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uMCRA9TVsSAnZWagAAv1cP/0hGW9g9x9mip6x/XuvJ\nM9eljw5DVAQtDeEGk3h+XAO8wHKr+5MzEilJt2jhQleSkD/79bxE3P7y5iLC\npem//i9cPlhc5qxaTyUHh5vz55PmXJTmWOvnIMY87wdM6DeBO7zeemLdDg3T\nWCN/0AhvUTzj5KTvFuz2tJKqQW1oVXrlxJXyxTSHZpUVpyCuvYtn9zXYmBm/\n6iJiUE7poMu4KhX7XRhKeP3P5a9kZRywZbmoE95npVd4OwQUoSFVGAxmjjgW\nXoJIFxQewQwcvi3SorAhfmmIIvoYNM5R5LTihe5uGJY1TaM92nvCE1JxJHfe\npjUNtyrrmVvXAJ9Joi8xV6CuEXamU5U2EAQ0JGuQ2S7dvNgAMnOshxOHgHR2\nttZalNtxpSn3zwg7n14UMrRf6Dn0Baav7x/CrBv4KJXYXsqd7nE6peXk4i9s\n+pC3LOcChREngIeLut/hNqiADzbm3EHQ9IIl2xG3azB1QgnN+Gi3hKmHao1i\nstHk9z/4EJRqo1X79OxzwSAq7vsT9u8nWO5GPM7fAgNTi7S20J6Jv2Lhgris\n+30DGr3E7Bca/LAjHJkcejCkC7b3DbiqNHDRVwhl/sGLKRy/7MQHHgtcoudL\nZMk33y6wUm4T33OW4B94hyzGkxuOHWzqRK0urJB9JX/gtKgcNj3mKUbmQgyw\nPNhu\r\n=GYRt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/density":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/touch-target":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.e1703bed9.0_1626299276317_0.7740318042861489","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/radio","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aba746a909d769241134860a7d4ebf8b42ef242","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.de48eff0d.0.tgz","fileCount":42,"integrity":"sha512-7d7qpcGGInDskG326ksplUkDOlSfC6gPJHYawhnd/ptcQissfsSaLXiwFoDIBKkD8kIf+/otxbMEYURAytJASQ==","signatures":[{"sig":"MEQCIA8ixl3FbP9f6EUWcpJZYEx868VC7U8uB05QHr9YrSKsAiBF1FXh8xQdihgJWDPu/SL8/frJ7RPjzfyWnZ6owOWV8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtuCRA9TVsSAnZWagAAHOgP/3nTkFmDhXWqzDyiUi7Y\nhPZG+dBBjF6C3AkEfjIrvGQLnSPUymlZ85n2EUvm2nZp9bnAYpO/wJ46RAER\nitkI3hQc8QMQoSU47Jf747xvzfDC/+q0mNNeEDWSru4t8ENYim5lyPooSEZe\nI7t6AH4giEMmoHYY3ACwR4rDOit0YRgzmE/D6pgJf2Ak2I9an9ZK3Xfah/rS\nA2zFa723zWkcsKX//u7w1+19p+3/Odd/IzJhXfhZHVkiNpj67Q4O7aS+Ul9m\nB1mYnJ+oJUkf4Ct/0AHzsb0yFUzpfQqOfJWvoICf1PNWXqDzlU1IfWTUOI5q\nKd4ERHcvgNuoRRLt0YjwTQZRlCBIVQXGp3CCS6z3x66zrcQRai8PuCBluYhO\nVRh7Gk9oWgAvhNZALTY+ewgcG6cp4kZDpewCxzEzqRgp7C0JLsLSgNGE6gRg\nUOHPMm+4yDd/WC9bkQ2rygZEd24Ct5DMPN4F2X2vJKs9jctVzAMQp/Tb7oI9\np+1m53xvUKPAcs53OCtyK+5JMdhDyHiTCuu/NEN9dZw0BXGaZ1iaPCsnSfGU\nNID+poU6PDtwGaTBEooFqX4Thz312LNp848Ubvc6lKWzPBqwnuVAqX5isULt\n0f+3uPqbsgegrOpi3fLOZ/9YE1s3V7bQ/JsbZv4GflbM7rldH/zyyDnDxace\nasx/\r\n=KGcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/density":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/touch-target":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.de48eff0d.0_1626368878061_0.671349444636407","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/radio","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33e9ba33412ad10d58a9685bd7351c4f44483541","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4f060adc5.0.tgz","fileCount":42,"integrity":"sha512-Y7d8dzfT/NzL3ZBiOUJsyBZ0nBwJSoLEqp0pUiSybrluwEWgJ11CdEavAilTi7F8l07ppJPxr7jfFo1tywEVHw==","signatures":[{"sig":"MEUCIGv7u91VOLroQsPrQDgZY1X4AQalxkvtNvS9N21438EvAiEAsbieizTX71RaEcjBDcso7Gky1WFxaZrKsgXNXHKGwUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrLCRA9TVsSAnZWagAAXPgP/iKeGlu75AbVLzqeoQSf\nOFnYtHEcnnIHGkFGoPjYvKFsJVlF/jmMAh7mQb8p+CDqY0dRtQ1xn8mm5EVd\nKRIx3Z/MuC7D5Plb+coy5EnU6hxbl4pnY0hohcX3S4nCyAnfD5PFaGmklVGW\n92Yjh2eXyO4Y7vfr0AHHyipTIE5nicTgSlylW7MzskGwaFhS5jrnVPwd/neM\nLWHkrVpfR+oKKMc5GmbTKfohHfU44hwagkvSef1TYRkGR5JUGmd1OMgrCFdY\n0Gq9fvz8ZfYRIe9X4qRLQF95q+838hI4m2eeaGt7ocL5ksVmBnF+dkVQOwjR\n3h0VlsHfLpmImojWtsjyva3nPz+6Xlq6HMwQN0ZWxuMlbgCuUZsPRljngcND\nI1cRiOiTJbwv09TgbNjU59eB2guAVZilQihBVKVz7IP9hYO/sDKUkJSsHjYX\n8MlQOVoFYBapCZmTzHI3xSEkOPCoQLqzzYWmjhJQOnU36WPjO1MHHFn7cCbv\nhNzTo7B9od3W5RxTbwa+M/8/u1yFdJ5jLpfQN4Q13eP78Xqrv1t60xQGs7FA\nhn9TaqZvZh0ikc2fiPpcfcoW+m3Lydrk2Ym935cI5UcfhQmsbK+ryrN/QSxA\nLHarbRwFzgu3hJncTOlwmBU/5WQetTDRhM5o4fEOjvAuT2hIlI3W/709YcpZ\njxIO\r\n=4EFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/density":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/touch-target":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4f060adc5.0_1626376906853_0.2638609694149727","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/radio","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1338991c1de3161a5686d8cedf8002c9f6184a27","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.bd25779b2.0.tgz","fileCount":42,"integrity":"sha512-W8Hvic0pJozl6hGSSMx9BcTX2ux0snuJeBkT71jwrsl0xI0NdTHrWtn9mNy3o4TZ81S6Nhwm8F8sup801MNkRA==","signatures":[{"sig":"MEYCIQDz4igKeCUedAIUAC0qTIrTmJvdBAdVP3yZYjOjRolX6gIhAId1OZ73GjTLRresCa0Qi3MD+vX9x5kM5vuQ1xECM35s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2jCRA9TVsSAnZWagAAEm0P/0CRO6q5CIQQizQpbNcd\nbEQ556RYTWx1Rsae5JxcpeLj2zdhfw9gBF36K3/h8o2nBiNoTodrWrqYSeC0\nrZb3OpPK9HXzD9dQf6y4tVKDR+i+Y9K6Jf0fax9lT7AJJ2QFRye+GpxGBgvv\n/F3uVhSix2hkAeOTic/uac3/EbI/TCUZ7uQm6tk+AEl0fZbi8ty1RI9XoV44\nf/dnc5bn24+MytX2TUPE18FZDTInzCxlC+EzYr7mLBLk2Pk4GIF7Pq2tg53M\nlhePTi+eDAYSNiN6YAHILH6sJI3gXhT+QQqtPzmvuaUgBPNriyB+WRezOZRD\nxw9ogFwanURZt1rQWbfjtkZHYp4kONVh8VF3r4PVe2lH2yp7WcnM7Z+WqDDz\nWPpL20UeWuW2aCSaj8xP600ikfS9cB7qtysnCXTiBQEuSU7Ufdg7LQu+Roee\nmdYGFsX0yEGx7SBTZWtYlCVT32yQDKAupCO7Ivl4RxBDAjhtXpPiickzJWwe\nfvoQF76h60HylD5991UlNwegrAU8JBbFpnomRvWniw156zMoGnG7T6rBDvcq\nHXK2+WgdwLJYQIIgwxUk1EAqLTi8N9oa/DLvI07oHzjMZKHQDIAwRODZM6Io\nDJlrmsmf37fYMQBUQi/kSTFw07F798KpHfROdxA65rzmA4epH0zixp59Cx2o\nwoJv\r\n=ohkW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/density":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/touch-target":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.bd25779b2.0_1626381731464_0.21064749302124341","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/radio","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c329ccb1057aafff079cf28a2efeb01d341d156","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.9f68a932e.0.tgz","fileCount":42,"integrity":"sha512-T+F4g4SW5MGUgPDiYeAOT6R8gVXyGq/DgxEA1Tb+rtZ1P7fQ/ahBwFtQ/W8z0UTIyckKJkhaT5JedfTJpGmRNw==","signatures":[{"sig":"MEQCIGDIaobinDxuqP8n26i27Hiy/E5qNoE4Fo7RvXLmHvVrAiAO0tJUK1blpsLDloQ4M7Y0FHAYZs6kt0RXsWajJVVlMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGTCRA9TVsSAnZWagAAtF0QAI+d5xVHBy0a98hRd8oz\np95HiamLR7pFXY4x8kFWv95pJrkJBJHiViuOYEnSVKdDJUMd4nUKeZu3/82A\nXuHCKqpR9/JJhuea9IqbIcebttISwriXrBBKtiiO6nixDqqdiHgNTmA+elaJ\n5QjhyKQuPPblYpjgSrY4eWgGdt84+lrjwByTsOC4G2wCJdoxO+A/aX1k9hqM\nxUWNguiqbOCLZ5UreiZPKJgGFH59Ft+PYomvICHnzIL526mz2IYEhGSXdL/M\nJLZUjrxPYd7TPCNnAgtZBnoz93hXYzpAsnIz2Wmew/qOA4Hur1kjh7SWviKk\nkIED4BlVxkMCtyl9jFOPa+uhhA8pGWIlZXI/wShPNum0ubjqIUuHFe6vuTTG\n0gLKoIkKh6w/IR+akpRS4SjyKJLtC0v3jv5lfEMoGrDHlO/vsDZ1f4X7rNVG\n6nUl/iCFdAf96Ez+oqVG5DugIFbAEnPB1H+N1cWpYIzSXU1u+TEtY8xxfWna\nrNbtD+Qw/HAsqZM3KDiMzEKZsNit0JYDSubvohMuCcvxTAckOJCoEgcYsgyW\n4FQ1I/fcqf/JP781WoMTgPpyF2sTWCc//ix5o+/wmK5k8n+xCKQ/jRHjwxyR\nVJJYfL4YunDDmmW8EKBKHbfZUXkTAv9/jWyegwD//AFPdv6ecL9XwL8vuyrj\ngvR9\r\n=xfJ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/density":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/touch-target":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.9f68a932e.0_1626386834838_0.7199282650460703","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/radio","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d0788f356dee3a922cbfb9e759947bac7ea250f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":42,"integrity":"sha512-48xT4CHZLpGKD+mI2ia9RFnAL+rKfJd/NwLiFOBas4sO+ZZGS4cINHGvuNuyq9AFhhPmhd1P5L1l5O+xcZVBWw==","signatures":[{"sig":"MEQCIBozY6Rs13r08RHQWZd67X1StyxP6KuNStYKdhg91a+uAiAH20TI4JOKbEbQWJ15dihBCH6IfgA1TMT6H9S3w0bZSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5rCRA9TVsSAnZWagAAXL4QAIL/bI58SLOkOUQTel6H\nbjwmL0gtabSQGyWXAs5LQ0R8JXDK/FkrtYElPLFpNDDD+pvD0udGKRCTRetG\nErHEjpkEl/81B479rQwzGwVksEJzWgQ7elaPIXl6TtNpZNieat+NVtYIwS9V\nzfDv1aIMLYyFw2mur2X12NCxKJshe8qD36b2fmNJlxSZkmRCoQKAcafWuROE\n/w4ft/KK7KyFBszUWw98ybiERr0UPL1vQBnD1nMew1GaE3krEqfbqLMybFN8\nHtxQXA64mVGSLdV+KAt5z7S2Tfais7+LXsbVJfnUw9UuXkhBeedT17FuEG+q\n17ThTp9POCxllYGTH6KaMpcT8wg7Rl+oewud8/kke8lGsb2YY02TSiWa/pYZ\n6r1gp8lydzoRdhLazGuvOi+BjdZxLA80L/CZfPJw3yRZFsfe7tPj4TmBKOYP\nIzu0bCfKtPQRHXg51+ldCitXiH7TL7O4EM9KXkeoFc6qOQSnekq2bkvlZsAW\nYNJmx5PK2fY9qk3AK6Z6YZPXQx/B+dkqh+9fSRcymJsrkTtAwOAQRGrim9Iv\nC7kzFOLcWL8G8IRZXQ5vu+A/QyfYACUvUlBkK0+LQL1QfuOWX7TJb9Nr8R0p\n18EH8LdB5wusmBbFVYm2sJLmXioVTXIMqp4Kge8AauxyTopDHzxIEDhYjHgI\nKob5\r\n=WkUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/density":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4eecdeaf0.0_1626447467719_0.4292123944963635","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/radio","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746faa0fd02e275c7dfbad293a13bc274db252a9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.7239684d4.0.tgz","fileCount":42,"integrity":"sha512-KT0f+yTL7siwje45X0qFbbgg3ZLrSjcN6TMWJZlJuMaUhpYx5Kn/sQhHwK38KxfMYF357l8TlNr9y8KLnRg1yw==","signatures":[{"sig":"MEUCIQCwGztCnxH6SqhGOZ8Cu/GWAzJYKtplPsOzM9S00ehUMgIgSxbBaChheiwu5FbMC/fXBLvF5rDaMOsmPT7lbHv2MLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azBCRA9TVsSAnZWagAAZ+MQAJgSwIzKYF/yjBnfOS1x\nsJD14lN2cKov2nR07Z94hsOzWzoOkSk4wkmMS8rWmVZWQxYGol4+iBdfGL/E\nISr9QDMHUSLTaVqCFw7Pt1JYgSbGfG2d7ufk3fhPlcCyJYeCS/B4rfBy/hya\nAD57BaQugjFgHemtBeRcu+z0f6f8TZtFsl0q/qkkxKtZ3JmWUI2fh2OO5atP\nXHnKb3aU+xIKm6lWzvm4OXwDJIPYM1UNi/sIBXIYI2u8/gYJpXy+MpCOY0Vu\nQJzk0HcZim8GfBJS4bYgUQy/JykiMrx7IrOWfIzzscr7dnrrEnVnzNo/jwkE\nI0xviaJsIUO1ZFDdJy+y89ZYaS/tYFGYvEGpbETJHbbBwK/SCZP6J8z7Waqa\n4C20B/dEllOBKcrYq1lTBBB90LIm2FvseI2kNk5cOKAodsVIaO0+EMhuJpXb\nLlghgZWhRDr0uoSw0GfGIyWp9VudTjs7wMfFm6kTswkumhkCItzQe9mc35K+\nNBNJFfOizQBcDV8lR65IOiInw14kFBZn9/eyZt99leYXJQOOEn06ygWD8eTv\nHJGYPOxjwjPanrbCh9OFCXmJfdEgGbH1QfRt/RgaRMZ+BtO7dAdCnfxHKe3V\n4Iwi7O4yokc1kcuHHhBOM4M/2leoauOr/KtV7aTsQ+wjhVvoRIC6PuEHOMYJ\nBcoZ\r\n=3mkK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/density":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/touch-target":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.7239684d4.0_1626451137627_0.02769387916438104","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/radio","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8306f79b2506646c7f4652d5a7319384a6dbec28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":42,"integrity":"sha512-vqXcRgdSAPEvQ1EMqcDqOAx991A4zG82YgDach6dk99SpR/38vfhbQMAB8aW4odlohZmn9j9LvLhTs79myFfXg==","signatures":[{"sig":"MEYCIQClL66Kp3JGOP6XqKmY/gBvrHjcC1hsbxPNaESs2Wgz7wIhAONpBkqiSqcWpglaBGhhs34n/Jb3VClxSJuYqFjetb3K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBPCRA9TVsSAnZWagAA/wgP/j/4LECZt+FQtuGli4Lx\ntv+zku/e3sD1rKffVFhGrX4zUaDm89o3B0YKUdCC0aTpKLqXFqFLOQJrpRRw\naM5Usrb/3vD5oa+waYiLPqlsqYkAhFpHhHiF3y72V3BGghhs84rxVsGnHdUF\nFBhOQpEvVPVIb7Jt4ncH3iKquMlkpE+yNAJ5PRDUbMlZ20OQ7kMSkbq0qTC0\nCi5urHDv3mMY8KvINHMw2Us5vkafVofI15BS8NOoy7kWdExIr9ojE4cusUGb\nHnTJDnzalb4P5e3aNHEkTUUngpjBJtAN7RHyvKbiPkzp/3f4LI2VgI2h/s+R\nvL5BY4NeEh+PeBjj3fXs7q+azQynEy2vbnz2GbY4sEwEg3tasoD+cJMHqIwH\nXsZBBkmSbPfwDFYFCWjtQ549R8pPkj0P5uk0E4cjrn1h9tCe7ihCgOrFsm+o\n4+XHHDy4Ru/Yt0CdZRzmsDoNRe8yTjzD1gXBzHQLVSAMHaGfM1uIfbZ2IveV\nWDTfq8ocNVfIXTyJ1g009fR+1UIr2YS4nNZ8hqcq96E3CnwXMvJPXJyX6R+/\nqR7zvPEYozCjh442z3hx+VtoP5qE1PtrjNTL9WBiDrp3g/NlMUdRy5razRlu\nwgcggKPsOBB4C7k5mVkxhXz/pP/wsS2aJurmFlbbWAKnA/I6TypSlDUzGe5V\nb4GI\r\n=QEyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/density":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.d5f1f7c72.0_1626452047812_0.3271537724888798","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/radio","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df9a50a632e75a49f78dfa6dd0ee9ad2600aa72a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.4d95812f9.0.tgz","fileCount":42,"integrity":"sha512-6L3oXg3BdegfJQSBb/FoUH7G6Te0e0DvC6yvNy8ZxzwfUkttPiDcCa3h3UF/ZNxI9jPN2r8s47GFbtbir/Ttzw==","signatures":[{"sig":"MEYCIQC/Ymatx55mx8/Ar2Zqd9OLDxe/S1iErTbB3Vekg7WCAQIhAJuBLdVpmm3l3Mns4J2aXBIESwoFHYtKyvEQtlEXdXRA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFSCRA9TVsSAnZWagAA1u8QAKIfpAn3bp36PpSlboRh\n5y4RcBnmmIJX+iIfKhDaSZeSL1TewDqc6sY7BKaZAY6biPcX6qhfZ/ydO4qh\n04PNvAH9e3woZUA3f+i7aLHVnqf+HEzcQh3UgaKQwOPemXK+J4vuC0MNYt1u\n5mx+sp4NthGksE+cNoQl83FEKUORyT5cPPfbPDxd1lP/DCjPqKBHahlPrfnF\n6tMcY28Nx2swrgClCwWG7ZCXAlLfJdjkz2+5hMK2f37/w9aaUEBBG3bmKA//\nhxMRyUt62OoRxvyEP7vPN9UGV67wSGK1i6nh4qSYZwkvaC2RYQf+AcL7Wj/g\nRNQSiaN4RznF56gFGYaEy47RljSFqy0oIqVtDRZLdlV9C6OgCV51jqZ7FYrb\nocLdgyCtWKbpXpBfDL7q0nooPadPa3Npmi9fkH5/apQMOlHquPc6uqPFPa7t\n/JVrY39WnWRJ7iZU6ZAU8STwYYa8Jh5iZpZtIqGpvH/X6/3UZ/sf6Oycz7Vy\nk+iQ4XQaKNEqkbzp85Lu8l739FiEFmAIesRcC33Hc0aVfo/O8z8JqQXJUfrg\nV3YtoX1Ozvk83T4pVuZuaS6HRckRjaiSE+b86b4kCmcSVVZaiFeoHeVOhGUu\ny/W1oDb7YU6MxINRfI6B6e298hPmcSOAtCtAwiPoLNvrP1kAZ8Aw5ZPi6PZo\nxqWZ\r\n=TX/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/density":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/touch-target":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.4d95812f9.0_1626464593963_0.38966085392886307","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/radio","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35d22c00023dd8c5fa054d9a12c3392db4ceae92","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.38d1846cc.0.tgz","fileCount":42,"integrity":"sha512-saUqfg9kohhgj5FlFkfmH4KqPa+9BCb0NoaXYAF2kXIguGr6ftw7vAwHZYqnkK9kPhhcodoEMu3auQ+XAzfzGA==","signatures":[{"sig":"MEUCICs+JLxfeP7a1GamXgaS8qwxKRO2F0MalXgdYhHF7nMdAiEAl2mblmuR9Zn0JSSzwa7fyGMVXjUu6PTOEqd1iyM0vv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cdxCRA9TVsSAnZWagAAA34P/jEK3I5G1zlhdKFd6E6B\nY/+41g260GknO8YQXNKAtyndZH1zonUFIrVZPpWcXTWd0DCZXITDHEkIJECc\nKge3DLyEu5+3k8Q6gnX5Os/fN6bEB73i+PsSuiiIH7gcXYPSqxp9Zhj+YzYa\nk5VKWRea8RExA+8zqTW5u4fpei0fRqrI400lkubYCzXvM3qzuBHdXjRMgC4T\ne4JtE3/0oqqnP+4aM3lf5pcZFuxR/3s8VP5NS08nqHZ2AM+WXf++ehUJoH/P\n/YwJUm5TETE3fHxy0Zzufq+Y0jBC0T7oPPSyhnV5Th19pt4LQmKEhYZPE889\nbsYVH9yFIXv1yltnoHVepK59AHBZ1BQzuFUDVAPBvipvQc1UNbpHrhU2wiEA\niUA0c5VT90Qg+8Xva5oZIoK4vVQ+/OX/Lv/dXATX7f+MSgIaXnBEctpXtV8b\nMNg225gjhAh+P9a8Xkn4FR1jFEkdnUcLxkgqX2bhrmP7zJSvUzpKtIxxL0+m\nYAX99rQRAlnuto2bQrasnZXlkUsIe1rI280BQktN8YWHkvhA7P4djifkMb3Y\nhUt1mKTF9Vhn/hYImHYW9dj9JuzkAWDSY50fII+wB5c4eZCa8F1QPU3eDH8T\nyN5j1+0EvI+Idco3RDsZS7QxyOJkOTMza/ZLWi5zGG5DNN72RLAARy1s4hCC\nOTNY\r\n=XBp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/density":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/touch-target":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.38d1846cc.0_1626720113470_0.6647558283068642","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/radio","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72122c4c1ebeff36a69b2deaa6e66b22bd2b4e32","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.3f691eccf.0.tgz","fileCount":42,"integrity":"sha512-zLectcJQTTZ8SnYdKyKQVAV8D5gqRm/JBdjJ/MbP2Dz8jEwEVmGD5H4v+yOp5+LVokbP+PHuxkmGwMcFecRRew==","signatures":[{"sig":"MEUCIHrBn55xhZmT/u36i2IuveT8CGiNX/DsRS3sNql7xXmiAiEAyxEpJpSKyKOzCCssclc0JrQGl30a0EQZHX8zIkBUZ3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUFCRA9TVsSAnZWagAAQBIP/1hJGZq6+JmxLI7knOKl\nRoqbKOQJ0stv9agQEmBkB1cBvmCEHEpy11hsgFb52vmmkXfxK9HTkIYg7Cnj\nHagxd6SHI6wsx1ippJNN0z9GN2tyVDzNqso+y9/0w5QNiyv9HtYkAIqE0ZOj\nRD8rEZwkLUCzCUZ0jsH6RkM9pUHEThg3UyQUw5NQms9EYGOjyo9/tqebe0MH\nLeVF7PG1R3KHwZp1CN0GWemBlqmCbvo71dzT9zrSDdjINew7mV2if7rZARIQ\nZBl2dJEByHr4rjBO3czcEsULLKgq280fBBNpVPJMkYlkfd6RWscIjnFCfUSj\nnJjVmxLkO5TGxrx0IV4lSz0FieRoTdVc04Zh77CyzriN2GH/yOYSydg3Ybrr\n+A/J/zcaEUXf420XGxdATU0PFhMDGYotH8l6K14dxGW8OKORUxcRTmzp+l/n\nfCvzRl4Zy39vKMJzSf1iMcO5hbNiHPKRqvRSdDZxH3MLFBoieJ/Wx/XaqDJl\nCPRhai9QYLYyXQ0HHl1S7i5X8eyqcVK1ZV9Fi3m4UBtgrEGGXNM8Z9SIHtm8\nqabdzTNha3OIrCmAZcxJOZRPIag9n+9jDNsEyVIwN11P+bP8a1EU3soXfQ5E\ng3KnWFrkHutGEihaA/XRmsLJm3YQg+xv3uiIYnH1F6/C0t2UjKZCeUjW3N7W\nNxpN\r\n=5atF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/density":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/touch-target":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.3f691eccf.0_1626797316909_0.7914831343427267","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/radio","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f12c518b1a8ee49b3759f09a8569de49a371287","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":42,"integrity":"sha512-wwabhWI2XLCA3t6gIqH/WI4riWuJjMo9UO85GpmDIJrUwDkL+pIRiMX6Ptn0R4ddSe1L6pTmZfoZAgk1aHy6fA==","signatures":[{"sig":"MEYCIQDyNWOQiMgmVWFMu/ShFVb2IDGw4LbSo0SCr7jBrJI63gIhAMmpcfiMqoY6KLKzLvZW5j/Qh2TI7pwxGGSzTmZc7oM5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBKCRA9TVsSAnZWagAAPR0P/3Jhch3TZs7ytQvHKa0s\nnGktWeiBogOlvUahZjoZFxTYtJVduvy348WU8vKjANBdPo/mzUty8mjMcTAP\n2wXndDQaSSsJD3JfrSWN8VLgC9ZklDOcNmG8On+9CvKWtNkRZNE3TPfrEnaQ\nZVi4+Ifzkh+VcC8D8+RnKmGDreN7F/UAE9FzndBiRn60/KL2iXwIUWorF2yY\nC3z9sCHKh6SL5LQUwUbalwpz9wtZEMA0YGkX/oTdx/nkgWnV78wODzJdOHXg\nOTRu2gAFOYOHsqrQ3rqpRje6zQt3hdbKTCTIqRYMl7ApbKcN7B9roxiONNs0\nj9iY4sve9J54gM3GCsGGTcdngAxCMT2Vxwcn4fYXk7sj3kvhsVi/DyQhIrVp\n29zIev240PrMcnqf4ec4N0Arz6boGDCzukV9+aGiGykgshAS1jP59XIV5GJ0\nMwIpbWHonVt3Xg8LuY9paXye2zQ0cZh6QdDH4EEpRHhkrnvFqFDGJULMevYh\nfa2IlnqPC3k6yYImKgOzzmM5JWHer0WkOW0xfa2+5/H5F75aZmlIPvwY8JYN\nzo2mFiqVwzb/nRbN/oOPhHQvz7SntFWmQ4IsninulbJlrUfHdat0GJKpAMaX\nPUMWANN1ewjomQJLnM9XmFu69k7Ot9e1TzbE4HGXvrnyUGr5trIrDBfx033d\nw6Hm\r\n=43IS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/density":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ebb5c73bb.0_1626800202552_0.563118195449456","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/radio","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd52102aeb1029231fa4ea876a739ff837722654","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-nightly.778a0e8a.0.tgz","fileCount":42,"integrity":"sha512-TZJoJLeCEHJD+T7mSYPCz9Lz7YsfwhMHQK7bIjlK8HKK0O9Ms1BYQV0j8ijvYWMg9dT9veN6H4DDDLSIyaiiOQ==","signatures":[{"sig":"MEYCIQD890k+lPlmiXIiWoi2NKvspkvVCC21pXLARhdc4fr3/AIhAIlpR2iI4O4bcjZ6kXyL1kj7rOF84Pw4v7zfO4jSLqrf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqPCRA9TVsSAnZWagAA5P8P/ROaOkazx/vkyokMMRMW\nCxj18Rnt7W80MXYc+EsWRXCA1E9vgwOLcYXh4GqDD1dBIey9yVySIdZP0trq\nH+M8LSZQmaWMSuM5wMGi/rNcFreM8ESZHJ8jRhUWXTZoGTqkW1Up4GX06YUp\np6TtJYOx6+LMocOZ16ZDsEZtG+Qf+cgYUcENH+iUXygSBZFaKbDID3xdO+QW\nWvoG8MR9GmLJNAQtA3JsOt1bNlqiq8NHMeTlRfTZ7SIFZmoK8LVUDZBzup+y\nNDWaNXg8KI//veY9DJWSh2ghAbSJDKtsn07XlhJf492aGRgAbH69VJzegFfa\nIic6HawtcnUe/BnCMxfD8I3myxfbI83sOdDRNGdN/m7OJeJiGig/A4Dzfo3P\nLlpAvRjpxTYgYw5/6ldVYPd0RiczZM76d4EN5UAHakxphoQ9NjVeHsW39iuV\nRC5FmpImNHZKPVjDzMUfjEXfgDKTkh6XSmU6cK3upYkCnk/Shod/tgcyxhSf\n0vy0FQZtP2cgQ5TWZcAZ91cxGTIiluLFb52Of1bhWWgY/wZh9QDFMBMXhI7P\nPIxpt0eYa3aFPskKPpNwi4NNV1Fq6JMfMVVGpfZ7ZsIEw4aTrfvgfkyEvG+a\nH6isG2HVrP/UPCOYMFAWdvYn5d+vkoX3ACa3uFWr5GmMSa4sbfUohfnYd0DZ\nIuQh\r\n=Xe3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/density":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-nightly.778a0e8a.0_1626815119636_0.04850149923731828","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/radio","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ed01c84be4c6733c4e6442dee73e8d25a8811b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.791311bba.0.tgz","fileCount":42,"integrity":"sha512-JrA7684arW+qvl/YIYkwWEHLVI9yZhU0no5s37xSXLBsbV5+VibD4Muphm8JWYuyV0asREAPoi12PWvv83Fq1w==","signatures":[{"sig":"MEUCIFIig99P/IJWmePDiCuofhVr4qlLNTvz8fM1GQ4ypub8AiEA0QjoJBUvj9MIKDwcLtBU0u4qvRWfZVOd0hgkrHi7aq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kcCRA9TVsSAnZWagAAH74P/3Wlqa4M3tHY3/SZbnas\n7is79ETRCuIcgkxVUa4wWVzJ9dmbXQXEuOJiGXbGWsOIOmW3+hzqM3JiMObm\nqjcvL1mVeNPgzem7gfsRh42tnR8SASbrlYKurgAkCViNttaRGFHEXBY2748c\nLqCxMJQ7m/IgqKe94qwc4gp2sPiOhpfIY1S63YZevo6Lp3+h9/slSooufx0q\nO3uB99umZBE5B3smZpv6zVWD6CEqkfP7d5FbEH/WQuzbr2iQ9NQG747EEtqX\nvX/FRlucaWwStH2GFIR6PinJ899gkatBOkxSarOYNMvNSTU+1kcrQIneC0To\nOkjb1MRUwruTCYV08VL3759t+Ns9vPeiI6ZtYjdHC7nAMOo5MOPIC0IfKX6s\ngzxQ7QyGXkPLK7N/hxGxoPZ28YUqBkDTM2VKRgu0AjY+yZC3XWouC1ahjUPr\nf++uNu4gbRvGDz+J8xCD12dBqfE7tbGrjE3DSlon8NuHEaDUs2339SubpBc/\nZV28KHup2iPY/Q+dKrdbi4bMgP07JDT67YXkUhO3xh34BtF0kso2GER8TJMh\nzyjZHypKaIlXTBaZu9mq9an3IM0xVISAlgUmWa4ZA1XzC9uhqX4Z2GX5HHgH\nm+VLSQMHITCQTYbf3uD7zYbcQH9/YLOKePKKMdTfgHmHf51nmECnj1LmAvOW\nhzkj\r\n=5kYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/density":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/touch-target":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.791311bba.0_1626818844560_0.8882085220431741","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/radio","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da1c45a5921930be39f60745768dad047e006339","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":42,"integrity":"sha512-SzuT0YiFHqfE4OtPRyv2P4x9puEe0UY+IOXOGOiEaFYddcE/myzhfyGGVtNOKbpjwOOEVIrIMyVGlWDT8zbvVQ==","signatures":[{"sig":"MEUCIQDwJx4cWdv8ea4XR51wkibMeVg1vu/eDHqbTn+587WqTwIgdey0fILoKWjsZ7M2lGXAPO5fw1VKMG/Cj4f1C/xQlDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7UCRA9TVsSAnZWagAAtBsQAI/LUsyaTo2coEByn8ti\n8Z3MXHHnyo9K0FAieyKfnd5vhHUsR+ENMbBNTAzTwWUdQLOvhx91OxpLIKos\ndNX7Q67hBAbfzgoWKiLoPUhC6AtpmOo+FtuLplqNXcXXltfxIrSV+7uT7PX0\nn6GdV4EhMPeRjOIJxBthZmTYWYG35CJ6iAEkucagEC6ks8QGY+z4zRhfltQ5\no2CM7q6tD4HMpoUeMgHDlWDALI9oYjYTjSCe89Dzjyhuds2D6fs51XZY4FAK\npozbVrVVPe2ZTRbZIfZT+o3mzmNnTz9fekM9NTh8XquO+7jvBJja/wFLj7wW\nuoxRu555Sr9p4YfZO8Otr7iWoQK6QR28bfIGvYg57CechWbj+OhwxWhH2xr7\nFGk78NmXM4+sc/nCLOG/PGPQk3JWmNb3AMOVzm3EQMGiVxIZ/GATJZck7U+2\ni3hJWnQQmotGosk21UVX6RXWPY31kqm7zeqj77hSFCzYWTpc3zTgfh527FHl\nd71JllebOzsQesMulln2cmgNar9iHbtwSVhi+AgBIe30OCfvcuY1QG4p4rDc\nuDJpRtGNbtWiLMF4ejsypNsKumhzyxls7Ui3a+BxkNXsamKkIksvmoKP+yeE\n15dmmylOplzVh5DG7WtnXjAaau6neJZJIDcknDOytiHu18fCpCO1jXOE3sKT\n9ood\r\n=gF0I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/density":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.85e9a6ac3.0_1626881748390_0.1800766821789639","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/radio","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adb857f9cae02bb8255dcb358a5e40b9e728d45a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.6b0442278.0.tgz","fileCount":42,"integrity":"sha512-M6zPpdJhC7XCc12Mol7IfNg0rOau9vZnVoostUOdXnd62U3AD2mAH/EqON918yNl2QXpOaubgKAVnZLvhGS/cQ==","signatures":[{"sig":"MEYCIQDFweNh31y325MI1lTeBlWoi6gRtgG9LgRjv6WZN357KAIhAML6PRRFXonOFIZc9RW5t6hWIBUN8bPABBZj/mGC12vZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxHCRA9TVsSAnZWagAAHSoQAJQti2F3Pgv9K0e/qvOm\nF7B9Nx2OrjHLpmq5e4HjW06Md76pcPN1NLKCW/Uz0E5yX8eo70CO1mRHiVUV\nGTByhMH/Xc2oszhRbyVM58JhrcSLjbsjJa31506MBsiXvRgheJuPTTXMKMRG\nh1/XIy4LoVkAFRQPzzDhrjZDfph4ZLBhczURz/LF50BA6twtRc4CbxTYFh9U\n8cF7XcPN1vA/E3Kr+u4+EhlZo0ovrsEY12Na5kMvQcmtCrIYDDSyZ2B149Rm\nXaTtKTfr9ivqxZ/W/AgdfS3rsOJWYz+VtuWp1GbG1k89qrI9ZwPajYT1T/Kd\nxOavMjpqyt/oE3K02mvxz41kAuzjPecE5no15Kwcm7Yqd8DX+Ajz8sq/h9Ep\nBg86wIMDfcEtBWNK8kH3OxVJn8eRvvVViKcCNe3Z8WbjxYXyxa3DxiFuZiv6\nyLuusJg879hSd34uNPjO8Kc1JP5uF2wz4C4UoZulxk5aNxZQdABjewy/K++9\noXQup9lrgAsQKKcHA3uoEjjMa7k6PHp90Qq5VUAx3cOFJZzy0ituBmEHux5j\nzlmmcnJKZIWKE77PXPs1pg4Tko3eS/SINTfssM61UIb2XkWHkOVaz2WEz24d\njTg6zs7nmu/6y3mM8rXsPw8EhO8MZBd9bkLnIi2SxYCKueyC27mp5Y607ann\n98PK\r\n=lxCd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/density":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/touch-target":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.6b0442278.0_1626893382888_0.19326253910842883","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/radio","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bfc58cb9d7f2b70e8bfbdabf958679917d8fbfd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.5f00e454a.0.tgz","fileCount":42,"integrity":"sha512-VNDr6sIeBNs47lEs8JqJOt+iokE/Rvz+KSHsELt86DnY8xfUW1+TMyiDiQcZNweLuK8GCtsP5nnAdaW4r0KFdA==","signatures":[{"sig":"MEQCICTJcxUowNs71bDyKlkDvvxaGwGBUljXHCr4vMzoJbjUAiAwQfszy7zTOwqoDjh9r/fkn9V6qm1xXDR8GoNJaCuFRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWJCRA9TVsSAnZWagAA/kgP/0/7cXimp/n/gISsOzYl\nS07p9JOqsFiYodFc7LCy5AoswQ4kRhTd5wH+xyQjeilnuqk4FCPowsCbZuW8\n6fwCiH4D0hJ/aRihy+MifryVThLuRtSn38K2QL9MBAXpr4KKrpxsJJIxDaHU\nmeQ5wp9JdBgifPWdVcutmm177BNsDpzx41xrHr4KBSiizt81kvebsdTW1vqk\nsD88iaVROtF0kKaD7JK5QiNDJgTxLOY2EThuzZR8+duixlHLqL3jkxfEtOUE\n0Gu/CzqjhSN0Udp/EgVBpuDOqud6AnGNSNGhaiRF1W2YcNXEFxYLhiJnCEhV\nm1k2Cfqo0+e3lyrTXVYl5nkzptGwGgHba8n7C4FAOexHi2e57AbSR5SlCqv4\ni28QM6+NlVDJoHLcS9V/2JFZPO92n1e+fQlyysr9UbuOuzolC6eKzQ6rlCu7\nmcYVtt5p7XhP3jeUIutK0ZcDHSP+P2Vb937BIUaR05oQkuftHrgAf8kZzkRr\nvEgDlcl3EtNYJlygxoo72uDU4l3p2muWUgpJf97Aec+dphj+YibB6PN6gFPk\njMRVi4K4spYvSELQN4hVVFceZdfDfH4PVoxDB999PMcAScDR/JJA8rxV9cTL\nS9e5tn/HW1EIXVwpK4M7svu8dH184ugHRMhL95a5DgElIEhbfx57fROpDleK\nWIC+\r\n=2OWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/density":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/touch-target":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.5f00e454a.0_1626973577717_0.7157585403944171","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/radio","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b86dada6fecb08e9c9f481008060e02335e89302","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.90e08fc6b.0.tgz","fileCount":42,"integrity":"sha512-KWQkltyHf/C0EECQ1GnZ70hblr2/yzOGrKkzvn9pnsbs9In3b7TEKHGvmx9V8ep/sCY40pmRAaaZkL98iUNN3A==","signatures":[{"sig":"MEYCIQDUSAo3yTTWpuilkAQUcMh2AVL6RzkO0jaRAaWrSk8ojAIhAP30IxuebMTBqIGHMn4QLLrVap2cFmGsx8nv5bNPxbjE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFyCRA9TVsSAnZWagAAt2AQAKUL5Et1YE0x8Rk/u14h\nsgumuKDr2YAxldHKMcjplDpIsGWhNwRnKGOeLvTkAnVXXelePdnvRdC8vloL\nPXz+pQjD9pFURSRSp0vZmRhGLywdGVVN27IKt8ZlookIJAXd7f6lrS+xnx6E\n75CoBqxo0KJ7+DE7U8ZUhGyP9GhmO9DUvaFDvbJZ3BTj2JXiTKeefLDJev2L\nRwz1tykJr6xvI8OGP5gYCe4Aqc445z2psXGoQmOgzRqz7Oipyl5InhzOp8UE\n+dkayGDsSIBtzVHIkPCJ26NGoqaWP+8sArj8UiFdZz7OuK3vQQX7iYI5x7eS\nW+TDmO3ebxgcXDE2A0OhW9uFx60VOy0/s5lBVXh6plBNMA45wk9ENvuZP37b\nNdP2KEWQrrxFA+1YR8wQ0wEasgdDxwe6vG8Hc3ym51yWlNNQXXYjPSh/Ppdj\ne5YDA8dHzP5/9nGSnBvOJ7RrWOxCjyPDx/jvI7qdFqSMd0Bp9MJ9dybAVDK2\nVSxi1FvAix+T2MsVMy9M+kuleAxpNLW7KeZzOykoigXSfWiLadIq4uEa94yc\n8pXxJehXN7T0iRUGloEGB21jKdPJRGW+ViHvN1oOmJoxtQUtSMaN9Bo5s9Vo\nI0mAgMbxtok4bbiuhISFN2Cq/9tXcr/pQhip2Lwa0eGgTKHGpyFltKgesVl6\ns52j\r\n=djAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/density":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.90e08fc6b.0_1626997105854_0.5169780649971658","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/radio","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f10f1f8964516e404d5a94d7604d6ee0d7f94e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":42,"integrity":"sha512-fwmJyV8kjdl97rg39omnhTglyZIV+flHDlgJ0fOew/4g8HJ+9Ij2k2BdGPGLxQrCB5UWd7fQdddBhTWWd0Je8Q==","signatures":[{"sig":"MEQCIEM3hZMI3LzIOL6Qk5BH3ylvIZ78P7SwrYQAcNR7SAC4AiAA5NtgBDT/v76fChAKhikK2MWpdipv+KWq69RIrd3F6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+waFCRA9TVsSAnZWagAAtKAP/1h91hXsbI8HGZdKsNXJ\ngHQ1cMDt9+r1GA6BSNXr9lLve0t47diRigGbmYMham0mzNXONpwKzuZjjjj7\n9f5/At4eDLZLK8IGOindIa3M44dSQoTXWkqO/F8UUK6EidIZ4G2KmJMuZEvI\nRWuWFS+BpNskhVTZEHCXYEGdX6M+ghlH0TRBf6y5qa9HiClkHnN230wQ6Hbg\nPDqOH08dGxp5rydUirQLqdRi9zc61Xz3U/wD0eKEWjDz6l4Pci61DmAUanqq\ncWsT+2MSuWey33iU4luN5fUkRv4fhTId2BWu9Sxm52JUsYUX7UxzherDVwES\nAXU0xZQSs4KsYiJmAJmD7+bHQ1avLrmQ0nSm7jhoXL7Orvnac1SkbjqY1I5p\n7LAe+REPDGQ5DKQmLmpJ/ZRiKNpwaiQH3HQMmhi0KSa/7zOBjGTFPg0QoAJl\nMRQ4+6B6xUjjEEMa1oDrtWFV2mTlmLuog8YYC3QwP8/QYxatkMsRRCWQzrsI\n7zwuu+aVlxQ1CsvEuRxa0StwAkUA5LDKcxR/kqkxoiw7bn8uob9PWDUptti9\njIAE0FLUhXWfa0kxGctyCSELYNnq3jPVg6LHX7XnZxsSOpyETknSo9jGYIsJ\nPIbXFc6xxFJnmeMEOAbNYgfNBk+sRT17/03ZrV8sU6kZA/WCxEcgRvKQ/7cT\n+4pm\r\n=ovbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/density":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.cf5b9eb86.0_1627063941462_0.834943374068863","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/radio","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee4c9888ee6bb4148a766ffb942a8e5e892bc3e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.3f36ac75c.0.tgz","fileCount":42,"integrity":"sha512-BFwD4hLvQ4lx77V1yfTpeja/nhOxr9q0HcKkE0eWABpQJDvlXuag3kT8qFRx9oCgglwYNOinNlgiLkTaLPlhiw==","signatures":[{"sig":"MEQCIDSttJMu1Tuig06PaYgT2ofQQHBHWmUIluBlnsY3yZVFAiAJjvkVk5GTzrdcJRvvQs1Dq6jEnu1UJREt0WtKyj7aog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wsnCRA9TVsSAnZWagAAArUP/i2WZ/nPTFouLMWP4t+q\nBUZRFmkbMcmWV4XwenKxR6svUkWs9SyXDYjq8j964g/1l39xmZqRB2IgtucW\nGfYLt6MpwOj3IQbYPX/ewXhxFTOhC10XgucNFFkWlxfYSSas+lFor82H4hfb\nLZPyMo7+DBR61rpnHBgaC8QgpZqlvfN58Ge14qZ48cZx3nAI6vhh88PLckep\nEsO4LmDd/WliC/iASOBk0oYC/tbMCa1pNFQk2288+KLMJGkIN/mXUCiHTOJa\nGa7+VA2DbPEeim55de/kP+1EUDJKinsNF3HoY8w2dBnFPXUlOKK2v4fRwJs4\n4ntG+628UGnRisBO72fqSoE0e6ZvaW4rh1SB+oE1iT1pKuiAZ8fS5OY0b0Jn\njzc/KmS1YJjIw6zLy6WC9AGbedw0ScjWd0rMEvyRUZeqt6+i3WCyWe5y5aAm\njciRhwV/MTnOMIUD6y8dN+OSALl3cFWi0RpA7a148FtQaUpXpXmCl8hY/Mfc\nBt6Ng+XyLDGEIPVkYZcycDRL8aAbFBH6bAXZyX0L2s0ytGJwMjLNfvz0K0TL\nkNi4o8sDqlQew+daOmMIyCQAYsPGeYntzJHcLBbuOcqVhN+jMsS7bB7Cnf+r\n9QPHukbIsM/+i498Xo/I5h/YCmhJeJqttzlTnBvj3VoS0oaZNSAgIn2UEPZ+\nYPlu\r\n=RlCL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/density":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.3f36ac75c.0_1627065126839_0.16957522355610233","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/radio","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c9fc33b1435838571379691c864e8346a0c3b78","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.ea1e1b850.0.tgz","fileCount":42,"integrity":"sha512-cQKPztl/Ej07mnBk4PL+nheS1U8NvugNP3wAH9UKLCHD/v0etibG0R4qutRVCxoBa+F4MFoNfioqafMg6gtlaw==","signatures":[{"sig":"MEYCIQChAT5XBObfGQjwyjMpK6fzwRkpA1xbtjn3854e0YdHCQIhAJmcQb+sfmvjV4+Izk1i0b6OrFJuUahLnMHCN0jqMhHZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5MCRA9TVsSAnZWagAAikQP/1J+TNrj/R97vPBYX4cW\nRpRwU3kobyxabYdWS1jB0qRg0ytYl66Nt44aDWCWkQkGZO6u2l1FwsqjqDKb\nzwRf32xvYgJIth1VILCjtkzU4LAcwW6n0Suu0IGKEcv7BFqJB2LyCwg/eBfJ\nV2Q57g+nZ5kVEcYO1jTXXC2YFh5lLtTSHOkJb9bzOrLx9RULiH4yTVVUojBs\nSEwYO6PBrbfcdBS5uYuk3gf1++bySc0wyZKEHN8bPNqEtiws8HIdchyCTA8a\n/7SnyhDe1v1/Y0F2uGY2h8wA5diYihK3svZb36EpSA9IEbZxDOT6FsmKIle6\nObCNS/WdRStILD/Oei0QdCztWjpT9vCfcN7KFPk5JAZ4l6NUt8IdR2L1avQa\n1Z0upQ6JITb6nZW3zAk+fuy9zA967Vhiet4LPrzPi3odwTfY3d5f3+2+G7Kb\nXk2fGD0iLc8a2pT8Qd22GZiZ9Yv59IpEMZmx+JPnntgB+plhzUJNsOmPRfpp\nG3YZMd/0YQEMGvd2Zwl8t34hwVab00IZypkv4ILrjpJYmn27IXRk1oIzM2S6\nQmHD1/dPM7taNK4j+9jfBhrd04dNpXzGa+jSrIlaSxiD7P/LLt24/rsud14n\n9+NmCCXKQOttzCNXa3WJpwYaxrLpOrfHjhbScaWkvRQUmC2frqbmUhcllc/9\n0dow\r\n=BqIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/density":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.ea1e1b850.0_1627160139700_0.6590969389047245","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/radio","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"292152cfb4d3d2acbb482b4cd64531b990278483","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0-canary.22f390c43.0.tgz","fileCount":42,"integrity":"sha512-1qocyRTITBK02Chl+1q0Rlv9BciraAphpWSPRRkC89ye+v8WKJK0wZxK/9yHSPpFgJD3ZULFByXzkJ2U9Y7d8Q==","signatures":[{"sig":"MEYCIQC3KlOx/s1qrx1J58WhYzNW1bESN0xqpXoBCj3FRUh5CAIhAOVVFvPAyYusReBR8I2Tra4JDkOfO9CVWduxhaLAjwfM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFeiCRA9TVsSAnZWagAASB4P/1kcZmPmG7W4+icoCz5D\n2IZGe7T/cXr1oBYh70Dsj3+b6fwwteJus9M+xmLkf0vm/v0/Fv5mLo5PLpb3\npkSn/5xAmVIh6pl9NKvgdXE5/JbXufTil6HOFBMiikTcCA3JIyE3ZXj3XcbQ\nsItYKcenKlm/79cTukSs/tL0k5QkVmLZQQ9sqxO1/lz96XgslXO4pzvFelj/\npcnL7uTJR9eR5j7bMLgSIpACb28guj7r4UlwFvfIVEvNyc8CB4p0Na64cmXa\nj7ZP5MLLxZCaYGk2/kGyHQkMm1w59UfSQVbfAFDkZPO1CnF8uQjJ9BP0I+8N\n+BFyXxjSkq0sAUSm5uTqvyUBRNoLaGbeiKpxk4fPEoe5Kwg4pH7qT/JRRF/B\nsoIUyEOieG1ITOBinAQYus7Ji+2yXCm2DdrFGPusSqrEgn0P6fq3Zx9S2Qbb\nny8IGMtbaY3uvczsNiCAlfRV2nQx2rY3HygVSPyAjeUuG8kQC76dxTWl/Fut\nSS5xodQByIy+drgT9YsLjzUvvbGEw56eF2TppfOGLqooF2HQBZaVcilqLw1X\nGTlY9mWLg53pjfJgyCcalHD3MsivUxpGSlHw4x9UzvhpuZzbC1S0ADzp5fLB\nEyOvYyiiwyoFxS7gkT2/zpmCd/1z/TSUymR68mD0KXn5GQAkDJWnjbtBXEfl\naYLi\r\n=fgGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/density":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/touch-target":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0-canary.22f390c43.0_1627412385846_0.92937455541622","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/radio","version":"12.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a37f7baa98534fc2df64140afae03feb1a968bfb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-12.0.0.tgz","fileCount":41,"integrity":"sha512-9HCGS0nxsz4Cvg5TCYv8PcAhVPYllXrS7JxG3y2e3rcrvphKuae7XOG4jvxzHJfI2H5GyvolS6GWRmXUGLgz3Q==","signatures":[{"sig":"MEUCIQC0ISY3fOGshU51Wx4/+tukYoJtpUpv2yi0utEECcQz7gIgOwqVY4XlhYuPHVoonyzRKtpppwWZaX6fu+MLhsImvrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNWCRA9TVsSAnZWagAA3kQP/R7qEh30Im+CYjUDfVd4\nIZaTNEa4TdNRRQ5PmSMQ++4y+b80chhQshHYh+nlePa+ri5O6wc/vM2VQqt7\nhmZk7kcjByvuGv/Wcso5Qvq2asVpx0bFqO278nX8Tcse3iwvdWklc+0sJ1Jw\nZBXFyqsS/K71ikZgaiiUzzpMb+6MS55WajLip51smXxNme8poYAPPyYpMwTl\ndk763CiFTT6FoSri1pAWBOsTT1TfDolUkc6EzVfEB9xy9N0YhsOqcTWbz+zT\nV/y6PfLSN7kDT0yOgonsbHjZS4BYsk3NXM6zt0yAejXNPQAs+e3mcbJQZ+jx\npovLUgSpl3qB3sYR/ClCkjKLrp9seD17AYfQAlgolNaWeLaIBDT8indrp6RG\n5Ji52//Uzw0TokQFzHalsO2zMAo+eWQM/7AGTGnJNr8pEZgWPmXipWZVcuFa\nw6H/7agKDoCSTZsMKHAehSTzK3eKY7wblPv6Wju3kMFyvlF/GBpIkUNk+gVa\nEZlb13ACG6jLj0/sUbMQbVPSmWiq8dfh7G49h62etHVB7DfgWKN5BEigWxIB\n4yGXH6/Nl4BKkdOnJzzeQfc3o4kWTfYQ1//tQPp3z0mjLeKP6Vgg8MDo2piN\nG4uiosTkAYR0l9sFukA08uywf50EvFhGReEGJupEKi5XHBVegCii9l7OZZ+i\n6Anv\r\n=kJku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/density":"^12.0.0","@material/animation":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_12.0.0_1627415382512_0.7117169088620505","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/radio","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ef9e07060ea4605c1497cf555e6740085e1c31a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.ae85f7eba.0.tgz","fileCount":42,"integrity":"sha512-xmovt/9XVzvfixzqziTnuGzDaT7F4bDMccTHgDshbEGjQgMhmARBYWtau8FO2NLNo8nNzJHCZT6Qr5vTlR/H8g==","signatures":[{"sig":"MEUCIQDNEoJtzX9mA0s+GnYIiDjtWucRoZZiNTtWXy8uumGGhgIgL8/M9t0U3uz8JtQjMIJa53R7iRCYjI93By5K4je6D78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGO3CRA9TVsSAnZWagAA7UIP/j0AfDaYiyGT9HdqrsUs\n0OWt5sh2pShydethez1XJc44cwPekNyJBSx8I58e2CTaUQr3TuJ86QWa7vGX\nK/n8j3XjPdGEEqHXCsGyqyntrXa9gEGCPQsN2gULrOTsTqU/be+U0neWhIFA\n7zSSWgMrWK6sdAB1z1PLiEalxmQnhIA742x+Hs9QcjDfKtRDNJJmku3U3bH5\nxSk/bVqF+InvQXVhhblFJtMV9mo9oN1BUer5j+2vIqAC0nHcSfz6b7mPNvIt\nKFFQspcHJbol4f3VdPqoK9La8zum2GL/Fdq7vv1SkmsDt06VxwKudl185nHO\nFABCngMCvbugVCNC6jZzPOFRoIWtQDjH/Xohi2DS1l+qJXeZ3/frH7cpnCRs\n0tc4OWM4iML2n2pFzOYBAfBgTEIH7ZTtc0MBYZS37paoe2ylaN3CUwo6ncW9\nhciu8yTJ/xfuyIqqtltyHUNOB/zuvpPSoEycs46rEYkYMm4WyPVLZomw/Aq5\n7M8eDQRBcPrP8hYm1vDVwOCSOKs8vM5Snd3dyRKw2H0mQyQ5jr3g887tuout\n1OxH1TF2x0+rmWcXxD3B/xrhrb9vL0WbfW6OnVqcvRUN+3m+oWtyCaeGW3eK\no44WhMskE+Ay3qfC3RAenBB9bicmLzDbMmZZedlsRoVRM6CQMnxPkoipqHUg\noq3b\r\n=FysQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/density":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.ae85f7eba.0_1627415479441_0.8304193839590848","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/radio","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e338793e533053f599fe916fe071380131115e51","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.5981207f7.0.tgz","fileCount":42,"integrity":"sha512-i5oK6bDuoOBH4QTA8p7z7wt1IXsqnikgFZ6ihOR4RtiSQQOp7VhK39FFAANBuFyMx5rz3n1P3Zcr+f+sB31rMw==","signatures":[{"sig":"MEUCIEz4zOtTiKo9mz23u70SooCeRhXB3CqZD1URF5U5ShmeAiEAxQZobDppD3xWz6z9YgPlpUXEdG5Wh5nSg+foKY0u9eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQqCRA9TVsSAnZWagAA0jgP/3LRpKxCh7hrFwd5j+jb\nVvXqIeAG097alPwvBRxCf0zBUNVBSea96H27gq7KBR27IAeOh3LlI1Ce8U1E\nsReH6agm25p/8wLX+nvfnvhcdCNc9lxdY8fos+xOVMA0IYUZpA1G39Nrmecw\nIJFUVNFJeb2nlp7SNYUrgYBZhlrjnLcTwOHBvBeEF6XX3E2fYkGt64gALZOj\nYYafNT8CMf0ENHKLmkpWL9DF43rDzJsIjiJ+/VIyegnH3XtkbttOQLusQfBt\nCVvqDlmLLekRJsHeoK2lQBPURmwfdIVfTUcjo/AXmzcTmaqLudeWOg+YiHVS\nwuECS2Yzf6WuTzHfsXLcpkhn97keNfnKlZCRTEVHYXhYMZZI3ZJEtrAp4Aun\nPm9mnqUdoslPnk2Pv49Z28qQpUQcZxZiT5GKXKq9kffjbo673bCJUzO5JTUt\nbMrEOpKbwmRLXTKLnfBbqV9M7VOpLzv71SVtKUE1KtlaNYvcCplTODJOj0Ii\nohUElhP8oo53qwFwyeuVqfNEBQmt+z5ZCFMJf+4kY3mhkSPRFRJCcZ68hO4j\nFwt+0mAwwphlymZWu1hHbRVgIxYrjpHzl19UyroFqlH+zuxhNWKJG+glWukM\nP1qeDcQsdZ1ea6f2t7XAhK8dM/+vIQStbkW5l1cg/EM7A7jw7IeTpjEPpp5T\nduW2\r\n=pLub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/density":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/touch-target":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.5981207f7.0_1627427882388_0.3561654227883284","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/radio","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac72ccff97afcbe6ce3e895b7b800c395816911","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.83bdd0222.0.tgz","fileCount":42,"integrity":"sha512-klBJI8D799AwKtnTdTn17kdJXphNabBkQ3gchHhrL0kZo+6/J3Kb6BXSXSkOVFAYgZ7kid5HxkDPhwGy2+hD7A==","signatures":[{"sig":"MEQCIF6qS63MfOJItypX/axLJEoj9VS1Vz2UjeVSQOenibp4AiBZG3kz+XNVwg2VVclAxVEpevTes475QU1t5V1OmGue9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMlCRA9TVsSAnZWagAAXNMP/joN09vd9Zyg2islkla/\nATqisw0hp2eCD2J5cW7/8QA1C5N5+ZboppZqzWdebR2wRpkGsnXodDTRiFM1\nQ71LujAhdhoUEZoJF4JFYKZLg7Q5RoTnK2sZXDsaXHKcCcbv5krsf/heEN89\nKR2ZpjH0SWtITtK7TcVn1GyAb+7DspaNigtuh7NmtBy62Ctg6bgyQorTb1sX\nQGytvBnz/VHHmDxgzY6JGgBnNTROGNuTUZLQX4WYAOKE5Vytlu1TV82rmyr2\nVn9bk9Idv/idDGtL7EuYmNjrr2QNw4PVVed8ZbLyzcNSGtXnQs3SCbGmbhar\nLsJ+eLvhgNX0AaC+JOX2mATz+p29GxVY/q0QARBLH3RQulBQQAWCJ4BQJ8v8\n38UB6j4TvFwSYPd9m30ZwV2fi+GZh4mc9V94O3/L0MFGS+LqWujCs+dlkXk8\nSXG4P37nAaCr2vFiMwFmqLkaKCIN4jZLjy9vE0+hjG/8xAA9e5HZm6n2wQ/n\nS4B+jh00f5B0cw61RVMOD/UGyJeJDTG+x48i0LIQPvxKxcJRwne0W8bTdUUn\n3gn+gntJ1VIER0aRrLl+OC+n+Ga3lzEONf2rnQNGIYRaCxBrvDj1ZdcT7xQ7\nfqgYQvPmCQX+saYmynkBYh7xK5FdF8EmGhqNDYlo5U0K+Slb5GaOq3OVQNEb\nT0Ep\r\n=PPvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/density":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/touch-target":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.83bdd0222.0_1627493156775_0.37889500746104776","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/radio","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"404aa61491bca4a28b89133b6c5cd88aedf09439","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.28656298a.0.tgz","fileCount":42,"integrity":"sha512-DTSd+dRxo0xR20D55SmZmj21JwIyuFzh2k17WkXEzRdqjWYUJxyDOVeiVvVHQUDB1CZOIqMDzAHiISBYlYTwjA==","signatures":[{"sig":"MEUCIH9EF6rvOhpfX4bvgn16ZPOI/1GAjC4Er+LUNwbiEUA4AiEAmiPDyzR1BD4zU9pG5gljqeTtuhunNhyvqn/tbeNwu0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+2CRA9TVsSAnZWagAAiToQAJznsyQKLU9EI06JX2nh\n2a6NTSRnpeNhM47wjlGNuD8TDEuCdtxFGIccBo9+aaUKBgCsw+R0raqBv4bR\nTwXq6BferEtjpxls3VFSCtTR/n6Zdo6QLdWECt182Hdwl52pym5uObFbE+dq\noqRTN4+vrFpeJOhQibR17altlAvHT0Lfnuo6Ujw/1o1M3eBe6vkd/bZbjjOI\nh6+K+Wyjjxs118SUBnia19b4IODZbnmZJ8+/eoBw5q1BkDbKcK3zNIkaNMKU\n/k0kYeD328baXsvpG82S1ZgY9Bj3kE4agijS0Ho32/ke4hzNrsH3IstvXhM3\nyJgJnrRGRsXLlP/XgrFuIHhzQcZOzFDfjpLL3uU2+M3pmsP+wKa6ILklBJLH\nd0crWme4GwOrt0TwMWduqLBoyoFed0Tl1fpdo9OPeXWbqVzS3dhY6WlzXh05\n0seoBs3ZDuViOc8QRcx+iWU3AKa+YDId6BaaxtDDpJt/P3Qmd7mbJViVovhg\nhUyarOjP7tL3vqMGH3WwVGt01KBbbkxWgdQplrVRY0hPktxvhc6bd5SBWNPW\naUT2Jm0ZFi7vm9r+pyMaqJEQpCwXv9GJNM7gBLOjNM3Uz/n3LmfdUZ16Upf1\nfa65tkh2g6lMv/Y9nfUSxGEP3km4Y3gW9tMAG6HoDGdpMfcviyHjnmuLtZ8w\nKxMI\r\n=oOFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/density":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/touch-target":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.28656298a.0_1627582390634_0.7510332424295947","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/radio","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edee4ff6fba96f36e813499a94c337111a4e7fc9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.9e797daaf.0.tgz","fileCount":42,"integrity":"sha512-9y8+Hrv1PQGytnDeTTZDnY2pjNfEF7uk1ZXFaTbCo1xes2SJewhP8jJuA70G661R/DOBxHBAwaabhI4Uzf8gYw==","signatures":[{"sig":"MEQCIFEYAyZx2BJVu783NYIdCH2bXl5gEuYvVzMo0xBV7XXIAiBIxRE4sr5XOuHjB9DtBQZplpo0izilDEK42jlUAIbCMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTvCRA9TVsSAnZWagAAJekP/igx4TWYsa+K0578XxS3\nn+xgR/s+C64nZJ1+1exTPh3AD8AqWkYCmGBwAKOfTwA3AL/Pum5b0bGuWkFe\nUxE6ZUJGLC0y/oWVgjFET/q3/9nuLhc74Hi4jmpgj457j2zNPxukdK1D36Zx\n+bQIBf5l3q1Q+9IE/tQIPm9YFEy/WT6b46dG6s4IleDCFjiSC4JgQV/2/kwH\nPmCeWt30r3FOJxus8pi1Tt56gvWXLLIOxeeIXutjNOSbUFHk3uZ4m9S5eh5Y\nCsvqFw7mU+/2HtT/TUuaAE83tapzfrt0U12514wsOu8jWPrNZF8JPF/TCkP/\nYYnWJ4bLRdg4MFORZBTXdnm3wi6UGHcGXTEOYI93CYSKEm28FU+M+I91d18U\n4dTtCB12HZtYDfngiIqmqfYmk+4mbMzcON+wMp4qF45fZxWWpayrULMc1VzT\nUeQMNJB5N94av663cr5xYF3WLH7zyJ06rjVDSgdpspmmEdklmzP2z/NCyMI2\n6pYW33ELhEGdEuQKwwd/tX1a5Z9iUtl8Y4pH0k06L7SezwLre9242su5Tal7\nblJRxq5B/z8aFrJ+L69pXOMn8VEOiX1bMRRI2tPpBF4mT4fGyrk8JjFKOFfn\nY7zKmKQ3oaSqczYz8qE2d9MB3s5bo6/VhXo2eNO381cxeQ7Ex9nAcylXd/j1\nEu9x\r\n=LpHT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/density":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/touch-target":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.9e797daaf.0_1627583726953_0.5198434011088424","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/radio","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eca2e5c3b8e4b00a0eb4e8f785c3a096c14b7a38","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":42,"integrity":"sha512-6d0gmBPbihS1B5J5yL3kurHP9sckMX5l5EIrNENIeHhEuSiH0T0CiNuNoSRajNMFH3xtgmYb/1VPEv+x7CG57g==","signatures":[{"sig":"MEQCIEXZymC2spdE9JavJzDHGILBnWG2PwvV9OruR26nJgfnAiA8M8VxZfY+P8YmX3ZANUKbM4HxM2i4VGc2WZQoczCiaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1kCRA9TVsSAnZWagAAU5oP/3pXV+P6HjJZwzqQz+gn\nfciY0BnonT9NiZVaQdbxtbgnSTg4j86PGmlYqKTy5Ii2e01dUS/2Lt09rxjh\nfpuOQI9wCNJrjv7lA561Bxk3pZh7iOvW9FWotCIinHAqJn6riPDksltVae4j\nZvSd62KEITmcFadrWvLw6QcdXkudkvW0/0qRH3CExyWCngtLXoMGiIt/m6JS\nRAC5qn2QBYGls0ZzoHMqbc7If+HZYZr7izjqduN6vOjiLbN0sYc5ZJ/LKmwE\nbJw7y/rOBEoxDEWoC3uXob354fBFb0/EWRHIhJ9DNvNkcV+L++2A6NyS4mj/\n1rzcsj/fmAz/cdhjWivocRY3A8OHqXAADMGH1CjXJRZvQD0kzbYUjiMCn/D1\nbjTc2mpW3LUSfARRtwhvHxdHnkN97DaR+oi4iOCUBYQdGWNJMrvS2mXg4qUt\nmD5ToxY0dYI3vNvaR3e33RzQi6JG1b+RHDsAL8t08+stVoNrfFWPsTkiTQIG\naYGnj00XuEXFV0dOswW3mCjsf4E9+RvSKvlrG/+LmfQ6gmE2ixIC5e69akzI\nYizDIYGc4RD0SGAEqS4xi7lLNKW7O0Re9XJK7kgprIL6KqqeBh/22X0wDvgz\n14og4qwP6IE8ABGy2Zi2Tv1wAWkIN4X7yMpv4kJ7LYKTKM0l6UVaM1DlDEUZ\nkWYP\r\n=gBgv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/density":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.adb9f1ad8.0_1627671908458_0.7060293574219016","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/radio","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487acbe4365031688824076391c21dc7c4c4ad3d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.cc5377458.0.tgz","fileCount":42,"integrity":"sha512-Q30SbPCHaWhmjcgPmT6Coi824lG3jB4qRJVpZIXXQraSxcwwnsJah9jLXaLwEJXRyJlWTU/dm6POSUHSXjw0+A==","signatures":[{"sig":"MEQCIDg0MXuYFrqwuWjyWxg0lNJZKEvI5tEO0trb5pTPCF+lAiAbg7WyA9O531x00eU3pOboz0ofQaBmYK0jNQySS5CUcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAdCRA9TVsSAnZWagAAbEUP/26do5aUFJd23Z03Wm4U\n2kWj0fgGCJXHV3xoD0EVHHYXdeYATdXi/qkCs0gHsMV4X6EBxC4C5HpyZn1Z\n4cJjOjIkWfFiIb+qYRIyTymJMLXYWb6VQDxcWlhyQmLQEs3nPy3unwS3VQ7T\n4lUO/zSVgDYQQcFSuE50OrfxexflAlc9Kw16pT49mtnlSjwhx2No0HRzGayu\nmGqINcb+GVyVTjpzQVfEeLRnNqMshSkA266AWQOyazTzbSsICuVsyWLZKHkE\n56t4swk6gsA6R2/rJwKTAtEgKzkTOjB2KjdHRWmTGfzKU0W+4aEhuXAcySSG\nzsingRt6k98D77RudGaAu9Qoqy9BfqbnvWzVhqJO+Y5OCrbjKkzIFqXvIPTJ\nQ2NJ+9e9oVxyHe1/V8OfF+tfw15kfRNrUR/W6INVvv5sRN4lyRjg3p4VniDC\nLHEaLoFC+lAVVCLs31PUOtRnPlrkCbwQ0E0X2L/PIun6lQRcnwTvJy+fgx2R\nE7xDCeqdRrgnr+YEnUG8x/lqOOsEzqXoOEfkEnUDa+mJgqYzve7yCJ5zdpr7\nB8f4c8+pBBXRxuV49rhSSJolX2kR12COQDxKBDlvwCncjrRFY0b/ycfCCGuV\nOmYILschcDVaYXdE9agy1m7RLyIM8zfD/zbRfjovnI9wBDwXQtFim0UFltUQ\njX7p\r\n=4UPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/density":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/touch-target":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.cc5377458.0_1627680796897_0.7350703523033089","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/radio","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e88a5052944c008f312dbbf22b51a919d3f1d4c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.a395972cf.0.tgz","fileCount":42,"integrity":"sha512-Big/qjAmXjuNS1pbL37b4Dk26ElZ9EnDj4YdLXpiXs4XYOZSBHV/zkwH4ujlrjLSB3j1INFG7yhsRuxcMYb24w==","signatures":[{"sig":"MEQCIGeZFysWiL6bvqmcHKIhShavyQhlM0W+gt6xVtAGT+p2AiAdfnfboDJjgef8SaLAznk1gfHB1iw9KXE21V1+jZ9hBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPBCRA9TVsSAnZWagAAntAQAJia/lb5CMVui621eegk\nXyyhHbe0LUbTiNPwa3B+rJYriAdhSJLPUaKybrBxqCWvnBLMVmVIk2EYW01o\n8agntF3keTA+OJDYFLAPmJ/NmHpNdwK3Ro520eUz99xI5qFq/63XdgHXZQEk\nGtumuepjTcvw90Yt7ZxgxjVPSHjccltQ79JeFN2wfYZ5yFNk4OeDJK+iiOrN\n9hXASah8MSuiNoKwd55/FIu2Rll7VmwMfUgV1Ll1CodwqLYuyhCpzVN1DpX1\nx2g72Hk6x8ezcz/GXndvP/JhfvN0yO81ctyEeDpc3wmmUENmqISxy1cz+9gM\njQYGmyxSypEEHyKnAblYP0QYG9qcINn/IXLe50wCJV0QrWq2ZPv1xTMeqcjs\nsmxWSZcfhE7/iyfRAzfQlIU6FhSdMfCFM0K8mXt6Y6fn6pWN+7Mu7NGg8als\nx+TBckNKOwvnJHZoqz9EBckim85+UKh796Wqd+COtP96zjIrdDLBVs9cykBW\nEQKkjtz1i0vrhS06cPHYQkzYAJ0hRTPSFlt1WbOupX85s9CbVuOyT3e6Y/5M\n4fftKrENS/UDwe3GMeP/UBGgiLEHHwxnyXUXtVXiRe/4ras50LMvPUgA/r91\nf96vvNGdR7UKCTJrRpzazZULB3bfUPL6dCrNsWOWv8tI2d8PRdXsCRztrhu8\n/wba\r\n=4bq2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/density":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/touch-target":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.a395972cf.0_1628025793688_0.40200119417008406","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/radio","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9599bfcf8f8c1031e03e366f6e678090ef7310c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.7c96e6b98.0.tgz","fileCount":42,"integrity":"sha512-nR98xf4XTWMqYMPSB4SD+zBuNyUCK5r17f6vWa93HsLgMiEQS1ExyxYJ6QV2jlhHKlKGcAS+ZpvRt8UtIKwNMQ==","signatures":[{"sig":"MEQCIEhVExqvJ+FFYBP7N7+BbzdPIkDxGcfmIMcPFUiun4J1AiA/7xlFP11n0nWZTNONlVBxHGwsGcujba0F33YvLCuCOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+nCRA9TVsSAnZWagAA/1oQAJH0HxiwA6jKg2TT8i7z\nKFQ8wTHHqWmtQl1dgXCzJf5IrGGFTa0Ao/ognGbyD+ruzS/WPcWOztMCBdoD\n2MBoBtHa7ny3v9v64Xkkx1WdglmHCyMJbQUGawKc7cswZZoXQckfU9hOYpE6\nddGp4MeH1l+vfzY/CG5SOEmfLmotNj6hVczgurhZm51rrMAxQ/irJkNOg7j9\n/0oYVkUc1hSWn8nPnuvvqml6wPX/099a9q8kv6M6pAirQI/4O65CoASf1GO9\nqOs/KMrqjNAHW1wslzZGD5IXkoH2pZISiIkURRLonnLVpExShZlzu9Z1czCx\ni0JrsygRA31BCTmrbQfNYkArc83Zi0ejtVBRL6rpl/WBdJTqs179RaTsY4Bh\nZqDijB9P36cAm1hNiSYU0t3Rb8d+9IrQyX3mH9xAMdtpDGQmMaTFa/0+pqs3\nvm83ntg3eoJgWflUYJO7Pwk0jWIpMuJ3Xlt1IcpK4wyz5tVprJj6RPDBy8bG\n+WI8bY1RXf1gw0bMUL81eaeCjCxo/Lwj65yQnzyTOywLN0BPvA/bWot7qkUK\nf/AuyWOO8MD34rAYNVQ76ju5a6Y8LoO+eUE1xrWNHeSoltMVKgSOstoiovCM\nHbX2cfikt0t1soK2N9XPKwvFRVMiEJe8Vx3XO3y1dX5/OByflk9DJYu5I/1R\nyFpr\r\n=sEG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/density":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.7c96e6b98.0_1628028839236_0.7096685355910091","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/radio","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bcfdccb66ebd2e0df965a944b36d63fc94dbdf2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":42,"integrity":"sha512-8OtiHlPML+ntluo+lup5/hN1HuQsVlPaEZhHdSIUeBgUIUVyxK5kRJDo5PV47bEv9xX/8+xqRUpHfJyCpx90KA==","signatures":[{"sig":"MEUCIQCVX/bm9Z8Ug7Ttevvo3t6owqJlIjfk36FQHog8eKNVsgIgU/Sno7kFM7Hzcuv7dnUj6zE0+wwYa20xS2lH2FtzovM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyntCRA9TVsSAnZWagAAh9EP/jzwbgPDKTqTcxXKRGL7\npA/WwhkL822a/Eesa4kIOE1N2vhlT5lMVVX5tG3w1MPOineZobEg+iTULqsA\no8z2iCIDGn0/qdiBMICR3ZF65FZsjKye4VyUDI1OZiznwTn0Thg1RMoecHaG\nX3+w6cucg5mlOXpyK2Yyn1aax6G0VeLP2COlhUh9v98FVGXNn4Pa6P5xDaFi\norxiBZvE5pbn10jYZntmHpg96z5ilvOF7u8hQE6WjRpCss59cWW90uKGxJzD\nd5wPMuQUgZ9euCZUdCCZbHDPozA8KiCaofHGJ8R1Gi40UjZ0k85nNEi9501W\nESXxkLIpIXLyxV4bTFruNIolpvPnkW7sA0ZMMpkRgVnBFmFsFZqWOPdwETxC\npiL4AZxmDz4p0Ttk/UB1p+Es0We9eY01f49r3uDrRr6T4PrjwAUESr3QqTvr\nT+cmOCMm2SA7IdakZWN9BIx4yYRv/42AgqOCHtIEQDwG6YSAkaThfV2FVSxO\nmOeHprgRyoELLqSVbvZNuXdFc6upQvCdrpFxoerBLO8tJpDsVz0qUOG2SpXj\nVJtdRA5q+ssNqquFwWM9fZuUDAzqtwLMXsHYvcSf0C8bjCVX3tYQH+IDBhKO\nXMla5qeq8lU6ksdscfYBnBJ/+iJly37nP7ijxMBT2w2EYZa4bFGfuW/7T7p6\n+kED\r\n=Sevt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/density":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.a80c8b2c2.0_1628121580879_0.8067867100639718","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/radio","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e87aa992c565ba68cb9270948d493c7323d78346","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.3dd611091.0.tgz","fileCount":42,"integrity":"sha512-8jVx9/9rUNcPTpPpS9qjmaZ93yHXIC08C+WJpolngbiAotYzyOMEXc75pGfTdyfj9WsLBWa6Kd9jA7LQB18DWw==","signatures":[{"sig":"MEUCICdBxDzbCurO5wDBJKHRmNbQO+yT3vnTAWzsPZbjERkqAiEArnUvBny2GbxbQYA2M7isdJ+YWqZcNOxpok6wvk0AGXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FeCRA9TVsSAnZWagAAkWMP/3jn3ayS5c16++wRstpt\n2sdxqU362whjxKHCGEqfurBDHlT3zZQ8vnR6ILXc2GKizhDKc0InTcksWtwo\n3FQhwHF7OtCx5YlRJHnoCxYGcYlj/nNz7efvgyc4tp/KlyBMrw3tl5Ytap0i\nno8bHcbdcO7OuawUicR8z3kwE+ImEimdZRL6u5+7m6UfaRp6pb7l9upBd3ZU\nv/W54/wpESW3Fh6UwMB8ro1aMxe5RreFCLVJVx/Fx6ypwa4t7soLfVRlBzEF\n86Uz10FDGD+KX69nYdOQuL2zMR/cT2zuDIdoqrRlXrcBgU8fvHwWli35/+Nu\nP8oFi5c3cTPluvz/j+STcalI7/NsSRPQ15RiyLNqYvLmgBIn6qn+NUTBF50B\nhaMHK7xDbDSUbaWbGq/PW49Hr1AC9WLGEaP/qQSrRkqrUBKP59vkV02BEWYD\n+vDqszLVemKuN/UPqFbg4NGUj+kz9XQdfCZspFAYFbfJ2Nqy7mjqwyklvEtn\nAWna+In/d+BsZcDrPwLxsHZyoJ0eo95vq3mipToqSxfYN92WsOlD08PlGEGE\np6CgPmtC80NRM8DbQbaYUT1GuQw3p41W1q3fMAZIO2rM7cXGhe3eJ8HJVktz\nq0p9KU07JOmwnDKJ+I0MPecCVNarMLJYEzxpM/JuwAsvuFIMBV/Ad/HDkxYt\n19nG\r\n=5eMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/density":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/touch-target":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.3dd611091.0_1628135774062_0.8585224367357478","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/radio","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b281c5682c8b34dee62304f81dd415ee96cdd0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.5dee37ff6.0.tgz","fileCount":42,"integrity":"sha512-nt/BVCdmhErWC1v1XtTsTtRv7thg44tGiWRggAA/kSFgTtFM62JXEfak0JQqpuRNe6yvohS4TPhW6pJIHlPOxQ==","signatures":[{"sig":"MEUCIFea+R2EI5/2416ZJFrLWhbylSN5OBjYzi0b3LEI2t84AiEAtZKyt/I945F1GlQx8VjuDE8TKcHVtUyXPQCLegONip8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLxCRA9TVsSAnZWagAAWmQP+QBEECjlOe6gYu5P6BVx\neJtl0Olx9k5ZjyTfkZlqOGZh/z5CyFuZoZr6Ib9qKdby2W7ruPiBbqUMMFYo\n3cKf0dKZ4j9dxRu2/jsMIndVq3fBvqYfzhenaddI8lCLi+8n/UCge/RHZLg4\nUjupxQuVjVu4MUGFHgjM1r1bRA3YJQpnyJIB4sm5V8C8bmZINZFMAAtIX9/z\nwiUcdButdBeTRRirigLQoncxORg9doOgD9oTanRtTijGI5+RoCduxR/IhnKg\np/hsQQ5WYHUqEgCNcBoycKbdxDuWXehElfE1H/qeL78Nn0Du7TYYc0cHcqT9\n4o8AW3z4jfGTl/mO3JvbhZcCaaQ0giMRd+dIOJI+3ZMJqAA6HQfPr4vegSbw\nHdzPnmQkMRumWYXEE7uAET0Pqdu3VwuhOT9xrmk+Vuv6ipnwcA4v3OTU7mY2\nJVJ2Y46cTG/sNJjACzZkD5jDX//KQA5Ql94EqUWP1f/V4YKItW7Bx5ccPJih\nQUKfHPwoGmPSoXO7M0oWzrUpfddfPwYE1nZQ1K2kidwv2HCyyLmPKkPwhA/m\nDAj3p9KUnzhFs0WghkBNVb3312v5Ump1nxE6il4Lh3nTGBENNOADWeJaMgj4\ngacTsmeqWW+hLfNwzNlQoABekI5vaaHEaoYswsIEsUjPFjQArufcC66fy3Xf\n9vca\r\n=9hCd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/density":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.5dee37ff6.0_1628185329302_0.6687227136795184","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/radio","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74abab4fb8569f0c6c1cd8e0867cf83156d9a74a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.bf405d22a.0.tgz","fileCount":42,"integrity":"sha512-aTlitNj82kQ9LbRc9TOrvedCQLbJ4rGeBAOe8vmeE/dKQk9uXz+5nl6nXuduug4B4t5EApghLDf5pJimm0wSHw==","signatures":[{"sig":"MEUCIQCknXVDX6xBB7PVLMGukTNjF+fMWNBUWNEKuhh9EWUaXgIgXiSsGBY4HVleP1Yco/IaE2TvBikymlbWIxEOolR9Moc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEd5CRA9TVsSAnZWagAAH88P/0MJFnm0FsX9Y8klP1/v\n+B1mGF9bpvrZnuMumksmg/vipT5ZUvshCTSeOJ7xf2k2w8nR/T2Uo8xspPRO\nXznIvEnhlS4L6yUxHeppJ1Iu1xtRj/i5w/Pn8TDYc8PTcAoFfmpqNVsbh+RM\n0eACc+sido09veaPR3WtYR3eTrzu1IliKQZACJKFqcgbIUqKjpcduZLo1KTv\nLFOegI6hieM5gKBZj58BdQgJ6FJjPalCihfsH5Gl7+iyAfafsp581E+ahf9I\nRcd71TmMXBEU+nok0rkBbu17hV6vQYlphdRaJPENAl8E/x0MW5+Lh7ENsCBD\n5P6H1XqUWGtrhaN1xVToZeLbn+bN4ZG+Ep9DfDcHk5UUPfAVZHhEKOzzf3Rw\naoWBeemIPQ6NKQJzm1lIqNG9UyI636YagjOff45oFbdXnR5Rh8FBf/gxMUGK\nqlABzkzb7CCskJis9ohqqe0bVsI3X7jE8AzPTSTmx7Px6J92nrxB/hBK3kit\nuCnjxVPpK4uAIb9sOMpzL1s/UbzfShXRXiVh+2Q+cAsB0bFSSiYkxRyo1VR4\nXiOaA7jtNr0iJxAW2EGqDsd+5e7LINxMt1mm+vPAA45VqYLDoH6+QZeW1cyY\nzGjnWXiVABMxltkwrAuwz4qOOC4Onnnqa7I7BHAxTJG8N7MF39MIXeT9HcDU\nMIeH\r\n=hZbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","types":"dist/mdc.radio.d.ts","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/density":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/touch-target":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.bf405d22a.0_1628194680965_0.5159014619966964","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/radio","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aaf72704da258b8f7e835170e3a5f17fcefeef4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.b47dd37a6.0.tgz","fileCount":41,"integrity":"sha512-vP23nT++edf4OtNNF11aT7ftZWiIrb+PgRxvUvSPtX60YRhfElBdWrvdaE3rlqGK2IyRWBu8CTTcFoco7wnuYA==","signatures":[{"sig":"MEYCIQDibM5XQsTVmhuxFPVfmHcB45tfStZrIXKwcpwigf+EdwIhAOcVGKZYSSFfFk2AJwpTZPQ+evBS8t0UnUmCnmcrnsXv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7tCRA9TVsSAnZWagAAtuwQAIksazHkSbgktaqUF2Hy\nRC343MKc7TAGpmc2tdkKKLymZDDPMwEdMJoc38uHcVxkJCxRjFr3ADIj/m3G\nhiNrQGaDtYGsdcjmug4bDxGaqWchHlV+AJ2CfobZOiZcNXUNTI3zTtl9SXfY\nqtBqxZOGMG6HqMSIAyg+xDcr7LzRlKPibBV43j/HEp1azV6SHOnCIhP+GHL5\nsudSznF7Nc2FcXsovw/QoOnMv2n03UNrTN7hCw9u+2wGZjzUnQkUKj4VTi+M\nNXRj+vpjAAqASc4hqmLvuGuz3Or3m6K0fQhAD6jVfZHn96nBNaTci1agn84w\nJezOZXkjHJ5y+bqMWw3QyutY34CmvB1G51ljdQU3aJ4TaduBvzgt4+Su7ETZ\nVVsKpKR8pG8aDQCE6/LQzdxIYMkcBaE/AgAHRKq+6IwinRVFKgHKc03YozBq\nOe2WEcBccWGCcoCOglxITzuneEcCbgOBN7Ktl2wmuV5gJcjHZlC5CMRYE4aY\nAPyOmyevmhU6gOdukx9W+I3M/v7Sz7JwIGfhIXOoZjENbpZGMLRT4hFSIs80\nLSeR7djlT543pd4cbEsE89A5DFHT/Kq7+hgtzllkKqXl7hugHSbbsgQ6+wtE\njWFhul996jx1yT6+AHwZmzFXfl+FCSmqStd5+Xp2GTUM28zgHaEqk/bM1o5S\nE4H7\r\n=SVLR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/density":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.b47dd37a6.0_1628196589098_0.3212570083646733","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/radio","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac143b7e11c0edddf6cb6c02cfc5a8ac68f59b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.6c82b965b.0.tgz","fileCount":41,"integrity":"sha512-A/2LyYldbFx5/bpzDvi3s8mydSfFUzroCObRPMBOg3P2Ckk1cAt6+NEzMx5/pHGoWL31iRjQACruzner5zefGA==","signatures":[{"sig":"MEUCIQDqv5ls15PW6sQz0AqmlJei9oskHkaVpydstfQY9MnjugIgYV8SQB0Fhf+Zzge5LPmZNJZwDd8V4Gsd3bLNj1MvisU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/2CRA9TVsSAnZWagAAGkMP/2+HclpaoD4zrDNV6G+j\nQfptjGxob2leW7Ik75Mq1ANlrSMsh+nEb7Agrvt7zn4Vlp2XMAJvNtxR2M2u\ndaKwUa3xRbzlTcDoY8AUw/WTiOZNnCxc6HjUAbuqBXZRgacivKHvSvo75xvS\nWiR+NUkmniHXxyosPXZjgEFvHJjMGGcognYQ7Enpu+r17xlm92CKB9srYxa3\nxm+oW5IYudyG+9b3QzOO4GNgeANg79rAPR/CoClXTQdDFMQFLacFnpv9TvHv\n6EEUsda/WM82CAgX11BL4vEmm8b2WQzQu/vIO2oATjLR2VWa5AI/nXcO+xer\nfXO9Js6GG7XJ0dMhXHzijy3eUhaGjEHu3PFxmbXIdZ27905EnJE4y5H8eUW3\nEXVsx7NcQqwUgbekPPfVQRP3EqTaawlXasy2eOHH6UiQNLu27Fho80GnCNNz\n0V+Q7Ew/58EwrAlbfSZ6VF7MwgGwRHoZPOkUIteMkw6VMkOfb7nO2WPL6Rzc\njM8ESdogpZpuFHomdMfwxhZH4JLbmhZcGwCQxtQGL+B7N94bzNhK/ff94Uks\nOco37str6cX1WUhiZJaRq6SCOcNZfaNPrdou+bmv//apogfJVvWEINhBLtns\nO0CBHOqY5ZkaIazIspt7q0yhzD0UEPKU1uAReVHlyBhnNfHY821ajgtE23JW\nplND\r\n=9CWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/density":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/touch-target":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.6c82b965b.0_1628266486706_0.4169387556630917","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/radio","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ad0f19f6ecb25f5a04fb7d712ca3ce0482a92c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.4ca11fe76.0.tgz","fileCount":41,"integrity":"sha512-d32kuIuJBUcL6PbMqsB53aa9YBe7yK+iKY4u9inKJZhaZX9rvDMsBHLsf8abDoNIk95cVnhgNNCKsSK0qsaT1w==","signatures":[{"sig":"MEUCICuE9PXw2DMTW+tIOhw91YeEQdsZVqhkfdu6K0BRIQWdAiEA7zeWGkd6fN7xK4qeAYJvWxY4RcuEeF+/GhUlbnO4owA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxVCRA9TVsSAnZWagAARt4P/07nr3MxKuHlyooNaNeW\nyZMkdrrzqRZo1VAPFDTyqqK5gxn9HrKsSE6kmK+tYJuKdAxa6amr1+cutRrn\nQgct8zA0qUVhmNcswITWpTot1z7Lu/lXyqGIP0A6P8EM/1MYLr0sd2hbSad9\nmVqBfMQVJNrhwM7DUDzvOMnyXi8EoTwr/geBaaNEzSs6Mt/NuMhqZQGMIA5t\nu+pozUATI3+KnX4WAZfkXznBccbQuLZ4pW93jPEZzhuekhEZtYWgSwVH9sOG\nMcCi9vHwKlS2UAMunNa8OlnsKztYOyiIrFuWmf1ka/zr/bIwbKagH8M/QjD1\nGvCB5gxuclapneZSM1pRymejHOUcLgBJzBGHb3fcZAvWAO44GQxqBwppuFuF\nukL48G29HHlitrf1tPsEIemTqnTIZKm8iYTPooXak57rf8aMkC7xFYYKPFbU\ngWBvtAaupg+Hy+93ZKzTEF7Rl4Oe3SRYM+9K53BZG2zwHvCR7X90UR6DgMVB\nekRUAwImg0tcmgb26H6uzd2rp5dURM7gxEaznxq/nFfl2DGfXddcw3/o8Cqz\niR/gceUUtLxHpp32TWpgMA2cfg2C9jPrwLWsLLUtmDB7o3FnO3U3BgVgWk+g\np0smhhFVg1wgVzKP5v54Iw9xu086lyMAvYgA+vDDjhsLYS6c/xcQcDi+B7Ng\nk1q7\r\n=R5sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/density":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.4ca11fe76.0_1628269652980_0.995931459706495","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/radio","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9a99e8ca8e8796df1473e049f42ced9710e69d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.510cf90f2.0.tgz","fileCount":41,"integrity":"sha512-XEHwjRaz60boegx0rxW+fklJEfHldHgqkzVdKDAdy6538Ask/HiLh1tYIQ+py8tj5dCbw1990OP9vc6rUGl1ew==","signatures":[{"sig":"MEQCIBoXmamrmOdjAE/goLWtSCoeWat3LEZUTCxO5QMAEBI+AiAKZYFKdQ9tdt6zo8Yf8mquGznY9dZhvTS6XtNn+p/mvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMYCRA9TVsSAnZWagAAsoYP/iOZ1QpDqjHc+f7pBFja\n2eFCZRLMNXz25WuO6igy1ChTlwJIt/7Vfz+C1cORGruQ1s7lOvFW9Zs+cByj\nreNVopeP/YpUuNmbneQHzxZCzOwutyt1LRbx2SZ0mxjdtw7EUijZ3b9e37sn\ncJPeszsBSXJ63luAS3v8LxjXJLYdhlOPO8uB22QsmU4o7n4wNs8oQ3M2q8z6\nHNR8mx1j29SK103OMj10xNa7GuGacTGW1ut6UI4YBK74yCZb3Y3Ra1xehFII\nk91VZiZ+6k1KiCNckNie4X7qrFDdtliV4u0Dm+AfaBodR1QVIFyPoBJUqXXs\n/uNjQ3cQooqnFNW9nHK56fdiiVKYKceLTP51IsQvYhVYStjyvvST+g7vhhx+\n+XGLcOWHzZHIHh4rJR4hmz9ta0wsrI9l4w+mVBVDqD6CpCm2l//w/k8guxS5\nA7oRf6CPILluZWmjynEDvfM93wxISdU79ODRqIjngWDaxT13u86NJw9v9EfU\n3mTx2YMf4wfqwg5yDe74sm/hYfFVmdqwen8sArGhnXkA8X30cZFtaF0UzlQ0\n6e08AhfHmjht8mUvEX2VYk+KvxQQBZOPCKdFTp0UdCzpQwudMWl6CFy4Z54w\nIndW+nv/j7GhrR7Pa200KRYoRSUakG8dHt6DY0Zf9/Fe9zEHsBIhAHAkqciT\n2Xhw\r\n=UeWg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/density":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/touch-target":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.510cf90f2.0_1628529432342_0.4108379218735705","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/radio","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4c4602a2f348eef15d8f0b6d64e607b58d10901","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.17580ebf7.0.tgz","fileCount":41,"integrity":"sha512-vCVl1ygXvkqd50je8a4C/Ivn1sUMoqPXiyZAln2u77zChUsQ3a89jmQz2EevGG1i9M0U5xaZZavWuYJ5uPZsvw==","signatures":[{"sig":"MEQCICCEQzTPAaMZSk2bfZiRHjsneEDc0XplqRrDq42KdW8yAiBVg68wVzwi60OMRw++cNFXG4aId+8ihHqNtMhDEzDfbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEwCRA9TVsSAnZWagAASxgQAKJcpbY1bQhClpI/F/zO\nBA0UCk06gpeBzZ6SxdxYbWXmpatIjg/jVkq/vpylgRyhc7kwuktvgHiBrsGS\nU+IPdzWaCBlbSKl8kpvtal/QB9VFx1kXbJizvQv/3ikUIlH3sS1xyIgMB8m1\n/hNwMCTuL8PqA7YcPs8JEGTteJPPzjuVVuRUOd/J5D73zlLzg7lSaj4OaIbO\nJn9z5byYpxxNhieMlaAgO1KQCtFqFUJuV47fUR6k5LlW9Wg8Ym1MxR3w1E6Y\nUnYAqWFUspUMvxnLdhNHm5C7FYlMP3QakuwUzfozwbWBdFb8Gm0Ir9g9LHMS\nITzkTvC9nzR6J3c4jpcCkXQUV8+Krog1gcZQxArOG/PkcBRyRnKckHYmvKmR\n67Q5VY1nxCju0ll2yz5vUrEsx4Pb9v7p/AstdtsFZ5LyZbNhaIpagctRxrmK\no90MN4olxpm6t2I7R8oA0ldEq/1ouxFIH1zfzXfRSRcRKd284cTc8WUIJgq6\nERJcWBmk1IDnoWoXqALtNQupShZhxoq8OZZYBin4O0hodXsIoh9aaVZwcqy/\na8bkOL+T6s8To/GGL5KDRIG23mse0mjUdGeWU2tcAvRXIYAXYBPMsQQs3DTe\n1hzs89o4+dtiaqAKM9tJ1xf+uSSN8//a8QKhE5rBLW1ev9fqaVnnvMBsjD3y\nzCBd\r\n=jdIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/density":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/touch-target":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.17580ebf7.0_1628533039946_0.3643952945709832","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/radio","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdea98e3494486e3985c1e65dad19c5b7b1cff3a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.7249a3060.0.tgz","fileCount":41,"integrity":"sha512-8HmW5TQbA+e1gw5jFADHlIzKL0jJ5pemamw0rbsna3Ui+W9T/OW84g8F+V/4/atq55g/yL+sYLtQZcGmvBqwyg==","signatures":[{"sig":"MEYCIQCrWuW+cc1qyDcmrKrZYRga3TJUcCc6XVDoDi1i/ll21QIhAIPgXx1NbUfF4b5fhRxdh0C8APlHZVjpvEcGCe2ODYDM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIyCRA9TVsSAnZWagAAH0gP/i5IiLcpTDsspK485yPv\n4bCbQX2U2l94H2n0x/hScxQ5xA7D9OwTn+KSQRXJlzM4o8t0VyE3Z8jAa8xj\nPs34zsibKqv5OAPajFqoJ2X5iJphdTj4F64ExeQ5LQnsK1dhy8fcxsas/YIT\nNQEt0ulTicedbLDb/fze7ExIJuwyeid1hYpgMCokdGiD7mIt44Vlo0zvxlHv\nDNxcpzMW36+O57qEqmqcoIfwTJ3bJZe/zAovOjSuCP0TLV/KmtDvxMYzcN6b\nl1C7CCEGfui7o+otEhE02cGof4Ou2HocWp0rryAuoP6ibM504NHUVTFndU9E\nyuWzfNmzbusWcW4PBg5HtDYrD7HuilgQJ3Cc9JUTBOvicDDg/RBK/ncHyTEE\ny2+iRsbM5dOACeuVIBj0DsXxVXyA6uLnTEEN6h0HskuK8IBsPaLeLXMdM8IY\nCaIKErfeV0KHH8duycv62ZWzTsbMct6p5wV2bbRApzUYBgbTYvsQ3vhaDBgi\nKeQkP2TKok6Zwh/syFgEt1ZkYNsFqmXGak590ZqLDs07VCdjhq8of6h7dOJP\neCaeDpVXNnYESXFhJJriI6HqATgqnT6j1HbFO8iZ1V4jVnVXVotJVuzQVOwf\n4BnUDQlzvn48D822gF1QVT8ZCjXEJmO1cJTby1/nufvjbQ1V7NYsyjzesvzK\nAyIP\r\n=h3+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/density":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/touch-target":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.7249a3060.0_1628533298478_0.6993477156910322","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/radio","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0859f608c6d69b9045b6533bcc522a35493e7de5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.4c405863b.0.tgz","fileCount":41,"integrity":"sha512-INQ38JpT7oPqHCaAsLGzgtAMj4CkyCk8QK3XHVK/Wp12I7G4YV4fpivUphOpHsCYgMHvrUE3kEXHktqeo9FRBw==","signatures":[{"sig":"MEUCIQDoPtlmycSzexFBnewT77rbuoY3b9wbvtTdzmjQKpzsVwIgdvYIDoj6cjW/NGv9A9ulXad91skxVzqTUWgca6C7U88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEroZCRA9TVsSAnZWagAAJukQAKPDnKC5AJzXQvnPaQJ2\neJZilZfn8XcofROLfFprOVsXmCMM6lU+wgOtKotJa33T+GXGQhwOkH8G6YGG\ngfKpEU6Zv52NhML1h6f4h8i8dA4qNreM79zeabfpdMKFpxfw/h960eN9U00J\nnAOF1G9Zm0Js5XLGPSBZq87XD76ABnq9U2oJ9JNmb2SZNJVhfym7lD6Tqzj3\nk+cZyKpqEZ8ela5BgLoNJWDX0pFSyO6iSdBBDH4it6L4/3FwhSZvJbIQWr8r\nYol2rjuTVYiznmYtLlWfzVu06OlNsyAsxqYSxRDcHdF50mWZhl09YMxBI6lz\nKZdk7+TKRrk/FT+JcDx8BbeRTha8DWdFcqxzn5ZofVt6h9yBV4nRPs6nwXwc\ng9Ya3XK2mmh9yOp/P9RlV0obe2XkIqGNdLXpVJOCADGeR4+I0XtEFDcWncWx\nnQixkBlEHKcnJm5FH/ERLp//ZOJtR79rF6Z9yiFc4ZeYciUEV1t9CG3aMxKg\nYEBAUjeoPI1MhgnE1RGAtkeEOsJ/LlOr72st1FL7qsreGzoDINrjD6hbgZaM\noKLElyHW0gUp9XzPne1AEqB/6HEUpELIYpQjxFkoz0tfB+UogUqwDrlQqmf3\n8B6Bzw1mTJfI2RCKZN574ZG5+EdrDwjCgJiQ/eaj8bz3MXY6gSk4yeaqbikE\nj6Z3\r\n=bBIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/density":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/touch-target":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.4c405863b.0_1628617240741_0.7039519434300094","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/radio","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1a763fca60d9297d305018357dd700f4fc2420","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.f4241a42a.0.tgz","fileCount":41,"integrity":"sha512-JeF8uooQVka9oOHnzBtLsFDw3sjUIYtlE1WfMFisjVmf6jLZAmoqQVCyUaT31AtiqskeBP20TJObpNKFWBcu2g==","signatures":[{"sig":"MEUCIQCogGnLVVtrklKo/hlaN/P4W/ty9wwcGTtJ5KTTuK58wAIgXUieCAVUP6x9eYg+nl1gaczsxvRRcg1mIuRZrviBAnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAH8CRA9TVsSAnZWagAA0MoQAJ+u9s8hn5iN/qFu1hXb\ngtHd/YAv95xzSnAAVg/uknhQuazbvfyHrchS7xenQ+Hpznr1np02Nx9qN6N8\nVPMz5MYCFHwofvwF98UB6A8tMEGPKKHgwfrC7o6BtGeOtFBP7HcIvJy+caXG\noCzia0wAFOChwBgpktYFOWiXBTbueDZ4z7iNff0z20tMLKid9ABMRPn77Kez\npuyywOghNOaixkOsGK47se8a96BYXHVRmZOt9UlwBeJJfYL2I4Fr+zmE261E\n5OT9QhDNEKRVE5TvAo/g9DFxF9TbVnfjMbtQ5mtYY3Ys5euiglxri1P8GIr5\neVFGea+gakPfn1F0GIjb5HX+abyZsXS4rWWsZl+vn8kHlIMI9BkRjCfyL2U1\n20RA1rOc1THojgs2TiTZMgd6z+5pxfH9Xfk1kD0VvbBD0awMXn09uY8gzeNJ\no8xtoo4rd2JPjX31tIF2AzAmvpMS21Csonzd+3yShJvXtuyO0fBScAdFIQvD\nT54zmSnzdhgOtvvJgIttAmnhfAnp8oPNYNhnGRqmlOeNHKOCrbduQwFkN9Wc\nPyS4TUPQ3o8h80EbUrhrcll58hk5hpwWcg3Cw1zRgeNP3t6eSzmLKyKjdxLt\ny19pqcVBH6Yom1vWvGeV7vWKHbGpBkEQfD7i70ieqJsUhv10dV2jwsMKZtf5\nA5Bh\r\n=XYKd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/density":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/touch-target":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.f4241a42a.0_1628701180140_0.11940528240476178","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/radio","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e56e0c2dd5da2fde9cd4953634f58bc863acab6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":41,"integrity":"sha512-+GENa4eM3tfnJu79JBcWm3UsEkA0EpS+Fbawk0QYSAD8ueR7/jQkWExI7Mx6KI7WILxgaKJcRnjXBqfhC03k1w==","signatures":[{"sig":"MEUCIQDWIHROt5yckh2VCAA58Ms+RLdbSIkn0T1BrFzpxdy1DgIgWzNQJkNOjxfehLoSAtOnbC/j1HHF/yMOypok3QKx/v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEKCRA9TVsSAnZWagAAWxsP/2de+LMg22b4kp/ePP/R\nqWJ5pYV6lWDaiC/4XL8TAm+TKsfowKvsu3/cTkVg8j9lMaA3S35DdPZn5Wnu\nZOYUS2O+e//hb6EeQlxA0JjFe3csUX0MxHnQmqoUFZKeO/zyIrLo+43YkLts\nR9P5ws2ZO0iFzt/oyLzhivFjpog3CUEnApijgYpXKYwKCb+RAKG1fvn6KgvV\nwOIdWiQ/xr9CPwqGjHUagO4FcTw8HygCXjTkpY8jZmI/bOWqt5qeaqN5wCbE\nnjVqcwEqN78wX5bw5GUISgQ74qYxpKAU1lxs8E0t8Pz1wlxtPMN4M2+Uj8MM\njNBsOhE4YFZ+DoYfqG3UCcjZASWGSmN/34OgbVcCUIzQtgleEVuzRwKaUHZB\nyJsPn21oa2tHf3FKBP8akkbhuU2c7KHsHa5aVY0uQ7YnEfO9oC36OpryBaTS\nO/4JiwGelLm7goY+payLUQLliwk0w5VluWC02LdJ7LWK/Gqq4CAg4ZZNTZID\nov0Jv4VS0jouQUD78sY0lGvHRJyK4SwNyyDIy3p/uBetb/bxu0jf88LfomEo\n8ZfiBmr/Q3krxHAmcp8DLFY+Apn3jGl552mLT2SExReCYTl1631o0wL/x6QX\nxnx53MdZSN5rxrLY0KWPURuaJ4+Yw6SsUeKJ6fDvPLkxFLKyMf7ad0+LxxJA\n6G+2\r\n=hudu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/density":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.0ad12ed3c.0_1628717321975_0.16658344141294945","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/radio","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"701a754b8ca3f7a25031be6f6a3f8ee47d92a121","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.077dcfcfe.0.tgz","fileCount":41,"integrity":"sha512-qiXq0091vfPa9cvtKNIuzXioPaHWX9sYcMU0CLWJmlD1BBW7WHT28AYtHnX+SLjYSda9B9XWxEpj0ODgWdppMw==","signatures":[{"sig":"MEUCIEkVFKJKFq34pDU2o3r10YizTSB0o03fNNprqWZXMGTzAiEAxFiHnQJLEb1g1cF/a1JlTYIQbTcnd2IyDZ2cg21hZCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCPCRA9TVsSAnZWagAA5AsP/RV7RCB4FPzinR9BEJ7s\ncuJndzJV7n5iibEFRUGjoTIKe+sSsuPwUhKHd4AxbNfwK6ZDYcV2f85Aw2Nk\n3zXasAggBXqwoiqCUlumnozhp5FCGZHwIRBCWapQ1mWHdujm/Uid+ZMYWbhl\nRfpebD5uxi6rKh3nZJ064BWX+1k4Wn0wpwYsTZAiBA3v+CzXKvYgQ9GK9MFt\n7C/58qmvLv7InnPTMRsXsgCFFsNP9KwgNOkP812HzwpCA8pozKRaIQqNxl4Q\n3FTMi/XtXV4x81T39HHVJ2kmAuGy0njsb6ORXx3poHTmaKbYpr/kLJmflGQg\nd81i1y22YSRzbH6oCdLHHYx76wNKvdWRtTk6x233VzFz97RQ2F1uQeRwG00l\n6pFQ9V/MmTzQHrbZgP0C4wVFh9+Tlhksdn8/KV0wU4GOE6LhXGlmF4xeY7k8\ncoaaV199cTQA2dMQFWsCskCBES3yVkWql4n8TKRm8J0ifP/Ocprh4M8iQM7e\n4+NEOze689NyzzLx6ilKv6ySeNMcIyS6XH3SRQhjx7gZSXxPQcjxI3slLoGy\nrESHH9f1A920Ch0uY4nJ3htjG66mOy4pjJPcjRu48W/YCv0glSqZ/nZ7k+Aq\nuv0GzTaY8+pZYzb+axFejSl9TfGsfhDpM/BnM8usA4PMcQKyo50lWG0RM9BU\nbC1n\r\n=fo2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/density":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.077dcfcfe.0_1628790926727_0.07130186486057122","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/radio","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cfae0cdf93c930a2d6f18599c528e33a9743fa6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e3346766f.0.tgz","fileCount":41,"integrity":"sha512-LhfqL9k2/vHm2ICz90IRLqXiu2i4PMhxnUvUzDqp8x7UoRJ/4fHfQwVG0W4BQSwAoZwKhJsHyl1XUF3y48fOGQ==","signatures":[{"sig":"MEUCIQD3khlw5IP4wlz5NNAgNSQrN3hgIP7nmBXfdeEyX7ZxiQIgNF3c2UTVTgPesN59dh02mqsRuVVGujEzL47MqfnltaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvVCRA9TVsSAnZWagAAZ9gP/3hxisNyLbmrvGaTlPNa\nhcSUquwpEGD7rM1Vy5bAzWskhOcvu+aZr6B8yonkXVFjOaiRH6s39L8P6Csm\nqnQwUT8D2Tm4MI8NGUXWDpOPWq6oO+gkrGjg5JaFatY4LwlDoDX7Fi8C//dX\nzV8EfEd83+TWPqIoCPCC7W+8aYoDzi92kOfKiupLk1hSOg3Madcbl45oHUAS\npYuOTmLUsNNdF7hj0vJgFgpquRCpQsVYGevoNxKjw0lml2wiDIZyRekDdCQz\nfA11z0Q9zEGphHwBlrPaLaMv7cwoHUHVFfgpGPCKlTR0ybgwBtC4L1uqvZ3L\nL3gDiP5NwmB2CrL7f69ZPp6svB1StU0jsAWvbP534SkCdWiWQVn2tuMI89dD\nHTRfz3lB8MjYcgp+QSNc6oI+LpmWpKUnb4cYScb8zBSaJjm+/YeTiybaaks6\nNVuACm/Ytqxvmv6u6au4vjNC8S+ZM1P8qzGX6L112biC/cGXzZJr8I/rBP9p\nph0EgjPvjAwfyZ1Od3/r/r2sskLhT+3bJt0sR65e4e0YvfQEphIU+W+rKRRi\no2+gcpUbAdx43RuMEZa8hDMZms4Xg/rjKpsQHDGSvfjcZOYT+czZjKcbYUuu\n8QNb0JyjR6A4CYZ4gwgYLQuoYvbsC17tA3+mMNRGbfW3nCpwd8EUD37RDHMN\nII9y\r\n=Lvkj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/density":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/touch-target":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e3346766f.0_1628883925765_0.4758857866244639","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/radio","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5443203fe6a50b3db8e0753fed1b7115fff2192f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.2fb068fb0.0.tgz","fileCount":41,"integrity":"sha512-56fL5TEJpqdjEPAOZ36PbWInvf9DDXwUteZ/rbauiLdj4Rf87LCRF1wYFwDPiUm6z0u4zI+2GyfjXxo2oK08aA==","signatures":[{"sig":"MEUCIQC3DKi9857fEX1KL6+T6YhoV7FZWJ9hIsC+FCq3Dkx9QAIgBpjRs4aFUVCOWzbllCIs465keHuqOPYN7U7gwOaUDMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsyJCRA9TVsSAnZWagAAxiIP/A766w9hjiRnahtO/h6e\nAJ87w+gBxXTA8qHjFhSwW09OHy6XgpohSUh7GM2Z2qFrG4CKjH2ONN7IRf75\nnz+HlUZWWfJx5Sp8zG2sHfpROp8odQY2hzdHqlojETpM5kCWjnpQK3X1r7er\nH5IsERkdVtlExddfW7EwoKN4U+dorWe7D97PNTDtCloeOnAraIJY0oZTj+CR\nIdzWExptFX6RHCczHcYZntVbYcCapJEFleHE7iNFY13o7SiFDE2jeNz98nz4\nnIF/SmJOaNuEcGE0P7TXSp+zwsFMIDE233IF3KqDOAG2d+BRbMyTpETJvDN4\nnEfyrG/NiCrvyDsj3PfzTSW6EDELDEYVe6hSdqZFxFPoYIuGct8KX6jAyFyd\naVy9DJ3TJDgA21FTiwkyuzIwWuTIXWus8BGkVZ4bk07xRk8np28gLTBLkqDR\nNz6XbpcyYEQ+0jrpPjmB6m+lX28fEQZCI6CTCNz3qAXTvrVEEfHBVduTd1xC\n4ewg01zHzPNDTEFbczyJfOtSN/s1MeMwUVjYHHz/uUumnVUdt7B8v+JtOSYL\nUoLA9ODhfsw5UODFdVxHHI9RWfHKnfHbW7ZY/7xt+FNRamSIwH8i5FwhAOef\nbuZelpOFA1nwdLV43pJX8Vwn1xUPcqW3O894Y4CGDtVsG6NRLVjcAv7tt+46\nqsjW\r\n=EYph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/density":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.2fb068fb0.0_1628884104797_0.3582577282572861","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/radio","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b319219011bc205de679a8731058208774ca2d57","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.fb76c5069.0.tgz","fileCount":41,"integrity":"sha512-xuBiwlsqgBBOQ9V0nWB5+Kj201NnQVS2Cc8taK8n2A5c3G+R1ijEhKsCccYzN3+soSJXbHE8YJpgXpgmVoNxWA==","signatures":[{"sig":"MEUCIQCMT+B3U0vECRA0xo9ZgOcM11qImXyPE6a+mIsDl4MpHAIgWpzXZX4xN+DbcI4fpCu1mFQHq5kZMFbeXuGiyZSBe3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWjCRA9TVsSAnZWagAA3YgP/jt1Ce5aHpdliM8kGT0g\nW8bISSJOnkwQJ/XT7nOGqhyoYCJRl77AkeXcHSyptt1RXUE8OHNcWCFEdZhL\nnBQut53RtRcDkil8bW6o71xRjwXNhc3YnD5rpLl155dOZLnHcj0m3JdYPx0x\nZHWZdGMw5FI+GSVhsAtVM9np/caWyB8kHWeWQYuJfJSF8sq+nVs+LLjnHNCd\nIyBKdCOfCG/lvRgfFwyV9fBZK1TRqPevW/JBx0fcCsxlJd9vcfYnUadX5rut\n9EgMmUcEZCr3+eGjEIU5T1+y4rtBR5tEdbaKxlDro70PmbA7FPHNf3Xp/x3i\nxfnygSVerrKPDUVPEze3v5Y0e7+v8Zv1Eb5iPPmPCplbAUqsMnfpFKOIOGyl\nA3BVkltipZVm7Y59qsEqKx3OMms8VQsNF6tI942gxU+ePKnf9n9bW5a/3rSG\nx3Lde9FWK6R1PGfxww/Ap/pr2JqQNmn4YZs2qvqMzAGP/+4Jk3dJn3DgF4oO\nJO5B2CsmI0SxgIT5LQY6y40kxwgyL7i2048m5B06hTorUmVHhnpEPkH5ZyN2\nhf1bFlE1ltAGwS2GEmZHAdVaUL+9ychHmbXclciGBLivH13DRyTypBp/x0zM\n3QXgviN7vTGZA+uyc36+G3v8PnLY0+99mD3wOsOnRgrqNjOwQf9uUeRepkWE\nz/Ih\r\n=O0HO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/density":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/touch-target":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.fb76c5069.0_1629144483208_0.5539130892342128","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/radio","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7817b456e5eb8c73e39729a0063adad2764682b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.457d89aad.0.tgz","fileCount":41,"integrity":"sha512-ax8w/abEFHB9cl2p6Zjv1CSW4wp7MxH7YY6UIIkJHeazkC/fAPGkarWHrJ66z1WnIuoZgSNOhyO1JNAHu7HcAA==","signatures":[{"sig":"MEQCIAPynzyFy4hgoqtNPhxAQ4NYJ8fA09J2gy/q8rw2cmscAiA9B8lZPHzGzfjJwkqR8C1CWwXRX1sZwDh6lcDKNtbyAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QLCRA9TVsSAnZWagAAzOQP/RnwSRUqZdR6wlljBpSc\n6n/u4IR4ofSh7mh6hHni+r7nGKjj6J32C8heejpcAdtLo848iS5KTviLFSrm\nuAxSnHIenHKbD56L/AX8Ae8+gr9caBKnimDWTVaIfKt97qduWjMSR/vOs79F\nj6l5n/8/PuDsC5d5mQ/Mn3abPdymzAx7nEr8F5RBPOG0QMScgEODB4jWHmEu\nwuHLqjh4h0fkGr0vHsc4+rYTEfZoVl1AC2FpwqlRFL2mXl4VdPSXwzVGtGyJ\nx7cunkh016awaT2NyxK8sq/qGr0i0qIUPS21eoABYURX1hl0QD3B3F0r/Jok\niHSGcjpgrsNz8Ad2CT1V/O/YMnQ0j7ULGIdytmEpatDxOMO6ZDJqRiwlqnH7\njwZpDQGwQ0o8UtYTT7+Tdk5SiP7CvI0iAE/i/eB8SvQ8Xb+AKjSsfZ5DIGvu\nBI3/z5Ci/Zf5wunpPT7el04A9tJDMsX/L8FYWsY1EjE7zQUc9EVxD+BzEcmR\n+KTub1PQmah1KQwRgRvKDem9Fsbm2a7zR+3LDsH8Z7C8a2QMmuZqmPgav9dJ\ntxiLSmW5VGhOprAQfrxbC2xQ8ma9p8Ybo2B3ecgKCXyWqC2yrOpd3ah6+5F7\nBrx+s1XOrT0s93EfCoWosJ1SaDQ16RN0PFZ94X9Xu8t8YJePzOF728ha8hP5\nFDbL\r\n=WNo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/density":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/touch-target":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.457d89aad.0_1629213707217_0.8614442340494533","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/radio","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ad6f5d3b67f297724b8e9eadb753596fc650449","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.0de2f2edc.0.tgz","fileCount":41,"integrity":"sha512-zen/B7mhm/ywWodUwlTuKA+hTkVJjp8BO3KsiuTkB5rrjfa+5sQxSPL3MqWwbFkwfWQt03Z/rr/B4auD+opCBA==","signatures":[{"sig":"MEQCICESCINjSqSgdhxXloMJs+HSYY+xvjo92l2J3USOTvWeAiAIwOcso2AgWSXf2bjkxnRNhIkrgBPvqJqRp6VlyJjISw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCH+CRA9TVsSAnZWagAA8QUP/2xEZlUuxApU0+co904P\n1tRday3L1qtxmiOBaodWQd6/GmSdMzGLUVWej2Ad8ZPbS6+XNTFmZBpp3ryR\nMzg9rL8X2OYf6i7Ejffn8yY7jQe39g2n24VrJ2fYdPWV5CgCqqbu1qFSwSMm\nxlk8D+NDAZKpDJtkmp6WbaCGIGfrdgC1AUa4rAV+zS37EBgdVJgAZvDmcWCu\nxlgrQyfhSz3gn3aWtD6wTjy1NkhRtHBMZumq9F95YOIip+wXa9EKb+YFJW7a\nIaPQIhYjc5YvngFNm55S3k1K6pIWt2jx1X6aHj4h3QdSm0hSbKZVtVkRg1FK\nwfSqq69fH2+hEj/8snSNgmcCPoJnwIIus6Mio7TkDX29QlgdNtjCxUAFfn7Q\nASSu8R0KoCbjWEsBTE+BUCJQSyWUs/iGUWz4I+QQP6QLBnratA1uf/dO/lMa\neVSlKhLDyzgImsCNBelJS42LkPMgwLnPeB2ctBQTLYzbNCOUf7bh4ed+mkNn\n5lpuxN0hDl/PzH3ASeRL2qch4hh3i5R0tHYB3OEZgUpYo2IjxbohgNf9Sx5V\nVN+E1Ol1rVhgn+X3zQvTGEIxRmoTA5QMRIeTmn1Oa0UlhmMDwk+uV2DZwIeh\nRMDOm1ZXu1mWY840oBctsaQsiaYRgZkrrTrehBv6VmICWW34hMRep7hCClAi\nfdIt\r\n=4oSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/density":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.0de2f2edc.0_1629233662419_0.6818716747295734","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/radio","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"900cd65c4e7474ba0080331ea21469da6b8070c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.1f9259b9d.0.tgz","fileCount":41,"integrity":"sha512-tuPnWMf8OWOTskoJcreSVjz+hpw4kTByUCpsAbJmbMm1Ce9RjiB4Cfr1bvwY05gN3LqV0boNxJBsGXRmmuVJBw==","signatures":[{"sig":"MEUCIGZZ00Cf2Trh9FuYjwcDGemjMijI4r86L32Fe4p7Gft8AiEAhtV2jPbPILji3iXGQcSIGb32OXquWEHLsbeIbWohuNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDS8CRA9TVsSAnZWagAAdkAP/3ghI8Td7T3DRL0TjR2D\na4f4nHDGSZw1gY9GmB2zGSDMev/LjHI6OM+dQUyG8xiwxVfjY1wKuPBD9NjB\n9FOtwr+QGxkEMvKkxH9kVvsW+nyY4jNl+qpwTii+4I9XACtx4NJtt3+03qvr\n5tBlpG/vYaNkHLFzAOkxSy7Il/Gt7xDI3tb+wgEXlH4YvSwkTley4rfXaXV+\nMWFvQlu/d7WNxK7pl96fpy9YAaqKDlqf/zjk9e76QDGqXnqcP7QNaonKkGfI\nvpwBqjmSKyz4/XORapBzZ3kR+58e+oxa7M0kCepAMaGjM60dHrDSjsFAFryB\nky2+G3TqqXf60RGE6Gp/dti8LygImxxfWkCJhH/3uBRm9pTzfEcadqzHAqLa\nTHVP7LcnMDTXMsCtWfi2i9Vsm4EiQRsknpRRQJsPOf4KS3bKElEKmscLECez\nF/TWjp3b77rkpXT5zxsyCPCJ+SHS0TaV2A77/e1Ta+aYLfbux8gWujXqSQOl\nqkLUmIzzHHBRLzKSHodi4Z0JGUfk035+St6FcCTGiLni7X3L53HiPpmyl3dm\n7/rYekpxZH6w9WiJ8ejQTfIkKS6sqVRNV+E5OsyNGRE5F5Otp9HgJJADmfVI\ncqy8wZPg5bzJiZUH6D/pNsrRRt4Gu3xzSALY1GJuxydSfJDJrsgbWJI+Z0q4\nMw0/\r\n=TsfW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/density":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.1f9259b9d.0_1629238459856_0.7055614331085946","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/radio","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d92b909c5a5251f3d2fb14c9368432cf088152","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.3b9290351.0.tgz","fileCount":41,"integrity":"sha512-aBk1q1S6GB2motA69kphkhl8W3yiSO8HWS3+UBMLrAqa6K5JZGveecvnCCv+ALqi7+IktagASM2OZ/xqYIwemA==","signatures":[{"sig":"MEQCICl/Hlc+LDoYP2R3kaQ49tCude9DEuJT5qxsCZU0zDm/AiAF2D8mIrJwCG2vP0qkz/quCRx3T1rpbskvxCkVd9oe8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlSCRA9TVsSAnZWagAAmIgP/RfG4GhMlBnX75KtFVh4\nREbAMX/Dl+ysa0zrBDUfzugRS7lV/b8mX7DtPou+jIBgPUfP88AuvckCUXCc\nkkc9ZP9k4eSMA1Ok+ri33wswjt1HP8cfrX7OZSvCyMY93mkD+Zsu7qXwQuCr\n/M3D98jVaPbSW738FK+MzzuVFqS2ZrnrvG9CzjslSggBIoutyLUUHxL6uqR9\nBkwUc8j4V55TaNyD8DI3JqJPjyeHpNS+RoK6I/S4s3KQ+lO0ja4BhW7LukNo\nA/qdfE4hn2EzWGQu5ADm2AkHPXuvA/dBZ/aE3z7bOKfVO95vLyacFRLAewTQ\n1+VvuzfByOaApcoQLgNOi0Q/0P8TtOT/OP/JKAiUCMMYiCwEGUnLIkMTT88G\n7VNn4cZiw0wWQ0CDJE1skOBx6Nt+NQEvSpIXhLa0ujQ7LxPSR5ngk1ocjlap\nPaR8M3XCQoRuQ2BLF+ZRJEelVxHjUCBM4WDzvRzxqAeyRuWMOYu6kkbPxopd\nGxu6J4cgzAm5QzTp/FCZEIjHvvfuQ2c2upmETNYxUgvVh++PZmbTleKYAilo\nI5BqtE93ApwRTtCNNuBO4CUZ5u4e1Ftd64+SKN5nAlDNjQP4Jm55q+7t2KDE\n8lL+uRYaxs6kyVdK3v+anwFrca7hBN6RfYM81nsRqBoaMc+OWs6kpspFmLQ0\nPz/n\r\n=jNm0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/density":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/touch-target":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.3b9290351.0_1629264210524_0.4663643195751428","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/radio","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3787394763a97518a97bb93026ad2e1ce0987232","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.43d2eed2a.0.tgz","fileCount":41,"integrity":"sha512-xCouQpGH+B/srTdU1TtTnaw8ROJBp0Gv3BJNrpsU5hg8+fAEEZpEqwml7p/YY1H4bzjuAXOsHewmYpVuaM2a7A==","signatures":[{"sig":"MEUCIDNBvbJfIzqDsCkoTmf79tjQLERytZsPiVeeHbh8pyj1AiEA/8aGXLRoHnzOip3sJ8+a1rDSpdHfAq1A8XFWnXe/dRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS7/CRA9TVsSAnZWagAAkF8P/2+jevJTbBU374xF9g8H\nXHPcN/i94QXGnNJusxIWBQj4V/7NcCEyeHUMCp/ZttQB/tyDrgQ0l9ThWZJU\nAc66szdMYmcNFMuKtucKEbGe8es7n/2tLA0/zyTk96A+wtm2kQlxtkRE/dFb\n9IsEg9HR7ATSFSCaYKumWUWISSdkBEkw1gBx0HVd7zr2fuiaLJfOHQIglV1/\nWfgyuCSnCyDmILKxxEUu9MwCieVDgCDgwQkmX2LDF0L6QeDyFUH/H/XGDK7O\n31fHPVp9Y8cHzO7MzsmnLN4NZuRki5d8XP1Lm5V1qk8tPnk40pXrQ0kPIU1b\nK9bbdGelNtz9F6ZIslmKN7a9tBLADamKwL2PdYCy4bsWVX1f3JwFb73nSJNQ\nom1sB9UQSPZ3WU2sjy6yR3G/p3V9Goy9/OPISLU1pLw14I354+j6RC+gybLO\nWwFdwPtn/psAh5hLUelQVNeYAjAWPD/WTNtG4xZgt40c+neEVMK32lpBf+o6\nL5UPWikJsIn5IgaXu6TODD2t1wSzT36lepiB0beirPKfALp5Sz8TCoqTruGL\n0KlIP+IFPhufNJDhgYVArE5iRsQNDzFg9LJh/F0cA8zXMdJmVicyyXKYQmL+\nvifGuEAQPYrbSkN9Bh0q6F+MjF6iWP7swadIH6pcPB1dxZfyiigGwZC1KJKF\nhvbM\r\n=4cwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/density":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.43d2eed2a.0_1629302527788_0.30809824369677874","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/radio","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a352cd1a03817a5254c11315bfa4abb4eef583ec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.0a9069300.0.tgz","fileCount":41,"integrity":"sha512-3JOFUj1pt20QKZArk4cZJ31s5zwRY8eHnWoFPXhVn0ONlKahbjslvd3vOaXwDU7abt1RHlPdbt5gmrRdTgdBrQ==","signatures":[{"sig":"MEQCIARHulXzn6VjnDUtbE9+zV55FvLttjqXZCUacJqseI4RAiAIb/Ezl5fCLK+hTADk+u7IH2ikyTb4Fq0DEGeD5U75Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQcCRA9TVsSAnZWagAADjgP+wSyb9G3nxtVmZf09CwE\n5rysZlk31Eb3vALx+I7gGc+md5gYJttD6FVBUdK0ZWT5JEh+PVGwZfQvUxOq\n6a2dO6Hn3PSILfDYL21CutyxJf+enYfJk+lGtL5DmEyuhGW7r/pZG/4lWEvC\nLmvtayhFBP6hVoElaf+9VN50G5YC+PTD08AVFXRpo0gSSUXP+w54R1L9mUFA\nDeawXby8qLT1HJr0BRPnWG3AGDyfwhlNvk61dUoY7p5k9YER7Do9nRQScvL/\nnCgyHZFDm8oYX7p2KVZMCJeN8PsKe3HAWERt+xCgWYIOzCf/IImUNorfT7E3\n3mY8P8Wwwp67iGcThkzVCQP51/qfNaS7+8ZRGdjrbv8jBNeTdva7gZpJfuvF\nPIQdKOFnAfujjshWF/cSzd4zp1VXz6H8rr79T3ABEz0rNKOBgGtBo4xrFos6\nlixC5eFeJQxy7lzI4/LesYKUNVeu9/dIRSqYxGq1XiN+GgJcDVAGN1rFHlfi\nrHTCgbUmVFdYOk/jRfHXM5lTrxRUOW60rgN9uvcXY46QVJkcijhWVL8CtE+s\nVOOMe3BJ85E6HT7D4bJ3UdajalDZ6082/4icuJQrJmVMlfUG6uJz4ogKDuJw\nqm9DCjFC9soLEFDfH2eWbNYsBqupGt81ghzSvqkSHrbaN1rVwBC+kjVkXaGB\n7S2y\r\n=QsEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/density":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/touch-target":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.0a9069300.0_1629389852806_0.4473283672330197","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/radio","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95161ee43f3817d14b839ef027553156b12651ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.7da413ed8.0.tgz","fileCount":41,"integrity":"sha512-P+G4zromU3s6BVt71PmMt5QSSHf2YIGYDMScGi29ONhu3lr4ay/wc4FQmypkikHN4fz0ScuMpXylS/nrurlXHA==","signatures":[{"sig":"MEUCIQCjz2jOcfNHeo8YN4HRw6zmcNVRa6EZM3UMG+4LFOKJ5AIgCoFTIOHnb5qgTilCzK3l2e8RE3QPE7vWlV0/VGG/Yqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87SCRA9TVsSAnZWagAA0ksQAJqQsc6EBb5ViL10gNLb\nvQXNOcP5370eBtDVIcJ06Rg+xlFXn+5YCMcP4oJRnXJWZ4GLXum8LmnJqiMS\nroGVBuqQAUkxjtfKtEafzY6nsUarO0T1YV9XzVlBKAvz+/n2PLh8rfFvc+L9\ni9sP0TU6tweTkkcZH6vkb39x/Bk45eG1mj2lO8xxicyS+iBvBxKhGKhhAr0Z\nhIdRRpUPCfDEkmTVjX5gloPUQuZ/8+m1daptservm0icLb+iB5CZ5nQ4PUvs\nCtEzB9lTA7i6xzMglCA5TZvv1RpFRGfJv0RyIYuj5nAJwkOIEwVs3DAaL22B\n/OHM6chRex45uGTDt38QkCYdRYmghpamTtRiVzq6+3dfbJfQK/KRQlub8oEC\nlI985IzK2twSOk8//YgS9xmfx26HjupGR9QLSBIpIYaCuEAQSVUHeCf30P0o\nO+7ApFH/gWrJFPcf3Y7KBaUAhDrgOeudzD1OV/nC8/Xh44NOylD/b6sYlKvl\nv7t+uqfbyJWVDUYfVtis/O7pbWHmhIOzVCPtMzYOMQHrwc/jREB62RcGWo0g\nGhW9S3/xOZvRRNjb69qpL5RJqUu1uOvsVT4eqktaeK9aLO74neepMwBHHHNp\nFPlB5CuRDAA+FYuD151anMQZS59hSFBhfr6sNMwaS7Vqr0673R8epLwTlPDe\ny01P\r\n=LE3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/density":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/touch-target":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.7da413ed8.0_1629474513787_0.26316129486107354","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/radio","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87706fb1f49b4312f2c11bdc11b255fcc0977128","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":41,"integrity":"sha512-98YrCKR0rmu7JMCR38g2wXfXp/YNxBqrrYhrn/seZXvPkM6fRWQODH9zLAjkx7ll9MEQc2dkHupn2twQdkgRSA==","signatures":[{"sig":"MEUCIH5ekRGdxlv8Ug5tJTZla4M4oX2R671yohnWXUUYrgEMAiEA/FEQsy8iK98lKbtFo1nSqOEE17gWF6VYKW+ZEFxFhN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAM8CRA9TVsSAnZWagAAkIoP/iP9b2wI8i6UTPYORUy8\n+ZHtxKgM/Rf7MFfeoqJJ2jjbUCqXUlyRxlLhNtR0A0dFaIcwzk7BeoBpJtYI\njxsRek9dBWPc6PU00gIoKfgd1OwZsfAquchyqLhMtxV7Vl66s5eM3vyMTAi3\nNg0hcrQ3ZrhESY1UOe4jkvcUfMm+2NYdLldKcUUF0RzHBoQujC0e/ZTopEQH\ntef+oAuH5Ke/t03ZSAh3iILkgtYb91ofe5srB09OwZuvvQpdMLlD/d5wMNll\nngDFIKAaPkzb/ejTdJrnaeuWxJnlSv5gblBytrPEi57ZpTv67Jh4RZNXPFPA\nCRjc/lrwhdyYKQOpi4yQB1X1IQi5kMrMQURp/gl0AZquRDCDPKpgvjEpag3s\njZ7vEToTOQoDNjov/wa1Mea864O/h0zFSsY2cbPGcxt0hvYhkww+Px/57a2i\n0WNvGQwiAn+xXrYrdKdFato97MCPCIe85o1OKWZVm9BXfhuL5jyswhAPljv2\n2AT3I4YIWuZnkGQjp4063wBw/IRfGVJsYS1KhzSljDyEPQeBnPzwQ3ROEKU9\nJudgmM1psLZ6FiMTyIAezEGdfycOElRH+wp7xyx+pgVQh3KMXb4k3NVNWR1x\nRA+n/d10PoKgiBklOJUPz8tJrOjHS11k1KyH/uFAerlfW6fAV11gQEAhiPIb\nBEv7\r\n=UaZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/density":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e1e69fd8e.0_1629487932218_0.939368375463786","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/radio","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"543b699290a77896ff0fb23eea5abbfe0fc18248","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.f5afc16df.0.tgz","fileCount":41,"integrity":"sha512-apaaGjJ4NJgfIr4VkqbO1JpsNex9TGn84LXYcu1Fsp2dv4DapcK0b0Dr8UKRD0ROW6pCjehfh1ABPuCCz1iZpA==","signatures":[{"sig":"MEUCIQDK9R1qnCF21ov+jX3fTFF4KTlUCTVp6BdYqAN9IAlPCAIgCspkV03WADagc0IFuMQIQ4BF4Grh9dh64qRLmXmXApc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAHCRA9TVsSAnZWagAAehYP/1THuc6HIm8KoK8JpLR9\n4xmrc7P5ox9TzHXUHZ/v1cKUHAFqq3cEY92SYL1TZ/Y4VogvFUCzxGgasWat\ng9C/6gMbuHfVCFGchz7wZCGDS0kNf4Kzt/ntvaFS2zC1tNwiUww0WMlXHEMf\nMklwDLasJ4aqEHmccLr2IZ7uAo7OdjDT0M1vpPcIZStXYQEjsWCKGNPQTCsm\nUFH3N0yhVvu4T8dgOenxWo8oNkhcS3aPPDvUl3G1+4FTRck8oUHyky4vEQJu\nkgWcLBL5ZrVsxqXNB6AfJl2bZROVlg2DdiG9ScBregHvTsEQaFdX7IMLORb/\nqwXdcMveBVFWQtpLs8fVBj8GrSFlZiO44nsY7ZQsmgkq+6asQVB9lTUWCDLh\nezRilrrRPEWUdUNeh+Xa/yuxZcoztquKpTes4xe5SRTMRm53qRAIROWLf6jy\nHG7/bb7reCk58smnA7CBSMI9VslX2NvowMf3ZRPqNc9ulWCR8mDWIaetZCTX\nl8o8167+XJHPZuFNH5eG8Um0Nt7xZRqHLtNuH+CgFIAWMWXeQdiGs40dxiwu\nwGuhb8pmpowJfN9mJH/qWlph+YPi5N3y7KMRbFMNKzQIEIazGnLuOTs6vwp5\nWAFwcZg1zUcf5nKHECLVzxXVbNo6CnmZGkJWZkyVufknG4jyEOCGB+rCjKzc\nkzVh\r\n=15Yv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/density":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/touch-target":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.f5afc16df.0_1629491207468_0.30971136054017334","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/radio","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58960285f7d659eee056f53fd565b6bde7f0451c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.28d0d75bb.0.tgz","fileCount":41,"integrity":"sha512-d6Tv+Oq052cEHiL68MLKCswy6dLUP3tyTUUZiAxjcf+7R+3qwr6zfoSAHPxcQGxaFLis6J27jNjlE8XydXTpQQ==","signatures":[{"sig":"MEUCIEeFyPDoRPlg9ittjo/zis36FJhWOjIQgBgaW6rZwwiJAiEA+6eY/THEUpXVlE4/R57STHKnmL2v0atT8CSq0d+Cy6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqvCRA9TVsSAnZWagAAICwP/j8cn6IcYJ4Nb+S4uPXV\nLhWlfK/6YuzMwl2+z7Gxe4f7wv3nOKtybwtTVJQwb4r/sY40I9lPZsmd0x10\nCnAbWeJG6B8fi7oIgEJkYtcGhXESWyP6rpPglKcLz0Q64Gg11jBXAuloey+C\nEygXjvYDgTeVQe5iMxEb1fcrJJ/0KKIklC9fGJ2FJJQcRPZZpmV10Xh4psSt\ncU07CuosklPLLOd+hgPYCYdQmocM4UaeWFW7X4+A3DiMiSKZVUyLJ+EADJhn\nIzHVnqrfCs+LlqRKc+Yy0aXg1FUxydoF/9mgjAfEngZOLdeD5JSLHHmXdWVP\ndeeVDMek3KM8dbl+xvJ5NQO01Mr2BiVCW52FeD6D1Gk4EZHnVU03Dj/T1r5Y\nyQ0j5wD9M6wibBmKfHQCb0x6DkGeFZf/uGipOSZgVfNiP1yEq/h+yfgzFPXA\npMeuZ6aukhY32iB5DvT7GS6WpgcSrGP+ijcXzxugqZtGBg8v09Y1Wd2G/14o\nay7WwEi0VZCAuMFeaDtDRXa/aRE4QGNGr1ac6TY4+xi1hA+5BV0fqhEXM9lT\nKgn+rw6XkiMimXocR9Sy1I1Xs9/uEUHXUeEh7imM4tJhPGRtoiRVy75UnwRt\nuukmwwiXZ+a1qiD8Ykc7beI/zTxRz5avXG8AsVTacUkTI73z9oXZT2higvxC\nqT66\r\n=4eHQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/density":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.28d0d75bb.0_1629498031060_0.31257359553519537","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/radio","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d2bc655a0a08d77165343a4bf826034871cfdc0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.21ece5360.0.tgz","fileCount":41,"integrity":"sha512-cqm4IOxITjd+6kB1y3hQbdD9XYyaZ0VyYuIdr3Hk2XJFuKnG+AHYJDIin7d46KCmrvToyTddP0Wp4jf/lYyTEA==","signatures":[{"sig":"MEQCIBsM9eCGiIWr+FX7uprcTnQprQ17PlNpkv4vXduTXL9pAiAfkH912YiDWK9/VtxNUcDfxFs+K0VCgbVesWrf3/QVEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5LCRA9TVsSAnZWagAAYRAP/2FJzbTMEhjU9q2NPAnq\nlmJVgsDNJTceRV8D/Y5IZLAs2CQhaBLCxYO9xGaFiZMsBkOCBs3bd6nDcBSu\nyWsqbd95jLMLCLih97yFc/HXRn34zkdg1R6Mo4qxLYp908iCmprbgJ2RoRgS\nhglw9wkI1AYu7L9pKh9pSk5xU75BbrTKBPDX/BPaU7iDD4OZhkVJUgVxb5rJ\n4iy5rOiAhdsKc8swWpwu5LQ2oNUE2Ed+nzZZi6mqXXNgjrw/B6p4jhqo5sUG\n6Qk2BNZ70WFEBUYr2ZuFmTjgD0e3O494Wna3sMG8cl/kdJHQFqjpbi/P+Ywt\nyZWvvc8uDlcamYgKBRVDNNA90J8V845ALJb52i1AmXIIW8URdA3cH4EdbJ1i\nOG8WUgn24G0blrQzWia5IgXqBUVmnKAEiD3EWxsKfzbeTAoGT+v3omoXGl+b\nFCLA+1iablQDYyYxm7QUwW5pNtFonFMb6wqVeD2GtURplsJ3lMsCe3cpKdqA\ny2j8JbVWmQw+SYKq0gnEsczGBMDt/FPmh4AeF9aUVooOlolb+DmiVOxdJOPA\npI5LWodQe4VJyz7j0tftX+s7XLAGQhXjy/qH/j+22xnTrql7W7u8EM2uLJSK\nVFnSgsTMEuYxF3C/uvkAEuofoihpWQug3YyAZACr5/5pyH2JqyVlL/vvbUQO\nisev\r\n=jLqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/density":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/touch-target":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.21ece5360.0_1629503051147_0.3457924728930184","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/radio","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336dc47cb6fdb164f26fb63eff8395dd69940d9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.8de07c02a.0.tgz","fileCount":41,"integrity":"sha512-YxYvce++LIfeohFwp1XguqSJMI26NrMQ6TX1RKwtsXljHC8V9X9DofTbZn0Fet9TQgKaclxz4xbKjG3j1F8o4Q==","signatures":[{"sig":"MEUCIHPVQcNr2OFhqZwN00StqSLOdwjDbTb1vrtcJm0lUTMEAiEAndK1cQGixwukkaGFEzM+nFLWRm/Nn/LfXrERT3SVDOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI746CRA9TVsSAnZWagAAVmEP/06jv17lJbN+PMGg2l2l\nj7JbIlwt7pIlzpXaQuZHcR+q56moQP3KJLqeb6LyOIfXEpfVI18TnTNY1WL+\n81X9OVKD8Tq1q0Y8jJKq7JOolH+MwkfwiLDcnLweVI8GlJjf4MCOaJ4y2r8E\n+afpDNNGPmWw+kPSIpGKI2FgYUDhxXRbkoBLaXDxN0vQJMxWwS68/XrqhvYR\nhe1PQSpqlpz9BNgPmWGxQA6wPAqsb4QWWVOz1skAn9NVWujLiF+eJCFbsQFx\n4hbzVi0WVVFCq2ExlZZpxdYE7xB9uPXQYJ5M7DNi5uJNqkbudCsoxYB/grsl\nvi2lPD20rXnjwOgh+hstd6YSt0YHezfoGbUUoG4ZIYY6h1uex+WcD+2HpdSs\nu5jyiVZFSQsB2SbAwMn9IvE6XESRkgk+s5NBP62bue/Kmd7vXtcgJADNKa9L\nyYbSXrglRzki1fbEUKNFiGjtWvXKdm4AvLTgToyJg8BYTSw3gTM9Sj4S+q1y\nwqXoBaqK4qfU7wjzYL2CTF4Cs/uP+naBKCrDIEIkT+pCQZDLxQyA/rAXHkDq\nWnv0IjqNdN1b5G8jtsiePBCTe2DSia2Sj5a6oWf7yHOXBlxTIC60t5TXc4OF\nbFv+u2KOw9hESRybPHORwWBpillF76XuGTbxl8I/n3PGLeyPdkbshA7LvCss\nMVhb\r\n=Jhda\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/density":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/touch-target":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.8de07c02a.0_1629732410142_0.03508139920443365","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/radio","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"130466cfdbf6a1412afe0070e37fcab749a12581","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.65aa63b0c.0.tgz","fileCount":41,"integrity":"sha512-xHSL9nxtC2AI4hL0ZS5RUP3wOXahJ5Yh585rPqR/scr8xuaRPjR7m8BEVGmVlDbbunMX12diMcUSe+3sePlFVw==","signatures":[{"sig":"MEUCIQDEtPyPOhP0uC1B8Sf9yD2A5LAaWZE3ozjuBFBw+9OgrwIgRMYz8GAhqcVp66DVcQloKGQUcEQZzTAK1rbA31W0vHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAfCRA9TVsSAnZWagAAHMQP/R9s4GHwVQV9LJBowG2T\nNMxDWlQR/R8CCvP/zu0DVx6mB2Nhg5MN1syog9SA15aK9T+qfB8yH3URqavK\nMVspbYzNgvd1tTxkKy16YODnKgZg2EoRQe4s9WiF8YIqUDpZEdl2MEvAmnzL\nykzOlekY0zkfFLV4NFUB/gueFtcd42dICRtQSOcOa69th8BSuNJUbqzvRMN2\nS61cYkNOIRCIfFaY2kgO+7ZEUs56Wn4mTuy6wnPTmHd8mXmFME1NLXFJll+y\ntHGkyV68jhZovJyxqBZg+VJkUfexj0ehP08Ks9Ngt48h2KddCKWgRtJWierd\nBzwY0fbbOIDVIjoUI7zayRDMA++AFBZxKammlQalt5gDuK3aKd8RpbOLcdZ3\nJ9eNGV7vb8H0aLar2X3M4o4UX+pYMQpxV948vXYmYtx/PFQulfOhL8tw1A1y\nZAYO5+NEhTlkBDQfA89Vhgqd6qOaIPeoSuELqx513HMYnzQNPB5rTJZV3lUt\n9hJZmqw6NOcTRCk/EGvix/NR7NGF1d1/EOhpG2GUT3VQ0ppiSaW7J9HHQ5ho\nFs7AECVb/kb6sVNPSpWHF+7lQ0cVXDbeYwnaA340ruWTQp2MkdG7u7K3Nepc\nHPrxs59KIg3pM8lQiRSk/+iJy7bj2FH3KPlfF1uzHCiMTfRmZo+ufiae4cdW\n7LNe\r\n=A70k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/density":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.65aa63b0c.0_1629818911258_0.9169047679815081","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/radio","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f626e8428483d20c1d482e01dbea1ee11ca0f0b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.15981e9d9.0.tgz","fileCount":41,"integrity":"sha512-vT586rCJ2I8yzGNH/wRG6zHklZV0xo1S7mM8DEcWvfA+ks7g43GV0ZdRVjeEup6u9QWZnC4S/xNj9uKJTtHzrw==","signatures":[{"sig":"MEYCIQDMieTh3QJer0RmTr/SHW26+/hXg8pCH17hYLGgexlZNQIhANzBeju7lLqCOTf1xt3s0B+85zL7RZ0SkaWL5CoMTmkZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRuGCRA9TVsSAnZWagAApRMQAIfWA4UveNVqmSldAajh\nwVA0ByrMBL5sX2NBLmWsOyXNwe5M3coHZCMzdUfYcMUi2bMOCY39M+YRcB0u\ntSrJlyjPRNOiSycl1E6qUBtuU4lrkGQ+kngPAzZyQGdJAxCxXHKTPP0za+GU\nSuaHFutEMOora8oNsFa6SIynfAeR4Sg5G+v6FYDgZBdEReDvsBX+i6uTcNSg\nZ+AwIFgGmXdCxJlsG0SDJfZpuHIT2EDq16gxF/iVXXSs9NMryDssbIFj+Xvv\nPb/YSQ8HxpZXQw1xL5CVz1Pq4F3mbgCjDhLgWo1tx3md7DdK5kFgwB8ohMmh\n/7F6oza6YOULmORdxZJFfLg/rO7GLz3oVQOquH0rMudJFBO+QsR0xN18sXkf\nsIvMRIoW2nLth7eG7Vy96i3elC9esZlfZ8nEVlv7aItEmy94Nu9FA/KaoUmh\nnBiJssPVyJY1qnUawYFqMMYXLYgmyqu/i0LJyxzmGqq41opjafEh/EAaQz4N\nvM01E5dhxd9J0DC2SrBnpQE9FcXV7RBvRdjqxOHROp6+zGolxXF79aHlu8gS\n+dXkkxn8Bk64cn6iuAqw5qm0UFFuvS8dpDVKoG+Y6iXKLWIZj84vSJoYkVB8\nacKbXg/VfrzS1Xp4PFxltVlLnY87EdhJALotgHz1xrl8Ehf0aQGZS2EQ7CeC\n7Qxm\r\n=nMQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/density":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/touch-target":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.15981e9d9.0_1629821830502_0.6294275043383686","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/radio","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cffdc34f01dafd74d51bdfc8acbf9ea53a9d75e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.fa7520f62.0.tgz","fileCount":41,"integrity":"sha512-0tHybBika0JCHmciXWzZednpL8o+t27FP/v1dwTSGfBMCzjWLIIOKZRl1sRTECImffCP+bjTGzW/yeiF2nn4tg==","signatures":[{"sig":"MEUCIFe4EKx1zSOXF5DtZmbfzLZ0Qui6kPGJffDeg53CpKs1AiEAqy9Ba6gbiAhLDLOGIg+5gIvswr++Rhxhz127BostY94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJlCRA9TVsSAnZWagAAZ84P/i5bIWPwGt57BmFttnUF\ni1q5WfGyFUG8ksD1yiQUJN77/MLPuUfe2aTmO6fN3olY3UVnvch4uhRSV6lU\nS2kbMMDlF8BqZzhKjBZdTda1ic08i79aygrrehd3tflbTEwazXpiTD+O8hwe\nzWEcz13iD7FNJz/eo6+nxfKErxwVsMU71IsU3HZ3opqNKq+G3GVZVbBGZ+eO\nhWP1b+tPZrbu0asSvlx6veIxcNL/LybNXPieL+0zjWAoK11T7H59lpXFUxbT\nf/c7WFHfH5qRVj8KSpDtOHWXDm1CdAL9Nrqv6zDfDJ+OVwe7/Spt1+hmg1Zt\nanWO40Ka1XKaIMgtw3rRtfPlEuXh8mii6SVb7OyXL5qirwRJYwzqZBLnvirq\n6XR2DBh+WxYOKo4mo67DvG+WCHzDzuQpp5sVRiKh5T9ieC8NBmPQfYO2SSJj\nvJLyv4CRFvhtuJp6CY/AQ2a7kOXTI10tep5oPme0M1ue1Gs+g8mBKtymGmnH\niMwU10pCI/lfQ0GGNp+AFA5sBPecVOONMIIbRaGCWLiPSNXGQBsww+3+iGjL\nR4Lf11AW+T78yBO8kB2YDErRC2eFI5J/CwRjihGoOD4mqiFXEUf2vEG4GC9p\nmfR4UWdtdZscdROS7awm+dEn+rGkIYhAdnp5J9sVyHwdnBJJ83PGfdWv/Z4f\nMuUr\r\n=s9HO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/density":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/touch-target":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.fa7520f62.0_1629844069776_0.9848145628624507","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/radio","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03bbb177d2210b4e18e11b9cb95b92a05010c2a6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":41,"integrity":"sha512-0kL+9rM1mQxMc85MIQbv6U3jD5PZLGDbJ87kUzw5XqGrjXs3UfBunci0Vbip7nrebu6SDyT104bVzZAJ3xqp3g==","signatures":[{"sig":"MEUCIQD55DrEpmPURVNQ9g76SB7R8kH62wwzBe0/hNTsBHeJewIgU9GcfjuAE6kvfasYfwOQI7WFE6kkzczjs/64nVe+Veg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdCCRA9TVsSAnZWagAAaIEP/2zULoBeQr7Oigz0exJW\nzDY/mhbAfFuGpWVXFvTakp+euQhmbu5eiUIjLDdCTpViBLm1tokDrK58cpqp\nvr8rdpVuN/Dhb7V7XdG0KGMTwPxP8kJmvDM6T0PEDHKOHnmBw9x1uX+7QMYL\nIOB5a05wwONnkTz3FCHNO+qW/wfhkhlwSGCqx9o2Pr2DfSWOL//VZWtd+zYO\ne0iUPZbzEu6jHCiEwr1ZE7kgRzG09E7kePa+fXAlLtXRtqo+NC9N32f7DDOF\nWMjbnT90eG/QE7OHq575vIu7cWEqWO/LbvbJI5DP+emUP6AWP0sSNuW8shad\nlu+vqjwLrZLHg9oKh6HWTUsLMDJMIg1TiKNBT7LTgpqZALa3tpjyP67wsGRB\nC3YUC6nw/kqsjRIbFuFMorJ4PGRJ7qA2mFuhKVxS2h/gK66LFd6jnHPpInrV\nechwGzqTOmjJNxNgv+ioil+7o5jE+ExUxifn/rVh9Js915VGzM2NB231QmMg\n5U1KPMwUVAySrDx4d+kpYWtUTpyOPpQ9RUZ7HLuTmKQzAV2DtavSvnqAU7Ub\nbwdzWdNmttdcjJqpZqClBupfZI/l5jtsIFOFY4QCv1N8HAAJMKeqAGOdjPNN\np5CGIXAJ486Dd5JFdb6vgq0kh8LE1V1lygkXfeIiwBDYzcddFuvnCrg7yVx3\njinM\r\n=ReTx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/density":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.ce25bc3ec.0_1629845314232_0.36578928216002016","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/radio","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a38114e364aad7b72b8fbf6aebd854387ea6d5d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.12f5622e1.0.tgz","fileCount":41,"integrity":"sha512-JXovpW0YPO+Wi4/4sODTylPo/g5etEjGSG1QDF5+7ij5kl0By4QuwKw5vxGqSnhydpSA3C0z2TW2HngPNc6YJw==","signatures":[{"sig":"MEUCIQDkhjk95Rwm/Tr2PB6eqhGhHKn9Pc+XJ3S8pj0XCCTFtAIgbI+t7oKLQF58UurY3diZtwCfXwrSNqpAu8FoUf+b+o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4tCRA9TVsSAnZWagAAuS4P+wf2XZszsj87SPZB9V5g\nltVK08UQ7ntH/hgbmA0+watt9lSy9T7v500r2bRqeGuhiKojP97tn30xv9Pj\na6TjhDu8zyvxDDMnypyJh4GPTseuVynWrT0MTQjyel9Ohx+VHScT0SSpkT7e\nRlUZG+R3qNDcDSjRuGnAO8zMy2h69YE6j9rrNVQtM0rdcG+vAbG2GOez6u/G\nDTIZ3H0IVSWVHerBxhwtdNutprQAK0W9uko4b20OrAPsw8uMlY5wEVnOnzOR\n017uBf8kbVCVO1HJdoZkz3nzz+0uVRwYicXTwzXp6wopuCeQjXxwUkYs9Sxv\nFDIB7qPTQCkBRxT70l2KVvIt+UoQm6Sj6ap7eqY4j2CeVbSVsV65tcqcZpKe\nMVuqHN0Vhm8zAU7b6WrQSqieeeBFu4HbxfwbeMndyHB9C+5J/W/wnZN0PI4Y\nKBbo2XWzvYTbfjUShuwBfsoW+deZLjDAsuczkU+XzBKD2zJ7gtvqvEIGjyml\nP9yVyRhk8cFPdq4rS5IDgDHHjb7TbTwJlcf0UAMl6BftrE4i7aPoemWJY05l\nrTWieG5MCE0ttSU4igaA69P7cIDO3BOJRK1oariYPX3IAWncI3ppC5JOcz4z\nR7DVFWO3KolLNo60bCXbwEGletGsiWBMd2ZITkZqg4THf/pYuJIQv51OkGeL\njiRD\r\n=hseV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/density":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/touch-target":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.12f5622e1.0_1629847085393_0.5892191247707568","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/radio","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58998bb7c467dbd39f520682f155fa341e67b8b3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d97f8f133.0.tgz","fileCount":41,"integrity":"sha512-GLapWnM3cg8LentPMyegCE3MGb+lYrUREd+5nMMxvkThTUICa1vHvUjNkpQODCVhMKxYtu9sUpzPJ97AYDYcNw==","signatures":[{"sig":"MEUCIQCN+/7oPtWfyaoGcXLwKVAEGuv8iTyECWx9OyWecMwmHQIgd55WqmtoDjwfrOcNKkG5zpAY7turPZ7XBiqpj7iPFSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozsCRA9TVsSAnZWagAAjHAP/2YP6RCrTsnzD/Z9g9tA\nQWoAyVYnNudGIIyJpzfBPzuIUFhGvELm+MFu0r/7wFHHM0l6eMwCDJVxubEY\nVDyYwNLABgrM1ZgZ6jB6PyjGesGUhs/T2cvyIySiLLrlngyYY5TiEhzwgJRc\nDALot7tQ5mpr+wVS3F5hEAXxufioItZx2404n4DCt9whtEl3KCsurdXFhN+V\nC+rhIGokg0ckRvfyUaMR97ahtWxxP4ttPXFaWYmy2gPIHjvNF+xNUI63Ylq1\nzGr7EI3XtPd+xtROZ1QPSV/cG/NgVDFl/VxjYGloHxguKlrxBcH1sWVhB6tC\neMwLIqNk2woKAYDmb/5Kf0FCp2CEV9Dpmgc6Ke4j74Mem1+iR7NpE2FTIytj\ni1mEN4YYSJLfa1Zl1CJ+gppYA+8Za/9DJ9FrW/1OFh8lvGe4PKi54K7xV4ei\nq/5iAEMlvLsLiOIWxH/pJwXfcqt3i17Ky6unmUOM0cmLWZl5ThN214QMwVWC\ntTzJkPYQWpI+j15CkSYW4EFaU7m1ZzJEwmHlA5SSTwvl3v/RshfCMk+B8qyE\nHsJ2CYkn/NaNpgtMSIJAQtC6HEpMRxDSkzCXRN8iJb6Jun4il4F+/hrF1fv2\nZbvMAabvljxKRzxn36e6lQgRGXvA4U/OZkGuYFLux/tdqXArcvVmdq/PX+kS\n8Mqg\r\n=+DYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/density":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/touch-target":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d97f8f133.0_1629916396775_0.25061009787639343","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/radio","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c78edf5f6569f64d903c15146fe750e9ad0d3bf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d86fb6fac.0.tgz","fileCount":41,"integrity":"sha512-cEbr1BBgPIbc24jU1C5fVkg1OuFFboZJipy/RtDpasCzT8vofEIj5wpXWCyHxhopLelMtlV5CqQMVvujA/yGpQ==","signatures":[{"sig":"MEUCIHyJXTn66k/koqFLkOM313AGFnRTWlDkOPVyiKC0H0/nAiEA4RR/Sh6ZQripBDuOr1U8Jwyb0s+4jZLgOLQvvEK3n9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpG4CRA9TVsSAnZWagAALe4P/35n7yHUGGaAz7BPKL+i\nqIrG4534kk12dFVb165cx+ZNtLgBLuykvxrJNmBarXUVYL+ITvKiZx9RFJU+\nPxc6fALbi/13TI5w43zGpCzsGRbF6O/duOx8Q4GsAIrtPq8UZCTyiZWl7Uiv\ndCWOKqn0UU/EADVECKixvGHciITxo4IYm2j+YPO41WL+dsP5y5D4UcqIVRiC\nGO0rZ9UA0k+TbYOQR7ThsZTsqpHGQmXag7LhP8jrCduoiHOBYOVPQM/xs/BV\nGPJ1gEOPgR7SzS2ubuJjUDv9JJLbe3RFqqDf5ehbgddxb7d8tWu/j+4tnrec\np/uaEAQr4Hjv+zqyp4mJLQRfx5TwW2fYNzYBFPmUAU7bMrNIkzK+Rl1v9h+N\nqVpNg3AsrFhpqzHBNwK1er0Dyg6ntPgeETHSoiUOKV+tgNH4R88Dfc10e5Ez\nx0D3eCbt5NTZjdae7tUrWN6fQu5dKNiYlMAaC3cfwMsMm4rPsL7XBmncjWng\n7ficHQ9PEXq4RFVJzPjZbri/wIuQOVsrvkpsRgx/DDNTsOrnsqSfmOmQ3hUq\nIq6SJ4p6saMJMvcupzFYZZuMVG5DpKTBrFBFK5l/xqIMsQn5qRAxg5a70his\nf8ncYwB/Pd4pNp9cvhu18MHpUO8kfR+99pZJY8vhIRhUvely3z31cd9HQE1X\nqlKq\r\n=p/Ki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/density":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d86fb6fac.0_1629917624243_0.6485846972012486","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/radio","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c589d423788f0cbb6dbd27520a51a115e79a5f8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e8554dbbf.0.tgz","fileCount":41,"integrity":"sha512-7+3grZAoiA4+qaTi9QP9I0+rwa+pTVODYxwMsiS6WXzyUPhDQL/Ngfm1vrrwOwuQdWX8bpOgx1vqkUh2XxydLw==","signatures":[{"sig":"MEUCIDYHkIKDT6qhPdULjvX17xOy2MlcpyggBg8iTAvmF1rgAiEArfPX8YWuUA5bVeP4sCrcb4wUP6O36WEldC2/JuviDDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1ACRA9TVsSAnZWagAAtq0P/2WvuGldjZ9z1/H/vxFd\nLEBJpB8HbKWIxcfBHzxUrFCsJD34xC7Pqthn3MGkS2nAsnZm9EpBkD03H69t\nlxRKpOwtMuqXV/LIJHMOqzrMCQiJ40lSsL4Pi0zuIAwrctv2ub1mSkNlGWba\nAD0JoWgY66tAazMH2xocX5syGSn0d+SwW+0KYUbcUwBLUDTxiZaU+cLTJUP/\nBvND6WgRi5ZQiZ2awEg+OpHTfYG0dxct26Vkh+U+nGmKh9VZtkNv6hTNo52t\nbICw0yoIKQTHrEUPOWrD+dyut+TURCov/Oq+lgdPq37TX8iOBMfgrGGOzwNg\neSPn3OKLc4LEc46eBDbrDFs/RLFGW6m3gp2qIap12aURPO9QJ352kEVK9BZ7\nNZPZ2BiXwJkYV1Lq80tcqxzWDNLB3JIvC1u9EIKUbZ/ezrKs5y84Y42uf12X\n820hrMnO/5hdQr8Uc+CyWsGAFMB8kL7wuK+i1Tx/yK51eDnTKWO+AAvf6+vO\nLM8w8aSU0blx8OQk5vUqzU4dUMjBnr67EKJT2dNzQwHu2PfZz57xXkWkANZT\nBCC4GDpq7Swf6SKSw5j4MACYYBFdKfsrvquaU6fAQXQPR2f/JvNW93v8GHIm\nj7ddm6p72EWUH8g48BjB91vVSophDb8OiJC8GR2Ryv43MNoND/RvN8jpNXNs\nQ4fZ\r\n=vofL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/density":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e8554dbbf.0_1629928768731_0.8463526254144282","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/radio","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1ed34c7ab840766cc32c77667be99f00732871b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.877e3fb0d.0.tgz","fileCount":41,"integrity":"sha512-BNIxWYbqEw8fWg0G8FmOh1n4HJgCc2PFSSrUNULC4bDRFGdRZvd5WOhadfmmyPdIurIf8m+M7AEDT7cYhSXSug==","signatures":[{"sig":"MEQCID0D7x9AlbMUfu6iBTJhB4paePDD/5gAc9/S0h+yARO5AiAJW4QKj5EnXKN5HzeZApRKoqbwdSmzqwq6xUmQcb9W2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VXCRA9TVsSAnZWagAA7zoP/1CY0PdBHgL0j7p/DxZq\n+mN7P6nUbHIOwPnD1RmisitMPBsoWYS2GwvfHv1jkBqNiLrl3vlYHwtcJymY\nLUY4n9KF15SuNZMK5NJ0Jg+4NpVig33fOKAZtVUTW1FkR1J1DuXVtvSZxZ8Q\nZ6qayeGM5gunV3KwxZasP1dNpwoOf5x8nFrVq/RrqLE3HTW9t/eoMeatuk9P\nXFSzmu7FrKkiJtjtNchn84fJZtmG9mUhk0oOzWBl5gSDMzw05ivxrrhTU/GF\noo/LTWxvP7q0UEgmMGVrEUadiEwTAv4PWXl07v9lOXrkbWZLoVYnEnmfgq8s\nguSkSphtB8HlpZGoU3lES3vH0M7s1kO6kukFN+in01gdqpv6KE945r2GX96g\na3lbNVoApC8mcJXlufouv527CtS1kOdtJBhiq90S9LqGLUmJ7fJXK0zJeldz\nOu51cG/QpvJw1pKmYDMcuCj5JaPmGOQQ80qovy1eHRbywa7NEBn3NQNroYa1\nzZRQRKqIF7SWavuGPv15G1/cTGw2qPLTDk38tK7/xNl2T8qDQSwyeyiJhhix\n2mHrAcUw9ZEpE/GO3cpa4MXlzG4nk1jcp2fSV2oIFuoekdyAZY30irN1WhCZ\nL6VE49EFq+WODO9PROygGpheeTyCIkWOPAbHWANtDaVh9ohWNZxlEH19POvY\n5vFk\r\n=Ut3f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/density":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.877e3fb0d.0_1629992279556_0.7526611571520179","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/radio","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a3f52028fa420ffe9866b38f88c3b6219180eb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.6236f3576.0.tgz","fileCount":41,"integrity":"sha512-mlOkLFJ+W6+ls0EAdMA7tlUDVq8oECQrV56hzR0sadcaUDk2XC/DWAEDM/bD7SIm/D7J7WPmmENG7+eeytzOfQ==","signatures":[{"sig":"MEUCIQDFe4alAcsHOWyyGk+46CwsFpN9Lgqm5xNkdQqifkL18gIgItlhIqDXqVKKXK9z7Te7qXg22cQ/8FiZJyZFezY0fuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vdCRA9TVsSAnZWagAACnsP/jWynA0DqKkGA+XGk++6\nGWe7uJmbOi3K5fGEFUPY1n7H9ZWd7p25HTUtw//O5R6T+kNAYnRce7GQVHl0\nHHSE7IgTYF2I+haiK9dBKyZwGM2/zyq4KwpQ6o2qFIaM3SyzGFB5sFnYkWU0\nfEmWhEC8qZohGifPiQvqrIDvP97vj+tfUiNpm9c822szrijxAhmbPAnG6gwu\niTe3Le/XVJ68iz9j+tRhhwG9ToWhp8Y8TImoVXeYEGhKTTjNIm45MOebJdcz\nuP7FkPQpu5fuMUnd6otpBNqy3W0cGLAqZFPyvLPAbxXA28WMTfz5bzo1C7Ct\nQNx9B0eRY6iWf4N1TMl7/Yj1QL+xo6Er9k9YyotnrbNvb16szMx0RLHfZtzU\nbK23PIluRP+5ThAL1bJJ3GYRYzhgns3XNh76AsdogfLR5ZS1pblYV8y9eGEW\ngU48woERbHS5VYZNO9ZPt7yxdfqKiOGNWW0zLlXpPbCqyWS77X22t1ug4vk+\nGXMgYCfefoa42ZB9H3mu8mHbqgE5jAOhsxkYCH4m4e//w1VHSGTcnztGG0p+\nhKLahzBmd9DyYrk2uV/5N4Qu4hy9GIf9OMLo40v1Yw7xQIjMVjzLwF2U/9sG\nwNN5oag4tHUd5KpX+Jn0rn5p+tpKDvmzHDJaLx9nItf2tqwqV5AQb4EJ1dSk\nlDBw\r\n=etO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/density":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/touch-target":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.6236f3576.0_1629993949505_0.5775205270981014","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/radio","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0bf4b99e0fe88f3f013e95d461c9bd5578a9876","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.1d19158a1.0.tgz","fileCount":41,"integrity":"sha512-1sVZ6Bpoen7QcskXX/HwQb+sZmYaPpke5Dwd4ZDGM0hyZayGxYuACZ9m6HhMhs+oIP2iVVtUlwf0hoWmIzPBLQ==","signatures":[{"sig":"MEYCIQC5XATn/WOU9Tk7FybdMBxRClrJhyXYLbxu0/d5uWtS5gIhAM4yl0ClAzoVb8C66xPiab4I/J+LfkWLJBFOtDDUs+B8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qpCRA9TVsSAnZWagAAXSoP/1Tx4Hrmv4IZFWyIXMUb\nZmUaiW+/uUkVjK6cfIcF5qGoARXfxdxg6TMFKyFnCuim694fN5HV8Ounq4jD\nJDcpUOOU3pwitifuLdc8ZoAMZeR0Mlwza7JLEH0n1q8sfY81G8SV8NAh1+hn\nro1eMehP7Uxo7CswOVzwK+pOcrsNvLQWDoMaRm0ahhQ/c4SoZryBygTLrDWA\n6i99WP8yxcIhsNT/csPP2yPpXLRTUMQiaZVwIaFALZPQ/p485wO+HlxEjFwr\nXPIKvOgs8PIb5zKtUQf1X7+jVtzqXcwMTBoj0429EtF6+ZQojNLFeGuI0kHG\nAvbB90nKvz5ZHlD0MY+brGg8KNkmGT6LwOuU6A4fpuvIA2vM+3SLp2fclFwp\njb3dZT9qRTbqvMiO0VIgAozW4QIyfrci7NXEwA7ZFD13bZCs1rnCjenYcpZc\nxJ3n5SS2FfrVK9l2y3I1BjP99wSUBLAO64yNzy9z48JcMjsx4d3tO/SRHF3a\n8bt9wJpI0TkPdMCpUCB5KlulLii3k6uGTfucNUzvhNJpTdpYg2oWgoFRIcL/\n+iAJZVMq1PM0lX2gX0dMXZC+qqNgoZejSgHPRgRWxsDSuUshyi/43u9hg2m8\nTENwl3c8lDhyTuKf+RAPebp7KdvvMPXfGU4jHp/6IeGljL1f2MsMCpzoW1p8\nJckc\r\n=r141\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/density":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/touch-target":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.1d19158a1.0_1629997736750_0.13647464130633402","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/radio","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e78697ee79ac73f8c09a4615ae18cddd38affa4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.6adc9e83f.0.tgz","fileCount":41,"integrity":"sha512-1MiM9izLS+xGtxhQuiGtwXvXS3dKqe9He6z/5SMAJ7ncacuF/d6zseNoEJnvCRuBEDIVAnNUQZ+LMuerJXcNmA==","signatures":[{"sig":"MEQCIElGBbPEoqeh+aCZaEIenn3JO0DNi2vlNRzFMW4tYAcVAiBxO/p7OuYj8ZJI3e30Uh3fVhhwk1AdWoQUq+eaHdNruQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9BCRA9TVsSAnZWagAAAxoP+gMiLOiItDLmVzJxoAgy\nXQkj334570EqW18KXN3y37XzoTX6qYCKR00GZyvelzrWlzlwHw8ii6OSz3en\nwU7AV+c+UvHVNlCbe36flUb2xo9TySiBKlRufMAeTKxnQVA263TgZ0jFX70b\nDHTWU6744REyPsYHASmHO+Hm3G10xOM2B34qKpaS0FzK6HYCItM2gUjE6p7a\nof+SG4Rc507wvZ+Ax0FnhEOa1ZeLqTTw00WirxZ1TBJ2AfYQfuJs9z/ICyP+\nOQBLdNzpNVBD1qbrv6Wif5bbeyKZBSggXpXQG0VbC2ziGOrIUG0P9qPwY0FY\nvvroktF2FOK2aHJX/y5s43zgts24hEq5+2/FMscwG23/I6Qs4jZmBnZFozm8\nw8BMSerYTB0KQkda2II1YMi/WMMrCpRnCZUwX6dX7pHcWdXRXj6E5NdX8Vh1\nC+EKL9RkdEzHISXHl+jC8yxuPykPX6bOhvTpzLKoL+r2ctVSbQpd6ucX08c0\noIDUEn98D4t8k/NckbRDcnJL0zAJkoJfY8T4L+ub42gMsud6PeJK4OL5bfJ2\nEYRHF4cLH1nlHbV9jcrGFGbCam92JNOkojq02cB8XVYUAVQmzqbE5iSQsTaN\nwiHddLO2wKfJVfAmVyEYurjbHH83VSIciCR916FMbD3xs4r/iHQaX70EOqeQ\nSYvk\r\n=xvp4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/density":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.6adc9e83f.0_1630363457589_0.6852292710901331","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/radio","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ad3c552c9282e1f2d31f44c7a4e3f75dfc13fb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d082790f0.0.tgz","fileCount":41,"integrity":"sha512-I91INszUVz7TVqKMSmmqenugOldnm1Oe8pvkf7dkCgmftoHJNA9eAgM0vXpz3z4FKeTh7jKjKRYbawA6CjmQ0A==","signatures":[{"sig":"MEQCIE84ApyB+wli3j4bdXArRal26sE+NFFRqzs+hnUD88H1AiAJ+4eDvfbXulzGDoJHQRcF9fWjUrtHthJ0fIfccffk4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aQCRA9TVsSAnZWagAA3PIQAJ3mTi2uk+eYiQukZ9u1\n62hdOAYwhzAK0tNXFs0fa1FZTKiOjfSapvrjwSdQ0DNaMCH1nIt9Lg3fxjI1\ns0HZO2Xs5DmmwfJygz2lYSg8KOlljoqG8AEA14/aRG80qmhcfKats9dryYAp\npDww7pfOUT/RDe34aGu3UMzNU+2aLVN6n99krra0iFIVgpDSnPMuct0Q/NBZ\nyGt0nnY3vOb52ztvXx/cf/iVvW2p4Eqy/TuzSGZ+UngWVW/Fh2hHPdzicz9x\n6RYC9TX67sUCrp1eRkznPE3ZB27M55Lc8ZGGpmYSu22H/oKho3n9o0pzdo3v\nVyd4xF567QSQZ2A97blgXA1416KsFu+nOIiijRIxjkIYlOaUjhphq0H/CgWy\nM1fuvxLNRv3ckILWapqpOhZzFWzqlCwGDqSsQQoOOPJfKIwfc7RI76lKF0rv\nfqSZSI/m5SlKpiwpNLV5e7omOmvJOsDJnXoajyKfHkp+ujGxeg6AoBdyAMne\nPV/35ibZ0eTy67bDdajm+qCngHT7HWarg7/v0+V5ylx8dVGyxL+U7ldDnAeg\ntWeoEyD32U+1+eo7oyswI7ikL11N9i4AHZzkdL+VnaJsIGLi+NUmoQHXfJKK\n3iE8Wav54WVt34Um28Poyjlfd+A/vXFjMCOEYS16YHMAVOHPPkGlzTew3MQQ\nik9e\r\n=HSKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/density":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/touch-target":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d082790f0.0_1630533263922_0.9218312027677547","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/radio","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85b587f7290606f052b466dfb912bbb29cf0912b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e2c4f0196.0.tgz","fileCount":41,"integrity":"sha512-jX5X1hzhRN/L7YL60bVbYqeDwbxkSnDKFeCPrU2xsN4t2ZPkm4G7E2YrSRPoai+k7FZ+y5uoQJSVV+LPYDnvJw==","signatures":[{"sig":"MEQCIDmWOda2PF6vdfviP9DSNaKjnVm+lSUOA9z3WoStpJVHAiAgY4Im2xxdnethcB64qONmtNhwHv871BFYT4wMAQZRLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLKCRA9TVsSAnZWagAAq2oP/2sYSDX4nx2F2ww/kUye\n+CAYHLHN/W2Almv7Z33QiwSjWa/hd23EJx/E9D92fyiLnadFuGtTbrST1rsb\nADZvP9miGdZvzQ04SvoR/FCWeuD/+XN/3hXXbK4MOCAdE+UumZk0NQMRANxU\nqa6LOoa2hipWFj7pdO18fXUtNuR9CHeoAcc5zUfNn9wPrepq1l/O90g3VIL9\nSDkpn0Jx9uJ23r5ol96mxDZ2xq+GNMME3cSN9bnBGiAihsQvVZncKJKWFuNv\nhqNrVm+t21w49nQNU23QHBSdnu2i4qOYDo0v5hwiwudfDw3LXRll4zTVR5Is\noHtg/tw4rsVP3qViSOc+h1ItSRz3JpTecwTcRhmDRlVVJMPc9cNwp0RYrdkn\nT4a9k/qhx1rn/VADdJwqnY1OH/+G3YnM2QfL1QdmFAEn4aawrLzZOg9tvYgY\n8amtnwbj9X4+GwXEdxTOFpqB8/lpnrTUiCC1Bf9Ilmg4/zyfdOC3YU3ojL3a\nrVX0Wj5oIHpWLmR71gS/7dXYGmlHvDoW9LpQsOtU90gnioSe1kLmapYV+Qmj\nluomOHSVV/AZz8qNfgKwFN2kGXb+gqbysHKeuQlPA1NryvYBYajN3iW+3GjY\nhdA1JEKr4v/qmfySHp3Hq+qaiDL5vgn/9uCurVp8BEfTE2B9OmO1JprYYEtQ\n5e5b\r\n=YSoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/density":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e2c4f0196.0_1630548682129_0.6561003887814241","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/radio","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61cb51a1dfbf161c0116a6c80df8c7f7accaaae3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.611db508e.0.tgz","fileCount":41,"integrity":"sha512-HUqTh7Ww3a45gb2Y7W0O8xqeZDFf1tOVYmcssufX+3EttWwkKJ+P+qExtaCo9r+CVTLdRcuvWBagf2L7nNqBPA==","signatures":[{"sig":"MEYCIQD2tRx3+pbLCyLU8CbOo1n2lkzN68KLCZ8e0ea9Xc2wvQIhAKpuZ/w6hIfVQkZPaDKYIA+qk6I8jo7TBhcTtTCtVdK7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGyCRA9TVsSAnZWagAAnwwP/1GVL6qCWS0m4UCKcyK/\n6vXqQXVFsAwrw04Eobmhw64rtCCxNlPvW+S6T7v/+sRw0epGpcKtyXfwpbLY\nc2DSuMN9/J6QjsD1ligCtZPVKW9cDMFKbKwxS4Lje14uvWQZSm1F8UZ54gy3\nN6RNskowy/rZ2VWS4tEod2VpQXQULk/2rI067N2D97l0Pxg7CQqgLJ9JnKAe\n1pIxzTBmnfY45p1GqXQO/ujreimx/4Qac3D3kZaDPvB2pvbGm4gINCiiAReU\nzcW8wiLjtgVXYbw0YHdCKfY104vX64vpQozWP4i27777uypzTtfc3m77v/ek\nCbuLNeQc9ATXt7+idzJJxl6OVXOjjk6lLAhM0d/eXDF9vz3T9f/FxsFz1IES\nTOBhc5QXcRraazaDw3jlwh7zF9WVioZdLOhfyylWqTGh0DG4NSR56mM253W0\nrMIuN2o+u7llgPkHesCsW0dAnAL9CUTlUmxyEWecQ8+lEuFoziorDntxqHqH\nI/IBDEaqf0Et8oebzs7YZADEflqszrTeri3ynQ4lbgzy5i6N3KanplyKQt8W\n8mDXf+0r20OnMMpsrmN/OUjqfVSVt/zluuGs2EOqcYkTILGb1PZmrRY52P4D\nlitkpTYawVIfEdqub3r7aN5ITho29elX+mkaEA9fIQAErjcjQrXJnT0ABDwc\nbQ+6\r\n=vgze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/density":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/touch-target":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.611db508e.0_1630552498420_0.27402703117506033","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/radio","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfbfd6694ab5017ed96c547c7c700c099997f1d1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d4706933f.0.tgz","fileCount":41,"integrity":"sha512-gPaiYqsZITVr73Kr8bdSqpqf5Vtp9bO9j36BUoghgLTanB6l01u/jDEXGBKPkoFibg9ddIajBr32QX+jr8Jl2w==","signatures":[{"sig":"MEQCIHACs3GvV5UzKMeisDWrxXDoRrq88XXnlpCk5fNTQV4eAiA3r4LMzhyLKJuEaHwmewl1Hk98YwTUwHRwW22ZNiZtFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/MCRA9TVsSAnZWagAAXnoP/jHv21pV/Vb+IKYlEyJ4\nPvmHD5jANYjuJkSVNZrbuXOLMerTPgn+Ey6zTOwLJkT6sCHxX4hksbZj9fod\nWTAVso4DvgkCtrfky78GtUXndfcjWzMfjUP52KH23viyYUAi7xh/2IN4KFj7\nh9POFY5cooZUv3rCyvtB18iYPOgTNHzcs9URdOVHXmEJ057r8DVIbSSO2ej4\nMyUWsUEhwSzsM2lSkVmGo/KS8RaVnjDg5ZMvvLeKluw4XdeW5XOiExug3VdE\nZnBIyB+BnP9OCS/EjyzfnjMrtrPCg1MMZgcX0RkrR9IdyLLsqpzHPqhHROpL\n0gJyt2jck3Y+XcludwXDeOQHsegzr3ofOpfuP7f32OTs1iZtUsAx0GLNP5pl\nz0PCXAeDJriSyU9dGbB4UfSzLhyVvBGV6mFfDtk6EJWM3Q6LvJEy1EcGjD3z\n79moAC51JI7wtHmq0/pUt6FeNulTrNci4fnFiWe8nbxsuhhtVbdmZH0THQ9X\n+ligr76VkLFElUKnkH1sQvdK0VFCZ+rp5vUgYhAZ2CTdNHt3+UkDVdKAB0LI\nZuj6JcUebWRyqW+yzNAjWsmC38ttsi2gOl3flWH9ut96YRs0wOaZv/tX9ZWF\nUYrwCwR03g9UoAAXDckJ7N1NjnkozecPh/UOR+O0ElBAm+uelcMZOK7bDlth\nC7kj\r\n=hBEB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/density":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/touch-target":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d4706933f.0_1630597068079_0.7432646119383004","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/radio","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9886317ba1fb236debc4ae5ed72dc32366e3680","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.c16fe03ce.0.tgz","fileCount":41,"integrity":"sha512-y9bF1N9usH0/CFMjQQZfCYPkaaGr7hGmsj60y21n1Sf+PFzxe314W0X5PBnzJmvIJl82S56Fppv/2Gul/6FIzQ==","signatures":[{"sig":"MEUCIG9nKWCL5nwuZD31yQ1yPuJT+qZBsVa3sOoUvorWZvE3AiEAlP22Z5ho8VPrenHAu5s8+HnmF0NXmpR6aehc1KB9HGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2SCRA9TVsSAnZWagAAigsP/AiVfhY5LSEh8e+iqII6\nQyRpO2mB9mUwQykGpMNPl04tsIkMZ2C6TMwPQaB1/0Qw990y+7OCVe+CTJeG\nLSb8sMQz4UJ6rBRRSWXToLpp2QNtWUe8wrZKbRgOHMl2mRk24THZyRZLY7yV\nnwJgrj++lD746ZDW1rupdfEe/u5QEZ2ptcym2UT5GCuxz59vNu9culgBZVW5\nH7z7/7ZFf4V64Tp7wRHPuLlLfgj8Qn7mANiNtLpW9Hhd56q9xlU1c4Pp2ZAT\ndGiFbJoQUOywPuB5/bFpVElh9pst5XrIp0JLVAi0P1vVBUd48z/lLuq+pkNk\nOIIxYkVbD/SwPNA8duXLwq07W3Ua/7SHSdPMB0Dh0iulmaE0R9YFH0NcVaKV\nJWG7WvH+AMVFpdMlrTzuQUbwd2Yw92i92H2Z1fHvWgSzHI2UH1xndWFvwouA\nylf0IVR+RLerGESf5WUyoWNpf7BogyorUT3jfQrlNLvbkASxBt/n06gwIbhS\nbLwMdYh0YDUGRhc9GU8dboZD4CdWMmFgKr2WQ5zVXVbwEqkk+sxEaJIMLcla\nDXEC22cztZUTi/C9tpraAdKYJJkHGn/o/8Awixo7Gl6Phya9CaKBZN2Zlcyf\nfeOBUDp2XmXCVlO9j+c2bUdfNEc4PuDnddFnMR4j22biNCEZmnyirAfex2fL\naCbP\r\n=KYnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/density":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.c16fe03ce.0_1630604690544_0.5079157769599714","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/radio","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91d1f4a9028e2604f368606d9dd4dc4a68bb9d5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.9203a958a.0.tgz","fileCount":41,"integrity":"sha512-WOu1QS3kU/9a/QtkJgtp83X3+S/cguwnSVaF27bDxlxxlFJ01uNE+AebDWzesy4DC1Yeaj2W8wvreIjsZVMnPA==","signatures":[{"sig":"MEQCIFCHGNVB4uQ+/iNtsGwOrLZPPikd/KFm1twYkAzenu/WAiAwHGRuwgYHepH5UCOvtDBvCK7GKKE801+SDw3yB5oylg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKDCRA9TVsSAnZWagAAROoQAKJwcEiwmvQaFJ8KAhsR\nBk2kURTVCtVP8NlPC/RpKhoWIMme5thTgO5QVZV3T9s85vSESV4XYGV1Q6NE\nb1SlPh6E+K0Ia1YFOaD4F1aAqc92X6Jh+9uckq00JWmelH2ICcta0UjI24Kw\nT6GM6fDQ8YPtqgWl/PmlEoEbm6J8VvRoHCrQuBHkNdoVW1wmMnBz38I+3NZU\nDpAjig3hBonN+K/UfMhQBQCMMJtoyX5YZrFDqGEcx0NKbS+TcMt1MvywPGxk\nHx+aE6fXjZ2HMTGrJJvJcnGew6xHdIT+5qJQgTid6KShGjKrvrtuYmEYMAoM\n+NvGk070yRTMr4IUBgs8ENX3lSEaieUzK1tsE+0/R6AhHaUM4hXi/iHvQyYT\nUMMaa6VBGNmCgHFqXhwXIar0h3kZwJl/caEjjDczmHc/5FxnWpvTurMr/OJ/\nrOcAgy68fxTY+mz/xeFPBw+sG5LaXDpfSXYHDGNoxWBKTVSAR1cZXIBhmo3s\n3v1HOCGxxD7vjTXpC3eiol+XfA7i5fz5Ds0/rLyZTf3ONYjek1ySN66G8BnZ\nfpKh4uMaRONMOz12IEvm7MYZHQGLlhps87itbk3R14on7A/OkR0vK288aMqQ\n2eX/QEB9Af+VsHw0p+MPw2MnQWU+vKbrnDDdcDUC99ayPiKcGo+w5/uUHz99\npp2Y\r\n=IVur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/density":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/touch-target":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.9203a958a.0_1630626435296_0.8453859324789292","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/radio","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95a43ad457d856a3efb5cf86f25a0cd7ce2c94f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.fddd5ae93.0.tgz","fileCount":41,"integrity":"sha512-j9K27Yoz7s6TmVngaccxx5/Nm2Dq/C0aLU0R257C/AXpFOdWKhzT+TxkhzsENS5o90/1GEq8q5RY2u+LJg4LdQ==","signatures":[{"sig":"MEYCIQCfzQwaBN4BdgembXhi9/zDr9/6XY6XJYINc0DnNKrAlgIhANNyqHT5fntskHhgc9YDAUVyVS+AIV0D+jwW6mxSqYfS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8uCRA9TVsSAnZWagAAjdQP/2/TMufmVYoYy+YI9abj\nuoUcaIYa/LgmoVIhHAqw6gtWPhdwvPbeK+R/z+u6wRkEtLMD4cDE8BTl9tVX\nu1y12C3NJ/u2ocZBs87h/WnaPWYL6GNCYCcq0LK5OeUoxzMvlPQoY19zuowy\nOcVHYkdR+y4e2K/uhw1SUNI+2z2B870ZYMCcYkw0xc30wEDWH8tdZCiriKFs\nxwJ7pNAUdsB+/4EUldAVM0MjJ+n5LWb7kds5AOH43iJjZXmvP0Zp5hi0SnQW\n9ylQ7tunFdI0pTXkbIr2QhHynS1V1vceP/Qn0T0M0LMiQLg2JMZXP/ZUcPUR\nWZvDqTVzkyAFd8PL/RNinf4J2faPdQ67MyE6McHwL/H0IS2osLoVMNdDssK8\nv4p5uZEtijEFpaqJeXg0UHSq3oPoj/pxrJ9iMGPVZwHCoSgY9z4FTcsjtm0a\nGxkQtxwIFkdk7j9khxgFRex9xnTy7DC+y2usKTzmdIWmc3VKwbaDRPIBnVP4\n08QW9Y98tT6X7AECQys37l8Qjnul6qg2TXTY0uRwnAUZ5MZIBXlOKguiP7EX\nES7Jaa8ZJAmBg1VApf0U29vBrQC6MJBQHKtH/epimhYn2wBuADcm2xgKJXFd\nR5uAAJu04F72o3i0Vlq4Fb9zXaTUuC429CketyklFeh3lE59HDJe/vewPqet\np0TX\r\n=gpEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/density":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.fddd5ae93.0_1630654254311_0.1257692505284096","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/radio","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4400b2eef22092ac7bb56db4701fcfced71aee6a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.117599a8b.0.tgz","fileCount":41,"integrity":"sha512-W+jE1LI4lYxbFIab+ZSQXXbsFVQ6i2vet2si2f1oWlzlgUqx+gB1fbP7h/dtxT0SxZUTt4U5HZlGBJ96Smi0eA==","signatures":[{"sig":"MEQCIFFGUohV14chwruEiJKF2zNugU25TzbalgebQdrGTn9cAiACspWziYrpixCAjRDrwYQOkHHueJtyq1NrsWkUD5SWtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+PCRA9TVsSAnZWagAA2u0P/17fSNTbYq6039Y3HTl5\n5ZOc/zR0uaE0gnj7frPPL0VBm/4C9V8gGTCddJK7v1o8mZ7SQuO5FF5iYUUt\nneQG93XerLkJHPUzio3wxk5fWSUL+6mD6oJ4hvW6STqpkbJFWQalgfr7fgcI\ndFcUM9DAzvzCmv7fWPxSCd7c2cfU/SIJlfRt1qimf0DPJtGgrW/c+zQIOLaj\ngrKR7Rz7eQKi1W3DWHzFvl5quT32mRSOQeJ3Uc2jbc62sUOKwWiKNVZU+t43\n50k24WU8mXXxRU5oePNekLLJrw+GQsadga0GSoet61L+qoR54aul8GNnf+Cp\nB4YaAcjpTrBAVkdGstPl1moEeX7MegGxjEuOj5cEixb6468rprJtV4Whzh+t\ncf1u5eZcdKwt5t0bClm4LFjgIKCH8Deu9GUhM3NyMcrT0ARdyN7JeXC9SyFn\ngnxHj0ybdFVjNpibGVAmt2nk4xYTuMn/BsJj52bArYvgWrbzpCOEkFPMXM22\nX7Ib8yGYmglJAB3DTF1yRMX/afo/6uMoaXuOjRHQAXwO8Q/L2thUddSVctWz\nU7n600yvbIAx0itrfq2DKOGmqfimnV3EheQOy1TgiXhK3NZfitJs+k0l5VIg\ncuGqXfOZy745fWhX3OApiRIaPIovCuDb5rOexDBmH1PNvFzZ489GU3xzwuka\n41Mv\r\n=v5xV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/density":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/touch-target":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.117599a8b.0_1630654351083_0.27138154673103476","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/radio","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659d6daf17840553f3f5e1b9bf0057e44f03c4ac","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e4180d07b.0.tgz","fileCount":41,"integrity":"sha512-F1kWIhnkfL7SWzjeP0Wy/J0PcsMkkntPqBghQBioVjTLQwLtzl1kfiUfD8RDaagli4xgVSelcTIEZSczOT8f6w==","signatures":[{"sig":"MEUCIQCeUI7mjgCLsnZm25ODUPTqiytwcbOMUxUUJB3x3BXl0QIgNUOmY6c092p62ttzU9FjGm7vkQHjKsuCRIDe8ONCzT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+qCRA9TVsSAnZWagAA6G8P/RnlrR71xO0HaLoczLt6\nrdXsevWHfYEwhIFDFcKUSGQ6lrkiDN/l7u20BvavelYcLf7olVLvw0Ay0RVE\nOGde5kuso0Y2zVLqZzC/s0Ex/q8MdDXV/AlyGiCYvJ/vLvKae7RcfSO91bBL\nhiitXiGtY5lLfzf0mvbm1/qHLvnOuTu6lw/nErRZeRF1X/EGWaX8hsdepbtd\nQd8cpFy2PcYP9eBr3aipW08KA/sKYufSvF5sMeC9ZscapkFu3Dpyw69XJjsd\n4IaKCjz2fbJl2wOyRZju6enk80ZJV2TDRHRTx+2odex5KAg3hDvn4Ex1SBzR\n+Gv6daKsoUfVKcCTHIVT1GTcnbxlayK1ntPZcsW4HuUg46la964rRnVJwW/6\nr7UoUx9dnwmuvYds3D3lG+ttYnPCVGoo8jioKgcgr8upKZhYBXC1jrz1Fua2\nDkmpMi+wYkdwSYHJBm7bkio/yivyMGBrdr6Tbm7AKOIi1OIKv2+wbv7RyNic\nh5BtDKitl6as1zU8Y4RSkngfEzrx2a9af5W4+AU7HRbENYvE7OZqJFT/pQ70\niLWe2/MA4Fme28QDasJJAx1tZV1EnERsV5gVRcijWr+/sqJQdiwl7M02T/JL\nFJtVjITLl03k9A8SO2lOORxVv48qE+os060FohI0M0mc2CuMwBfjx2AaEDjU\n5Y4w\r\n=oIJW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/density":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/touch-target":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e4180d07b.0_1630654378458_0.10553530690947377","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/radio","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0815b4cfd050ad081d71b3b50e043cb32d36402d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.42d175efc.0.tgz","fileCount":41,"integrity":"sha512-Pu57H4hrzZbQnpTjqbULsLvGv4Mklql0qxjQoIu0hABY7gdxtepi6AyIz8Bv/oT67vO/4hwM/OT4e5s7Tzii+A==","signatures":[{"sig":"MEUCICG5KCPd3oeCTF53PE32jZZqwkg3is+r3BLuKX6A3yV6AiEA5XfnFnkv5yCY00PFxEwYpHFZL8ek2KrexkW5+A4Ry5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKxCRA9TVsSAnZWagAAyasQAJOocorhY21PPjJenpK1\nLEHHw4k5tc6P19V+nZ/iD0Vraj4tcgjyFNfzofM9R3KXWE+ZGHuDI/9Ug6If\n8b83JZdUXpICw/Gl1NtlAmAo+YszFNCe/6ndRAK646jqeZ5dac6SkQd8LM91\nsJhf1KXAnp/ewhMn7pZsojJm2lSP/LUtszS1EMa6HyALB786cIROnhCtF0yp\n7VFNFbnDuIyJ5JwZoOpIIWE+8WWbtnLN15B9SGz4GnDCoF7Dt7lYGIapwGeE\nUZgy7BFeo9jcRyP+Lmnzh51XAuVcwXpY878lw6XAetGeBHouFU2Hf9y3KAxi\nde03XRivNy25oErxSAlrKr35l9VS3nHbcSSoSREyCxhKvBu6cTY5EMkwS8CV\nXP+tnUrcwplsi5TxUqYUVgSMeWgMhyJ+7o0MoVnTvNUhJ7e7mBdvIcH4WsZ5\np6VIDvOCwWFSlUCqkJ1jblfTPIFmXzRfzbnwDUJU6MFgiUFQOdcM51EN+Dvr\nQ1XAq9tTnFDyUwoJASEcl32f7Nlghu9H0fAKp84Cyb8DF72Aln5PMiYk0fNR\nx8lKJj/RsQQ8uSkCWD0FlhaUL6WDQsLvZs6ws1u56Jsa7MC0dSpNFt04xOfs\nvwga02ffbuuj+OiH4sz6YhImkOsK/pJjo6lKLPzzM+DVywbtg3lcz5NdpSLM\ncQNJ\r\n=vivi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/density":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/touch-target":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.42d175efc.0_1630683825342_0.502918532783639","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/radio","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afbc95018f93da84158d2cb9e56c0329e1dc90e1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.72464476c.0.tgz","fileCount":41,"integrity":"sha512-o5T0NIPWpg0BE53CHZkrSZGwk/FU+ey7Owus/MT/+qBLR7/zoyD9rjvxd4hQP3vODd64SyEpbiFQaZH8822j7Q==","signatures":[{"sig":"MEYCIQC5RlE2zbs+KImA/ZkoUk0Tp2V2xnWamhZFa9lfcqVyKQIhANH87hPNrKhoNeio0bSq4GUKs+2mtijCZOGKiZpA/njR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4apCRA9TVsSAnZWagAA3msP/iI61gbzK3CFzvtilc7P\nv6MpwAK4TUGF12lhCiBIB0jlV6K9rVrFBLLgagc0epFoiHT0VvWofV+1Rc6H\nRp8S/nI/U0/AsanzShGR4+9D1+b8tMjOYxNAa9U2Z7pSyyO/mvxJC3Fg2HFr\nSqTnAH/81Lzd9HNoTiQVVvh+9VJqjN+DOOBdicR36uIe0w4ohRQXK867m7z8\nsA9ZCIuv1fSRGujWAB2eboyiuLyc652d2FgtEj/p/pV6NCXvHZbm+iu33Pec\nsB9wSLxnEf/wcQYjkTp3UzXEkTv38IAJGWfhRO39YMGFPBpVI/MZ9wEO/6pj\n7Dj9VkgJ8N3MAmvs6dUtvg5SCPotH5wyL8i4pqHNTvTM5P1hMfPU6dAJbANZ\nvB+3FJftcEjIsZe7bD+zYyBDTNzzppVCrTC6QqlvOQ0SOsmFwoAhmslQKqSS\n5apVWCVfRp5mm+NKyEb6OnB93YWUD5LlhDbp9M1MFiNbX3Zkoq/L80U8d4Xt\nTnr9L4gHXymIZEb267M5sPRqkQYgdWGOjUj1VZ+sxRaKW+p09TBY1MKzHMhX\n8+KYfuDDECxLB64+qhD0Eie03M7/vVSebF2wN3BWLOyfQF4idi+h3Wseh13g\nGxaj1TZgMZMXfxEX8aaRnGR4bSFPd5iOeZ2ohJvKABcQe2MpVxEJ4/N7jtSs\nTAKw\r\n=dSXf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/density":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/touch-target":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.72464476c.0_1631028905019_0.12939344534388852","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/radio","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef435e07eda86cf6f6ca76bbfeae766b60a6a0a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.37d4db866.0.tgz","fileCount":41,"integrity":"sha512-khFYA04t3f44j1qJSKPdSGiV0Prwb4tqXanhSgF7sbjNGlKF3+1bRlyxW2oCyIZ2PS5RFtBJOT0tapZ0q3tISQ==","signatures":[{"sig":"MEUCIQChElPuLKLe1YHRSaM4DK9Rs5eWWCTvoS0zBG/c2U7+gQIgbVjDRp20tN6bjjzgY5PhBQQ75gkGxVNHZkA00C4e45E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtvCRA9TVsSAnZWagAA9iwP/0pzYrL3zaDNAFeQ9hXK\n4vpJIR1YZOrFUsqzEg33pOrWN2Hx4f4hQmrKyxJgsV16o/sZwEZngT4Kd47t\nPfok/UM6K1vpVqn70WW2nzF6HusWE9H5fEdM12S4rIi41IJf8vedZ6sbnT7U\n8b3eG28Jh5JsGeYKBSvGoLvbHm7Ia7Br67cCZJaWFzAlLNgJ1emVzvlRSBHy\nw4DIu1JVkd9/MyV5OzjroqLoPBh++SO6JkOBlVwsHISwVrhG6ARILOd6uP+O\n4cZ1iVnLQEpuTx1FQoMCKGimE5hnZFKbE0zaFyPvfJ5qX+HELsV+JEzlaA+S\nff2x4yoo68YYo4/fO8LWoeStT/WeM1BH+WKl7AbdaV0cSVw5DLpRijn1KlBH\nXOoWiZWHIbjLHlkkigt699TLu89cAcmZD7h7U5S4qcPcMroGbdGo1iiQaQIY\n8SKYlJ8+rZEyApvtDL7MKfBD6/C6kuuJ3eGDdyLo2UFCsJamjaHiQDOWjKgG\nsJlp92ErCAJ++fxs6iMyy5tNNJ6qvYMqj3upFZn6UhyJYEJ/KXCmFeEAitdy\nILPG+VJmnSnh6Jz7utg9Qn3IRiJFqV64ta1I3/AEQyDZXV9oJ2bJ04u/cDH/\nj+eT5eeNjzSzfXreIJqg7bo8FW1iGIc9p+iTtbibsYkaZRu8s+dyPociySXk\n0q/1\r\n=XHdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/density":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/touch-target":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.37d4db866.0_1631198062970_0.11273183051871527","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/radio","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65b94d94ad4a6ef1c498a734214f1d33c59109e7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.6df682e74.0.tgz","fileCount":41,"integrity":"sha512-XJN4IVYu6tz1zCgF/KbQkGWCbapyHo9xzizqFV8iKPekei4YIRl5asrVF7jWR+YYtw39PnDfsDtwTd0FcBgtHg==","signatures":[{"sig":"MEUCIQC+iBBd6QRI52ICzg7foIG0/e+t7+hLV0kRy5oCNQBf6QIgEe7bcKJP724DiaG1+W6mEb5XcmNSb3QcyrwYRCLgz3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivECRA9TVsSAnZWagAAStIP/ieThxpIo5TYy+Z3VmbQ\nDh2AFIzng6kBslwyemeabmpmaq7Se+k16vdyFE52Sq339pUtRH5oI6xPYGKD\nczPBX9xJXmx6BzQLqPBCc1rF+7WXxkL/0DPBxrEh2MBuEh0BEPL/o9OcRtS8\nywqGysA+szd7BQJEwZ1DWereOgx7UkIW0Y4XsdCvre0i3UMX3dDeUsq9N44D\nqWP/EqSCrNl/zh5SdSLOfaF4dspJhYOXqFQ47eTpK6wXCkTkwDd8CfeWKwKu\nCKCRkNnvonxy/7qNw5t8aRIBlVUbf3VVQCtol54It2fa2i8H0PXcQCdYZpeH\nYGLegrO/aEOleDVD/m2pDO0sAg+Cofm6sTzAkvL8bNWe9oqfVefCUjAPMI5q\nYgCtPYTYvrm+8q5kDU+rLZGZ7m+oNqcZt38snF2ED5KFNjmG3ECrdj9xYAON\nqhExVJVTxMZeeUxhhD/3VvFX/V1jqCgUYMvbYi+nrqZgtgAMtD3TaCLv3Rpi\nc1T9RLKawyVqUi1exXhSchPfJilu5snmZlFuct9oI5C/PHNLyqGMI8cvqgij\nksvfLOBrbEEJgypzrd0SJJAMMVOkzyh8NNySFmgU2y4Q7QPBZCCokgbyEC7R\n8BCugH/8U7bwNDbv7kbesP91CujIbUJuuJg9qTxpsdAlbFe+Itn3vtDX79p3\ncIab\r\n=+VZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/density":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/touch-target":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.6df682e74.0_1631202244213_0.8901619613863876","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/radio","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99705d92f19309bd29a4c2c5adf2f9d2d29adcec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.b49359c35.0.tgz","fileCount":41,"integrity":"sha512-N3F3uBpHc2Y6e9HzPBNTqEkLTKUOAD+eeWxSfZ8zcpQ6nPAo9T7qCYDIVKTCf+YXTNkqij0iqfm8pvoVulM0XA==","signatures":[{"sig":"MEQCIB5VJFoS9jH4HHC2CSqbtMoHYy83jUtnNjkHEUgeoC7PAiBXmyWMn3F7GGJBFR/rFZKXZp/8MXZaUn+A2SFxUJL1pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYWCRA9TVsSAnZWagAA1wgP/Rkezf7WpZxayo3SUflg\nV1Niqt0Pc2mJV2MHusc7Xqc41vdxOJHw3DGD2X8O6fSaPestXpz+5O8SP5jQ\nOkBBSVz+kp2hXL1tHdIAhPt3oj5t0jL8zolRTzOwkzFt3QODjj1+QPt4yToT\nKlKCiHVU2KXI/KBiksC+BhX1iT3uHTtY532JlHWmf7gsPt0PuCEz6oQppNVz\n+6HxucGVfghL++RpVNWx9CP+vqD04/F8dCUYwcEzKfYIemHA1GnUwLJHcbm0\nX6bLhhifCOx2y9EI8d94NTzfCWuO07vhNgrOCnZXJY0FiPibyWscTQZ1Vqe4\nDQ9OUtcuMB06geCDQN8gV1dhStmW5NHktKlta6aY62zMAM/Vp4mTHSIo+R9P\nezhaRmd462iPLoId2wUACbztQsnUJeF+zeXmn/lSGYiKDbuWwFcoludN3OQX\nkFFhb0GIhVOGsUHB7PhK+74m/IA6fpc6ILJaLxQTksyZSYT7JY6nWCv+XbYo\n4fyByscmgUaJ7QclkdMyQSoMy2EMdXFvaxSWE0+PLAzMAw1uc6ltfipmCPHz\nQseIJGwJXpbP1r42esyoFcXiQaZEPXySkpP2CDoBSNoh6uF80fOq4mPVFWuN\nWmKO02ymOLcWY+2JxzkC63CRi+rmE/PeUacOiWQq+9iE/nom84FZamyJCg8D\n1kFX\r\n=V8SZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/density":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/touch-target":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.b49359c35.0_1631208982042_0.7970207430908565","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/radio","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aed77d6562bb4bc9fd095e87364b9108f6d9550","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.470bd34e8.0.tgz","fileCount":41,"integrity":"sha512-B4+b/5/Ea27TQ5O5kOaocTM2VCbglJX1KdD+dbmv6OijhhzLL3O33eLQFmogV8/brbV8VLshzF1aBC/5n3Jrxw==","signatures":[{"sig":"MEUCICgTsSOvADo0wK/URI6wgGu+nJnVjEv30JZVczwVjrCeAiEAm/UBDt/OC9UVndaNs4U29KmMfPFyADcUb0ZsERI3qWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwiCRA9TVsSAnZWagAASJUQAJDl4ibSiFcktikYfx1S\nZrSBjx654ct/O3dTOb+BhLZFVzWAECXVyKIA6/UpGSPRV1pzxlULxQiySz5T\n332XqHB2tZO3lpR78e6/qqUB4a/M6LuKTlpxGU0QOPVdoz6cN9FdXgLBOMQA\nTFq2OhMGJnOQgnO3UFfXzt/mpwsgdsfA5aCWdFMl3OLwbFlhAyai1XpTkGd9\ncJJ5VDiJ7uP9HcChU7ZFW3si332ow92RZRakB0uieCluXPCGfnxysGMF2yMz\ns155QvhHEp2gtbSrd6CqFdtZ9/sPbrmfRmE56orAHOG7fGF+okNRMaNzT6sk\nUP6nkhjZluz5JoCwDN1MDn1ZCZ/YdBlTj0UxO9958zfs0XsH7MnOTHldm1F+\nblBsAlgb2e/LrjeIXPUEimKDrJ/l9GdQW2KW0c2mEuE3RASDUOz0qeMr9k9F\n3soThu3UKYVK0+ACe3qpdpGi6nlY+qmpdedHe2BSMpLYtwEqv9vg9NqD7hkR\nkyh+VjkBE72btHpWYbxRUlE2p9FlofkoNslszAQAsN7htn49tNN/PTo8WN1C\nX+JrXrfo39IWlDw0pXroUD/HcvzLHK1WEZCCEdKxOOT4OmCGuYcPXbMbpzoA\n89hMdJSPSUF9qj4XQr4ILZw9melNKi2T8bR2BBkv32TxWc4plt+eHOLsZtDW\nLRdj\r\n=bgXq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/density":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/touch-target":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.470bd34e8.0_1631210529779_0.1859523677999142","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/radio","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2575cbce940e546a23c7d383aee8fb19d44f673","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d48a01771.0.tgz","fileCount":41,"integrity":"sha512-yVAM5H/lxp9Vhi8nrEpxiClZpN8266rWwC6LgzkaNE66YGX87J4XV7mFxgjm5gMhwyTQXRAYbJPiLJbV2PKMJw==","signatures":[{"sig":"MEUCICuk8dM/AUksikzg5uW8xVFYzY4UWhHBb36GJN4StWz5AiEAv33s3INVk2aQd6NZY3Prk2sdkb7mMt09y6RKyvreV+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5BCRA9TVsSAnZWagAAusAQAI+H/Ez3YOWIIX3O37hJ\nf9YCE2gH4VFvt8/81937st7SGXAnV+kfPLO2X3+KFL80bUVWthcVsknr/LqJ\npNb77m67XORtPhv4g/s9mS45qXJpn8t7eykUDkgiQrLrWKVl8aexv+PqHdzs\nFO0sGmNChVlgjm0cVhleRLqnLCvqGI+hkSAa/DhIf/Znpcw+tk/MybYZopgv\nsVZVMqyR7i7fb50iLeZvM3Kfj+LEtE1YCzTnivIeQAohwBXsf9kTniKq6LEn\nxY0kdzYPORrr7WA/2Bi9XgG+J+msP/uUvI3p9UGj2rKw4PVNSj0F1860gPD8\nXlQCTRFYAPsK8c2PmFd0TnxPhgagg2nwCewNbwE5gkM9Vp2BqQvZpsOMkRJu\nKe5ONtGH6HbDtSXgmfT78YeTdUlOBsPDHoj0cWl76fhme4BXj7Zl2du2bByD\nQzjbZnvYbLvFIZrysTYSPadIR3o3bCxgcyYaOsBxSxcqZfqlpkXd3PpxWKrg\npbE9ctuhSh+ANAhR7vXxnliHcQ+kLsQ9HR3IPEtv9G7spq3kZCiEwQW7NVQW\n6iVJ/v/RlmMHyP2/HprHmxAQ75zywyyZFxfGn7eKznSIgeDzqMvyamuxQTDs\nzmO/fTk8mlYZuj3SZuOd78Lr9wolhHbVf3aTES0sMlUKHIICxXATOeoPrxPT\nY0ET\r\n=rI7z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/density":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/touch-target":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d48a01771.0_1631211073459_0.22268862510852538","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/radio","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6a1f1a1d7a2691f37346ff15a7d3a6e9f9ae6e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.13db34b34.0.tgz","fileCount":41,"integrity":"sha512-NcjgTzYBYnPqXmx/gaKpQb96q4SFpGMTixsD3/gOyE+4GYgpA+oJWexb+8ExUoH4Aur92GjywfoOhHBRfePVhQ==","signatures":[{"sig":"MEYCIQD4RVKN73r02k8exWn7zIHJCxveJ/sXMxwrwjJ6JnDZ8gIhAPjArGsC0drrjvvCHS4rboYn27vihNPiQ9zxJDZi2hqb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHGCRA9TVsSAnZWagAAra4QAIffvOWPkZ6MPX+PTA45\nCAIlR2OWSaKFzQisYEpnqfc7C1n+fKm2jPXZ80egRzwh3RRfd0FdYuZN99A1\ndQtQqPEasDXfhBtpnWr1omU5Fdmx00SAp658l0vcJzz0MesdBiPqZuuc8pHD\nsamK9TrgBCGvBwdiBHuqyP3pG7SRnJKAXQQjHveyVUtSYYuu0/HNBbg9W7cY\nnojTD72pDXmhypeXBd8WO00yy/ohh6+b5uIVeRSBBSe+13TnXOTDotyNlLRE\nJomb5FMGV85D9emD4LRkfqmk1MJ+SC54ZCqLQbOrtS3s+BcmRtq7rwuqwPvT\n/zVwJe3lW8hHJ8fcSMxBhQOqWFbzwN2bw/cFnf2ndJLct2wYBQGkVAcm/R9X\nd+QmhtDz+knuJAJ0WbLZ2FWhQJlE6JkWLsKuZn9olOplXwgCO5U9c9ULh+XK\neWN91QA2v5wUhY9DKBX1zvuoygaQbX9tigJkSK1mzrX7QT+ISTp7vy46J8LK\nTYSIF5XOUj2QVL6ndpLhbdIdUOBjLrIruXj5vuOY4wlTifLOSxzPoMuVqdJR\nqLJoGno/Y/XOyXKiArY2wNQHiKQQgMKZ29sLQYi87L0jeEhMFElXk8isyPRj\nNOFXFjs9FZwdoJnV+vOzVQMsb9pj2rmXXXw4rxyC5o3T2Pa0+NKRJucMbnQZ\n/0zt\r\n=DOkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/density":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/touch-target":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.13db34b34.0_1631211974241_0.20406193855273957","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/radio","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92c908b50f1753737f70e9baea664d0aa2ad5842","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.864798678.0.tgz","fileCount":41,"integrity":"sha512-zsl4z4afQ/aywI9QKpY5jFeca8xXv4/8mEOzUsR3R+rKIRQv4g6nI+u6sRgfQOs1U4BRIC5GsKxjHlGngGkT9A==","signatures":[{"sig":"MEUCIBqHg39vsX3ma9zahdmin7YMcMrKjBo47lGdBtvYW89VAiEAzYK5APr5XgJKjLfxXWSBkTzyGQ0XUAesPRGQWA5XhvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlR3CRA9TVsSAnZWagAAiScP/A1T99zrbi78FH34hmio\n9gFQ7Ov+xZ3aZahAJ4lJDEAV1iyqkEoUaj2oVaFarrolly690sP3xRJgTDRH\nF5BuR9at5OZJIj/8eqReTZz6HTGsD/9He31JqrsdvbLhnSwPPJFzbsvUMlHF\nk+5ExDJAbY9BD8xx+X0K/V0wiVtndW1XsJlmxjkuX4BTWLPN9hXL8mnZGrO7\n278e59uBINtOa+eDpy7Yb13REiee9Zv48jB/En63v8X2ufuaI5yWcqOJai44\nWivmiDRCL280I2flCLIboJ7nm5OyLgPxZmj+r9/FYE8ABTfMzjJa9q1a7G48\nZYj7nf0CESHLDDPCOaggfuGn8szdeYHmFsYvby7EZYulLekpy5YSDkNIRSpj\n4l7lh/zC305A1grqNag6ilk/gRe5B+f3SyA6DdyDElaRY9bR1iza40RjzX2q\niK2MiD68sfnl1p9kxaTj61H3eGw3xAZeZloH6Z0vl/b5kzPMdbuD24NwhP8F\nSSrkHk4eVp4j6Bo34ODYiqsbg4abWy9TxHmw4sPQNtBkIBQuYl9q1YIR+xRx\nbbGMW8BrjTGpzqdjHkBBvvwPyv/vNbwmjpf+qUpc8u6uxV4ZETsIzrux1+Aj\nAksBVx9PR+D2aE63ozUUr6K+QaG/FRhyuvECMltZ2kvTis65Fjtr302tHRqr\niW3x\r\n=w/+w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/density":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/touch-target":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.864798678.0_1631212662868_0.9280556748453739","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/radio","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9dc1aa99fb141cfe59ae12a23af2bf3c56e7b5f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d04bda3fb.0.tgz","fileCount":41,"integrity":"sha512-P8P6EzUV80q5n7q3JiBFsQsXr1mNzOKsS2eKYjCH7CNzMkF+mM9wi2EQynAqZhdR65I/2DKJFU8Sq2UySkCvMA==","signatures":[{"sig":"MEUCIGDrNzRnHyK2AqbAcH9q7vH3IlwkDMXIG/uFWPdZeObXAiEAnStmbSzLftM6JFxYEbDbo+wMX1QH+FBWVhQRs5AULyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3g8CRA9TVsSAnZWagAAgI8P/igI3RD3pYx254hB4HjE\nRG1zgP69f4A2nFBiQgSw82tnzqXApOeO8ursB5Y4MuVdhPRIUv54P0qc1vZj\nprIKxLR5csYI4c/dtRhs9I53RXsjDqjTdtT6VzvPSgxQbeX3nZPl1wiUXm4G\n6FM9a4HOGFIlLFsDcc3eovhfPZGjrpgb1MsmT0QFVcYvOVVasSIj2wL7WAdc\nD9qYqKSYCtRsc95RAuY8tbUscti9NQMEQv99YtuDGl+ez3v0qHwIE8xgmmXO\nt+rZZ1M7x8xbB8Lbq0cEF1bRX/YZsjm25kIlgz3zWy6/grzGITc7QW2rRfVl\n5OLeOfKiTQ1nDgYTQTsxF2/DmSHaGDoqMLXlJSvwW1RVx8tv7Oju6T0Gwssn\nu9Vf7glN+T4ZkEaU7wElk/O9HY64u5183fgAAJ9X7VJSP9aRc0/PecegJxgh\nP+4Slm/rJS1wvqFxc26fkwtlNZ0TfzyXKn//iLVOGWjfh1ZYLGvZzRbIPJJl\nZDvR+EhanG6eltV3SOIpkETFrVrXeDIB8AkfUdZ9SMLLKq9nANrqRf6k/V0c\nnQS7gyZczM5Nyl1WztRq2YuMrwToz5YyyqcEPwpE+lwRTb7WXfgFx32yAsOq\nogz912+D6zr+6j66wUSNtsWDVehKHGOyRGUr3U3bOv2F3PRbGgPeDDEK8ExD\nhLdm\r\n=dHwy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/density":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d04bda3fb.0_1631287356037_0.3979010664332647","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/radio","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff0d93e2b1a89e6a31348e0e2d67a25baa077b0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.5533f73d3.0.tgz","fileCount":41,"integrity":"sha512-9CjW37StKun7u3F0bbwPXFZ4Jxtvk/XQSKDZE50KnXt+6NNRFx922MyDuEseGIfspUiHpImydI8I+xWY0AdlhQ==","signatures":[{"sig":"MEYCIQDN8302ZQV0lRqhLCd17yUbiIYZGwUOr0P/CLn+QoAfkQIhAOPcDl2kK19t5wY1a3TQ0XrpKGE8h9RnqO+udmZRnnkN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kACRA9TVsSAnZWagAAtFYP/A3XrHm1Cs2A0AYSRNuN\nRm4g3N4KAoX1Tw/HUYf+FkTlFeGtt6pT1ILSIO56y0HVj/gHZW7ydDhNj2LN\nGcNQ1XMnPG/YncJNvyQRrwP0R0U0OGfZPJsTYVlrGEcPO0LqWsxOojV5nV3d\np8z4VSpmOfcmS1CTY64FDxt0Vj2SMCH92+G6HRgS+pTglLuGqqA0K3UPU7LI\nktKbV2//SacRd1d0iKYCAT2RrjNu4V5Hx9wKnY99wDZbuMKBEeDxNvnr+i9E\nojsIAr/7NpajXaPh5uSbhQm41QearPVyVdx2xOLi2OoKvbh5L2+uLz44aU8t\nsfxJdJ+OEWueU9iA3CWsgOn0p84u34AWefmyOJvo0tIMnYqet617GBperyev\nXSKga3Bf7Fz03eZb5qReMHVwKrhFUr9ThzzanPZqFuduahWIFLh71sbDKer1\n3sYQMkTVbl3NmeNDkTZVYGq60FmFvbWI4Gkutvf5Aopw2ITt7NmFfz3mr3Ol\n6qomr56LZyaYMBVUYEZ4rWIa1zHtpVz5eaDsIM4+lv0rV+q1WL/5Rv6ecZng\nbp28ucw71rA2dlpX3clntJVsAltfiaEl6kyvqm643XRUEBhkC9bGMP4jGblZ\nTMLgQrKDercAzBFkJlyZRRudFk+paU5+b4BWnyvgH3Y7ey35/hJHY7euPPCW\nNohZ\r\n=Ayeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/density":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/touch-target":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.5533f73d3.0_1631574272342_0.15526263577776178","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/radio","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13c14140d6b80392c92fe767d03dd80065f900ab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.08398f880.0.tgz","fileCount":41,"integrity":"sha512-KGvGWRjEkIUeipPEauqgEu8bkbaQmuZ3l4yf3owz4lk4XfgGsiV1aXkDOdGOwWE8s52IrZbFslvQSUrTuITwqg==","signatures":[{"sig":"MEUCIDAJ7KrqQKw0z93LMFo8d4JXmFloYulAa5bfmOM+0ynGAiEAmduBVwtcI3lFUoFqiyeoKHXL67DZPbYxQgUem1k9eH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+AuCRA9TVsSAnZWagAAoc8P/in1OWCA8T1AGYRZn8d0\nLJUiP2dOxbUa8CAepmYA6ySCnAiPyi/WtwabFkzRpCQqEb+xuNP6MhsvrTE1\n4tNN83p9AHP3/YcUK9p8Mz8s2TskwsAVrBvPnDlbX/sa8UHbYdSgALjgL6Bv\n6ZZpL67WJVG2MmHliIzAboCU/A8RpLlWNvdGhUeKNVqrvdT70oHhcfmmwNj3\nZlm+vBeDu9FHu0di+8tTtYjnXccgz9hT0Gn2lXZCGowrDE45lPiK5HGpiNmr\nasctx5zV5T2ThKEVnEd6jLjcQu5/CVs+aXSvmmnIOnmETN8pC3/4GpJ1D7in\n96C09gEg42v63H+vdOLIiakhhmWqKOv/sdCSogrxPL646GUQD+YePZyb1KIv\nCuLXdzFIHNsBr0psG8SwUhexFSSRJuOeQbkN11aaTZWuiD673uP9hfSL6uPM\nakNvHF2Bc+xjfEmYfQodj+2srlcZrd9vic5lwbrP+u1fbLZuFVk4QY9w7f7r\nBjArMbhOPFicJmWGPe/Id1yK5NtqIWht/gIuiQgVOQCFmIO/rDJoomCtVlBi\neJ4bZ3YnhOIYebe/ILnCPMVbKlJ1BCQriUfC50wk0a2+1lgp3zwkzhgVpKcn\n7NNy6nixzLJ0AKTpX+N4UZPEaA4bvG8RH1SGb98yhgSirSFCbLY3xws3JQU0\n1aiI\r\n=s9q3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/density":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/touch-target":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.08398f880.0_1631576109884_0.20891786842807214","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/radio","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda05ee6008738c30f7624368938e098c365fe03","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.818f4ee93.0.tgz","fileCount":41,"integrity":"sha512-sFsBW1fu8wks9SYpT8VJ2a8kUmlDqGO6WOeDARHNFrGnixLmWn/Il9g86ZCe1SXC+LZbfcPDwzTIveY0Pz0B8A==","signatures":[{"sig":"MEUCIQC8ItfjEzWV86IcyyaxBWkZjzehFA7SV062+/oIYDarBQIgFUH7fP+aTJ7tvoCP+3I9TBiTFmCR14xa4QRxZUCkoCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKNCRA9TVsSAnZWagAAIpAP/A0PFuP2OIYLaSar932c\nOKICEdVZCAun7Sjs39NSALl/RJdQV9Qk7xx4g9Uq8Pp5TJWNaJEPVpPijZNj\nKMx/9aoTEcIOdSP4li76wqjPdlSnwqEP8YYz5wR1U2NFwu+BxqUocQ31B188\nOKROfA3068ENs/079ErrRIr8vV/w+aW1lye48N3PUHXLKUKCJ0JwunzXzPjB\nP9QMwwolCFKayPpm0xuPLYJNR5vTSVJSXm5cYWPc8RjSsKcJpMyBwxXCPb3t\noRWqsvUvPz5OZe+qdPri34YGkTzwOY+428tfozuwum/mWHNb3wikW307RVO+\nlX8KEWKhQLtFEpK85HM5mpTQJSu0sLRRSyJHytfT+oFXDwJjiddMiiYi07AO\nQwnhnIzWmECuVjmABC2JiUhX3iqDq55zowygX3kUiHRtJF57WrUbn5xCvD+U\nnIJAfas0Jis98Q8XU5Xhqn4pqTi1I/6OoGVUPT9uYfZc8zcv9TQxPoYMi22U\nI3PeV7853NOb2nqQ379LXpbiZgvITdi5OtYmin+hIqRzbR5ZhURu3AVbWsWe\n8/vorYFS3wr4aclHDQm4RWvEfJdGPqFJn604q4dP8N8qFrbRXmE8ClaHTn1J\nEHwmQdc+F0AzjsLuxqAFgt+MzBygwcPdL8mlewsFKxYi4B13BgQXrez2bgrH\npDt6\r\n=cdQE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/density":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/touch-target":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.818f4ee93.0_1631728269698_0.35233733663007194","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/radio","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d74a44cb4830017d295a7d725f2d91c195c9d8e4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.8355e14dc.0.tgz","fileCount":41,"integrity":"sha512-xaPs8hmD1jUzeuquhakkSoLl24sf06yk7NJc3i5l8d/0umhqilXppPPeChboHmShNDnFUlInP47ryPfx/yTDKA==","signatures":[{"sig":"MEQCIBPcCqVhYQVA9ZGdvB2WH9wETtrSwWKwv/uNckH4msgfAiB4e21iPGEuhhAY2UW3OBQ4LfWVDU1RdSMbA6VnUSX8Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXECRA9TVsSAnZWagAA6WAP/RdS0SjM2rZ9PwWuiS+k\nV2NpWmJY0O2ponv3MnSyD4AxLm42sDrL31kwghnbqBIkcFlV6pDbrMKZv9Al\npfnIoYHfBTg9un0mT0QAEqHcb+OrlCLub/xsq7MRTj6AEijAIJJutNO5ohON\nFYSE/gAiuEcLoUOins37vobcqAJrrkEfBoniaBj1V3ItKjd6z4F8cPVEl9wh\nqN9sy5T0JVJ2Ivr8Rh4Zkj638o2fgkQs0eq32ci3ko5+GS2YnKFsu+S2WAfG\nFsILCmlwpgozZjOhi1XRJxOc5xSU+N2KwJy4xN0ktpy2zpr66FZE1Mmmmr6E\n29w57GaYrNXs2dAW0q3UyyWTCcTywLaIjYfW4d991RHsTwdSjkd2Oz+rsMpY\nGolH1y8BmsldTZV74bcHC5sQqJUzMK9k92bHTxa4ZzfK2AS/SsLs1oysiETD\n8+4YKSYjfYvKpzyFJJTwIv9zotUbCV/C9/fSQ6CVo08b7sIFLTv6M66KmD+G\n/LIFNZi07MtmgSZchfgFFQpphbOobxqT+5o7ZiG7X6Cgb4tyubQjscBszOoP\nv13M61iB0LfI3fhiUvEc4Zl/ik1RvIS3UImMb/Pq6Y2jmoq3FTVw+YcfBwb+\nGQAujN1i6kbiPedLfFrwIUfISDcNn3v60YCLQglQdh5mMLFRsyLm3qpOAfqe\nBFhA\r\n=EIug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/density":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/touch-target":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.8355e14dc.0_1631733188512_0.9336967488661625","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/radio","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24489447f41512839c22299f206d2c729aa58374","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":41,"integrity":"sha512-niWE5jx7YZK7REDJJbbonmV1bcQug6olRv5IKhjPasBVsBhpFZuyi6CzteQ0+t77Bru3kAWXdM1QFzEct1+c4g==","signatures":[{"sig":"MEUCIQCBJ7xOhyWMl4+UdlAf9rjWmh0ZO8vTebZ0J25gstGdSQIgdOpig6388DasAg3BpMLzdQ4uLJ2Jfw4JPq1+0idaM/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzaCRA9TVsSAnZWagAAb8EP/ieJfFv6Tof9n1/f1W78\nfb1wQ9Isi3juHVqDujJA+jGy0iwdXV5D6PPDAzVz3CMXHp2dXByZGgCe/QQH\nKSyhQfpO70iIu10ZtpRlWZaDE118VkbWXA2DJI8G18Fy8W96EgWJHbPss53S\nHbX5W35dEZQkg35GYTYA9+BwXYB3o+0Y7NAt/2FurpTxzQ7TGkFQtXFZks/Z\nn1HcqRKdKTRBNkBfzi3mu4153C306oWw8NiTO6GwsA27h1hfV7X8vyGjQmmX\nTLRKWxuAdmbtWNJSsJu5kW0Qk4wLJhbUQiUzcRhDnTEFQtvbEuXquS9CYT9d\nnPAK9tVogKacBn8MzUdZr8ScYPMVgDFCWL81THpWs8pk2P4iHxG7t6Beo5LP\npL+lmtXBUP2JrsBbgp0JHc0uBCj/jeydI+eXnEFqSvI12ueuCRSli2SjHinv\nvVjm02XZhI17ZYgprbysWAdKDWQQ2EZkepkIWEnENQFH/hKLB8KyZ191HrKm\nV44sXAFniybpkmJHE95X/27doPRT00toD8kFVrtFyhXLZDYQWNomEaIOu1Si\nHJbgKvkrwPU912k9rn5trm2g+TrrfcmzTb4YBjuewEMj5wYYDrBWVWoVVpGs\nEEZp92H2F3JFlvA1QkN4nG9ObhKetBmOHumv4EWJw1siom1xsro6yX+oIPjF\nvNxK\r\n=ak5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/density":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.d4e16a6c4.0_1631743194637_0.1202918861540121","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/radio","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e33ca71fdb32a168bcc0e1aca4b9dab9bceb7811","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.65125b3a6.0.tgz","fileCount":41,"integrity":"sha512-NAADe8zDV0a5dbMm45u8AGqpAYttk9EWQaNWhoh3SvkxdVQGAKXmXwXWr6EPkz/8/otrbW/Ak0sEiUDZiEYUVQ==","signatures":[{"sig":"MEUCIQCpxRKJCWgYqbtlFMc+s48sUfvfcR3O4wVzRek8v9djCwIgBRRN8NlrOqvemr4Hf9QAXRCri+/citP3zEnGeQsNoCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7STCRA9TVsSAnZWagAA2NUP/1T4ZuLZCKAzIr/VtjGy\nw322dNcaFegp5pLPzVCBMX/uVWpY1xwlupamok2t949HGi+aapBLd5K09knI\nY+1uoussAhDDaH0qRJcpymXD98IvZItmaN1uMdN23lI8D/YWJNm3DptzSV/S\nWSnT3RpXhSvz91ZmxAL/gRS56O2VzEVM3WqyAmG3a0lBn3O1Lgc/zccSy2Ea\nZNU7jFhi+gJBvRXdzfj/1exCznRkQT7akvRVEVgl5hIPtftiULpHeUISgk9V\nybKaO8e3UrvTRiz5O8D22JwvHe7ljLZD+eEtWDiwWZvGgvfk2mZu/JWpiz/G\nE3tBdaR/2OXCjsHOUB+rLY/Vo/bkLJonVN0/ovb/PZkIpOWBB2p3Sq2wdr3a\nUKvbH4TKUfB967xcb7rJ4VWLlhdogRbEYTXZLB1SOfosSiz74GkIIuJZrnj9\nqv7NZaJzV//jSuoP3t/6h5bJElyjW0H2g8jOJphn63xNqz9n2PGsCv3gxDjp\nJbRl2KS/9/VDS8Wo9STrIIkoO7fN/CgZjEmMLOE60hdPfRbFFukhz8bN9/IR\nHPAr3dG/O/vLXrxF+1Jw8UOXKdqORhTWwMCSO63tojIMN2KaOS9PPbElpUDj\noQRL5x5jaHI/9BDSZ5B2LRM0kGkrOQpbKQUY6wxWsMW+n3VaNGrT7XRWIrKi\nkD4+\r\n=o/8c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/density":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/touch-target":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.65125b3a6.0_1631827091658_0.8200271780872899","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/radio","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d49fbda1298e1f08207da4c9e752be7adc340811","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.80a583365.0.tgz","fileCount":41,"integrity":"sha512-kk6XOixg4S3Os784RNjfIR5ihxVhnFR8wXP/fIXJ/eoUYSGS3h1xZVT6xybCR5p+6h/f5JSfZDfbQTmcgkHZaQ==","signatures":[{"sig":"MEUCIBUwvL3ki96whC7XMrUGSDWb16luarlzfKg9K5qtXd7MAiEAoa/fX25CfdFeCyxgE6B0s7CnOtRUC4QlGFd2PLGJaK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/density":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/touch-target":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.80a583365.0_1631910980632_0.389749246821532","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/radio","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"639b240da4dae1dc2f60dfad328737b9bc78ff6a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.83900936a.0.tgz","fileCount":41,"integrity":"sha512-Lheg7TkV5/fLTcD9mUSG2qfNkJrhWQuucLfx+3Tn1bffBDJE5FoItfXLJMm0G1jQzIOZl3J7Jfoq8xWBVVb4Uw==","signatures":[{"sig":"MEUCIQDZgbVQEIpkWATQxffhM5olVUpFQGIFwZ40sGCbOb2F2AIgVKGrcCP/dmGpy28F6iQI+oteTT1lS9zAHG8DMNq5Qio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/density":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/touch-target":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.83900936a.0_1631921089115_0.6682882101733232","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/radio","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48cb9aabdea8a393de87d893dca290479261ac49","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.860ad06a1.0.tgz","fileCount":41,"integrity":"sha512-JMqcRhDF03KFnRXUpqKHnNpTGtE08Q3JWn1ixqm0cbg0jg/Ci9xm9T/WwAaxBYnlw5cdFy89admO03h0ZTx8pQ==","signatures":[{"sig":"MEUCIQCfXUbjRYjlPcIy/M3fm/WSrZCiPY5kwt+zzxM91VkdDAIgacHCXshktyfE4aLP1lj516Ym0jvfYb+G+sP0fNOONXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/density":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/touch-target":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.860ad06a1.0_1631921789008_0.07386350746258197","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/radio","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5156202ed7173545a49130ba0ec1163b3f2b2236","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.3b8d4429e.0.tgz","fileCount":41,"integrity":"sha512-okfk5LmNUsEnJtHO2XAkq58kyJAZwtDjwKodfIFWEn1PSuDIAw0uYOV2uG7Uh0kA+lb7bGd5pwgNy9kf3FCKLw==","signatures":[{"sig":"MEYCIQCLcl6iSAj8GIdwkrrPdsAHoHBBfhXWCJKzwAkV2fZPqQIhANp8ycIvakdY72pEA3ks0qdsf37/c1g3CSRKLnQtqENf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/density":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.3b8d4429e.0_1632160084332_0.6862381522070942","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/radio","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445917e49b49bbab6456ae95f8f515dae31cf524","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.2da3606b9.0.tgz","fileCount":41,"integrity":"sha512-XFU3+yO9b5FBAD+j+Knr7DyXgH3REGYon4OlsReATSzEPNS6UaCagZVcu7imLB3mo4OUPXLI2fInzBfwltMZPQ==","signatures":[{"sig":"MEYCIQCTu1DgGmdgwYkQuw1UdziwtDVAzjeieMfJ+xxzqFr58wIhANGKktyOVdYB6FLZs8f+u/luTQxIbpqGMun8eagQpm7q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543981},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/density":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/touch-target":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.2da3606b9.0_1632166691016_0.9993400733242495","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/radio","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e5d95bfb6f4598327d9940a6c03559d5fa0697d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.e8c598d1e.0.tgz","fileCount":41,"integrity":"sha512-pdeXlgVL3fBWWrvLKMQl4i1hofQPH3XnibdPxjwBRraHCalQ/mPGuLt9N6kwNt0pNtPHWvqydZPloySpdJ2qMg==","signatures":[{"sig":"MEQCICXJxADODuDCkxrEU0sYKzhkiedplqMTE0eHuFCBZQ4DAiAGVeLOu/PzF4bKEGPbLrFvtF6QHggrZSkOIovbXFEKqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544353},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/density":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.e8c598d1e.0_1632172346433_0.5615063114425694","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/radio","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f779f850c403e436187ccdcea57317f0bc69fa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.1340ee9f7.0.tgz","fileCount":41,"integrity":"sha512-/TzNAb/+pHJhYR7fq/9aYHXckAFzQqieaU9bpAo09f2YjDit+iJPD0ndDL06OlWxkRHr0bIiLGA8xCAX0thlFg==","signatures":[{"sig":"MEQCIEMSHwQcc9Ph2ZRGc23idEb+PG2hlPa3Nvjh7/o2ow/+AiAndTqWKfLz3ZnzqsNkJjPHZrd4dC5IoGxZzuqElwc+uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544385},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/density":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.1340ee9f7.0_1632333504286_0.3886329578552097","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/radio","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377b4a527aeab6c075839ab31a9351261ada90cf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.65084baff.0.tgz","fileCount":41,"integrity":"sha512-4LTEnkaocJ0lK6sKu4VfA4N3DuIY50toauQsc1ubUsQUfLJMwhvweT0gnYwLqZiXjWQfgRpeEIM0mX7HiyH1DQ==","signatures":[{"sig":"MEUCIHVEtAgfVRlMoIHJfct1jb/mJ5GJin2SbsQFrXhLTbF2AiEAtMD9sS4PmQqp6Kj+wLNmSpama2Kx6PMflh4HX30OG3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544385},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/density":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/touch-target":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.65084baff.0_1632432358716_0.53405393665181","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/radio","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41835283074229e43abb8c61dd077a1dfad04566","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":41,"integrity":"sha512-wIuqgpYFcURsmuE+xq8CrCnfJQ3Aer2s0aILIk5bzMA1sttQr2HJYTa8iyF2ld+hvS/QSv8GhGPgI2lb9EOtWg==","signatures":[{"sig":"MEQCIBQB6Jp/88y89E/sHjAhfKrS4rHy1XG3fqmWj5/HLww0AiAfnjiLabqR7WSR846YsAN21JnAgdhJtuhKI7myibEDKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544385},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/density":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0-canary.c79aa0cdd.0_1632490945385_0.18522208777456428","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/radio","version":"13.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f3f4c3c56ed3686d7bf69b9a611249cfa6db71c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-13.0.0.tgz","fileCount":40,"integrity":"sha512-6jeZ+dKSzBB/j2IZ7RjFl5mrB+EWnpv/x+U9w6ENLCdueM4+LKUqBAc2fC2WMycsqgoFnlB0xsO/sG+kN0J6fw==","signatures":[{"sig":"MEQCIFbRpIz9j0pkbhJq+CFayf+qv7z4y+FuZI4R38r+SBbmAiB2Gchg5Ks10io0z1uFuzXmItftadchxxZP9s0eUa+jWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543263},"main":"dist/mdc.radio.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/density":"^13.0.0","@material/animation":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_13.0.0_1632512782887_0.4744451994744707","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/radio","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a27c4cae35ab4ae7c8606dd12f3bdcce9044c700","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.198431fcd.0.tgz","fileCount":41,"integrity":"sha512-J/ptv31UdYHhVjL8DYMnhKjWkPnf7V+g6rFC+FALTQ7PgJ0iWwIBuinXZHb71U/RaU47T6KBOgZX8H1PKBEIew==","signatures":[{"sig":"MEUCIQDW0Ow79p+4LyO4v06w5xfB2MDYvbJRGpnYKwyUEOXFCgIgVo91IkryiI5CXAydc9Bk4ygAN+P5TcLV+cf4rjbNqu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544385},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/density":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/touch-target":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.198431fcd.0_1632512826969_0.8565552358540387","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/radio","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b43dbf8fe018d46f34fd5312176c09be127cb05","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":41,"integrity":"sha512-B2rJLAHu0q43HDPmXnvH3XC5aYV9QtE6XRWJT5cG6VFBrB3OR8qU8p+yAHQ6EwA5Z5/oPFWCinm+gStaYT+W/Q==","signatures":[{"sig":"MEYCIQCgQkA3EPF2m3/kTcJj5nAO593Q2tHVzP8wSJq2DxlAuQIhAI9r8KHqVqKa2hM+aplmTdtyhzS0WTzuCqzuOnKIYPLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/density":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.9a02b6ef8.0_1632575490862_0.7755561272923517","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/radio","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38f817ed2e3585829a1d487f257f0cbaeef09298","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.758ce31d9.0.tgz","fileCount":41,"integrity":"sha512-xXzNw+A88EWW8Sbnpv3t0hw4smLaXkwVvrPmGIFpzcYHi7MdbKJH+MJ/Lk0URkEBDzONilpRZsby38YwPGRFMA==","signatures":[{"sig":"MEYCIQDp056HfVSm55wtxNCwfEfdYu93E+ySrh9tDj8CPrSHlQIhANyGpywfSa/jV0UxwXHR3QBhRN8Wsbbfxlem0u/WRtx6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/density":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/touch-target":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.758ce31d9.0_1632763785246_0.3876892617696477","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/radio","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0883a974c29e415cc983990b80f708a8ae91b00","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.86b50ef74.0.tgz","fileCount":41,"integrity":"sha512-+/A8q2J/90e24LydLxOgy5R/axSVq+JD6oUUbr4VJOElMpOZyHJMBZumDcdBSrqXLTYL0o8bQGQ2tzrWv+aglA==","signatures":[{"sig":"MEUCICCgo0IuU88CLAgxY3hAbg5TPrzzSc+aSEeoiTX3SNOZAiEAm74SRMYjSBlXFpE3elj5UL8D4bHjSUX6xihmK5g8rh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/density":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/touch-target":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.86b50ef74.0_1632851013154_0.6209566782549514","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/radio","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de2a73ae9d9694686b137e4bc4ebbd4c83909144","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.b2fe3528b.0.tgz","fileCount":41,"integrity":"sha512-0UVFssAU19mLdSDkg34zYkr6Rf+CPcwf1hHiT+PpeJOr4au7shUhc60xf2W9JZ76giaemtD4cW+UiCV8VeBo6Q==","signatures":[{"sig":"MEQCIFstrDR7j3eiOuPFKqTdNbcyYtUUACqcJngXK+DvkOJFAiAQCwsDDP+FxLCK57XWAcXqJUBOzmmvLnL+qWbawQnJOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/density":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.b2fe3528b.0_1632956244578_0.6380833999206241","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/radio","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb8cac1b0a528843c8e7f9527756b5efd4d96e20","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.586e740dd.0.tgz","fileCount":41,"integrity":"sha512-bsbIbrQI5A698AVlBbTDp9bmbh+nqCXegBvTCnzQTpsH9nPuoGsOKC+DYc8q+F2Va8Dzj1KC5DuQp7bxMGR9sw==","signatures":[{"sig":"MEYCIQCzZRDk4G7oq1ZO+exgGHjNKNVLwRQadUxHCrcLLV+4gwIhAPXDa1N/y5+8meA/SIIDAU0URwFvob8cLyWQOXV3IjnB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/density":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/touch-target":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.586e740dd.0_1633019508249_0.49057628005002063","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/radio","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f1b0148e426e719db766898afaadbd19fa7caaa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.2ac92d766.0.tgz","fileCount":41,"integrity":"sha512-q0JWruWfTBxwDHEEbjefz3KhtM4WmpJjviojVAvWumJoFGnMeWYSNPzJo1W6QO5Nhp9ntlJiQv1WXCJCdIFGhA==","signatures":[{"sig":"MEUCICLbA2m7DcC4BfYtaJlUlWHDJdTJ4A2+toGwe7yrQqafAiEAvwdtQCa1ju7MBOoyLBh0t3e/gxgC8Bt63//7VRD09Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/density":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/touch-target":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.2ac92d766.0_1633462142693_0.8606798606323864","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/radio","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2495781d125e771241de3b9c29227c3837da056b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.353ca7e9f.0.tgz","fileCount":41,"integrity":"sha512-EIfbeB5ZOEyj24SHUzOzI+cpFYNdKbFtcetMejxUR74ZfkknRmpLuFydmR2gqyYLKV/dagY6MKplLzzXtDh8LA==","signatures":[{"sig":"MEQCIAoj5gluybltbQ9MFULL6+cBIRlx+SQPVaZkw6cBzJYVAiAMrwufVz7uLZuBX9KkDahqro3gnz7W/4rlX2MownzAHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/density":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.353ca7e9f.0_1633718846131_0.9152077040561202","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/radio","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f104d7ef087a02a65cd1672ca0fd18a1bd1de16","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.c78ff0429.0.tgz","fileCount":41,"integrity":"sha512-ZANWUYlmyDBQYEk/zA7uIul7n2PR47yio+V13Vg0ZRBqEPOOCrQ3KsKA/pfNyGcUVZscfvcWwquS/YNxzEtxxQ==","signatures":[{"sig":"MEQCIBf1foqi9JF3RW8CNaUmDquNArNIs+mwd/EP/pOxRWZoAiBUPb4K1eit0kWd7EKZMbarJiQMG+QNZUFMScxWeVOYiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/density":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/touch-target":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.c78ff0429.0_1633972957913_0.1424852706341182","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/radio","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3e663e39b300c9cd19e84e00ff5d5ee3360d99b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.261f2db59.0.tgz","fileCount":41,"integrity":"sha512-AvrsOqhP8UZ5d58RWgaTmQVlWQRULwk2BXhsEhtxz56CmTsyVM49thNbaNnc/TzuY9Ssxv/L2wYVbR2B3BX9Yw==","signatures":[{"sig":"MEQCIGHDNKAIjGYQxErUwFxnPkAuGUejjYTOUi+7MEncRqqBAiA5CAxQuAZwAt6rW+L3do6PJSSoLKXnU7JHCs9aVm9ETA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/density":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/touch-target":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.261f2db59.0_1634749210940_0.12438742617009124","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/radio","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2aae5430440cc5e6074742750a0e070dbc9d259","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.9803d2dc1.0.tgz","fileCount":41,"integrity":"sha512-xbLH/xoZ/M2CV7kYBFRmA31D2kDHCB54Oz9m3hEeWQx1Fy+LerwqobmWpuVusbvBqOTMpNzGJt+m9vLw8S/Pww==","signatures":[{"sig":"MEQCIG8uEUGlU3KZaeWdkZOZGUpV9uOm3BpP+NaM5eEKkI0XAiAV8FByBkCZ7FJRWrmMBFqGTUuMuevDdiAbVUPgy9t0Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/density":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.9803d2dc1.0_1634757740989_0.004217107464457026","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/radio","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9995aac19281bb12e2ad90dbbafaccf482f3661f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.348665978.0.tgz","fileCount":41,"integrity":"sha512-D807tgjcczh9r002BBAaJnijvkEryaWqMt5oXfu2O37YRqYbbMStMCEBuNuRp9WJQp/ERrSKOwWTOeZVhHC0og==","signatures":[{"sig":"MEQCIDIXVOYto0C2I2/Mrft/hJ5f1GUAZrTDAQoN/LG7AU8qAiB1YMm4E9h5enWvlPhJGvdPKS0GGknFVDcnsz1XUaj+BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/density":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/touch-target":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.348665978.0_1634827875739_0.5239465793612486","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/radio","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f443865ed87f5bf690b4fbbd5f809d26798a88e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.b2b979a8a.0.tgz","fileCount":41,"integrity":"sha512-H4NF/nULKD53DpzK/Yt/F74PXPd0i1ld5MxGNG0R7q2q03aDHUacQpmIgnN/AyotFRei7bjsXV00VZgyNpZaFA==","signatures":[{"sig":"MEQCICdMItWmJ3WJtgc7tDIs7pBv1qyxu3OAU1rQ5jJ3/J5cAiBSG5gk2yZfx31VTBi9PeAHkEAHUZ6T3M5u5ETlmigzgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544280},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/density":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.b2b979a8a.0_1635433972018_0.2702250299808453","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/radio","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31e68ae64edb44dbf669aa1c160e37a256eadfd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":41,"integrity":"sha512-vyQRz5oG9lQcrBCvJHnqytAgVwOjScvsY+EkVOFU/3n6lLM0YB3czGn8jOaSnVurQx6jAcjfFZoNJHMOSDiCcA==","signatures":[{"sig":"MEUCIQC1F30RpJh5A42c9gHNNlNOsKcALMTrZytaOv8caHJFyAIgTBpZFTQKy5ZI34ywm5gr2RLC940ZVcOB3NHCHdB022s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/density":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.1af7c1c4a.0_1635443601745_0.8875031309348294","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/radio","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff049f59a6839e6d251e3dee2a2e5704af982506","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.4afd353cd.0.tgz","fileCount":41,"integrity":"sha512-c/EfCwOCz4rYc13Qpw0vL0EslCS5d7F16KK8mMAgc+o3iNQ+rh1FuSdjInOznuv88yM01e/jvsmzklHUoM5iEw==","signatures":[{"sig":"MEUCIQCQPX0W72mISTH/9o9Pz/Up3Yan5kzlUXK+JJS87L8DBgIgOkjzUrprUKMguP4zlv1BDrb9TdhLMfhapeulJSP/cCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/density":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/touch-target":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.4afd353cd.0_1635519723840_0.19252904462842846","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/radio","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc6f8ca7e2126a575b8c8dc1395049a5153a82b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.a986df922.0.tgz","fileCount":41,"integrity":"sha512-H3H1EuqKkOz3DezOLrdmZAeKMpm4IUeUnc1yAOWqlbLegsF83xo6e2puRtrjAezrcFFck/ayvpme0e/Kp6RtVA==","signatures":[{"sig":"MEYCIQC1umLKjVPm4X1PYdFpbHfuHGboNPqHo325piE1l/dkYAIhAMza68LH3FJHV4LGXrxWct9EvXlNLI/3xyiuhe1R8PI5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/density":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/touch-target":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.a986df922.0_1635543333044_0.021531461911559857","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/radio","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4ad2c2cde0b3ef2a8f263202226ab9164c176f3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.c3cdff07b.0.tgz","fileCount":41,"integrity":"sha512-eUuQ9/en0tKFWddsa21bw+xRndS7BKiVxW2zstT8Nqvi3r9ILxsgVEBUdlKrUwklv9wqeC3kWMOMWsYYutFSDA==","signatures":[{"sig":"MEUCIQCQ/OtqYd6h84dE83DCfuH5adbJUQrfKc4iCurjew2hZwIgKwe+FCmKAcIoOPdKsLwA59eADH+ZLhc24jBWvZ2Zt0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/density":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.c3cdff07b.0_1636484785293_0.19207572452760835","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/radio","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66ecee50e9beb41454733a566096a07c7d889985","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.468392606.0.tgz","fileCount":41,"integrity":"sha512-1J79buiSiXDSQuaO1EDhEvvkLeZ50H3rMaliq+yLKsHBBSdokLkooLYhcdm7qJZEJHSYUIKDqL6L81dQd9wQvQ==","signatures":[{"sig":"MEUCIQCKPw4cmuusMKJdtEVqHzcAg8P/VpEXkO4VH2c4Zev7PgIgMFPJZVQQ0oLA9WDvKNMwwZPV6Szmqq+KpXcWBn1wG9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/density":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/touch-target":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.468392606.0_1636659638446_0.5726830547294075","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/radio","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1c98eb963c533aeebc032e6c53304ff8bd718d4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.828f9803b.0.tgz","fileCount":41,"integrity":"sha512-01esMVNuqp7THv7sfCF2ig3gDl9s7uI01XzC8oHPmAD92aCezWnXz1xow5tilcpM2uDNFJMvtZBDfWDEvE3Ycw==","signatures":[{"sig":"MEQCIFgYfdjgYU0BDzw3xJdQJy9LUey88CVUHB1OBOOoawhuAiBoRPxdenns5ZzLjm08HQZjYu9XqJpZlqfUP4sBfGe4Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/density":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/touch-target":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.828f9803b.0_1636660279999_0.42373164229249016","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/radio","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48234284c7361a3beab4025fe3e885fe60184530","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.8795cba87.0.tgz","fileCount":41,"integrity":"sha512-IuIngCaotVV4iNp9lDz8fZQlX2LKAE5hNfJHy6OgJzPcwtXN6ggEffcNzcTQeBWmmUBf7AF+RlLG+htBvyIKVg==","signatures":[{"sig":"MEUCIQDEhoYY0MSlDqntTybhnKCdzu8Upv6wCqjK61al7+jHBwIgcTA4NfC9YMx6OBAqBv4ov+0Dgqey5S3Nq6j3tpUdaZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/density":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/touch-target":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.8795cba87.0_1636660637010_0.345970468319325","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/radio","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d32c98845e278fa522c6f3526674c53b317a3908","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.cd7f8cace.0.tgz","fileCount":41,"integrity":"sha512-u5QIFSgzKmzZTDoUjwm/4ZdC/SlpHq7yMrwkl7OiK1xvLR8KLdjqeVwOtaMWnBjaCT8/5S9dPuPL+h9gMnrFnA==","signatures":[{"sig":"MEQCIEqwZgKovzDCO6ybj6rhPIr3fSu2U7D/i3BZHL/d4ItXAiBy5YpRho8bxT8CgaPbcX15NWc5eZuFA9MR0DV4kVEzWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/density":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.cd7f8cace.0_1636660740529_0.9068687069456534","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/radio","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b537d7f892ce0b4aea1680c1ec1e715ccdee6a1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.207230eb8.0.tgz","fileCount":41,"integrity":"sha512-mQGV/ngivPDgiuAyehxjjlzy1pB5VRXvKK3goSWrU6kMMEELjFuPj+F8Fo0xVnH3rKt8K4zarvU+5OqJUxvsvg==","signatures":[{"sig":"MEUCIQCEPcJt5P0ddG0whgM/qjDXdCRUdpHIMEpHYU0QcKqF4gIgJwR+RWDrlmwWvh8i+mjGbUdnUsFSEVURmeCi1nWnJIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/density":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/touch-target":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.207230eb8.0_1636669503138_0.3778570945103683","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/radio","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131e864cdd21965b3d4d972967805e14f63dae35","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.991fb99f7.0.tgz","fileCount":41,"integrity":"sha512-EinmkG4PF7vhn11APTbxRbzvwcSK2TNvTRFwiy+l6b7n8BUo7uWeXDqRs1xKY9ERbOf4LlKRFESuYn/OGVFG+w==","signatures":[{"sig":"MEQCIGsrvuaS0u9h/PtWWeHzLxJTd3smTHjyir/DAOkwHxtpAiBlj5FmZwNIwhBHneNN9GNgbt2QvfGaypkIaX79sLmjTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/density":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/touch-target":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.991fb99f7.0_1636670217499_0.7536131654296854","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/radio","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2773ae45da3c014ab607834a071babf2e0266d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.15db4f164.0.tgz","fileCount":41,"integrity":"sha512-+2iR8EP8ZQMdP/IIplBNIGr0pakqi+U55sssTuGsLBbIRgFJqGmyFRgyoNAO+PAU0eRbSiw8qWMVUaDDDkcAvQ==","signatures":[{"sig":"MEUCIQDV0MWU0Rx7EKtShfApqni+P8dywB8PtWTX/C4yTyuboAIgDGiRfHQ1fMWf0SoXOFqbvUE9zp+LZGEppKAI+tDCdVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/density":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/touch-target":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.15db4f164.0_1636738218066_0.7380588817238534","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/radio","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad3b4a8d14cb33c3bcc6580c884506fbe30a43b1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":41,"integrity":"sha512-c+qW068TppFvuZOV9N0skIG3hyzLtOayq5GirBAdYk9kUx02Gd98lfOmB751BzMVJwSu0Gp1wlEUqT6z1czD5g==","signatures":[{"sig":"MEQCIC6eihodZokHL4dsPAqkhkUlVlOjOOAgwYVG5+qLje8fAiB27DKtlvKQy/POVxVTJuzRbuAaUARzAyzlMDl7F5OrEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/density":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.8fcad5a3c.0_1636744461589_0.7018947304031657","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/radio","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0d03c20ad78146d5f928e68da6392e601d917a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.f81fb1d23.0.tgz","fileCount":41,"integrity":"sha512-eMa8kXIaZKUMfFSN7dlrVpldd0b8r152inA9+AYpiHAv4Jl6MQRWVRCipCWnRBVHh5tTHC7xLF3CHKAxFEbeeQ==","signatures":[{"sig":"MEQCIC4cc/vyHpFNi7RRMYmVWVPPcRgTh2epfU1YWfNgNAteAiAf5neLIm1qlPTQKwN6waIDi2zUh+6kPIA47w3+ylxgPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/density":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.f81fb1d23.0_1636756849334_0.2528322950567796","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/radio","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ae5d17cdb30146c436aafa3063573d30bc8dd5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.783f6fd5a.0.tgz","fileCount":41,"integrity":"sha512-JMym+hw3Bp1IrNZWRW5GR2WvZ5VD2/kTmb4p+ZkIHnf/Vc5wQMXblLWlAfTnEX5Zq8P4R3C4vyx7N6ksGJXIUQ==","signatures":[{"sig":"MEUCIQDlmbMGbQwmhfyVJpJDZuUjZybPbpLz81pZuYjBQGqNOgIgRMUvT46vByrZ/y5QVDZujYipHR4kpZQLdgGMMd8828k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0azCRA9TVsSAnZWagAA7qQP/iHpSf68voo2DEwanAkV\nq+cuQdbPs0HbzYpkUo4C/58xINz1Q82Nx/MhbSRQE23WWntsyRhaKG84di1+\nHdOMTU9MUhY/G2wyfWwZ2ET18yMl2bIu2pRxcnyjnSnTwNXRztHm6UblnAPI\nWq7Qos8oTI8tF3s96uZ9NOKqzVhtuZjUC7hpMrbiwq/ygrDIhF+JPMJ4BgEn\npp3c+W7HRVh0Y1CYO1KkUeOEoq5eu23+lNkJi0YupGomwfS7ecH33SWL5TIb\nwQdooCl5Q+xvB8Dg3fEPiwixqn7uZe/bxJOzYbTmBE9635C4uiAdpibZ8mty\ngvUEZUOyMbk40ZtxBOFmgU8wbbSz4hJzRsXPfPuvRJR7iUlSIDZ1icXRKJNk\ntjq7vBR18kxWDI1QfHTD19+JH6Hq21ZEMKfBcB4C4c/QZvE4UGCmJixnI9jS\nKR/ib9EJr1zd1aTFJDxhqsuIw+epliQN6Quvr8lxLAZfE2EQFKRJ/nGIe9m6\nJIVap7gD5I9UPa7cCCX945M6XmRTBKtup+YjhqOMxz4TIjnVEx9yC6wWMXR7\nM6XhXwnW038nSsNsmBh/w0voo6jS3rczdp/sL6cwMXBtzlFufWFDXtKRJzjC\nILl84gLt+Zv1zxlGzxSuvhugqS7JoDzm3Qe/usSpmnoa//9tIXYuauYa2cQD\nEajv\r\n=8YEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/density":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.783f6fd5a.0_1637041842856_0.40427965371357777","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/radio","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef181c67e37a777cae238379608d426d92ac928d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.d57ec74c7.0.tgz","fileCount":41,"integrity":"sha512-mOEAt8R4O3eQU76kMOxXUy0eHCJA9fIKFi+3EhVjOLQlpuinxcTmokPfDFW+Z1WK6T2oeymC7JhpXv4QiZUnpg==","signatures":[{"sig":"MEQCIE734xJeTwQTeaWiLhdCYOVP8y3aaxg1BQzx3ry24WLYAiBA8+sUBoh+4nIF2OC30lsxGk2ZCij7L+qQmDBHdKS7fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mRCRA9TVsSAnZWagAASO0P/A/5lKp9e+1myo//USfg\nWS1WzaIrkQiA/yreGmWFSnIyMI5iUo4R/EYL2Gs400E92lJZ/F3oFNsXGuHF\nYebLUx0ML24VZhbeDpKNSJPj4o8mqk/DCBkJBMLsQBtqK6QHnN0tAOi6Y6h2\nfj/XFY5QTLjvyyDJ4xw6i+pQcgr1kv0v+gZsSRfLvH9aErU2ECPyKW9sCLSX\naLQ8SEp/Pxu9KsPOE8EIMqiBWY1bssrN8P82hMwL/h9Sw1dmAg/Jyfoha07B\nu+aqmtXtYI84knavqJA45bBDNyTMsJO6k+0GVntW7cqTewe9C9hI8BjWgM3a\nE3POpgNcx518bU0aZpW9SLPuopc9Hcz4TUEeW4GxbmTOnWv2D5rz22jBjZrN\nYfGpz2Hezbgi+U94WRTuWTfO1er/TrUqsukbj8qsGh52lGrCi9rp2MiDHhk4\naBLlWedazQYI7nbSwl5qCmegRXSoDRySiKdoEo5XNYR6KyOShvbKOf++2dmi\n2FFUaNqP8yCkzdyeGLilqjO7T/gvttEpWjkm5/97g3FnkO/owqSrZIF4eptz\nkivo0pfEQSOZxlWP9aZC69z1mgezTw4oAl8YpIZvBKxebWrLiFg9qDFQPx+G\nWlmASo2lMGgs4G79eMp5SzR0H00pa8G4ZWuioEopq0zkullLJ5kEiIoDGMrw\n1WV1\r\n=TDHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/density":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.d57ec74c7.0_1637079441430_0.26759786210171677","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/radio","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f780ccaf0c3fd9d049e6ac995a47671d1ff59d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.554c71829.0.tgz","fileCount":41,"integrity":"sha512-C4ceiRzErb4Xc/BkcAc7eBVh0dWzgcREevFV2OBWxAdgA/ycjBN1JYyysi/cAQepcjibHsQL85KC0mQkP8gKpg==","signatures":[{"sig":"MEUCIGxr+HZtvUdSamrZQspSnGLZwxFjOlPVsqX2ufOEZ4apAiEAlcBOuTp08p6fNAstPLRXZwbSBBtUfRGAXcy03hK5Uf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9o3CRA9TVsSAnZWagAAWCgQAJ24hon0MHW0GJLJ20ji\nD3ADqVN/HSiT7w/Dqtji6WjSVb3snXKcw19hCxeZGLJf+YFdqTIrw5SUm6Tm\nkzsVNdwNNYJW7HguEShxD2oXKwoCHwqYLmohW9dZ0cpEv2LsZ2WsGDOVS6+1\nSdX+a4XZi+Fs1uwkizOLwah/Zj5t/doZc3OCSgJ/V/nU8lHi4ApD1ieSFRGG\nl9fyIo4kTBd+lkzRgtBbXMLKwzmin4RtQ0oC19+sA/UFRFEtCS8wqEVPsgj6\nfNVkx4Esu5w/w+HyUPLx/pWN7cf6H58mg8Z6LMkN4UKsADh6kQTWCEpSYzW8\nJXqnI0K4n+dl9YE0388qsdgU1b8wAYjPbMcPYNohjCSBAxm0DJyqZygPpXCd\ngbT6wf0k610ZziNAb/TKzQ4aqq4+w5sy+sSFlEl1nOScJshpFN2KvcStq9Zs\n5mCw7PUDdqWtY7nOViHS84LvN5ff0tBuDN6OaF6ti7igRLTKA5cGaCUfMygm\nNo3tyW7xVIDYtwOHVWsBJ4oWLDvWWmULoFVkxucQstgqpNsI0ln1ChNsXNVF\nte5BOxDwK/GUovT1EyWdDSJLEJlhwxLETl+ZbLngBO8JLe/wlL4g0bO2TFon\ns3qzUGCfxYKbVMx8lVDnSKeq84R97GgUC1GQFKtt6Qf8doxCXQ2nRcbYYuP1\na05l\r\n=F/p1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/density":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/touch-target":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.554c71829.0_1637079607006_0.8219588067001933","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/radio","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c42a9c4d03db4231d73c8e4ed99efb18e5e36e8f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3ef470efe.0.tgz","fileCount":41,"integrity":"sha512-loFz+wPbEoE/z03IbqWH8W219YVzloxAkIcnEDFoLWMREJZ2S0TWCiMHyPHiJF6R9no8BxAY26JRLujnhiNfyQ==","signatures":[{"sig":"MEUCIQCUR7d7TFVHjqpRQVV81PTRaiTW1yWBG/blYbP+ZLymaQIgCwjGWcusLgZDQuUO+vCYeda8B+OD+lQ1iu9WpJpNWHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9tYCRA9TVsSAnZWagAAzdwP/3I6Q5N9YoRevqMEXJ0u\ndk7HOYkGdAZPkwiYE0CizpLbgkLxhkRHMYYT5gUGAt5qbol0xaTzeCX7iWc/\ntg2j+YKv6CKrXn5so3VpkOjxfDJxy12mKJC7QYoe0v4c6m85JqGd2/TZi0TI\nxm0lEbKQkRpF7XHuL16tNPaSbIa36RU/HHnTLKfzx5Vqv6eyq8xAYw1iHZB+\nJlYqmQEBcr2+Xlw3LpINekJgOHjXdX5uNuEPmV/24NybSxA99lERIyoaMXGY\nOKa4xGsK3sLFEUvVRIHtyvaj0q38fj41bzYiGDdn1RQC9HSybUqHMJ4ru1ZK\nGA1RW0reC9NyF4r0uaL5ZyByj0TzL9jy8GH9O+DyT0sVQKYPHcEoaPchiMju\n0yzLLzdGxD6m1aKLyT9II6va+ZyHbNetLF8xp8JjLGHQzwVweP5QpkvB72Qq\nWQn+R6SDnz7rUE/cenipfN3TW2o78NQNgHXb5wdVsF8k+dGLTvXGaHRmaMRD\nDbYiGJuJrGW+fZjRS6vUM2rGDSwYeJNyFVFS7vEUgZjffx9vaFR1fIFe3Wmk\neghoaxSN2vBPen2pfQFK4WlrCJ3UO0ri6snzr1GJLdsFb0W41iHO9oe5UWFy\n9VLdYTI+45ckJ2FtbphWJ/E5iOPglITZi4k0gs0Ow3u8EYJAlPdlYHlyp2NF\nAl+n\r\n=827I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/density":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/touch-target":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3ef470efe.0_1637079896274_0.593720882866293","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/radio","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71cb0ab46df044b8308c8ae635f7c5429324f9eb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.61a28b2b5.0.tgz","fileCount":41,"integrity":"sha512-gR74ePoeSRw9w7nsBltFwT9cIgBBnltIOU0ca5AkfbOgyfxsdlgF/G+wi788QEuwYDBhUOSxZRIPBcrS2RLbBw==","signatures":[{"sig":"MEQCIGOROJkZyRURUnTfSaXV16GLV8vHCrWslRqQ7+TxDOANAiAPZ4SPsmnjZZ+CnECRHaDYH1QkTlbLzB6j9Rdzxx92hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVEyCRA9TVsSAnZWagAAWb4P/joI4U00ikOyZJmdBkhX\nNhYf2I9ijDnFfKBl9LX4mvXRhwkZe18IgbHPnCnqZKSO7U8GLHlFYQi69dYG\nAvU+d1RaRv/8EVPEVZ3bDHvlrnWMENMCqh6yFf6Kf1TS236rByXhC57CJAIM\nreUViUlMwxaj8E+Kft8VmdIWBdJRVmEtOq+qO+euk57ValpPE5i+sKaukcgv\nuy9HzGeNnBhn9Li4wKY1kt7pcf3G+NtMQssaRsK+yROqR9DpqOIvaNKLykc9\noVWx+Nn1GjhHC1yhmzofhfQZfAnA0hG67KFqyPsnKUEqITkcJAIE/BasR7vQ\nB+abLW/7+oNhBrhSa62nUcedz2cWLL9ok2haIEDePyaDJUVA1M8S2PK2T+VF\nf4xeG/Y3nN7k489Eib+NZcsVGrTZDKKJcbM78PwUHfBvQXeEnJ+2yKL/WfHC\nb/fhNvUV8xpA0ZQ9F+6YR/T+pWjW4hZvX60ggofA7XxWwqs6Z/kMTcqnnzM4\nBXIkjRrJJH6XBCWhcVTw0S8lFvYeq00IObVRRsdeBBNkX+U6VULv4RzWbOpl\n9NaXxnMOfh+GilycwfAIi9En05TzxFNqxTClRL/4cYWzvIE2WJ8Ug0+L9uHG\nutSSfJixEHVJgOSEc4X6mhTvlN0XZTvPWKDOZWZVay5ouhgM7Ibiz3NrjQDG\nbiCg\r\n=ZbWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/density":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.61a28b2b5.0_1637175602037_0.00998501320833034","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/radio","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"885535a1c6ebfd5e1079a8472b5edd1fa6184e52","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.fae6c652d.0.tgz","fileCount":41,"integrity":"sha512-/vJR4gxCIRpBCmYwlPB7o5Nv4Kl7HDGvvF60UOu/JtkNh5hGt6sP0VBsKPVjw1mFAYOBCbjC+mQ9hOPZ36+3iw==","signatures":[{"sig":"MEUCIHfvxwStW1BOQ0esVwQEuob1Ibmt5+wnDONzlThskW2RAiEAt8wfgSu6E+F8DAZ+QCJ95aVhF6vjThZqXA+x7FW1H0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544792},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/density":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/touch-target":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.fae6c652d.0_1637252743232_0.9752311970385277","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/radio","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01823dd1266ea9baba8bbc7d9bec01e2a13de77a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.978a3b5bb.0.tgz","fileCount":41,"integrity":"sha512-dq+XLujVHoH6C+uB/KbzPjrWPUetkPtQuJfG8qxciHbQM93bAky7KYUc5LJSADNVVPExxAVSdy8fTDsF2LueOA==","signatures":[{"sig":"MEQCICaXGpVlAlgJEmTYt7ITTyxAnoOrH4J0blxcUCbWFm7DAiBYNQaI3TT5TscRsdpEnTwkKO6kxcBB6wyBfNaa8zvAhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2TCRA9TVsSAnZWagAAIa0P/AmFSp7Z0jV/vkWBkSNK\n76cqncr03BDzuQEOkaFCUv8JTWFpZ+pe49F1JR0qO7mqNuML4urmjVNYvAky\nXLadMnS+YqKEVS8pjlktT1UOAdYH7YOcNM8CTUrDZwO1a17siFhdA0RkKJ97\nTVsKORKTpBzU2nEuzHMGW/1/97jm7N7Gz7iSfsXucJq74juvd6BrzhqRP2NF\nzRtxvGvY1ARHEG1EM2kbwotCu+ChcUssZNBxeKwkxenrUPfu6gfl4pLCx47p\nvAxWx7OB1TcXtV5J0FQUKHTIbNXFQwAFwYkMSHQ2ivOzd9m1xBUBsgBlZUjB\n6ljucF6rYBmri3R5NP526A9ga8/XJtILkw6a0bEt8Y8uPaJhOC58gMUjOXxp\np6g6SoX85dU4KJNFaPe+d1pTCw3LqnWp9yKMnXpK8+1n0F3xiMh6wZJC25Ls\nW3G1xUu/JUZX+aIlOIKk6ECQaZK3l1vz8CfYoBbcTOEWwgPfx5M6cBjmVn9s\nwV5hh0jUNrd6JScrfI6Uaik8o/KEY84/Yf1v16ngjd+zj07RUXSvptNUxI0X\nZszXx07q7kwywDVpMx/M5vbEL/gHsmjjBjKI50JdpE2O6uxxDaifuYn6X+gP\ne0St8OJ6AaAMBfncgFiyfIRq+fi5+pZeROFptkbRP7mlwyu2sC+7n/WTolbn\nprQQ\r\n=aFlr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/density":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.978a3b5bb.0_1637350802960_0.2464187609864581","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/radio","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91aee56d1f2ea6291742e71d229fcae03d7ae8b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e6f43cf44.0.tgz","fileCount":41,"integrity":"sha512-bew19aWNVN8r+1yI440LIj/8DYn1jnwh/YdFIYcEDh0CTw89wQDz2W6StaJxyGMHUvSw7rkvP8fRO8xgi+xjMw==","signatures":[{"sig":"MEUCIQChrJGuvQ3DhxHKh0TXLa/USAtI+JR74W0oEpujBNDDbAIgPTWQ9pG8w4+rlv4iE0KvDWZtMDoHEaQiQucEjMXPdLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9T8CRA9TVsSAnZWagAA15YP/3JAYPyUZqxrQnJWpT4z\nI6WUorSm2IxXn+p51wIDGlExh9kGzRL8AOzPyxz8BVE1Qn9Wyla8mEW79YwS\nztoNp4vwNHoTl34I6QAiPbb3se6Ms9UtDYweNCHYBJQxDrlKeipB6yitz5TW\nywtZIdtzcSsMCMwJj+xoXTAFAChkDALTcNicNUBYzoNifECOn8kzEqd3wHpi\nac1bi7nzRcfQ5pWdr157yOwpF46maMSSZsVc1iRtlHge3kpW5Zuw5ZI8Mnst\npuO/xYIkYMaoHkwNZ+NqtjkKidBMhbw+zk9ji5IjtdBYB/kSJwEpCQi5O+1+\n8m9dJkyF2/UoqY8RluaPajoNfbIPhtZ9yWwhUAL9DQdqeJyH9dZJC79dFIcf\nUPZvEmF7x4FaRdUN9oebR/Nt1tLs9LxBdxmt/2I+29DtAQP7EWuRGrwNv3cG\n3neAiF6/8g/ahNRlZXW7MC+l//MsANjj2xca3JpmSvEJNe0cgyZEHvxwvhfX\nxA1i/5WXz1XgLDIpiF3VkATo3fD263X5bIIjArgPAqfDlzuLl5lrALwozZhy\nRiHgbeZ2fRjgGFxyOPoyTnwY5Dff/83SiV9yzfuAdQa2krwRfb34dDyFK7zC\nLgAIn39mxJNMFm9mVgdFk2Uucl5cuWIiR/FzkK6KTOElXN4712Xl1c3yiAHj\neDOn\r\n=jXYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/density":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/focus-ring":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e6f43cf44.0_1637602556772_0.1815486550528822","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/radio","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89889b8ee0e1a43c62d8e14e641bc481ed90b691","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.39cf14bc3.0.tgz","fileCount":41,"integrity":"sha512-BdLnWZ6ZXlbdKtNoKKfQXhyqmRN/aJ9TeRw9pbIBts35jgqHMcbT/ErQ3QLDuWYtU4+5mjVUTx5rFc0aHQJeXQ==","signatures":[{"sig":"MEUCIQDMZrtIvtM+2LjyRPQ9co8IDJo87P0dcHkG4O8bjql1OgIgLLigeQD1el4BepDicgAjzkWp/ZjJbTm7LQtl/mr6gwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCItCRA9TVsSAnZWagAA58kP/1bhVrthiZv7XbkTpNwU\n9nEPDrvgvaU4xJqA92qrf0xSW5TcrcSGlHUBA46GXW1lUSW4D9oa0IMLGQhH\n80VeS9ratDxopHW/6/2pnbdKkMMaipQ2oYQnZFBJWXLy/bFmeoCcOBFagyjN\n02pjO7ayk+IVavF/RdjqHzTCbdtQZwhSS8xxTPdf9ijZOSVyuZk89H53QTJa\ncSNNpWFOOUaWbdgK1rN5ZRPBrGAtC2adeUJs5dQEgq4LoPdJA4QS48z2jqgP\nbU2HwgJRwnTWiuuQNySQz2pVuOryBPz4zUZ8OLA4Dl6qPXTaeyAINQphqlCz\ntJbM0yG07ZiW8IsFb5jzlapv5sYBWucxvCdwCIAHvYr9qzz79+mWUrsZVQU3\nv+ngZd62S06FQ0iC40QU5tYn9jzRl37nKppx6wdi0sfIYoM2pQ4TLig8gSBh\nzo6IAuXDxB6YC1N/VcPlUvRyDJruyye975eKPO7oChnsxP8MiqHPOkTxuB2N\nlB4HsBd5mGqwepvPZFCGSYw35NlAJfTfTPh+zyjAPKe/ouKH5o8W7xogH/oL\nYrfrNEEY8EomklCNEEhre5B+lQRZcvI5MyBftmCyrrkKfCI2D/Ar7ct1w9n6\nIXyRBHhKdW0+dJfBJUSCmTaft2oqSgXpAEha4iAAPvJzbCB9kaCbx7dfAy7U\nA+7m\r\n=7/1F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/density":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/focus-ring":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.39cf14bc3.0_1637622317159_0.6346850926645697","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/radio","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cb9c19d75113374b4741174f076b4561031d562","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.93134d453.0.tgz","fileCount":41,"integrity":"sha512-6wdD8Z7+k6x+ZT7+JKoLILhf3GiSiw1i/FKYkrRdmMPkZ0LY/1cog+ER9paK5qA6vdRbBakwq/LghREWv2xnEg==","signatures":[{"sig":"MEUCIHKA74wqb5Nxk3gjFnXYmwyJPZcBVp7+YYLpu72LUcfyAiEAsy/1yozYblL2eIp06dySpatU40wPANjj43DTyfJPZmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtSCRA9TVsSAnZWagAA030P/3TLpYpkgfFi+XuE5MgY\nJC8uIcuEb87EDY6EuOjsrxja6TpU6dwLs6011kZj9YQQ8q9yKR6TzjR4RHXZ\nWjzk9CXSR8048GtFTwXdB6zoWuezWKzBw/K9xHvZqGEH8VAKdR8P/YhcUuLx\n3cUAUpwDpifTxS2BDtNfdx+kbNnh7nZJVU0nsx1uMzD4EJTDQND0pUhekMsM\n8pR5FV3/zIvBUY8yKD+GL/bS5Gw1fUIVhiuDveOkMM5XbeTWYulCgle6R+DE\nvy129vUkkWIOP/bWhdih0GFJCDvtKKxLOyYtsxHurwuF1l4qNDQTnkf5/kc6\nvGRntVgmLBvutI4hmSfDHHnIQ52U5z8KpeABGgpc4AfPzNi6Ca5lFmIh6iIv\nWk6OykutotiNqwnMipa7AK2ZEFEjkyRbwqwmNL5jGOGpKY5UocI7NPKUVCKa\nryoEFgJZU7+N5wVMcPO+3m+Z0ea2f+cB19A7cw+o7XitzWbZeAFgcrT2x7bY\nR7cx0jWldlfkNwiOz6yPm+sO1DEe+fOV9JV0x6uuycvJVHNBz1N2dk/v9qCF\npzDLzebGQRcvNbyryl7CXt1pn7pewK1JnLsJfnB2kmR+WM10FGxpIMSEf/tv\n2FXWtCQnpiy9t2D6hYmTZeCxfU89iRtqo9CSj/vvV+6P7SAf016IKomShIn0\nrWiC\r\n=5SEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/density":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/focus-ring":"14.0.0-canary.93134d453.0","@material/touch-target":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.93134d453.0_1637682002184_0.16229656630040457","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/radio","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7ef5be78af65926d1c6b55e6d4ca1f296072715","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.bbd11268f.0.tgz","fileCount":41,"integrity":"sha512-Lv2wTJ2SwLsmbOI5NcxnabOxq6towH2AuIeEl26CeHpTr8Wjt9/uaHXrnNIMyJrbrdJL6adEI7EFSEdP9QvH4w==","signatures":[{"sig":"MEUCIC5I9pjrsMyEN9+I49FztfWL3wjM8OxdDa2e0OqvFIDVAiEA2J+owVykRe/bntf8qee+D8CHDjScq6hAT6gO7tkaGtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwfCRA9TVsSAnZWagAA/mIQAIYadaJ1Ynp9IOl1KZtd\nXrjSk3sKJOhEZQTX5pRe2qd3/ZRj3Z82m2QPVBghIRlkhsyv8xJHIfa4A+qd\n3Kzm8hw4esacGsg7s2o3Z/ls9t9XM+qGKn8wyfq386zo3uU29nyJAi9bQyIG\nhigFj24FBsOapSuRL5KSGoSm9aTAeJCfcemvfa8lg2vxevkGi54fIUAFwpYZ\n4xiYAaVJzTYzr9ZjastJVJiu3QCkzaX5f4ZsNllxTuMi07EOwngD2b4llPQy\nAQQaGXe1XIcTmIrXb4bmwOLzjiVGj9rM8rHowTDf85oXrRi7/Kh+nx4U+EdS\ndJBS+wbLL/FePQZJTmALtYQ+sB4t+pV/xNNpm+82NrTjeo3t98M61Oj+0QmH\nrAEJa2GPlHWMlNtDz6yhuybIC/3F+ZHvtpqSIDaeC1rCzIDLKboFAdg3qVV4\nmNHY1ggjJRYtjIrQZaPb3jvDL/u8qUFw3GH3A4S91DeHzdZRQ1FVwMfPsL8P\nnBQwhs1doV6mdsAh0w+i0LIM0EK1vJZORn+h2Tad3PsOQCALwClhx2l2b0JA\nvK/BuEVQGcS9wQVZf6u8kgji/GcVAVy1Hdo0vE3a3HRbHQMPihljUg/a/LJ/\nfZKCUETzq//dpxCg5S4i6mO9vOlpykiw/zG1XVTECsrFfQs5wYqeyXy8rYV5\nk4Oi\r\n=KyiJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/density":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/focus-ring":"14.0.0-canary.bbd11268f.0","@material/touch-target":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.bbd11268f.0_1637706783053_0.05131221674925657","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/radio","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6aaa8c5b8187aca50f36f23dcedfb5d8024982","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":41,"integrity":"sha512-mIdIMfJatWqAtomENrTy6EPbudZ5aNQk/Ng6sEqaspfuNdoK8JZFYuY1TkXEv9m0vo2dkKbUI1gk/mxAeFuOeQ==","signatures":[{"sig":"MEQCIEGjCU20FpJZ7spLKSijiCGHcSDmJkpykwyzcCjgPIj7AiA0PirhUJNrQOUe/j1iX41JiQvVWJYmnm2R3eiS5ah0UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxgCRA9TVsSAnZWagAAY9AP/i0upSXxrCzI/O80e3jc\nxvha14Itvb6S/XvAFvZ99YzoYZuKUBMYcdi38+RBPb4m2SvkrkldA29VKW2j\nb81/AWVI6S9wgtu5vTFV8yVCR/Cxvi1lBP1NG/ikX/TEildUnCif2W9hF8wB\nFmXUCUk7jLk4W+mB12xpslqwGQLDrgv0Kj08Na5IqnMivv1bkb0j27FvuYSz\nfnSW1Ikfpv4K9/vh870sEaA46bweZV0vAIi/pJ0DpaSVZUkEMP/aajUDBCnw\nvzefZAJI8/5/QPgbfH4HLDF912dQ1leHItNRTRtIQmtlu1fV/lwkG390aiZh\nOCw+apZE0QsNerqYCDou0js+NW9rjNeUPyGE4y6ZRk/FcKdoFA7DaoHOguc+\nQWAEwNiRoXuTh2Fhw0Sgy0og25LY9TTsCuD/NBstPhzNiDQJESgcSR8lno1c\nhRI5sSLMPTs8JrjDVhq+H/W11I+pBRTBu5fq/zaNTGBpqxhr9cjteaIvM0pZ\nCpZVz5yrglucRne2R+yWu7+mbiA8oF8BHq7KNheUiH6/fFQNP4OXvfhyFWFn\nTNWZd5xJ9ybzakrU+IoEOcKU9mS3ODkWNjBEWWv8OJSiDeIvKmEDmLC+IGAM\nKbO8d2v66nHhl9Y6vkGYhvIHsldBtJ8EnQ8RgpH++Ov2Tb2BcN7GueqNW8f4\n0FV2\r\n=C/bn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/density":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/focus-ring":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3db9c4d3d.0_1637768288226_0.2763008979098245","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/radio","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26ef259c7ce3e4afc1022b633d0383fe1e219ca0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.78305b6d5.0.tgz","fileCount":41,"integrity":"sha512-bSElAOy0yefBNfYkbBbol7TNUodBhCp099LhPQCgI3qqbb6tLldPgiEVnCkDPP4KidoNlaDPpEwooXhbjo7Xgw==","signatures":[{"sig":"MEUCIQDfpik/KAiEmjXUo8gbnJLcRjsohiEF6hBku6obW6hTIAIgG5B+VrJ6wcu2uHwzJ9Xt4RTYm6OfnQr4pNnkEcEgICg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpe/CRA9TVsSAnZWagAAuD8P/i9VFXKVwr8lfiN3G+C6\nssSXwlTSgqFlhni/LoKwPPJ+fp+qK/kD7KYZK4OBJm9npX6EyHK8Q8ARNa6p\nNqPs6s7EDg5d4egdNyLn/T37/HZGB96XBJ8ZlqBR/ZaUcyn6f2u4omhpVCZP\nXVR/71V+i3gpPztH38LvhJ4ugRztnMjFRR/tMI+7EUkV0EgXolkcCxmfykCh\nZqrPh/50X9ftCuqsTAiox8lfKXvKfQzZc+Ei+n+so679C55/Gby/7TDWIwkb\nTQgd7dV4vvKp248dXoydq7U3TK+F3+u0SNYUKGwCcXY7/YYAn8h4gEZC9xtQ\n1WQRiAREzCK4kV1RdRqNvL6+Pn8E0G9tk8mBUTqdC135LiCg/0WDrogCmVVV\na/6AkO/i/PUVyhYvhH8EpPHPRc1AqAT1FD+8NG0lNSU5QAYJCKa6+BJpoHMw\nJ9SaN26jGbwCP6UP3jxJf1/IFJ0PoNRu+S/crkP8V9xbzZAZIx2l5thAy7kI\nB2SydboUs3sGYq1tGVGOqN5VnVf3IB1SLeidajM2DLX01JLdHfd3CGKJZRYz\n5r0Qbxj4/cmhXCODbIS38duwW3pPoV3PLjPA22Lm+ftngrJwrg3brDqjqHGU\nkAjxC3ZSKWElCc1xw6NAp30baxYsOIgN1QhjsPEHhrOCVZBs+XIH/v8NxiaU\nSkDT\r\n=LXcO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/density":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/focus-ring":"14.0.0-canary.78305b6d5.0","@material/touch-target":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.78305b6d5.0_1637783487203_0.209835851923025","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/radio","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"597077a66b9dc7397a89320056e3196212126138","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.43d08ba77.0.tgz","fileCount":41,"integrity":"sha512-cKNqVbyDMpHTaC5u8HpEtXijI74TpNVfHmkF5KyNB8VI9nI9Scgf2LxPoyHVI9poO2csz/u3qIv2aZITTaJJVQ==","signatures":[{"sig":"MEYCIQCpMvGfRPFeeQeRdF/oKK7oEryc9YoC8HuCIf1zph4ICAIhAKjHFxnFNZGS2b9b+QS0dhoW/LYJjA2nu9fGQUtlqbTs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwvCRA9TVsSAnZWagAAdR8P/2Ii4zq4hHPejemh+Usq\n5gavn/U1EnA5hICdCWKFaWrjJ8Ych3fYsHxZ6wK0A7nzaP20iP0C+E9hS2Ib\ndwBVfa+7+qkvNtEcR+aiuSEwznSgFUkYfnkxTw8IDTcja7tenLsQONkDlp2j\nXIU2DbkLAA5nm6mTazRxndBwD6Kf5gqnY4AB19gw9QYUqfwIV3W31+oeL2Aj\nUX4laZRJWbAvaBblrxBHPabRN1SoPfxBiyTdt8/6U3Q/UGVn7CV4oKJsKbSO\neXgkThwKPSJCbuMICs6wTfQ4nOgL2vb5fiSzmIAv/QsK1mC7RTxV9Ego/Nf4\nCa+oEF7OdJ06RhnOzVO2btPwTK9KRQZiSamtWOyUKrHYXxrzEvOGX/TG0glV\nRqDpC2cXTG8af16b4o6WAfFHUSChwDCpC6nVeub2A4gvd37SUiEZyWrvKdPi\nroKIInmZQ+ucP82uG22MJW2mpuTyU0GYAdCo20n6sqr1sWn/e2yDOS2+Ckmj\nTy1x29x2U6Q8aMET4bQ2spcQhPWYuy4qp1vI9JfvuUz0zyuSqxCI2u/arTB9\nFm2Ovee3TOqjmttzpW/ztHAtFqeHHPkHiGTttuR4/7d36qf5MobrQI2lNDUK\nCM5Iz9VGGCxqt1tCApDMn3IoQtuPb6bIa2OD/VoRr1lr5bK6sgpbDTZEnhsN\nkvCR\r\n=QqbO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/density":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/focus-ring":"14.0.0-canary.43d08ba77.0","@material/touch-target":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.43d08ba77.0_1638313007639_0.557594959668575","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/radio","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a786694605ce941a0eb82451f518ca6ec89740e7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.17a072535.0.tgz","fileCount":41,"integrity":"sha512-xbW9SfnuIG7wD5Ph7g8hbx9s8cktE1XloZE4etigtMaVq17818+muaqVIdnd2e3Ksu55zEVsT2i5UEL31XXpQw==","signatures":[{"sig":"MEQCIATQVkdrb03O3DheSx2vW1j4JWWzzTv8iODVh6Uoau0jAiAFxob2DBGbL1oQpUXU2Zi4Yf2HE0qxhqMwLdS4Cy6GKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsKCRA9TVsSAnZWagAAmKAP/11CATJodBJOfZcmpgCR\n2mo6b8b9LqcTLLJKlbOvmS2l9/rxDAMIMQJyL9cuxzEX9EWUG5YnHRIkcvGD\n1ZwvyQsx2CnLbO66mO/n1mHxSsWEMo7MZqvTbJOsh4xPxj7V5FUT6kazBdUh\nVWZmplAHDccYMKfr5r9Sm2EBSkjp5vjfLglx4MfWZzRLrVPvZRUkAoMK3qdV\nH0NFrjFX/DuBY79FYgevO469C5y1y+Z2YG8hqTXiH4yQmOAdIaGasr4kqbR5\nsRWnPFgRR4n/zeUvtv+MrHg3kWozR5qfG5MXYc9zchI9Nn1c6V5vwPCTbm5F\nRcpH0TM8bP9DQFhWCHtgWnELwUzAYjYXGPnOEPbpo8NJapQCga1ZPFu5vLyp\n04NrDDcqUImYL4N5TbabGK1wV9mql8OvamiKFemnLeZvQ5t3rNIUnTyhYA//\n2i0082hb/tezrrlQavWraVnJoVBor3vRDGzZPPcWPRxweUVmff2girywHk8g\nz8bSFSYCwt3kV3+YsFkMhdY77nzahQGiEGFxJT4MmZssIkBca+cqpq2JZ+Kw\nVFx2UMedypMb4mQ77D6Y8ly2IqsamrQ4M7BsN/eYHBizWr1JrmTHtDWV5cxc\n6ob1HywypG06GOATWuU8hH5XOUk2xsiF67Cv1ExPk8oXTMYp6O62MIhVpUeY\nG+Cv\r\n=CSdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/density":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/focus-ring":"14.0.0-canary.17a072535.0","@material/touch-target":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.17a072535.0_1638468362721_0.5886478106062618","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/radio","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf17f5563877c376ebd3be43216a77c13a09187","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.5d809696c.0.tgz","fileCount":41,"integrity":"sha512-vMr++zI7hm1lbDdXmr8I9k4NB7KDpsSehWKsSf3KAFK4Zzi0339d1eFErZpFowfRdtp7WjAO5R3NWiGorvOPFg==","signatures":[{"sig":"MEQCIGhMjkDCDMIaUTs4AgzyqrFzNZM/4TjLdSuaw1o4SYjSAiAWT8jVuR74DH1RZxfm1KDtn5PunyyinsQnOu098uUlrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8nCRA9TVsSAnZWagAAw2gP/3PmskH+HVoGcL6Izpja\n2E4g57/6BCm4+57dfB/U5clTSWe9pqJPtTV8WAtGtg+JSx+ZAcfKu3rp5quj\naLttuMW9SwG3QGLvJHems3SS9PVGoQBpehva6tYUYMVAwPUp5+owrjY0Zulg\nQpC2vuSLNHRPnxFtVXOFjg84C7ugbIDhDmFv6GN8t1phYxhtVNJuX3fggoXV\nMVscBEGwMP32StJepRqbn1IplhYvDWSFPv8jM3L4J07sGZVWKeaXSgedRKFX\nXQHQQsCCYomt/B3mTwwx95zDpANo0O0CX9PPBzlgYlGukaltsE4Mtp11pVqm\nuH4gginS8CzTCUgLFeiByvSHNaRK6Mw0IO6sk7DfK4WXOBZ4W5eabPpcQdR8\nluR1g4irFP+Bwh+zVw1NSD4cAU8XGniwaI8KZybfAAcffVzaXqNUUyHGmzRx\nvbEI8L/rJOW2c4IWQcpf4uiyINq23nG+b/9xKdHmv3DrSL/jOFNTOKlE1Vux\naFaw5tBJGheuVK9XkPfWur1ZPgDMPrNWPaN0E9DfcOn7EXLow7qmQEU+akHy\n70Pm2U0Fq7zyj4F3vUoSt6mTr6B3VbBXFIour3nBspbJmH3ySa9LHP1d/X0V\nXGMH4oxwGbWVzi0reoO0/dRgKKsEtK5Nah7p/OjNcQEiSdjNf5UgxF9IioM8\nXA+u\r\n=LLsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/density":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/focus-ring":"14.0.0-canary.5d809696c.0","@material/touch-target":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.5d809696c.0_1638985511133_0.70198349762493","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/radio","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0390b66ce0612bec74839fb59d1ad5ed4a302958","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.b6510c8c1.0.tgz","fileCount":41,"integrity":"sha512-kTr6r9gp+/VvVXkr4J46xXrSEIV9oKRrXb9mOtZdGhftk/bm8BLAtJqTvFt0F8uMVgVFGIn6+0fdKeRjVz7VjA==","signatures":[{"sig":"MEQCIBZlANUZYq02Zhnt1GVuKfvRIX2MbkuSLGk4MX1ht6g1AiB5haxrAsHNMORG3SDZMCuMpLMXJaxdHSYW//J0C4Du1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRcCRA9TVsSAnZWagAArvQP/jdllqTu+QexUQ3UMXzh\nOfYDKAXtsd3H1uYgLjvUBS1/2XjvPr7uyFTpfoHYCU92AQX2rfUGqDi/SmNr\nq0Zzv8DpNcxcOCY5Dj0rggTaIdtjvRjTHeudIz9f9dgJnI+zyglsDaqd/i/L\njSPBx/h48r2E4rh9SLUP2eLwj1KHFiF6D/pBn7Pc7brn4pcRS5kdAK7Xae+3\nfW7AtmJJ5jCR3G34wyMKQaxQeXtIhnwHIya3PgPMRjQQO9U+Xdk/wo6CMBfA\nfvSW0K5TsKj8i0NPVg6ILPSBsuFEpF0RBB25lWKL7lJ4I4DbLgmorX08CPGz\nISjwAuoEdEGak7rvFGQi5x933rnOgRPLtAM43lEwhQxlmBSyPpllGcxFB+ke\n3RPdu5FXul2U4ZbDkOoch61zJcFupLmA+UIqMFQ2Zy6XERlLXBkwPRrRPJ60\nfy/vocXk97xGg+dynKN3GkrCU1B3xBHAYaugq5JxZ6j1sOMGSPCzQq27TdnB\n6CqwEpm/OkHRJJ1bsy2dWykwTlxH5qSAUqXLRJBapH5/fzk+YnDFIzMZCqo6\nfU8AhGdZnPReep3HmR6aZffXLDMG0so0C/962HF2ROw0iB1MNGC1xwplfDOq\nzF9gRVgWIaf53pkdGy+KBv56kNNjAm+yPsEezVMcIVzRDUxLGr/7bAuOUlQG\ntops\r\n=y8Ur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/density":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/focus-ring":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.b6510c8c1.0_1638986843869_0.3765071184923512","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/radio","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4125d7a8948c5454be3907d482fa4e7a4c6c1127","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.f460e23da.0.tgz","fileCount":41,"integrity":"sha512-cO+GmYaI/e2Wbcnl9048+kpqjDLibKtS1bQHi+F/Wi+Z9aROohQg2ap6ZN04QawoeMum1Xazq4Iv5PnN64Ri4w==","signatures":[{"sig":"MEYCIQDYUg+1t/sPYLugh+SceXNXrh8ewwl5W26+11xNPgBLCwIhAMcMBr81VY96hmMR71mu3uOj69k7nQkHpJ/FE6z9enul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GUCRA9TVsSAnZWagAAjekP/0ZrsZyKwb4jL05FnyxB\nDnuC2Fcv1tPMod+QiVhBJ6vNZb12fHk+57E6zrYPS4OSnZ5Etl/zfqhSGxT5\n0OIdgsHkMoPGJ3j/+ubYn0rC0apVv2fezrry6ER5aGJ6M4AXnUxNnTP7/xor\nn9bDnHc7uId0zscN99+vQPAh2wqHPo3gv/ewwJNr75f4j7dLIrum/0VKJ7ds\nub7m6Otg8Z0Zh3UVcyYzlJPlW7ZTy5a+oUyFLXAM+fJYZhPRBtzXMAf0yqqT\nrIODStEUhlYxQgiA56SPL4M1iQh/wz4PTEDu/GPki6FkKhUuBODjfpDXpnJK\nX6HwAXgS++dhdDx4gPdI4JhihZ+MSsvhbULM7Mi22TGE8bYubGXUa5ll9+Tu\n5S8UHP/wsCA/XimU78iCA8OcZuIQAUaaZRXjGa75igYoZSkMX/+3sOVJzj67\nbbgVQ/A0DheyCtf6IoEDsjDdvfdttg42yMOyi1bCyL7wPv1cfOWeE2MT7KSJ\n9gGCbVvglgf2d/2AYZSQKFyxLbdNVNEN412i2TRePzIUdBjhNnADwN3Uoaqj\ncBVFQN6MDAp/w5NJF2mhzNEkwoCRXZPVWX+ZMHJulNPBRD+ALIrxwb0toNAR\nJTYe3TTb7Bi/vaZkwDH/zUP3AzFuhUZslfusncw2ckVvSpXlS15EI4yswsRp\nL+Mg\r\n=1s+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/density":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/focus-ring":"14.0.0-canary.f460e23da.0","@material/touch-target":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.f460e23da.0_1639149972070_0.07140179577155759","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/radio","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09ff630d3eadb3247537a5d2805d6c4635fc8fc3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.7d8ea4624.0.tgz","fileCount":41,"integrity":"sha512-4+HtqzWkXX9HDbXje1VW2812Q7r9+3T9hiqRIVq+nBMxI66nGcVtgDF80+1sLNVpxiyNmPWMQLpSwIH6v6t3jQ==","signatures":[{"sig":"MEQCICLEMRCmjyCaGeXO4QZVxXvppIKMVg2JCSS3gtoN/9w5AiAsUwyK2bOwOeCoLsdECAyxT9WLU93/42OLxeq4q1TQhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6q5CRA9TVsSAnZWagAAZIkP/0XQKqfAStG+BjQZn2Wj\nxvc3kYrpgjM3LR7sHs6VAIrsxhk6aiN1ikbovVh0yM34nq/eeX0wy7SgTNMF\ntjhVoio3gDMKjsPBYa/JLzAyVY7P4h2BV8d6+i+GiNbugl6F6jeKDJmcxfuh\nTAvrsKIcS02uFXPqKyidkL2NUTzLesVZHkJ4HwkAynFXTMowvOqooeEKGUnm\nXfgMRC5KE2vv8b1SR5fNWE18z2IPZZgDi7fw2yC1t6Sg6ZbSnwiMWrjVR4yK\n3OjmC539+v9jiPjDyVOmA6h1oWhIOh5GrTmvUgnkhWOhfphJiNbT7iwXJ1Pw\n1ELc04ITdDJ3aRPRK/vOizGLMdXsL/n1HHfie/Q0zTMXuaAR210bSiR8K/7u\nnhIco0Duex4VxjMPso1x6NznzLI4sVw6QXVIZP94pUz/1UFrq2Un5NfdYtxE\n30+qtskMVgxCdhimPy19/ZRaQBYbUcwhZ/IElCihPK/lAGOWuWHM7TtNxaot\nwCN6/GLYQ5FJrwxnkYQ0u5w2T8n5Ngio7G0TcT+5TSjMLbUkxNVLz7AiXNOW\nPHntFgfTvRts0spIjk9nENzTOAPC4AaV7FjwwBTYG93RJdqy7Hlzw6ymPKag\n/vu1s5okRh0FTJTYDvvzUvoCk3nAAFiLpQoupY8RU+MgYKkRnYyC3nlbB+mA\nk13h\r\n=fIfX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/density":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/focus-ring":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.7d8ea4624.0_1639164601575_0.3668653778880486","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/radio","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7591e457e3443a7409552a75cb1ee0bbc6e7d80","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":41,"integrity":"sha512-BnYR2glZN1swfwVnfStlKsJ5oF7kE+qYHmX9e566dy2SxvAOu1JLuK/dWYLlH7z2CFgJ7NsgKYfbZIcpaWe9wg==","signatures":[{"sig":"MEQCIAPtB/3GH/dqFYy4Clqycdt+MlvRNcfDr2/h1Dk8TEjgAiBU8gkRPUat9fVL5MrvXFuolwKkM8OITvQe7NfvaqHDXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwaCRA9TVsSAnZWagAACRAP/A1Gu5L2XNcXnPod124q\nZKdsp3LBQon1d7gIJxbiVkaWJrpwKOutZ1X6ATbHxjCCCJvBfhdeLatLjZth\ntqhmiGgbEQ5cTkl51wFOJbhraXDpbNU3aS658gcK1nF1kACX9JqFg5xbobIY\nXhJefn21ByDIgA+iWfmCBzf71ZQJm4mr1Py+zd2pow6pI7rgYuDYnB0kXSGV\nVzJJZGP5SohuubqPQsdvgqVg6xxn775EN5zgaOkdtvOM5wNsl1ym4yvoCuFR\noZhHOgxQo6XEA10YVC/KNpcm+riNtUlGd5aFKAf6WBrYMsgRyZk7tfFVoUj9\nNdb8reDC/NkgTtlEDnHaxlFe2HxJ8CoVge1knDbAxDeGGC5L7f4xCMFoffd5\n6SyS5GSwasCRpy4JX6unCpUqx8Cy1qxjlfpa2ux2qGW3uA9CkY1y956R8lUZ\nH5s0e7JILuDSK4PEtVe+f7VsudUYp7mALUmwWE0vQkVMKyJyREknhrdRLUrW\nfnCH1flrIxpPCzAD4kHUqt4mQ/oyLAAYpM38m0CWN75mu7fExk7YRf/odxXP\nB07dFnF/XiAm3osvVh3ATQob1WWg5nPvyPvaBm/pZo5Jhs/5KWey8NmyO4kI\nAVggvhR4H3AAyhK1ygwZvgGveVVBC307QsRrA7C24uX0h+Dw8bFbdBrI6Epu\nBJpl\r\n=LqCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/density":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/focus-ring":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.8fffcb5dd.0_1639472154518_0.24920452361230505","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/radio","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"807df370495f71fdb21d2fd6660e156dd6aa18c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.21e1cb9be.0.tgz","fileCount":41,"integrity":"sha512-rgGjyL9msy0fDhcin3aW2BFk/vYGrgANB0SrfsffAYsJLyar18QOCKLBOqFs8sbN2MldSKfneZLI7AsvGT/Rvw==","signatures":[{"sig":"MEUCIQClCnEVSozBHyTfTOYITg/oye1Hy5w5DmtlqC9/qpWPpwIgS78R5Ghf/GEAp2JPiDLzPyCdqpWpzCEex856QuiL2Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMzCRA9TVsSAnZWagAAnOwP/RMkXv/dP++Nq4HklK1q\nIQ+dk+KgRzhnb9ZnGul5AkhgPwJgPF1EUg96ItDP/Vd99Em4++1mH3Rat17M\nXqBn0Wdc0BFPfsZ392LyIVtAHPOoWc9chyt7ey4tKjlA7lb9vVZrtdY1vdxx\nF0I1mzY5UClenV2qP0n2xLjkJWTX0ZU3JRgybawjXXRMkfHM179p1txnmxkq\notZwRdfiobbZyRa6UUI4M7BShNeFxqNMxrk1QwN39crmsNaTCxd/SG+2QKFf\nS8LVaXGrxY9dTt3hi+8/oRNpLDJp+zm1WkucTGpWI4THG+z6bZORgaF3FHRR\nBswjV3S+pbFPaDNDh9BQfRvsOfv/teiF5ypx4X4pZaIV0zdYOWPJ6bEedvhN\n9aV2k5qqlTRg05JGsxq93LGvUL+RxsF0QfgFAupLqWtWGR4KRX9r1/UgIb+O\nWs/nmXuSz+wEwRNoPpZIouCoN53kbeEWS4mi44eGxH6Ez/t09X0LPw6EAgu6\niUbewWwM3c7/Vf+b3oOJrnebvSBhk7Zzvuwt0VmRJLVQ8wJ2f5n/rHNQSIdE\naEEcvJrzmGdzsvsLfU1KCpgnSiefA4J+uXkhVsCTDxgQbY6inckSpUdHfQa1\nF6Mnr2WeKJY8CJBexqtNpy1hjpLy6fK8nACHoMaorpiCqnoD1f2cup5vm7zx\nk/MJ\r\n=5Luj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/density":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/focus-ring":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.21e1cb9be.0_1639510835588_0.6420145139938764","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/radio","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2a4780a695379ef39465ff3cca7c827a8ea8bcf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.ba78e8724.0.tgz","fileCount":41,"integrity":"sha512-l6xgLFF4EZ/LqdPVClZMBKqYqBfh+m9mgyg7G03Uz8TTmu/KOmRsU19MPXUAbBWAsLVm4CmRIq3XtepAIKllQg==","signatures":[{"sig":"MEUCIFUGFnaNKF2eZzkcC+VHsPSQ8wf6NF5f8/zmQ16bUU/kAiEAtCCUrfYEy5uQnWZpZSs12zJ7ci+Pyg7HTw1H5gsGO5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiZCRA9TVsSAnZWagAAwsMP+QFkGXEzIFuKLttC9Jfd\nelgFC9/QxFGvKlkk3FR7chPcHrnr3I7AF3gRziT2V+z7Q2LfxgyXHidQUikX\nHz0eyqFnMo6jRhk/N0yeXV6F6xCwI/4K1+NgBGbH+teOCXfxf4DawNbMo9KO\nKWkF4ZbS8yP3MkXUzOPsqLgJ80OPPOPWQU+FHvKR/dzap+MMC6k65xK4EH2g\ndRjL1+2+qcBSyvdKXaqAxgrzPX4jqRR9XcYbw5kouAvGhkEKXrAIVjkLLAmG\ne+rgADMzwWT11228/NRgrH3wh2reaiOZc7WE/lIAwSIhqe+NiaflmxvsEGOT\nyjXpiHXJeQpCRQODDSsOoP8AZ+4E56q7QCDD635deNU5LAOKAh7O7vK1//P1\n00+q6yWZ5POKPIfbjNk5t5yjqJOnWLKGFBASBCeEgb58EGcyUd6KcErJQ+KQ\nybr5NKC5ckcsWVitwMLa9I+G0Nscx+9k7NzTAl24j/lepSEJScUIXhPWH6aQ\nspgkm2EWBKjCUSfxVYMv6wrYW2zhHWXIkfy4i3k3I9ZX/4xPOYNp6eUIRShG\nHnh+YY9iXFYv60rNpP5Ko9ug0yl4yXaNKzDGZVx2RS7iy7KzpWiaa2/zDjgd\nGaEuufuCQqlsigpiT7fx1G6+Ak941YplW7HcP39oQw3nPSWWrGCG6smvstop\nNceq\r\n=40gH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/density":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/focus-ring":"14.0.0-canary.ba78e8724.0","@material/touch-target":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.ba78e8724.0_1639606425737_0.016346855222698853","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/radio","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c185f06de449f5b1d29b6426aa610f70d1d66d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e3e073c00.0.tgz","fileCount":41,"integrity":"sha512-KxvcqiexnA0NsRDSxoFrY+D3M53CS1XwiaI9rhET8is7QLRR3LeBj+MIP2ioPd4q8JJOQ+zR1n9eZs6mc9s9gw==","signatures":[{"sig":"MEUCIQCpxBIgW+EG3h1cuvjhMAmmzcKVMmL3RjgKHfe70FH8wgIgD34YWqPh1DvUR9FI43+WlrXQm6lU1N6G6iJCPZJ3crQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFECRA9TVsSAnZWagAA6cMP/A7Y0MSQ6jQznVbaDGIy\nmswRHXKFu7zVutjb76pfg/S55xnNE0DP2xPSfQwxfL0Vsf9+L5H/K6D5eBFM\nruyCX+gGxAOjMsL/ljuO7h5tN0KIwcdh6ZyBtjy5lzbVcU5t3W/D3Qm4ukWX\nljg0A0dlTu0WqpMN88ZV9X6lHJ0E5X0C7HAxnUewAix0ED2hvgLfRT61IpXn\nQYTMVRnqFsUMi0HdOXdLNOXTq9Jn0DxBIb8mpaoksInNTC0Oks8AmRMZreaz\npMTnZ1ypfFoHrsCNl+OewOJ6l9HbSbgBwrGwec6tVoUOa2d9UdVIF1/pNfm4\nZMGzY92ij3/Br9UNA16w86EJ8VUkHBjBLlqvdBKBy0IhLYIYYEAKV8bmvYJP\ncWmmzV/bO6MJiVM1lO0zYT6WtKp5RWcKhF/Hr/fsSS68snW3hk8p79ka2CNP\nL3rzZedJr8qfu/Sr37ROdjVYYR3RK3QRRjkX2Qqlv7FvyUXzyTowmary+xC+\nmTizTUrvu5uOvakKJTh9kmrB7PbQE+PJwi4KAjv2EtqHYioeHdOn68mC/BeW\nukZIEe5SImr4y+U+BRLMnjE07AU2bvOs/a8PWQyR8m86yyWBie9paBoN2TcB\njmr7Jr/y4gnRN7IKadhwLbRuy6UsqeUm77JJMCcBf8g7D1VFBM25IrMTv2wE\nBNc7\r\n=qF7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/density":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/focus-ring":"14.0.0-canary.e3e073c00.0","@material/touch-target":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e3e073c00.0_1640034628732_0.16431637065472993","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/radio","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08361e8d0cc0143659f35e40e578f7e251285179","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3366a71d7.0.tgz","fileCount":41,"integrity":"sha512-B0qDrCrphEEKWDac1T1R+sS6lzMlkwFkTxoy+4RTrzZPigw1D4u6v9svlJO77Qi3apiZnTE4k9T+NhruVfn4CQ==","signatures":[{"sig":"MEYCIQCZpwyamTRfo468pgSfeMdBMY1fQWwXCy8QNJ2a1bu/eQIhAN1rvd5f+llahdpVT57OE0Y0EbUcsU1Wcy4FivpvTHZl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsKCRA9TVsSAnZWagAAbQwP/RtgtcJEQH/K4cp4mb2I\nmmVUETEEHZDkBRuISqiDl3vV1/qczVvSFw0bJ3nEBNKxkeN3kNYUdqthPAjr\nCv6kZwHlJtNXIsOXaUgM9I3ROutEd+PyS/QgjuewvxheEZRW96sJTfRNls3G\nX3gWxR3oo809b9rTeT+JjiqNQwvHmJHqPchoQebztdncrogXqjRXjYTJYOXe\njGR9HTilHBfvsb5xKUM7EkHCnaJWANC4d3fjQgWFGeaVoxFT2jBRAcE8zzA2\naRghTwSbgksKR71JbdnuW+6zJSc/eYgBdfIpi92+cowBPoa2wPj5V5PzxxWV\nshL6sy+Fsh9MVrmXYvlGPW05wKwYaWXTVOffiZGWoAqciF3cjNglB0ab5Tsw\nFEyQhQK2Uq7loXUcQU+bzmSXMrmG+enX5PnpYPJGnsNb4fWe+KYVS2HPNyYf\nje3ueYLIUHzEK7+kBAMBRiPhhyz8fC7I7Sd2PGZow+FTVE34uWRCnlkPCcSv\nPV52kZDWJqHLpWjk0e0BSBro5ajBGVwexhE5faj9Ka1Trmp0KXiM8tN41nxt\nQ73uX3SWSX5k8qlZAkZiAfFNKLbblMZ+3x6lCBVvIRnomYmwmJr6j5cV6K/P\nyxdBtBvEnoirHEYT5jzT89jKw+4MI0C7FA/MpbzDRqrvMME8b9geqNUj2pze\nPLvz\r\n=FF/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/density":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/focus-ring":"14.0.0-canary.3366a71d7.0","@material/touch-target":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3366a71d7.0_1640176393980_0.7683966167577878","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/radio","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c19e363981d8032b79c78586c395bbda53b70af","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.c047f7c19.0.tgz","fileCount":41,"integrity":"sha512-GgWexshtJ0I/WCaEcTq8MpnRi6/65nY5D3UQRska3KoH4/bTwWEulGRibG2SGcB3WimhkGb8wK+cGA+mW9kC/Q==","signatures":[{"sig":"MEYCIQDhjD3bVsdwI1EH+I/bBWoRHiW8akn57qMGyLM0wegEWgIhALS9b6x+3AAplN4OKne69C5w7NZsBnd3WZbub8vujuve","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ctzCRA9TVsSAnZWagAAAkcP/jE4tnmjl6FHvos7hk4z\nBbEHGEzWxRl/THoBbY/81ubt0O7zccXzn506xUYCR3uFZU8dqHInIiXYIuLN\nVx8Ucde+yt0r6+OdVHO+v4zipij+7HyEjgpf4sPk7Fy/Qx5Fvn0IOUVyLK6W\nkj3X/7RjJol+wXkuL/QEg+Ned03m6ILo3nG80nBU8r9eOd8Y5w5aIgNsAOCX\n6O5WMpBwbIO5vLJG/9+nXepKwXUVbmtv+wNNk+M2iu65nhhxyjUYVnA2LWCF\nZUWBo37QYqhcwWT7fi7Xt9C1rC0oYkV5j7wwyZ/uvUTp2usOqZUFMZSg79JQ\nv8RuJgkfPpAHTotmBSntXnz9VnKENUeBLlBbtp3KUaThWZJpcye5G+GlUKs+\nI8lbdhRg4OfAG3oqUKsbtaM36CN9P4YjnBPUWO/k7id2L/yP9Gy2jx6hom0M\ngb7/tUEs5Djavz2TpEc+RXaqwMk/8Ks+80Kkrv+my9y6c2g/AuynzunYLCuW\n7XI11xDOmQ+nxqzePVYl9hACH4VW0LeymN1Tq+IhEKmqLUgkohnHHcAy022a\nq2BfyyV+qfBQtpV4y8xglc+gftldnOXZZcMezVdmFWo0Exz8RvJdSl/nkVbR\nzDRbj4jWyGyFcWVCJ3+OebnmGmEp1ELNTOC4mDtcdSV8wxSU5Ttlm46cMxWD\n2dSf\r\n=6DPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/density":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/focus-ring":"14.0.0-canary.c047f7c19.0","@material/touch-target":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.c047f7c19.0_1641401203128_0.9733348816482457","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/radio","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c86365c6b26b5880c919e70a2ffd34289dc017","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.05db65ec0.0.tgz","fileCount":41,"integrity":"sha512-D1q/1mzBI5M9N53Qy7zh+6fIG5EvZvw3Qbxy0jnDETCi9Wtdo++7LQgtODDmlwjqC9PR3X35mFO6dTSw2xlxeg==","signatures":[{"sig":"MEQCICOf16JKfa9VcInnnQFXiIA3zJtwzUMU/TWTWblwzKIXAiB8Sxeg0Awx7xgW+MLA2gyXNBm83VIORTgNPCKGEDws4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOVCRA9TVsSAnZWagAATacP/0uT8GHobCxjfqotNUsA\nohyc+Z0V8LZ15XYWw0Jwwuj1B7nxbc0KM2rc55KD7WwxbpUXzEMrBvZM+ekp\nS4OuOhMyI5iM5zGaewMl8xrzLVUSxtPIUd9+F/vRToImpQCHUX3kvNI+ubA6\nJ1rQYgJNZEuHHtA1q+s27GpEzT+3LfRYg7FT1ykvjsVqdT+YfCMh6+/ncA3z\nvkWSjtTJCv+V0QktmOjpP9vECtjhzcIGyWuC7CVaStHVW2KGsAFMFJGnW3du\nys9RqkGa+10SBDNxZgc8n5OQ3+cUAnP/llOzQeiwL0b2KEC9P/u6JmQA9eAc\nIQ3L9FqxoPsjbqmyqm/NLUI3ZXbMmriSwg2flhFibKnlU1Ua3TYbVanCv9C8\nrNdlGmiFKI6Mc8UCb1LVmLm1uh19CUYYBDKMr7VtxASOql3mxFyJlytXApWa\nl/ltNRUSsbdlYLMo7hr/sgXEVITQbhq3+V+nJaLm+RSK196oVoFMe7/5HjuI\nhpPaaIZC3fgcB/XluUBerhPFvBsvIRjRgEuVX2fAPsksDlEIcPqG0PlaJmE4\nfQMKNxN813/ruX04JW0dFKtMqLODZOM4sLkwMsP1vVvDaxLOLNBLaG9PZvtO\nR3lpJm6Uqp3KBGwFs7imkgUa6ioaqeahRlIqcUQCVKgUsyFARkPP5UOzIex2\nOnm1\r\n=hZBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/density":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/focus-ring":"14.0.0-canary.05db65ec0.0","@material/touch-target":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.05db65ec0.0_1641489300839_0.8673189263980103","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/radio","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6ab28630675325854e1b7e1d1187163c726f0b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":41,"integrity":"sha512-FBN+KsWnnEM6/hyyNz4ujyf97n03kPgc24VdS2oFEygkBdjKVwT5ysA7N0JHnsgiO/zGMuWL9zjJp3wavO6rVA==","signatures":[{"sig":"MEUCIQDpQvt5rDDMwCNvrYLqPZVCUIG0WdJ1J04dDSvshrh1PwIgLpMZLbQltLmLnzKuSHBG4u/z0e2LPgfY+v4jPeTLOgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GP+CRA9TVsSAnZWagAA0wgP/1jB3nJxD4TqCBcrrjYL\n0nim52yyA0laDIonFIRnYyDBK+AyUUTWYbOeyyLh9RttUtOvjgAXyAEwh1XN\nxAmzmYh7wr6lYuQH//IkMKrWSPIONozAC+lPFiOE+udBof1Lbh2XfsQV5Buv\nQp0h78X4BTuvyONTYO7e+U2fRNB165Ox5KRxVdR619+6NAzo4iFDFCHzey1O\nFLY8mrLRAm7RM+AxPGwJP3r5N4ng5IH//0ZeAt/rUpnqVy2x3KJqRLJ01aMD\nTY60KDspYjIpt6JjY0S8EA6/tsU5ZlOL/P0EB0GsXeHqhEjgoXIp5xokXluF\npE191goClEajlbOuESuuEEE9lQdD/wS8wGoQrjrUI2dtpQ4WfDjJsTYJG8hC\nMHXxqnHbYBC3MgbxKCj/PSx/hOgy+cAhM527XhmW58oZkWARkrcaKqoJO4Tx\nXX+QNZslMB6RQV0n4wc8Rx0Gz+nbDCRrj/h/Dr+8TS2hwBGSPeTqmIJaoZYz\n2TAyqsu0o+W5ZhqKyS30xvKlRACTzL+uquAysZVtf21J70GSQSTKpF3YQXsU\nhyAeaW/fEIuqHpEN91LQqijw7Z+hvcuIHpWtLJf42CLYAMjzebV7qOgVQ2Cq\nujnHDF7+MVNAKDPGeCA1ZfP7TBwDqkee/okgMWT3kBwJ4jo45E/b9UHB4nix\nNbgj\r\n=P57S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/density":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/focus-ring":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.6ca8b8f85.0_1641571326510_0.30919525610631626","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/radio","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1e09f4e21a0337e6e6ce95a26f29fa5cf89fb46","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.173ee7a7a.0.tgz","fileCount":41,"integrity":"sha512-fWPHhTCP2K47kwnZRfl2pOj04HT2s884mh+gB2LyjqtcA7d/I2qycIGruqC2GIcdi//Ulyr2rXUKD2uQMTKIJQ==","signatures":[{"sig":"MEQCIGEhM9FU/jIWMngP53buWCihCwPXCMJrOoIWJlxyICV2AiAmuxsutuvAZWFgQj5aqYA9wi0RTrdisAoscqhii5wtLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTqCRA9TVsSAnZWagAAgU4P/jkslOsFIJPgVCuJEktc\nzQFlZMeE4yk9KS7iTrgvca4uSBG/uyWOtds7KTrnxQRV59oJaW9CZXEmB+qi\nrK8B5WU+i6ya7zFDtYBoxd5OmKRrZeCuKXSHe1B821glylIw8a49dQro7MSc\nXQl4VtbsCNDXS5L7OIqnR61GkMxGL+k9oHBDECTaCmi25pN/g4Wb40t6QkB6\nIOXEibFGk/LN4iWzOOsKF+HdGctzl4Nnlxq7zRPENeVQLXYB81f0/F4vlde3\nfDaKMVFGKoUBkEMmxMcmpBb5LEsZEaKksib98G7UaSIAahtnJDS5mUxSRToW\nGxtXr+RpmyGXhHNEeiyPggVVovYpX54He/PVfoh93ty0eZoiyxxuzzrJ/CEe\nNP94JwlpFFaYmw/cZRQ+QnFbgDpUQewYt/adwxOEbdNufDqEimDBS2QeYbIy\nztngDB2M2khXHlxz+h+fc+/mRMtGTOMBkg5hKujPXFrnfOOmAbR682q1oMYs\nQ8/uYxcFG/mTBwDm2Z0Mnh05KHSmEsPvF9dW1GuKudfbpAfiwoYsxzV3whn7\n1ZPALmRDs9uT+nVmD+LAMFzH6FQycF7DHMzhU6JRxCOw8JC2eYBSRILnZLmn\nW0FiNQWYnpIUEzRbZT9mmR/55uJM1a+8lpOM60un4Rw9gxrsrA9tuEJ/ghfC\nms03\r\n=iZT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/density":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/focus-ring":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.173ee7a7a.0_1641833706106_0.43804026642443605","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/radio","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62fb9711c2e34324b88b3c441f534761ec41c53e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.b704e4dfc.0.tgz","fileCount":41,"integrity":"sha512-JxwrLvBXY4/wJtM/tGaQK7lWDMxelfX9OhL0jWK7Qk4aPyh099MPyNPTjnKdhISwg8JmmMi8jxnaajZyXSvdDA==","signatures":[{"sig":"MEYCIQDI6y2fZ0qMIBwFsNU0J3qpnSwjApkPAhCn/UX02okW2AIhAKcTrD3r4gKiReuU2npotML8Pkh96jNPeNMWl+0324fd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwNCRA9TVsSAnZWagAA364QAI/gkFvAMQo99xo5Ch8+\nmE7VVqAoavqu1tNVsYlHRUELPpp74g2il3wUfpSb2m4g0VdUXvVFzPm2Eiar\nXrw69hgkgdTh1j7NYGIJulm1qBIOeu2ekPBpXEfbBiiGFQoMdFzPTqtcomjt\nog+1mMgu4RNQiYnGy3iFXt9RTdgLB7IBKHHUMWd2UY1EuAUZyY9aBZ6+Rqh5\n+CLqUYF6ZBpTe+FAc1HSKtlBbT0mb3C9GwH+5G4ehZTeYlNyiR7lISeggrh8\ndI9GrTfAzY5+fDeF2mzbCKp/5VHpV/dXhFakifrsG+L1Njw/YjC7hO+IlDGc\nGEfKkQfoFK0pJhX+3B9FTtROtmPKo/E+vJrfoEywwygULtxkHqtDHuUHk0Cd\npBHn/9QlawSPDnO/uWrDwKXXwUWNGmhAHGEQWlZtPg08/Wq5iM5nX+Wzq7Vz\nOhz9X2lBPnXU5wUCGSc8q26TuzAnXF2PCSSsEuSQQKI+gP2by3mgmqsqPHJw\nniaeTiOnfLqgP0WHfvCuZdOXlzUFjrDzG1L+Yvi8Qx1BCgpLFZxP/cbLj97A\n8jxTNgmAQ06e1jrdwl+Icg63XJoXsbLaKzL5SEVadZ/TJ3n4LsTd9GA3GwYq\n8EBeyjHCgOuD+BBs9PfSkoG4eiPFQMtTCWmr0RYYYdNgb9UeN4KkVAaOT7/b\n7JOP\r\n=2pRE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/density":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/focus-ring":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.b704e4dfc.0_1641839629319_0.21424668824173376","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/radio","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7abd3c83c3e45e1706829933db476bc2daad83","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.c14e977ee.0.tgz","fileCount":41,"integrity":"sha512-pRm/orYxDJPlKBy/EUYcemwFbEB+aDo5p6vAFq6v8PPhfDYchGnNZKrPF9FOKbMrD//YTM0DRTQdcXMsgzXvxw==","signatures":[{"sig":"MEYCIQC/A9szoc6RnEsgGsulN/gPRlcFHzqCDBGesS8KbAg6FwIhAKqFWjvDEDVT8ZhU641GbJ4NH8eWynHaLiAyMpFR6B1L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adECRA9TVsSAnZWagAABR8P/RJ3i6CLHgGYA4RJpGAy\nOlNxf8770s/hji7XzM9lncXvP49Qa+QLZzsJxH3Z7r13nS+u45DQ5UxGo0IE\n6tubwtUt61Va0OLBbMR0s2jz7bSwuTTQogH9F4vC7ZUB8prBWLQ6PrC0160c\nKvrX1HqUTsuk5KkasFB8t+9lhDGzGWU90LEwUCtOXpFsdhVBsvFWsLTO6HNZ\nMfetJQr9y0imio3uTmYt9lJqbXo+NPgqzDW45fWsEo+m6hrQxPTmTPsd1Wwt\n9c80pkH6MPtVJKnyObuHxXSkctkeM8hR+tYdzZj7rQJXd7AG2HqP2gvOGMsQ\nqtyvpNI8F+oPcvXVCO7ySC2dojrei/jK0KQeS6rnPFkTqR937Cx3VIG2UGWl\nJ4vKdehk0SQsGYQ4U72PnrKB7JxPhJyX6TbcHPaDbaxa5XoCLo5VjwvS/pP+\nvxlLBcG8VAGS9BPuahWRUlcqeDb+mu65T+li6Ir9VdxtChvRYpbP0ZYZudHi\nrUyJ30D0CFYQRvo79JFu2/Jq4ghB6VHHckl+4HMyvGF6nHmtvbk0UpHNQXMN\nIMcfEWmdeSDJXJUrn4aI+vdqR83rxmXIzNEmmxp/lvdbO7db7V3AyrOBRzEw\n+EZP6mOex5IsmVkkIiVU2jZg7+JEMA4qIQHsPwS1ifx0gEe4Yk6JGWaJXdP6\nTwk+\r\n=wnXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/density":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/focus-ring":"14.0.0-canary.c14e977ee.0","@material/touch-target":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.c14e977ee.0_1641916228678_0.2780471000029636","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/radio","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83272a95101ca5e0c0f3d2c83e094b5c78fac684","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.b094eaa4e.0.tgz","fileCount":41,"integrity":"sha512-RcxCuVnz8xLk2r0eTcCQ4N7iyUrOFvCeyrEI1TVM/56nbGnpyPuc7V3g3v3EzUevnMGtiTIHwDCuhutWTxnsTQ==","signatures":[{"sig":"MEUCIAVTqnHMB+NvQ9sLLH4F9sVFq+j3Xuwx3RFbzouz/pGdAiEA0PwburECEipI6M1q0Vz9usZH5PzGPm6HaAIsNKmFyfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRACRA9TVsSAnZWagAAKbUQAJimG5ojXbEnK0wDZXQl\nWwJ9xadc7oXJOZ+R/cEiV2PjTN6sEtHGR4JIxy545SOpEiH1sYgHh70wobJ5\n8ziXK1NUorMT+HqU5padh3M4J6Nufgfk5D6ixYr65VCDYHnnfzBcMYs/iWf+\nFczBLk0K0Vp0IGgUk6oY7FwOS/cFamDMdKLls9auwCyH6tyQdy5pW2xuicWw\nS5BENOIgT4fkiD9xHK7JKzeCcWzDHfUzW3Wk/y1LM8sAqvOxcxtne1laNa/Q\nu1E3cfO7T2ClLh56SBH+OqDTAVaCtmNavAUYRW/rtpGlHrjg1pbSxt8mvFZ4\nSQduiHcff5N1lnQ4mTmYDr7LtkBOiwVetLrGRto2JITTIqnrp5mAgiacErY8\n0t3RyCPvNc2IdiWBZuUXM10QgOK1l5PiswEnNgI2wkn7VBgEvUKSuWVRa0+g\nQg7FGhWVagFGg8uwJXMVUNKhkIE7D2DNV4b6ebdYFhB/Rt2t7elHgxM6zYA+\n4p8SMYBi26mkWGWuDYZODe0t49XKG4aAl5v2FoRAZh9fom539ppqZiMSUQ85\nE1i2iKBbzZlqroWW+EnPoSfdnqa34LEB/Y2KW4Hj0bszEwnonFbY5VckpGsG\nxLAJL/OUt4NU41smEAEFBagtxvevXZs8wLZAapHEOaL7FrBP15dg0uXH2vr+\nDm2t\r\n=E13X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/density":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/focus-ring":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.b094eaa4e.0_1642185792108_0.7917363145139706","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/radio","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f17fe12a99d1e26be60fcc361b74656d7fdefbbb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.390220e42.0.tgz","fileCount":41,"integrity":"sha512-tHuQVO85x8Ka0SQbGImguSJtddBOPYTXfv5OEEuTP9dB/0dvZ9zFNj12QpEUGPKXc9BFVb9o4O3KWvaGRqQauQ==","signatures":[{"sig":"MEUCIQCCklQkNvz+t3B4nFKhntJXWPQsehr5Bin6u0sQ/PggJgIgamkoj7Nq5cw9galcXQNjjrNzKIynV8NCPbmfE0mlM0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2FCRA9TVsSAnZWagAAsPgP/20G3pjsKAyXcTHAgGSQ\nmk8EyPrVcivVuxFM2yNg7lSGM3xTRufbC3n9rKMscfoxdMGCyCsjky3na5R+\nS6Os7VJAWN2ASyvIJGrPbeeP1lYbDuM0fsvvqt4azbQnBVoy/FNBhCBxwKAy\ncpGKCsvCP+3G6xc+KaimM+Utxd1kBZ8Lp7MIGFAkqpstNnyiMsWTeoWaBAFc\n0s7pRcJVaFzX2BF22q5WXwbcnO2809PwJqHd63IttT9JOxMqaJH5RDRtPmB3\nHzWteXnIUDSsHclbj69imMKCRvFIxUlDUerAqbzUgqEgmhNpRBfFqWktX1Yn\n9y2yVymc7jSRaCpKjrzJPlysq/rZ0pf84EULOheZaQBVltqUAeRP5XH3lK4k\noZx0sOUHxoBs2WYXB0udhftySyUG09w88tqQ4aZJdKWwO0orNodGkwjv6U/y\nLYaXZ7PxKFQPCKQrSsPLI8PkmrolnQ/qDrRqEIyDFliINkf0Inw15PXtowMb\nnLjIanZGSDrHGT1pVBow8wWKwuxXQ1gRkVYXjehyo9OGelucGL4wXKp9qfkd\nFDJUnF5OBzrDqx2/a0vvjDKsuHCunUeKwuqvgurShQqA7TLL6wghIRObFbDL\n4+mYeQ9tFlWhq+kttMOzWLezaes0cREglEdvCL6KhPiqiTOU8QDrOAHdfjw2\nWNs/\r\n=zEnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/density":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/focus-ring":"14.0.0-canary.390220e42.0","@material/touch-target":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.390220e42.0_1642438021329_0.19690287245018046","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/radio","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d89c7c4c7a0b36b64dca2967bf2ce910e6d0525","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.4b5391f8b.0.tgz","fileCount":41,"integrity":"sha512-WH3eGdRpkFXepSJhTfiUzyEOpmkzQOoNX/mqTi4V3Veaw4E7R5TubphhWyAxkuIjiPvLwQMbLLfGXYg1fw7D3g==","signatures":[{"sig":"MEUCIQCU1y5pc3tBu/kHAqlotrI4cPvVsFNqMYpk5f8SNkkmNwIgfSSOwXzCZ1Y32CaQxLiKmuPVA5D+dJWX7jnCPpIp09M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KR8CRA9TVsSAnZWagAA024P/3PqOKNk+v+xlLmbQchU\n2SgN6AXuLV/i1T703Q2E09AHHs2A8uB4IwgdQr8mkLi5ApqCZTOLjwODRD/D\nOv4UXqh+VOFGvcBuL6T3k2oGwqjBumm3oVFkwlWLTDrfnW3Nk6m8Ht7L47Nt\nFNVBHVp16BSaugZ7wLudLYyckzCQpFXe/qqZlTrr+8NhYynaIHsL+a+8bKl4\n0DLji6S+AAXqbl5Efw2H7rYij1w+b3fj3RT8HyaU5dNpVzAmesnp3SulRNbn\nSCPgIEuEqvhK9lUCXkMN5Iwc1i/sA/810KRVR6glCevQgZlzRrZ1heXbWUeY\nvAfvcp4wPtwnVWvDj+WXdLcMjOKlu7OdXELNiSTKnhsSadvs9jQkLOWzUswa\n6wCaWn9NaZAUG3LEdkYdELVXuNPoa6U8GZ2xmxczioXMxjv+S0szERtHQax6\nyvzwi7CBYM+lAZk/y/V10xZSdyOqGiSMCj/iecTVdualZjbHecS72y3N4ERc\niBDPHPBhlCUpysa5LqB2yRzOpau4BWdzfkV0xWNF70yaPJZPszKlvW2Wyxxb\nlnVbOyGICwm53nbGmkRQ6VVzqImKDX7rKE9wUgx9EyGTjYcxA845n6v+eipG\nuFHP5pRfMUtEqKf/mqeJwQbu7jwGT72Qbc3rlrw50YwFwR7MiIUlXeezWQ0G\nbnwn\r\n=qrWj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/density":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/focus-ring":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.4b5391f8b.0_1642636412424_0.04154438715114961","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/radio","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00a9698f308081779d200e7eeb859af055fe8050","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.cef6bc623.0.tgz","fileCount":41,"integrity":"sha512-o7nJU99Wxx0HSe0xPtn51tBIdzsNJZgCqxmdZ0Jpqu3ZpXUncZwa+fqyZHepi5v4Tdh7hkY99dJOYv78X6z5yA==","signatures":[{"sig":"MEUCIAc6CO/nQPoQQBVVXvZ2QcZOPgUkmMeQAue7RSDJ6P+BAiEA1km+eHC1h+5jsqvAU2N46IzzfhbO0yLiMt9mm9tiPZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpPCRA9TVsSAnZWagAAwo4P+QFfYH0cq098pvpQLOJy\nWpClLyV3Wg1eCopKCtLClHAXTq3mlDPLzE2ckpxSyiTO878r7sqTm75PTRJr\nA5UvRgYflJDmd4Fgju7eWMmnW5Of5q+jF2rnyrv8a4QWmhf8DlWcQrRTQ+Nz\nMNGFhF6uwNF+xsEXHyE/jSq7jv3aYQPNwENqxmWMSlp8ckClPR6b7uAeZH0o\neJCESmnCZCixds7ijLDvRxThUILswWxsSZvo5CCu77imweoBBMoSZGygfF4f\nnRtIJ2IhW1aS/H7+O0iSWr1kYWG+NK+e5Qii5OeHM8CQodMSEb3b4Jsez185\n43wsVBByUaSW2n4VB4q6xaY4iHkiURbh2RMvjrLbVkG9Ddn5+JUGqpBgI1WH\nhsi0GW9GQTIlFKLYuqVG7kxfl8nFs3R2yLkxNZEo11ElDZzlnfDtr5ZAj/ch\nrQDuv6e/txwUuH8htKV6R1gFzdb/rQl23o1FyNrwmr83qnagPQU4juU5dVbx\nHdNG4zwenfC63p7BAXR1yhO232Mptr5kmgpdKvtlq/xK1377zDq42/wwyWLq\nn+wmxzQRAPfzxE8l9gcBQi+F4UlxXQNusrcUDFaR43CDDeVpr9wj3YlsaK9c\npCCGwDKa2cGTeoQpLdC/FtjFQy8zt7OK/gOwharJueiBzPEccgs6SexjBlm7\nOFr6\r\n=p6WJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/density":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/focus-ring":"14.0.0-canary.cef6bc623.0","@material/touch-target":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.cef6bc623.0_1642637902995_0.7155306036417328","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/radio","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df74d2ba63ad1b94b974d0df28e0cacaff595a7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.0379179c4.0.tgz","fileCount":41,"integrity":"sha512-lJnmeAo/+g5WXZoIq0/RYe+3hibaD5F/AUlv+LSTistt7ikLu4gvZB3Oz2N6+aVojlHnjoZAQS465LRIF2CyVg==","signatures":[{"sig":"MEUCIDDhokAPhe7+URwbTUuAJArrCMRNZvLD7qyqKZK38hY/AiEAsOtSPXjYTQzOtQZ0g0vQgMDCsLnENYPadJNsC6VrqP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAPCRA9TVsSAnZWagAAYo4P+wYWsTWu6VFhuVR6JIxk\nPhDNeGN54s7DwIaspi9iXr+TDRMj3DfLJGgM57VdLJc1stcm8xAGBpWq/vxY\n/zlCIkBZcpFNENFC0tRE6Vs7H7T3Etah5UCAN5LiRzI2o7SOpGqrhRMNazMM\nYCoJGctMGoV2u5NOmWHqjHJv+XK4tdSSjWrwFdG9Jdv2VujKhREuqua9ZaGd\nyMNumlGfK+njQ86EyftQvMd0FY9FMOUKNQkUUnBGJiYle9kcocCbxwyHRT3X\n1e6/4CRJIaz5S8OIRwPkMmWXoC1LuBYmSrBteLsjFvCcv6YLuv1k+5J+/ITC\nydaHd1fOzJz+eiaSxcWp74v9rn6qXFkHq9msR3UFx1tYnHOll1Q80sq0ZOXw\nDgOK8AQOOGvER4O1/YYikyJI/Z0o2amHVqIOM5vxPUCrEWKAJ3xotlj/uoGA\n1kXsLOQqQY08rLLow+8LkDiFjfIw70zH19eITUKmPQCryiTaJzw+/pkxhyvz\n4CHwwq6+xNOP0rUnZTHekBclZ6NOz97SM6coDhxWCJEFfQm2S0L+hrnrKWdr\nfQCZd60mtQIPns6az+NXCnwkmV4UjxHDG4Cw29QRzvyKPFFV+Bt2PsIRQG9f\nxvxWsOcld5pShp8oo5VEmhBBA1p9e61hD9kcZJEda8MvQRnMhPkUdHR+n4be\nSn9s\r\n=7LDI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/density":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/focus-ring":"14.0.0-canary.0379179c4.0","@material/touch-target":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.0379179c4.0_1642704911089_0.10899764244004384","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/radio","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a1d4aaa2dc36d006386489ca472bd10926ca39","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e62f3dabf.0.tgz","fileCount":41,"integrity":"sha512-vw82atdFhfvMD8q/vw97pjhiql0Sz6Ko/8Wa68pPMJZIxcsuF4bdBK//e6UG8MUpiYcfgez6V+ifHR1GMs26GA==","signatures":[{"sig":"MEYCIQDUIZQTvB9h8yWCajabNGRG6vLd3oQZ+nJp0F59Bp0aXgIhAMzR+8BpBZ3TcFBH7X5h/YZzXnGAl6VaZBcZuIrZKJSx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvpCRA9TVsSAnZWagAA4TAP/ihmqyHsbjIFCzADHNvl\ng2Y7DZVzHwJvbFgtKU39LwhT16+WYfY1ceFnjxl0gm2u2IBNxVnxYTOiOyME\nxEsPvgu0pZDZ/UO103Kqn2NrD+GvQ+sR0xoXVYmzZ2PpO82N1S5L7qoaxQV6\npaWvitwKDWX28kRfOzaJLHEj+51rQNHpyRWENlgJ2IWxQTxRruWxvcVqAddV\nl2CcfNAtatAedJNM81uMqb/xvFv62R/pyeMHm0gS9Z2m8HnYXj6cUGUPLmqL\nXfgbZSxlSD0GCpq7//jTxNSeLcWA6ZPcra0tZEhpOweZOrG/ATT/3t7yhmSY\n1bLxXUVz4hRa1jfgzh1+d2Y9xfILsxawVo1/8OOrL69Ijf0B59p/RxTR1fxX\ngQ5QOmHdvP5XWJXXnAzAwe9yKIGdx9ELHyDumu1D8hj4MGXftXvnRkAX8wH6\nncNb0ZUDxysP1GNaJmJ9wh9KCBsssbB4/b7B8vY1IwH/ms28S87uEuCm/780\nb0mbcbEEV1Kw8ZmXqJfPuiv/AhlOd5fcSY9ig6pLvDBFKH66M9FHJOq9bGNY\nG5m4/dL2IX0aVZHv5VJWLkwymg/E7weXWO+qNiPBoEjP7usLg/TcEBihTX1A\nHlyMmIM/VauepW8RJehkkQbHfJYKlxfXLiS/im30r7Noeh2OjZt6WNyjxlwT\nr5/r\r\n=77ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/density":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/focus-ring":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e62f3dabf.0_1642806249688_0.2929829738070102","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/radio","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84eadc457cd8009e4e8f0bed3dc8d99db251357e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3e20c1de8.0.tgz","fileCount":41,"integrity":"sha512-yA8F8qjIi4ofk68K0/1MdHeUYqma9b7m1H4yS98XoaPbFY4Z+HMJFHRuR+iNTbMlbSogk933HQouufwOFB/fpw==","signatures":[{"sig":"MEYCIQC2/9h+GqePFz6f1eVimBF6AmrK35nXaOeLd2/Pz79KwQIhAOn9mef23z0XiMXWslmXgt50PfsnLPSw1OkRUZnRe01E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgdCRA9TVsSAnZWagAA4IkP/0WX3Q2TRtl12KP5ssGI\nmtvEPESWA7eR7atryhCCU+hqp6f7L3B8zc6swMe8EWayWla64K5RS3F0Tjxf\nzTE9ZP2W/xiG7QiXGOYejrp/kupcYbnWViyvzHnloafGHSIY4MUShweMvVA7\n9Sd/3p2LR16oREqgMrmFNNJIgLcm/16MCiPqJ0nTdeqY0aV59AsY42tq1KpJ\nmCR7/YI6kOpXlRVbUd8XN9lM8UI3vKbC2Dh2JtImMKmeSJcqXP/fpA/B+Lq6\nbUNvq7nIXHyb9+QJGD3NtnrpnlZW1XaLQuRRaObWbUC5AbPMRcaQbAJH8JAY\nf2s7ILesX6fbkueG9SzfpEwQJhMe0DALKrU/Cdqart35pV9E9s3UoUuwkYD6\nisYS4lUNDHJn8AY7OzXsq//8fdDZUE0C6JDQnLd6CGOKBXuM81e92QcdtWrU\nkkeplEpokgK2YV6WZleQ/5JhiKOhVzwROOlnRwHFvOFER7Xs1LRcRIrR7m3V\najyTUsaE7WSlFOq6g6GLb17jx+ngMYUOz8CJJ0BmO3JElWnJvDF7GQ1j47d7\nitRWWJDPXvpHa/7gJNhRWkNJgRWSYWxSSgyP2Zg0CUeEWccjuGhJeDYHtMCp\nLR9Ofr9emmc6+NQgpgzY4lcY2bwtutc2FZcPNQyJtJdhKjsxWrfyKS40+w4e\nJ4ON\r\n=nLAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/density":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/focus-ring":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3e20c1de8.0_1643124764718_0.7711428466404429","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/radio","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5aec47b9b262a1c5a3343c952e809196623f7d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.9f9d928b2.0.tgz","fileCount":41,"integrity":"sha512-/e/h7K1ok/H/JSR+hTPLu4euQhQx7le3NSh1Hxih9XN5hA0Fvt9Pd3dDPo+3NxzVC7/dDmBP4Pbn5lLQzpzB+Q==","signatures":[{"sig":"MEQCIBF/pQpvQ/bQt0FlVU8+QrmtJ0fJ71cB1UEVOvUWG99gAiAOvEi8/b1bGvwZJ83rQRlmzXNpogZPHhYeOXj4+QRaOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDlCRA9TVsSAnZWagAAMVYQAIh5XKs6/VAxh4dChEqb\nwD2y2A3AxK7oRA+ejG9oUIjwXR75BEpbC/qbdJL1FROXNHcDLJn5sTb/a6kp\nOGZi006wFFWAtj4cav5OzaQ2uCbh++pBVp9FVTCGmSIBy4ayTjW/MscpdHT0\ntbN7cZD1yz1mcYl0Fj3tbARfRI9Iqj1qcXCaOgGEnofjtPSOeMBGzuAOp1Ge\nD5WBnq/LRq8/zzNjGYvbeWYUr0cYjbc9dTHHFuSJflO9OyTZskEXnZ0x1Lwu\nbBpllj9JRKEw3Nhd0n0MTCmIst5FrqZ1LXKTZ8+lX+mPEQcPNzZkMjfPTmg3\nEMh7mmH+4z/i6ayUDI6xccmDYPWAZAy+vCw/Azz2zaLsQxAM84JJkcyryTQ/\nYbxY/AE3bCvVXw4iMWXuvGJDx5BULC4sjCppQv2q8lIHc/bpAw3QyRR6wxqL\nO+adhupd8wl+Wk5lNBGT/PBRlg8piJlAoC9ABoF2RnhqJ/MEGyUYoVeryo7x\nhsuTlrYWWWMo3fchYnDSfr1eqFrcf1HgqlZzQ6JTONIPnPOXTYjfTdsx88yM\nT/QbPBiED+b7BygDALgJ+VkkGiPZ4VeLgHB3Ay5NxH6cc6rwmbHH8X5w5sLw\nyVEvIj6sgXGc2cV/Cxwew7RlZ4u14g+fRRzwMlgACs5aCl5kgSmDp5hIGtsp\nX6qq\r\n=r858\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/density":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/focus-ring":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.9f9d928b2.0_1643307237641_0.10256084197119386","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/radio","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc9b9f0806303b8cc780f0b6488c4fc163e5b66","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.a2bcb065c.0.tgz","fileCount":41,"integrity":"sha512-gQqmqg7WtmnF4Zkwwk6n8jIwfMcCiJ14/hhaeuwKT7Wnn9gWtksMAn/cFUV1U/l3wdFeO4fJwf81/0yUj5bRBQ==","signatures":[{"sig":"MEUCIQDASjMy2GQFX2QLP0BTiEdBk2fwzDayu+3pAT+8d6gdZgIgV+u3n5/jfOjaxRnI69bYnn7wHCMz5ACW3DLc/1+KTl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYSCRA9TVsSAnZWagAAUQ8QAKKYepBqn/R2rij3PJ8D\n3BLFjVqO5Pt5zYxnL4mpNxq/6LspjqyyoA93OOdGc/OhYEekDP6RQAjXgdXr\n74LiMgIGzxiXo6q7Ahsxn85wWCXZcmKdyCJJYp+Yeby26Bn0tu4m6Cs33PIA\nOI8IIOa5UyJU7YzUd5VlMPd7gVsKpttmbUKJp0H1YyvdDcGsx/BClzSqO98D\n4cU9W/0DVsolv/v1Lypf1rqskaYbyzlI1c1Zorbnoz1GWDq8Z0pBKJ4tD8pD\n0YSisw+bzbvn6E7lDCWIkv6WkxW6kpzFNwSomlwIzXqw/L7UYMDtEn2GONEJ\n0G/9Wiup2UK2d3Jx1ntAqxeVrGvXvuvNurIYIJ3dnrwQHV29Bl/mqYsUWQ4Q\nB2mUqY9lLnrBnsstOiHqcpxT/J8Uq1n+SVD4G7d/I1fsAWIMjitShjEyyfhD\nQG/ExhOJT2G2fW8wUEMWRpsP5MQyaMm0oUAOti9yZXIfRJbbyON8u1bdMbf6\nw1rx3ix1aBCnlSvjym1LecRirPha97Hs55NxeUX3jRfsQNCXJ5dwQMTGwICk\nirJlASf6uy1KArait7zKgtPQdpgsAlXwRDm8ig9P5jsxC+dbxEjOn5L3vaBd\nryIxsL+wa6rKSvRrAsSHgagy7x85sEDMsKFzQVSqzouPMKZxSzxIS/a/R2p6\nzP3M\r\n=PFQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/density":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/focus-ring":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.a2bcb065c.0_1643398673911_0.9679377413524914","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/radio","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b9f1f20ebfd4b61f71d8de49325cdcc9ed607ce","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":41,"integrity":"sha512-fbHUgiEgI06B5u30ijaLrh8CfQC6TWu7oH+xcZgg9NVkU21OmGa4yckqupXZmzEXjdWxSzjZiVJWXcmqf9Pklg==","signatures":[{"sig":"MEYCIQC0E8rW4CYTKekf2JD7zEvIsJm8GeA91Tp9OsKSVIEHCwIhAJUiBUiko0k40IDYrujtGSdwMQqVzsQtpyeLFFnPp6ZS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcUCRA9TVsSAnZWagAASgoP/1wcrn7SJrHS5N2U2DH7\nBtXEdBj99Eujv9IjRgj9Ph/FglHdNepzPHrabZHzb2hktbd0ziiZLsMhCepp\ntCiZNW5mU9ucCLz9AA2maN4K9tiZLk2V3twKQAj4RBH9FHxwB9Nyg/nIphD9\neAs4KUrurDadDEMwSHdyP/jz3WNkBGVhZzmLP0qLie+uIfj0wa4UhwBt0Yf3\ngZY/oIXzVFMoTHBbbOF7159uxvE+ZyRBd2MGFfFoipTG1J02yR5SsaGVZYZv\n+AUVxYQsT3d+DtTjYW8rNTwkFDBnxgTKzZj25ys3wroXtvRFiy1DKH3Uz+Wu\nt9EtkOUbKn+LVJ0stbgIRnmhCV4xoaDwmwLR7k39giwVJY5qWfVQcjquzyYg\nhVNE5CmcYA96CiJYoEhTW8KQna6jLrt7Q1grvHcEaIAKNNsq7stjnDPxFLoZ\nm6J9PQCaB2a5p2B2r0JQUC/LtMqatl84X+h+58b9AwMBIjLhvutW+zzituBI\nuzLRWQsQjZPCAB2rHzRH+AqZa9vIz0KvUeYEuOCdiPjOrOKuiG9NNGttFXRN\nSugFymTpuKTA6Dv7rd7rC7D7GSBUtEdhy5MmnWIEr3Q0HttXtKfjVWL+U6NM\ntteSIm/UsgWhI+XpUm8cjo2bpAppR/CaF6SWpzAuAFJHet1H6ddrfxG9grIb\nFMFD\r\n=HZ+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/density":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/focus-ring":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.4e66fb2e1.0_1643398932271_0.4467167766694322","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/radio","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e982275e93473af26f564d4b6ab0625487bae4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.9736ddce9.0.tgz","fileCount":41,"integrity":"sha512-bQGncFvNHMpVeoizw/tUWp8KKLzVHy3GKl6hGzNFcemzwOoBw3g+k686k5zmmvPl0rLOxXkMgy9gsyIUlXeKxQ==","signatures":[{"sig":"MEYCIQCGbiukCtTd/B3ciYKn2YiSLlP3hIMRcgi2JbN2/QSI3wIhALZP77ScPqvYN5UbUpWmnnsQvssyP+TGuDI0n4/AVc3C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3vCRA9TVsSAnZWagAA+/IQAJ+LOi/Ak4gUnU+bKpes\nAna+sx4UnnpRiYab2ke/efTH3Xu0Kg28VPDpJwh7kqrK/ET5Un5NgmbUswIP\npi9z2cgwUYx7QhcfQ/k+V0NhhrPLXedlzCVPTOhiJQS3opcW6EUEAA9M2P+B\n2KfJRDlCR7q8wY2p7iAHWEgd6RgwNG/GCIwFMPa/YXkZY/NBDNs9TbxGR+AY\n1SnpcE/XPhSveAdvZxRanqB1a/SoNtL8YDGmDswPRgk/8xBKqS7X5rzIEusO\neYV0Wf43CLQANvV0yX6uvjggwO3zt5lohmxT6zdqTw2NCzzRLfuknyGstPma\n9O7y9cEWTy6eCZmrm0osZiEWlLoi4vYDiBk8JMUbYcgiLAKYgnuZKy8g867E\nCaas7I0AMx5eRMSq/F7jyTNF0rVU+ztaJh97Vex2AWxT7+LYJfM8NS5f8ekY\n54cy2WIMWD5r9N2YTqfjAq7ARtmc0VkOaQcCPmuI3DqYBWw5reiB2YjaseqR\nQ+b3DK+RUlljeEHiIV18rJeXZEjbA2a0P7/0alYwQ1XCC3oQjXcRnULap+We\nJc6gQwPVIN3VwydxL2X2HxwE8/+Nw917mHp/TtDhGBU3dJBHK6haqKIrpqMW\nPR1m84JJdDFoZRXU4qpcJsTq9h6EmuptptbPGDozVPgDoZE8MprSJcLDidqf\nkjI4\r\n=ia7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/density":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/focus-ring":"14.0.0-canary.9736ddce9.0","@material/touch-target":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.9736ddce9.0_1643449839207_0.6690719238868665","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/radio","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dddb8cc227bcb1b5eb879b8a9f02570b6c79af0b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":41,"integrity":"sha512-CmtQjFOYUwnMjRF4ShHhUm7fldnqZIxImYZmqvAquOK87FwNNIGQzXgtZ6WCypd4nhyg5SctJPeyIQw5aTGRag==","signatures":[{"sig":"MEYCIQDGLlyIEuRhR1s0Ta/LZxDK7TVKDTM64H4HwqRZXxOHSAIhAOGi/39XfbRGhkWGfioVnyV+e/GIQ2PHLW/zG3HjMY8g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8pCRA9TVsSAnZWagAA1K0P/3vXsy3rxNUio0r2roD5\n6mEfA2F0btuc1HocWy4cgQaUEuAcJwXXw78w5PdTL3vjOI8wa472SjgnGlN1\nUnGCqfoVFneKYY1/dGbuaZlaDkoV4IevuBEIWMPbcKY2OgH/3DENjqT+ggAs\nGzXhQMbk8Ug88qKfv2gimTsy0hd7CadkmdXbVQYWr1fp3w88fe1H3/joERrS\nSmR55U/DqSJxjKBLPrHYpMOpIfyV9LuduN1ip0H9c8N8slAmt+JZN96Zju1W\nmRpodstgLn3VgNBcGuQ6iqGSBHRVTkF7fTkHGWUtjNxrzAV+ni7vGtBD1Tcs\nnsC0xhfjUysm3xzDm/0XQzR0HJ4wo+nN4YauOJXWzfZ2s/1JdVbsTbISLABb\ng1j1s8BauMwfvwUG5mvrx3ox/oZZz6WacAtiKHVna8wPNgOqhEBWH7U4m0zD\nlDLUQ1gV25wIp0fRYuAPjEiwfmAvcRXX5OXPU0vPWzIlJ5GILPv/Z0W10f1Y\n0YZvwhLg3UGRTxnNYa3JChBUEWUhzim5sw7b9Duy2HfQuKvzJHQx+GMeCcGh\nPe0iIUn4HyKACPx2QaEQ0drrhpn5TQB1hnN2SaFKibws7Biljww9RvmEKqA9\nSL6X0DRB0dhk7A6H18SvVgoIOmzLgpsFKV542KXweFS/L1bnqz6wXy8QLdMs\nY52R\r\n=lzHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/density":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/focus-ring":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.cc4ed13cc.0_1643999017473_0.07905069672170906","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/radio","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef01f13122dbdd15120ed5f06f7ae8234dc2c52","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.dcba26fe1.0.tgz","fileCount":41,"integrity":"sha512-JeOmDDXq6td9cPEqW/WUdfOf4RD2o8fZbh++uK7vNTZxILOBNpHbUaTEeLOsm+BTWTv7XG5gr2ZqoEWV1PMTsw==","signatures":[{"sig":"MEUCIGetUIS02On4CcKkBy15lVu3jg9yyuV1SE8UjameRCsAAiEAk0r8f3ix5lFXw3Ee4SZQFgCpgVbiwC1B1N/rakBjRKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFoCRA9TVsSAnZWagAAEToP/25tQKfhD2qX7lqsM/2A\njaG4jmwqGjxbppWNBt3O1z7e9V61GXRJVc8OF9nI/kvyblIcM0ECGHa2n7Cs\nH2f+OhDCxLuxr9eYdpK4jSqtu9aaxlfN4upK5T6T5XpgQzZE3bZ2p59kCgn0\n29jn6Ph71khmyKkihbpkJdsfGQdJvjj4OKgGHJ1OaSrtxO/bd4roEo80DrR+\ngZMMLX2L3T3eRHRV3FByK5dgNtTtmPU4HzkCeGCrTZGLj5lo/z8dtUoYweD+\nEToEhNPiwDMfFqy2HTYpvvaryLEa8Cwn2eEC/da+LEVhhMYzRMo9Vy7ncXm3\njnrxR5K4VYEFU6/B7nPPWq8XsTdHL+kelN22CiyYERlpMH32eryBM+3UrDvB\nf7Od+kEW9LXi/C/dzpCFhA50AgP0gDqcqYRKjdrrVsYF20fWIaCgmqm1pAJR\nJMsrICAEjrvldUaBrwS1N0kyoJ9qoLCW36cqLqDnc3SP1Z5AejLGNTi/nqv2\n3+HwStdhfs1m6iId0WaPTDofkDYb/kQ1KbXsloBKW0qHhK4UYDVFUzxKhOeL\n4bksgxeSY3GVzNBNe7r8Wg/lSArwexoU7Y/iA7b6OUFxN52uldygiNjeujSO\nR8BtV3t/DmHpAFU+Zqj0FfqmCt+nZPEVYPyNdilK8itGCnKAnK/0PCJlvQ5Z\na9Gm\r\n=CAXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/density":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/focus-ring":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.dcba26fe1.0_1644011879955_0.5375876469820964","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/radio","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0141442429aa6e72f25adcc59ee4196ed8f99f8f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.ec54d9046.0.tgz","fileCount":41,"integrity":"sha512-mhpIvj8qOg/A/qiF7/I7ennQvb3k6v/382AsM7445/PJumO8zQGHYNwolaVzmlqaHfiv6T687by7nG3ikD7Xhg==","signatures":[{"sig":"MEUCIQDa+Z9bVgNFk45Dh2O0qHcH+N1sQKb/w5kAr90fWK/J6gIgbAijJob73pybrHIs+9ut3pgRbXDeApRaw4nyfs8kb3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8WCRA9TVsSAnZWagAAu3QP/2W2+8iVBuro2yEaokg4\nNDl6tGAdVJpvnOBgSIauHunWCQ6TSQJ0k5z/MyY+2oGLHGcL04P9xKTBjSJR\n1m13pQl0hJIn/XIy9ban32ogkKdkcV3HfJMrB6kSF+aLjX3eL5aNN2Ti4+Yy\nb6TQyj/uuOSIDGzhmTocwZ1AMwOa/UkoIN6k+2lB7qepxXwLJ242SSYNVOr2\nHG3mZy8GuQHWHcO9G8V8tyl6RcstIAV6+TonVDkpYj4nkyXa4NQjgWHKt/no\nJr1Cu5SELlQLEmyv2C4Ml0I3uOCPUpRmbGi9QpcvBR1XlsXIqa44/42D7LY5\nI11cDRPlScIQaa99fVPFsmVDMm//OQhVK4Dq2DklJyjIUxczW+fHgMyajo/q\na8qZP9DYjo4tLqj2fPVHsMCqP1b/9IYhJ2XbaPwkZKqxp3Maeg1Z1DtCG+y0\ngidgA8jETfF3oV86i6JYviQFO85m7kN/7LI97j1giE24I4tEANHL6Kx+3Ugl\nPEaCqDnyxk9vgqvt0eYnmjYxKEtAKYzzK2CW4gYGnbsEhe+Bv5Z1IjhnOVg6\n7OhVRLRmHLxwyssbDXiSwTVGJrACi8CFTlXMBdP9+zTWHSyJwjQJlOfotIxC\nEoA+6NwSAQC/1PJHfpWVCQdPVcsnpcVvOwO7S0JGKHxwQJ1d2w6PSI5nE4eZ\nRgaC\r\n=IOYy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/density":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/focus-ring":"14.0.0-canary.ec54d9046.0","@material/touch-target":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.ec54d9046.0_1644248854614_0.5142899030974617","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/radio","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84ed58cdff3525e60175a87ac3110bc2b0acb6ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.ea9b5b463.0.tgz","fileCount":41,"integrity":"sha512-OkB9irBMLuOcoRj38b0YrV1WI/g1XSMynymWT1qB0P3jwSe6AMSs7T/i6z63YBIunThzySdwunf4vJQVbrgJMg==","signatures":[{"sig":"MEQCIBYFBoR5iUeUHoldwtLuaacc8+1FqBlKM7h/3PNG9xgqAiAJ4Z/NKN5XiXajRUFmJfnztDXuLd8ZgL3I9n+eyEjydg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//WCRA9TVsSAnZWagAAlF4QAIZINLLUHX5+6r7XnTQ5\nCrhqvWEQlPZ1q2mYf0lZkpbBXu+mm6gh1g/1yQqm7BPIcVL8gRRWLzaqCo3w\np/sn0hAvaOF8TFCwVIqcjNvIthYOPyPqm8VYIHC0INmwOFr1pBVYvWOy9o61\nnPmhAxH+UmhG67WC9Cl6GbsL2rjbxXeV1ACnMtZAmCe8vFNJn0uMoQdN+AI9\n8jX+wjJhX/pwhWoaVAzy61KVhweVPali5bA72jJbhz3MRpo6OMrRIrYJy6nX\nSMOEj7GPMmBnL2aRrXWYylCtQfORr7IR7DuzpfbuIp/dtiK84KDAf0kidhcw\ny4edKg8CemB/4ZxnciqxVmS8Oe8MI9YI+Fh8sgOLP9YTvCRfzZcLuBk5gy/z\nP7dHgVQCG0lrs8ItDR75nkp35ZgIk7IEuTlZ9nYQ/pNNLPUxgI5AwQ2MhrDI\njIoal+93Sld3ERk8KaqVC6Q3+e1/AEhXVgXcESKxtEX7zKbDVjRiFrwMc5Wu\nZ+4k6LC3a6raaZjU40yFIc4k7VC1eSsMAnR7cjX1vhQAHWAg/JYt8KZ+q+ET\nLhEk9nROkCXX8C8EgzbSq/2ALIY2y9Nm4E00ybZhXrjqACp4HslcTvE38qGc\nLxf41561OOFAvEyCDHfFjaSIpfY95Mdf1eGb4ROZqVXfUzrweAgpTp1s0jRT\n4wVE\r\n=bYlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/density":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/focus-ring":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.ea9b5b463.0_1644429270764_0.4046456542087622","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/radio","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c788ba1c1cb152bc6e5afde743bdc6cc2d1c7661","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.96ea061c1.0.tgz","fileCount":41,"integrity":"sha512-5RHAZpF4OOBM8WH8HvuXu7a/TEilsRTNBjl0yQo2LrQulNNChOdIaun/H4eQR9Z/JgE/kBmciwkMMgm6LOeYCA==","signatures":[{"sig":"MEQCIHHUpCEuN9n8WZVL1wzr5fW6MvS8Q+FvHLLeBOKlyatJAiAQF3JSM0IXv5SmbiiYOtzJ6f196qJcH4QKhuoAWbiQ0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA86CRA9TVsSAnZWagAAopwP/jfeaChulZ0npUUId+Lg\nnJ7FgpdQaHs69SPkag41cTLeKnaMfJpLvitehc2oodXt0/6AVbMviM8YcXFt\nhBt7rHydRZiF1zWwtr/+v2AMSCy0aQ7MNjvmffeuCN5D4xc+1666qPXGSqpJ\nMLCTXUeAx6/masLpF58xST79m03en0U6gmKQCbOlfisAhYODJbkdauKT++kp\nhrIJ8g7MLGym/s6AW6n5Aah/SNVoKx3NauZ8ELZck8R585P8R2++RyRMrR8u\nptmkzjDxtL9aFmmpLMbPQaW442E/HZnmkl0bsf8b2wzA1bqej6RXGyDD31DX\nK+Zo9O5b9DNQG+aazGFbHtIg1jNT8c2RiovZMBxnKNcKM22AYGdkgAjneh9w\nCCxnURjLboVUlAsFsMVl4GGVhKWVj+wi+VdsFPkRrJG5KoyUX0WjnSREHIx7\noCUg71QHpOthdEl0aK4SBVNv9x0qxznBdNkdcCA/urkqpdXmhw+KPNAh69GJ\njYf0nM2OoPjzhohROMqi5QvMcMiEPnVa0/i2EPRSY8t48cBGWcPmQU2TgbZK\nq2n0OqC4ZN4/fR4cK1Oj/ikh+GXRq5AwX9M9YZAjOtuwQDM7sxSGm+lwxmM+\nE3otof6mCv5Yrp/W3kqIM/VekBq/NNuX3g2wJqBmz/R8aEAOFnCAu1HTwMl1\nKnZX\r\n=z14+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/density":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/focus-ring":"14.0.0-canary.96ea061c1.0","@material/touch-target":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.96ea061c1.0_1644433210258_0.6452968148073353","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/radio","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67a3d6663529e4c551e438b1a3321a38deb20877","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e00181e59.0.tgz","fileCount":41,"integrity":"sha512-Dq9leQekYp1TNqvSntcivuvJMrsjcpHF3AQDAb9kPGUtS+Ien126KzXJ3odW0sFF1eSdZwO+vhTvh6+nr76y5A==","signatures":[{"sig":"MEUCIGgPsDpIhd7CM1dovBX9yuagT1e4Nj9O7P/y0WhutH9/AiEAmpCXyuIldZnvjREt93pMqL70zcOabB2pfI8TIRP9sJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXB4CRA9TVsSAnZWagAAff8QAIwPIdy1o+jsjjTI68JO\n4wVEHgGUOodl6G0mLXFGY7oJ++w2+eRqU+QHX56KQhCvCDWrwSP4v//JYr5A\nxoEOHoixu/QJe5OQdcQgW30BwJZjwh6rN+aw/Tz6WfQLRTDyFoTNfyZ8c/DG\n9AVcxjRLEWI0xW27Ub/nURc7JhparfI8fmE31s2p4GQFvcJOAOiBs6g8LKJu\nSRzrfcqx3TKRASU3ndUf4ZtDThe9eYf2y6FY3MqHOoBJEPxWk0lUpbrWhqJy\nrgOcqHQYKXUArU/fD5H0WLMDlGUsp7AFAl++i55IB/2ib3FkYAi4KhpRrBg1\nkasipTwbQuq6Lewal+y12sJTyK/1X7hfpFgwi5zY1X7RA54F1XTS5ZZo+5rw\nE3krSAwrySUvyzURwvfbv3Rb0YkOEHxyWp2CjfrnYSPP/vdDB3QOQpLsQxTe\nz1HoUek/JZFLpp5G7C5haHkjlT9UmBix34Ug+j6xQButwsFdQsdA0FvT8nUH\n1i+08Xog2eW/nLi78EE2K3rhOLxkuHL3s81ao1X7IuJjrnL3KokEVfaBdLL8\nhR96gTJi8+DEdAvpLE63suyO0FWsNiFAIJYsnuN4C+F7eQ7XnKD1zozVs3LM\n4UHAdbSA5i/UkGioqhxYkUEfj5kY03ycCu1TsTDot+cOZeWdpPjCIPSSVoLY\nDrWc\r\n=lv0u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/density":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/focus-ring":"14.0.0-canary.e00181e59.0","@material/touch-target":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e00181e59.0_1644523640408_0.09662360548885918","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/radio","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b259e19392843bfdb6e317f091176817834ca8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.037285f9b.0.tgz","fileCount":41,"integrity":"sha512-t5mhBo0vPIU4o2dEFwReaT6unzNn5KIsYPAh2fODSPlvjWttvEKMlGpPzY8yiVtjvz6IQHL6S/Rb1OQ6Sng0rA==","signatures":[{"sig":"MEQCIGUG7v6QmlCfqDcLHJC6PiCr+XDC+2U1nJzePKRqkP2vAiAqifQuqrJD+PMtPC+kbHUeYuPQuRw6YMpjU4tHrqQ+1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqs5CRA9TVsSAnZWagAAP9EQAJXfHhL8bxiSdsCmpX5+\nup6ZZENNopFMwpwmSRxcvycpemL8GXBrBLIawgc2ZSqS34N4ogPDEyaqncGK\n/5m6FjTrG70zt/pCLaJFkR1VfvvmqfVqiLYOYtRG8+jflj4VWc42imwMLwC8\neGO+UNDNnhxGDod8BVk4ByFAqFVWihi5TzKZXZ506p0Sel05B692c2FlKTwW\nJjWYJErld/aWj3NmjBewFKOcOl63u4e/xvGGngwm+1wXSWfbrvjkr3N6wqP5\nvlzZ7SbaIESwkdXZxaxbHvqEtchknkSapDPPcQyhci/J9P/oRz1HWD85KbDC\ntUBUTvTG76njyzaSzPLOAhX7xg9B1YIsCKjSsRTd5FU/69fVUDiHYeWcW2wG\noGOPxsMeFebPfb9SpIEbtIhjzLX723ck4J3PqXq6H0vA/Rc+Kgq3zdKDx0YY\nMUtEzdzn4tPyu3Yni3Q8bd/9fzsurWYLRPnoEhn6xcrYSi1KGIUDTIMDnqOf\nhRNwJj0fHYNFDVQnfwxf3xKACb5OT4zwgKJh2AqBG5j4j0yHR68BWVTvvNoP\nlFfgNTD+Kod6vlODqT/96F68bNQfuunhhtn2Cd5/rQvud/tt3T4camrAbL/V\ncPOk46LkP08eUTzxAFCwXw7PA0k3DBwPMuP+ZmSNDoDt2FzSyRz/mocTmsNI\npA53\r\n=8Ykh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/density":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/focus-ring":"14.0.0-canary.037285f9b.0","@material/touch-target":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.037285f9b.0_1644604217427_0.41568420621485846","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/radio","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e5f40d250c9a79821634ad5c0814e45ef7323ad","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.1aaa68dda.0.tgz","fileCount":41,"integrity":"sha512-yqmOOH4cxW8zAEONZMTqwx9nOR7bX8lm5C8If16oTcNW9YZ5B4SbydAKWFWvt0fYpou5QzD+lTe3BvrkSYZW/A==","signatures":[{"sig":"MEUCIBtHXZlGX/NOhUErD/GKtYkqBVvtpKorgoe8XXvxlZd/AiEAnXCJE3BA9uJpbFoUBSdTrbjdpU/uxpHkEyWZQzRd7ZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVbCRA9TVsSAnZWagAAD78QAI9Yvk5FUbdDLsVtOKQE\nP4+bZMuhQnRerLlL3nTJskGvSVCueCyycbElGoD5Lg/Mp9ChGv/FDdpob69s\nHNCaW1JQTAS+SNMH+cEcmMgfQoyb8TTDQ8cWkUR7IiXcLrBEHMiTK/kduDJx\nhRnMfAQfmNzlxZFf/+fNfAL1AK7YL7kE8G4d6Tppu+kK58sjssFHvRK+2i9a\n1hCgjSFldRoyAlhWXLvDZ+OIsDRmtv/pvMmNo+i3wIhqjuHj/YHAc6zBXYnt\ntUsEwHhlohol5CCoWs6ogad7UB2o3kwDmX/z4G0MKqBKZSsPAubPsT0zWeex\nJYStnARKXfgTomoQavIsVhpFkH8dygh3cRaZ5G6K8sm1/9joqKmZlYMFt1Uq\n3FVsYEoXeEAl8KSTTQAY5Ty/e/NO89qZBRrwRHMHtIJnq/oRbMoQ6bgQRrmk\nUHOs/Eqcs58Yxi1h8ap3gT7lbdrTecT1JXAmRzFmeOdWFKaKP3eJ9A7UwRD1\nUJRiqHh5EESbz0aYUN7NyLDj0Ucgqw77ebPcC2B7DKoIsiMZl/a04HUnCnh6\nIW5yZU7s/2I3rGvxi34qEQz3tykSx8SEl9lxXS0L6JvTwL4EfkVx1cOzHpaq\nffytlstDRck3hyOtBPlS8u0axOD4p5RAje28JicGO6AcZ+kRl5w+vx10IJtp\nQclK\r\n=/x1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/density":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/focus-ring":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.1aaa68dda.0_1645040986766_0.1367828581387438","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/radio","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2bb9205334d5b87a04b23ae05f37f1eda63d350","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.ab4aba1af.0.tgz","fileCount":41,"integrity":"sha512-r+7niEnjf4pCc8HtpbKjBztSQNkN987H/JZ3PnJKGwnDgf/hwj5bKoHQKF6ESOAZNQnegQ5Kx1qkdCw97+yFuQ==","signatures":[{"sig":"MEUCIQDFaGP6b+dPrpTsUcFbTO8yatQQ5FWKTKeNs67uTcH1VgIgS1LLOeq5ceWY6fHdjgDcyr/o9v+521Wyy6KxpMc+s0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb4Q//aq2XZXWxLMe/WIgbV8WVNIjfEl2E2/LUIOj+IfN4RT5swtLE\r\nLI3SZ0olFYy4lyWIaHCi+nDsOoSmdAV+Y95ur+m+HOqH7vs3ckSVipeGTU/R\r\nH5YP/DXo/OwB16M4JGRZTd0u8xOvWFS6H9HzcD9Ll43YmzJvBDKSW8gl87Lj\r\nVampbicAOivJaJIouhlhQ+WLd2M/bikVwOUZSBbUPCqpn2O2/xrF1UahdfYt\r\na7CEdDE6lf0ywHR0MJFGO9PKIuDiYj/2pYcWAuvy5nh3nYBOvUkrxjUw9rvv\r\nRZFNmuUGbnr2/vxG8mYR664m0LqaD8vBCmjH3amTVol9gu/JDm5MMaNQONX7\r\nMjfUhvymPlX+QNick706XnjJilXPvGd7xb8ywGgEyXP+Tf32qENGSal4waNN\r\niY4qUX7UyXI5HzpWA3HmP2Z6oX3RHjsomvvdKgXyzFP8cvmxD1XxrolH4TMg\r\nMBxsD0YkM+eDevClHnwCezfJc+8r+MtGcbRnfkFx9QMjsaaXnKys+JnfR+HD\r\ncE7FTjAjAa8K1pHPWQE5fzth2MA3GfmHK6vEmu8Hz9QLR9CSNiQkPegrPOh7\r\nDjakY/SZmQFNzKw7EWPtYQ6PjUhbwpQrpsTxh8ml50bNng8iygjg3Me/rTkf\r\n8+W2Qx/XsX1xpGbT/MZk/GH3+7vAH8evai4=\r\n=67Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/density":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/focus-ring":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.ab4aba1af.0_1645121819698_0.3351786484705339","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/radio","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bfea15b76cb28f8b91cbc22834a309afa99f9b6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e58552c6e.0.tgz","fileCount":41,"integrity":"sha512-/GBiqXG6DXq1ZcnfdC7a1+74k0EEKOEKXnQlqSYJbYnxWDyO8HU+v2t7zI7QKeCwyKyPXSQYBev3016sE3tseA==","signatures":[{"sig":"MEQCICQomvOQa87LhQ8eOIyFqE95Tri9uW3EtNrskSc79SaNAiAx4iinoHY6h4BpGokbb1ScjzMNGk1FQiEAJrnLfnG+KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoS+w/9H2A+kJriau1VEgxjyctiP27jMoWoJ1oq/QCpKnOSpXyrxqW/\r\n5fBxcdG8nrvsArtjvyBZRheMpEn3jFYf4mMSh9jb7uI85u8XcehZbWBxyPhl\r\niFYgriQMybtoNn8Y5aLI2YrK8cFouEa3dLlFp37ioMjzhv3RhI7NffUvgAFl\r\n0gbHAr9mOWYg+VZnMbAnJj+6CTD70WEWGB+5Uw4rcO9fbeK5iGDiBQb/FKN/\r\n4xxc9avE6CoWMliSgTJCbxzHJBb4x4t4r2syLZMF9wk7yf4Az7cXA/ghFgcf\r\nSls96otnxJPeqEHjNNnDYypSRBit7s7Gjv4BUB06tndHSj2kciUgJxhkGWFr\r\nOBffAyToFof/HdnZb/jh9CkUHL7DbcZ1Y0Wc2iH0jBDdQUd7M0uc3IRw9TqD\r\now6hv+kmq1T1sxcCIkUpsFDVnQRp9pW62jDxc+xcf6XqiNZkgwnWyn19biUF\r\n1Fpt6QIoiD0n0M7KisR2Jpzy5hrLUVkJwZlqHuqZXO2ZSMMIFTICdv3bBRZX\r\nPN64I6RE9R8LX3ZDn+KlZz8TJttHO986u0XEopLaD1k3rLLIoPxdqw9ZgKfD\r\nXHsG70J8m/YKbfpS3wJOm7w4DF3y0O9TUqmlZb0jFrZc5ixUoyNe6ioylRSF\r\no8GA0LbqhwLaVPt9OFDOiPbzbljdubcSz40=\r\n=me1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/density":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/focus-ring":"14.0.0-canary.e58552c6e.0","@material/touch-target":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e58552c6e.0_1645207485614_0.8771582801911553","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/radio","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db5b2200d3da2e2bee1d45c65cadb598542bd5ef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.868793776.0.tgz","fileCount":41,"integrity":"sha512-QbABpRRI3rjBXpp78SW2sY0iKwziq7RC51BSGUt/p6rfRyhqsjplxtV68rs32ejopfLr7HQKSbjG9a2T2CVjfA==","signatures":[{"sig":"MEQCIEILwAFB6rbxEDp2cT41SLCcUfF21XzP4dmTbm22yTrGAiA3+JLf9lXYzepqXJXhQDcBbXI1Vv6f1RzSj2frSPNPhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnXA/6AlaE4EyiCj/UJpp6XUER+9VqeffuqFLOPAQkVBv5nUcqG1O5\r\neOzRH/MAq/2NqIiAw72tgEaWiw8SGiMO1HvKl5g0eQLvcvJy3+YRRitMSkDn\r\nsZcFYVwFnUT7L+I/aBeo2wI0RSvF7sXRj2yW+JVHTxLnEarRUQ/MiMlCKtoC\r\nKS0nYHL4sYeC1fBJAfE/NGL2+0NpKHxhOaJmWXwLzG1pdIj1g9PqnEahjLLd\r\nKfP04O80KvfaB7RRiaipA0tiGN7+rLypwd/J4Cs5u+RXjWW/wpfDSoFMVd7z\r\ns9RjW763k463Efgy6o29zJwA6FKJJza7Hg7NhrkAoVmUsClTjZBkbIOnR67y\r\nAFLu0Tvw+SBIuKYk2r3vayfnjx90drgRA+gExTBlOfJZr5TPWPXeAS2Grqfa\r\nFUGDmur2V5WsJ2FK/mHm1DXxBxweOWd6PP2/4J1x+ldd9bvLfDBvlZ8/6Wxe\r\nwmrs4BQje4VERJ+YxsvmaahY/Z7jmU1s/WJWMssP0Cc79LqvrGGZrNJt1iWx\r\nvsP2tERbl6zfRxNfWg/0VLjij4AaC4vyOnr94lTkJMFWcHSYeB4DqFHu9IP8\r\nz6wyqLGBNumjsaTIYgzXWov16qJOxyY+KH/ikKVfSCXv9h0qWc4iMVFl7AvM\r\nftzCG6Mo5MJZ/TetRsgynTn0/OK19Pq8Go0=\r\n=vdyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/density":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/focus-ring":"14.0.0-canary.868793776.0","@material/touch-target":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.868793776.0_1645558593821_0.21937229923661827","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/radio","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e0530b9d6de326ff7459ead8a93b6cdf4c0159","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.fdc37a445.0.tgz","fileCount":41,"integrity":"sha512-phMmTkeApiEm9DqUGhKWUYXD20wKb8UakzJRJu8/87B+GdbHkTCULMpEMWyYoyYk9KyTrCsc6VHOtqXQWSsPjg==","signatures":[{"sig":"MEUCIA74h1Q0JqvMTVHVTWkAn8jPznZ7OAve+c1KYUvcWxFRAiEA1DDF95MLOX6T+yvLaydZIOzgS13Kh5Ex4/gC3iRJAg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN0Q//S9LwLXM6lZIpOzLJX1/oVc92TV8c28rA/dntFqYvjgc/UjBR\r\nmDRQuwXCw9rRwKvf9MgTEc+Jp1RSVWWLiLfHNKyJanADjmmqrk4YNtJeNuXs\r\ndK2S7IJBoGppOVzYC3aEPjXN1DW8tQ9/kY7vOp0Eu8TSy7/3a52nw0JQWDEO\r\nEAOlRb0wY/LtNxtBQsz9YPCb9ZdLziRp2A2DYzZF8gmRAlf1DY9JCW+aWx7G\r\napvt2USnxF/S96dMok5sZ5SMV+L/mrWadGJIUpAbJd1SHv4Lp8+puKE2u8T3\r\npLtN3TzajQJC2kbpKf1ZFcc/pbSOLUeY0JYejN7tpNAy9jsV5jt6HMuHvd2m\r\nzYiNZiomNE4z1vloKgxEYQ5gzEM7l8UtDiByhyGT/3NdPBw1TiJt3JTpzoAT\r\nxapSoGOZ/PS8HasxmI+uEc2SrmkpujojpXdpQWFVcKk86/H6PEg7SOH+CFr9\r\nsmE94u69SPn8tLg27Qt3YtTGzx39hg7sjcJ1XH300zmDxLw+uxRyBUMUkSD/\r\nWvtZMc2FADZmEbe2ie8Lr/Zx5bLBBRZiyq3oOmLN7eAhMadhhHTgfkSVnGQ9\r\nkjiL3jPuxJqm6hJNx1bLGlLqxQ5u/Pk2luY4YyQKKAIJxvvszvJelF63wmuS\r\n2knLbfddV5t4O/j/GKwKJV3EcHCy2W3no4M=\r\n=U5cZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/density":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/focus-ring":"14.0.0-canary.fdc37a445.0","@material/touch-target":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.fdc37a445.0_1646074006487_0.8028744700921822","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/radio","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b8cb6cf449ae157e760bd736ed0d7f907fb5656","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.43c7d87dc.0.tgz","fileCount":41,"integrity":"sha512-Bofl/N3v+VDgqMglSS5PQJoxE3YZs2WkjFnvJpQzRDKnpowMc1a0MHzVjnw1ugBwGrDJ9rUkAiCbmn05Lelu8A==","signatures":[{"sig":"MEQCIDTP50wBHJ9U66LimaGq6TjgWU0lN76HtmwwZaiGEQ5UAiAHYNv4KWzggymNd0oZb8JMR3ho0yjOzO//vNRhmnTtyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0wA//dm5cYHCi+jxapUP1QpNrf7Sv4lB+Vk0MSCDHpw9s+Ap38Xxs\r\nOqap7vN4nUDuy053+P7x5qZnI/LO7qvkSv4sjVrBVtBWBSmIdnrSyKGxzHgY\r\n9gCWKcOHD1cWo3Y+DtfLR5dMMOIoQo95JoGqQg7Jv2K+F8ZlVkojnx5JJbQt\r\n/gFtQ1jvDgXdIu/mIDTLCZeaibskan8vGoLY8VzzL6NpuUWqcg2tpK8C/gav\r\nykDVDtxpqnkwDqkO3VAm2AyNXpM7dxY+QhJ9VLzeacXx+jat+ETQueatiAe5\r\n1Jxxqm05S/ErLjwdjuRH16P6PDWsllCvM/Vw+GqPKSWGqaH0GECFYr6i+jBh\r\n10QW8QVBNIuWplaUrNvw2IlECbojRS7qMye5JQ2lQ0cR7PkD7vMZdcyk725O\r\nb9GwSc1AvyFtc6xcGBJx2g54A/kv5Pma/kMy9kdd8QMxqDxwZWVzeM4eX+9m\r\nP2fe28Bku5XnIy5mFk8SvGETEz52zodSFzMQooaAl3f5aBun88Y/5i5L1qQe\r\n95tDdZyrLcjz31YDC/cOWQy2oAH8Mmx9T43lNEBwDOZ6ScSbeHneaka/VSlx\r\niEwSD8c72idFibYtqlPKqcbmmLwzBEGUkRSH/yGz+0QQmlH707wFfeEoSchS\r\np8qvQv85LJ6LFBcBmtd1egmCh5uwV35evOM=\r\n=Yvqa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/density":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/focus-ring":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.43c7d87dc.0_1646148827214_0.7794437821891409","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/radio","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"995a95977f548f83d490abcc69d8b153a22108e3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.23043acd0.0.tgz","fileCount":41,"integrity":"sha512-yF56qtimM0CaRVp7Uppb+uckn3zjNRh2i+RAEXQdX/ZkmtKrpALyU+AGGhelmilLWdYYJCCQFg6wwSBHQuPTdg==","signatures":[{"sig":"MEUCIQD8sJq5fD/bmxnhMCWMJnHPzLAQmzGejAnkuFcBNAk3MgIgCL6mvvdTgVqLGPuZhD5uUZiVfVjTa0wZyPZilX3ErOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3nQ//YBtF2XoXf4mmbwWt1lrTAbcFWu9TSRJrvL9+jK8qE+ASePau\r\nRv/sE53nCKkwbLjXAS/Rg4WBZUuR0Bu4PAq6hn/dlIm8PqUzMbf4bjKqQ65G\r\nK+nKG7Ey5UtpJqZAQ/mD94sy9T+IzQPFww8cJ4Mmk5x+tzAUuPeN6A5J4eet\r\nDACNFtdRTCW4WxcAtRCGdn9BTcCHM9iCebmD+0Zhx+UaTMSt5jJesW2TMad9\r\nBMupmopgQ7Of9wXk+VztedUP0UVv80hAUnVZo8za7z67kHS2pEvKTPr3ekip\r\nQM8Y4TL9+stqEfpUsyUqXE/V6G/qc8J97ytSsY3WbShDaT5v8NfJ7Zf3cRob\r\nzi4dyt7TukmwGOclWTzGGlCb6lRuhLS3qB41oB4xidSqEu1sIjsQX01+jRWA\r\n7MrYH+QHz34/znKvmi1Q7WptgvMsvHszfF8XlC9mYIzzmgMYoZ760IzRTOm4\r\nDhTYHrw8Ams0ErJqRWDTpwfZbB+2Qirj6LfMKIY6LSBmPUHtw2zxw1IEsJjk\r\n6MI9XZ5sxxIyBejYYsV4rlid47mCmES/uruqJeiFh1AtOY8l1xGZLCzgtBuW\r\nHQ/Osb1vxXqhQWnDVqvLL7fiKBSwu7/7f6jY09wZTaUmUSLx/2FOEtGTw0/E\r\nGEk303RWEjhQl8vvxMcl3eRUQVYYVc4vhyo=\r\n=I9+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/density":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/focus-ring":"14.0.0-canary.23043acd0.0","@material/touch-target":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.23043acd0.0_1646252881708_0.6670778967880859","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/radio","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9e16b39aef600afa268dcbee806a8f95c781c0d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.6505e61c5.0.tgz","fileCount":41,"integrity":"sha512-wvj7putKpLxN4wQqas1zD18Sh7b3LGRESVFjCWMyZMSfp9s7SbLh/CGY8g0+WuJmRxR2mEV4c5XIXE6Z8s5Lxw==","signatures":[{"sig":"MEQCIGarR2aIZGDu6zf+DJ0cXdb1a0HSPaiXYlEt+/LVz1BfAiAg95p9Km8XvhSsD+wp9viHxfcrChlQ36rQKueEIlEahA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP7g//Up6SmCvsCCl0gTJZIzbseMog6lGLnNAdpMfT0VzLlOvTJ9wb\r\nDt+A4Os/SyuU6/lKgrMN+jJEv09v41H9QGP2ThsEbN5i1bI6QbTbzwJk70d4\r\nlcqbQnWtIqlfsnzC/bOI5ucPDaKnRRDDwaM4r5VH7GFIi7C83pzifd2nhuG4\r\nzQKrIs75V9ww84OmjFg/SlMgPS6ckB0OMpl59H9YDqZATLHWC+TaGUPYselZ\r\nPMjCp7BK050B+xdbaVYydgJtJ0GcCWlk8I2LnVPSKJ5c+64gF+PTZDGdTdH2\r\nmcmMbH1u4nv0ihpc1FWs5U43YKq5P08l4B6XP84MfJltlrfb9QBuC3YqrMqX\r\nYFU05C2YXK1wXRWTnPny/DZWfJnbVbRC3Ga+IMY+ccSuJlKJGeKkAcowzPDT\r\nNjSw1pa1+Pe8Si4O8iz+Vcc106jiqIXeMFHXgMn+kOzMpVa5aRp4rgF87GZg\r\n4ESflzF49uX2ibmfW0cLld3/jcoRWTDp+gkz75N5g1xgQg0Yb1KMnUqNw09x\r\nZzuiyc22SlgDZ7OfDxTvm79MY+HIwSNbmU0eIBqhpXqjXP8wg8Td+sSG8gF8\r\nEz+XU9Adq4EWNlmp0iUMRebMoWQWnQUUKE8t5aZE2p2tOkB00JHrXN/hhbMB\r\nHDlxBo26NvwFf15LCz3I1KpK706vJb4BO+Q=\r\n=rQ+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/density":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/focus-ring":"14.0.0-canary.6505e61c5.0","@material/touch-target":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.6505e61c5.0_1646337679952_0.9807473724094444","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/radio","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ed5c1fc44b57072daf413279e3dcdbb65cf15c7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.16c166154.0.tgz","fileCount":41,"integrity":"sha512-GswcgnQbWxQyv+fPIjzptiaiD/UqclUg72EcIFoP4UgMeMlJ524C8+ga4FM7mHR8hI9oeM8sk00P+xXQjxtRNw==","signatures":[{"sig":"MEQCIAEe7RdORfjq7s4ZWq4ngp63pjTIGmzYKK2pfJprrGA8AiBGaHdecfqjYVY3yYUS57TmnNEaQJ7kJAXpzmEzPboNbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohbQ//VWLuML9AOI6WP6jxWgWLdBQnxwrppSb3d8hW1PSSond/sOpV\r\n5ogW37XygimEO5ieyFB8zbyknOqhteqIwctC2mFsNUkd8d+TbmYp9+8EdZnm\r\ni66hHvoHHreHl7v5pjm1qgt+/knQnEIpOYawe/m5i7X7menE7Y2XkjWoPaJi\r\nuHikmo/ZU6QPMkefyf/Ug3hmK9U2FdF3D92Xi2rzS579xVOYKfFehu7swIe0\r\nfiXta1nqv/2zK/WVV0k9OMwYWZjTw6wdHUI4dTxDYmhadsqR6Ha0QcSoVznu\r\nTAZlQJMYQ7Z7pmpsoDWz6tXbjzbYoBm8FfqNbzMWGOxkAKErK1GS4sUPs1/i\r\n+b97VZBF4VfQsavaZkIzTOVoEMxAwpbvWLQlM/8BBAMojkPB4X9QA/HcSii1\r\nPUueTABO7QTQud/ZRLaoABsEKc1qEoEB+3TaWHzdKLIA2E023masCNI2YFxD\r\nkK1rsd5a5AA+5Hfafdp51tWny9sah9SPLstXO4qn2lrXBJ7G92FPuGrxlkb3\r\n1GkWiXUqn+Yu0z2QH3LY7h9GkDl6Gu3PdhF2fO2IRtTFgwtNVTXewebUntyk\r\nvCEY5uiKJh2MAn1C3QPHSB8SpN17wBCh5UMdBxM/54V9730lDalf6m9Wl9Qm\r\n1WA4QBzF6bNJ5WM3fBY8Qur5ZN4wUAHPGFk=\r\n=rIh7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/density":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/focus-ring":"14.0.0-canary.16c166154.0","@material/touch-target":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.16c166154.0_1646781777994_0.9859860502548792","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/radio","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2079d02487fb03844a00aa43a6675c90d3aa38f5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.bdf1d3771.0.tgz","fileCount":41,"integrity":"sha512-W7P9FJDrDQf+swDcsieG84Iy+VHZ3yR119fJYDDC+sb88II8laRrrDfu9M/JUZvkb7gmrdX1QYYXZF6EalB4uA==","signatures":[{"sig":"MEUCIQCsdnVtAXknimkj2HDe8XajMq8+2sBwkQ+wqfv6XzVzbgIgC5N9X9VcTjpnYj8X/uF+yM8cJUdt2qmNcBicqx4kmwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1E5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD5Q/+MZrZ68VhJ3GoDRqj3z2zJ7dcvRxJlb5Uuo11SCotGYzuCPCL\r\n38GPnWO1lPP5r4wb+JiFcTvPmkCKORQQ9cdbYtT8C5zm57fBNFF2sJ5X5/xT\r\nV42uzpAG28vCGsgdnEKkA7ltb3PjF0B/ALSu0PBktpiM1Y2fAFQgtqB5d6S0\r\n/AGbVL/5o4HMW306MWC6ZRd84Dm6NC6AFmgVFLn8pj/V5nZ2nQVbpZ5iIOOQ\r\n/5rnjKCpS64rhMGaBF3beGB1HsHi/dLK4QMby1QBbpStTRhTB/qsOirX/Q2y\r\nlavuDSiJCEu0VgX0qtXGZPw7Sn1BArb0dC0RR6Hk+LCduh+X+7ittULge0R0\r\nV5YTIXaNFP/hsP6hoZ/S8rEsRDyYaEsiUGZj92BShQAoUNtJou5cDcgEmEYz\r\nRQY3tI7A93HIRZBlaExFtZFNCvFTeTyYbgfL7Ll1wj8ZMU6TZWwsgrKppzRR\r\nKZR6rImh/LsHn0D+6mskuMks4P7h8amwLaf8R/d/9cBk57RUndBIQxa66+b+\r\n58FMK5oTFtw91zSSO6VbYUBOAi7ti6Xu0KcOuOndF5UxVlk9VxxULPU5jdyi\r\nGUKgeAdiKaHlCsOom5DI4V+wi6x+Wvkiat/Z0xPcr4JOGO2jAShSELWS2+K1\r\nhho53f7uAaR6mFNhTU9U507t6Z7pw6PP9sE=\r\n=6tT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/density":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/focus-ring":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.bdf1d3771.0_1647268153158_0.27160800027885745","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/radio","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faa9a93402796ab660d7915990aa208e267ac0ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.cf4292778.0.tgz","fileCount":41,"integrity":"sha512-2blHjk9P1Ao9IvAjvHayLGYiO67qZdWqFNXTcvwIZ9AL96c8tiWjDagRiPoGULLz4QB1KVEb9stW3uIe/DjYGg==","signatures":[{"sig":"MEYCIQDrEf9E54TuSZgu+35rQ6EFM4bYW+faUDnnBiZr/o9k2wIhALHiYlpb0OkSyzr8In+OnZCQ0FOfHBvVVGBq7RAgRVM5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodwBAAjgg79i4Omll68JX3/XjG9DpNeQgYeTiWE7iY/JlHk0SYgV5b\r\n94C9Vwp6mu2kkCdRoj2fiZsZuUGH610Vb40jnsK1FI+I9xj2/2lQitUqHQo7\r\naiAfYySptofCVFKpxFykr7tYn/RdVoS5e5BfZJTDc24LlyZ/gGvoiDrDF8o2\r\nZHafQ/NZqDLq8b212koR1fBOUX2wF8zeoCJVEzE8FQL55tX3zirN9Pb56feG\r\nNM6hxOL0hYNvED0GeQr8Ve10sLYzOwWjsWQ4+t2AYHLn1ik/k2WtLuIN5Y7s\r\nZ3MA8FQSB5Y0cwBagG/8ZO8hhOD+d87MZfNGJ3oIKpY/UMS5hI75v1WaTIyG\r\nXKKcOimyvmPVqNAFKlIa+C2GbkZfMO+YRdeyLW6DfTRoRg289K0rrWQgfg2/\r\np6JLuX+TLrIC+/UJ22FaBThow6fg/GJ/EqHD0hgPtM1hxg2sD4QTe9A/cR4+\r\nBy/+M7R6ro/+z9ghbEjeUR943P3odapA93MLxZ7vXG799aKJYSSd4dJ1NaLo\r\nFxwiapGybJHLRycHhxy/4I1Na+D6M+nygo/nemXjsLb4IEGAWgDRnpDsWJuI\r\nywydFjF4TVzOg6SDB8zXTLKwNKJ1zYPWZlItL5wEzSY6e/D6GRb1VVZ8iSTs\r\n2PTCvTJuP2FdMbjPP5XG1fqkiQCzyajybpk=\r\n=CQab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/density":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/focus-ring":"14.0.0-canary.cf4292778.0","@material/touch-target":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.cf4292778.0_1647304212458_0.8984673281819213","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/radio","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eb3ce56ac59c95f24bb26734a616f669554cf75","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":41,"integrity":"sha512-Ym+KwI0Q/8Ta3BmjqXMnWCbAu0iiehjpu1xWIc6ErldGCtvVU5CL5ljUDyZVBl9VN/R5JQrxhAELHmnxL7AGdA==","signatures":[{"sig":"MEUCIE1dkrsLDBWMogEhMw1bO0D5+gEeFtgqZv9UCg87EwfnAiEA3Z3eyTx3xBGxABgZSrAagKQZi2dcRanmYOk8i22654A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXPg//RmFdhY79B5EkZ4izfiQIZTYLd1r5083jXs6e8bvyn6fl5Mpd\r\n/de2jnzKZUY3CB/igkNdRmcz9tgI9MFsTaY3SqKaNwI7OBWT+5EsprhIrvEP\r\n0Qlc8qjohGL20gpDYsE5VdZHF4FLhaKqhbi4FkzIBzRy0bX4Bzjcv3x97HSu\r\nMJmBurR0HrTb4D0/FoSANiThXHrCP+i66F/HAT0kefc8dIgrXOB+7putLCwQ\r\nXtK2EhAfYIl0r4I3gfjr9rQtVYq/PAdCVSl/0raWwYf9qOc904ze9DP1f+XR\r\ny4wTW6BWkTX24jMNtWASML2qHrisLG9Qn0XrnRgOEK9KyIHY6UNuRGOH8KWx\r\np2LrbNY0a4Q9VQ8DrKbbnZfZJnz7ungXh7GqT4VprN7q7wsK2BRkVeWktc9E\r\nI3xXs9v206nfhg6yI2oRlB+Tz2ZNr3/lmVFjZesK93twYUXKN2rr0FBbRAGl\r\nvzrOghMPhO9PagiLpYgCxa2eVPitnjBPQwOkXLjEvTiIku0beFtm8/4JqBSp\r\nktBu/xVaGsb40S+Ul404NbWeot5FICQX4YD3FxypBQIGnQZcK9DaYniHy4OJ\r\nyu+kvIPWOlgCYr6/Ke/UQ1MrDPevFYIYCajax0VQGeDASk+19kK820QTLgcb\r\nYoz99yrOci+3SLGpvAVCIY360OHhx1P4dbo=\r\n=XSCS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/density":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/focus-ring":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.bbd43e0e0.0_1647463839629_0.028377096200457697","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/radio","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68dfdfb0976d3cec5d7dbbd97e87b6cd62c17f5b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.1b6afad86.0.tgz","fileCount":41,"integrity":"sha512-Z4NTj9xDES4aWcPkpB81fASTyN0/9L+euBBjlrjXaB5PXUOEZBU1FBZagT3/hzBPx3zTHPj6kANSOCWOqZ13uw==","signatures":[{"sig":"MEYCIQDJMuMyGfddoTvhkguUkpTR2/BEV2SQBVvOvjFbVJ5e1gIhAOXEq5ROwBuVjciOaJYTk8pvD8W4GJlnmVUZG/P1kgw1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMhw//YmE/UGRUq70vNjVZSfslp8+yJCwOLYMyftrnebeayQ8DCsq9\r\ngWu3HyTDiYHDgbVpY7ISgOYLAupCuFeci51zERu2RsTIxwoBE2j2zqubIJVQ\r\n39ZbmUJkLIxBWa4SJROdVYauWZpfMMknlCMh716dQjKC3yIZDEUi+wcA864h\r\nFK+VxkeAnhL20t3B1DSq96hRMCFO80YQDiIHIS03lZynItMOGeVqEhMW2eP2\r\nCTv/hsyqij05K5P3IvoiGuO+gYiKqhjbo9qjnX8VjM7qcWcT0uakunUwfw5N\r\nSLUY1cm+EXYa0Bnhiefmm6v9yTXTOExLehi04xg9ZzOhbCMvmJ9YoG+cJvYr\r\n8CchPFDvDKq65D20LfQLOI7yzVR4zy8wLVXroMn8XEtAZre43as1Eb6gUAcF\r\nMkXGMQFlB/JsHMb5CffWpOOgx6hX2q/u2WarUeol/KoFWE41v8ibcYJztfLN\r\n2UgOOh422/j8TL8B8s3qrL5sAMrcgReuIQ6wMmImvtBUM8SI5hvCB8KE1PfA\r\nn6zgF7FQWjzxkwVDxVClFEq+qO59YY4WTeBGRwl4KQJABQrg5cshc7reEG9f\r\neJyx+SuiuZotH+L2+5y3gb/zCHcDILMSBBNUHKxL/cVnWQxeHAm6di/0F6lO\r\nhivQpAV8f3O9tfPgylZvWf5yyymzGdW9rnM=\r\n=7BEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/density":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/focus-ring":"14.0.0-canary.1b6afad86.0","@material/touch-target":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.1b6afad86.0_1647464651597_0.8106964124916485","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/radio","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33cf15c40e6728bc0781deb5a6aadd697df1a4d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":41,"integrity":"sha512-QJQa/qhhcvt7JO6LSDzCgnnM26SRCOhdQMijbK9KbQigshsBagNtJOBs0sRmr377ZPTONERCyjKNPTmvYmWSmA==","signatures":[{"sig":"MEQCIDhYop1XKJx2MGA1RPgw1ffaabbGKQkOAjlVQ7s13W0YAiAKXyvyHBlpdTZiqTvupHgqpsJ6xnfM4+TxjUL4i2wNcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCthAAoPYE2k2x9ESMJu3nYqwR3vuCQMYQ0iQNzmfD/+CgsXq7plxg\r\nC34UVQ42bnlqJLEoNGKGC9Ba/aDFO4unChpyDJISxAwvE1eMj5xl13A7w6cL\r\ns1CzsS+KCuCvwzsTrfvntf36KMK9KzzaELnW8C56SbNJWwzSoCfOGCcniQ9f\r\nC0J2ib+ibAgFITx+++xujZPKUuZPOO0i1TBKBvivOdJ80iGzBndvON4jz5Sc\r\nehF1Lqw7UaahxlMgUWLyaZWG3jhNUm7rk+6tWOSw2bjPqC8TlkG7EZRz17xl\r\niOZM+PJ2/4i6ieLTeUSVwXyOFJwQ9Pa/WmmZGlhp8BM2OIei5eWvt1b/P9k9\r\nYlQycgrUkLCsfKH1EQL3Q674pJhwsTCDC0pYwKLIRaFNpoVgyDoh8wpGl1se\r\n6VEu4Kf0+rwtP22UCmQyqJMAaWfyHmNZuHhrjF3jnTVGdHPMf5xKnAEROnzs\r\n1CD9bgtYqcphr4qS7adEnfHbPLZ8hESALPjPYXCwJ4qvT9Zfq476hSUUHzrf\r\noHPRIZJLnwDEfEK3cyWioTxXViyzzQtKawmIfOh9F6kUcsXahNqw6bVChWQI\r\nxBoHe5LWTQzIDxfYqEXzXfMf6h3uaay2rIdBDGMgXIbm1soPivAl6wVfD9lB\r\nsuAD7WoKdaXh3BXqW8+Jy+YHvBkdGfF5XvY=\r\n=bv5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/density":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/focus-ring":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.bdf9d4af9.0_1647465507624_0.38404359819035605","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/radio","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d76492d6c44a018c3f65a5437d1171f3f51f6a63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.32b391398.0.tgz","fileCount":41,"integrity":"sha512-PnIMFMXwNWRWbH/AzpZHqYymY6me7/jmZ8zH4dSASEH+sXxFIFrslo/nV7vsLtKnwZFvA9T1EQVeW+fB3imzrg==","signatures":[{"sig":"MEYCIQD91lVO0D8zR4nCJaB9IglZZDPFZIjvG3erW7Bv7W9uZgIhAJPQs97+Bl9vAd8Iq0GeX7AWbh/5PK8bJSmJ9Qre4s45","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrouBAAk+4gTWoy/6kp01A5DsVvnbhQ8RahAEstNpu+ZE0/zUalJO1k\r\nHcBTgvBGqAkefWM3CpTVndjlbQP1Kbsp06i5/yYyh4Z9EwavkKn9RiYg/ZWA\r\n54QeDS1cVnHDb/NK3whX9gZVr9xoSrYkWB9CfLrYidKNgCzTq0RZzCtdOnKW\r\njefkHeKRCihvZFBVNZmbj2lcPLKIe//spiATRiKfRD/wKQedoUzIqpFjgAH3\r\nnA+bwjMUAMh63viEpPKoWDRcHs13pIu4TAqqBjip1kwye5YSFkExI0/x576o\r\nzBRJC7DiCpcPPKt2wakjAx1X/+bvT1n/ikH1+Entv8xlrlnEBuVfkAgMeHsi\r\nGganJMvcUYa425dS/R92NbagVmMfWspPQysLyU+mxNjdMQdP1ErXSQuerU4d\r\nsTURh6E1mnuNbCMxAzGJqO9AwI/wRy/bPUcTFuQrZee/aXc0MuEgxvaf0BI5\r\nXZn73dZeYb2XoxJVlDuXRjZM0pSJQLHCTTMCxpuXMh8AMZSkmXC3bqBFoWlY\r\nN9JG+4Lupr+hgrPp6i3SBC9gnkMjhU9azJOwG0nogpVj59LYeAu9Y8PWeAzt\r\nby5ztLIrv3LXRLTqE+LRdrZeIQ6agKLnwRBNHRLFpsQf3VLJiQnQoDGJceP2\r\n/DgG3QCzhyL7LArS68l/BH/3J+jbkjdZUEk=\r\n=ff22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/density":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/focus-ring":"14.0.0-canary.32b391398.0","@material/touch-target":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.32b391398.0_1647539991873_0.9998135902812164","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/radio","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1db68b76d23fde02a312a5153848acba59569d38","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":41,"integrity":"sha512-Vlfv3L6S9A8pHj4K1QG4gRz0Vqv0CsOfHna92xQ76U64VI50llx6nnhILgvST9E/9i4nUoQKWTvtF7yuvYJF8A==","signatures":[{"sig":"MEQCIE1GdT0z8UYY0EUj/BSSlYmAqaCEENS7NdDExEcu12DcAiAehUGzdwsuA9CmLITG4nUxX1RcmCUltQq1pBOyz/JwYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0ORAApNNIi2X+D3v48DEhGKun48Ffs4SexlKeSArOuoIc4tZJDuqh\r\nX7QuhsBqP3PQ1unqbXa1d3vUh4Y5y/M8wju/mCaswh0fkkO0ZO92fMkqb38Y\r\nXur0c6aTm0mDpSTtN7yxERZ5Yx7bQGxmMRq2l42I4w/+fXgWgP4/UKEDKUWs\r\nW3rZBr8vEEWhGlzRHXT8fINOy35wg+5vVnsJdMLBYPaS0OBjnd/gua/lFgKv\r\nTRgc42szJ58GPSw+RywT11TigCpAm24H3Xc/P52OjA2IJvQ/zsg8I4zoPpqL\r\n+ylBwBON1XUOd+UnVyqEvohohqk6RqDrvgy5BcmzdXa9ZW+2vr4uL60xEtfq\r\nCcE12S8LBdl1T9N8yAlNe4uSPIaDiXtrEK3te5UnBz8n/LuWAXVsWq3qDAYe\r\nWMCUfmLxfZkri2iS5nE77wrtVuut+QzKu1/sqou1KQ/pxUeG2Q6a3iQjMtRg\r\nM+8vb4qVW/95n/sbmwlwcgCg80QTW86XkEeLOJIZInq4yElZ50DHlXmAQmxr\r\nTUVSieVsDPPx0xxMbm1BAro7Je4B5vUuyasjnyo4Sr2m4Fr7ovQyCN6pdpLO\r\nUSV/QIuvIErZu/8CV+FP/3KFybOHRRY4G+qOy4+f+cBiASr9g+n2tGrgt2Bo\r\nr4w6hocnccGJFjgqAUSWiqSo9HFEfy5sq98=\r\n=2XPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/density":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/focus-ring":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.ae8a6a3a3.0_1647621591784_0.38329370562483844","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/radio","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68bd2ba0e0eda99d5dd3e1aa64ea40510ba4124","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.cbd9358a6.0.tgz","fileCount":41,"integrity":"sha512-+UPW9/hsKylZ600KmlfAOTy32YP17B48n2bGVoeXo4J4OT7Ya5WggaNgaUp6Zp75HOnKTLmAy1YOFAoPeVMlpA==","signatures":[{"sig":"MEUCIQDqdiqkIqdyUn0C3iPjKUXAk9rVY2LezQtGP1Nu/H1W7gIgXY75ESvEoD2y9ICinh/yekvoOxjmOq29WavY2yYoeLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ03ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1yxAAimhx3dR5SGsG1dOE9dO+3QNS0oTL4PBtUIT5PM50R7FEPMgb\r\nmRfeVpplbazfUed38sDvpdkuJQTHJ6RzisTCgjZiA+3/g7KV8NboR0m5YO9Y\r\nxW5TXnjg21tKNPg0+3h5f4MUkeIcxVkPjEK2IR+g2kq9V/vdTdjhoIdeZLqw\r\n3nYnTvM70BKTs+My60TXOU6bB3dFrj1fz0hO2htUrIeLuve1gGPuGXfLZAEf\r\nS3+nNZWk8RaML1FYrZjF9GjYOW+Cnc/NZ+n5DA1/iekrrcfLFXJFTBCEEbD8\r\n6A0oJC+RxcYsB/NAhObx6CC3GGZhGgVYnD3p8bvAHaywhIsIpIzNcJn68+qB\r\nCpVuabVh8GEQuQ9JsxoTm3Aiqn+i72HuUnxTnEqGmqtRYoHnyLurjgyq6Hxv\r\nwLmTbXz6GV2D7JDfSZ+murmCnlUtBW0Ds6yMR++/Kxw4l4h7+xe+8z7eZBk4\r\n4NKWk9njVeW8PBFy/A9IfEH+j+LQm7ntxrr55evPLWmRfnB0qeCKeoO2IBO8\r\nFAomRruSnbRPwuU6n8+ATrQ/EqYIGUh9CpicE7LT+LJPjw8l7QrRSUJJYHf7\r\nhC/8M8sOqbdf4ouy5pbbnTxh8Q5zpiLMcSLM9tBL2COdLSFvEJhPp6u1MR8V\r\n9AXhrZ1BLlUXUOPjNDpDywehsVE5ykOS7EA=\r\n=B9o6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/density":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/focus-ring":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.cbd9358a6.0_1647643959050_0.20102866800170172","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/radio","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a27bfaec5f21f658ac1c90386646e0801d7a2a7c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.dcfe49c98.0.tgz","fileCount":41,"integrity":"sha512-OYRd0jkYBDrfyOyKgKiBtUfoNqYWuAZOkfLFJRlDKGK9+7r0UeVO0WDEUccIYGgUE29rw0gZoDhK0vUDGsi6iw==","signatures":[{"sig":"MEQCIA3syN5O65JIJA7Y4en+ihQygP64mHefN8hhqyZUJ20aAiAaU9ZNW0VFvOr7y4uM51884aREJH9vbL5Zp+Jt1EoDpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozWxAAmVCE61SR5oW2npOwV9dYvfGb5cPK1IVH2OCE6Cehi8TCJtj8\r\n0g929e+jxsY0rgyrOkNFC5nDAdfnrgYyCnoP7sbt8QU9+vVP0qtxylYgehTw\r\nH5+ffwTpZyJu1PWUFyrV91fuqdAlrRGyUEYNaAItzxjNqTbJc63dMYkh5nwW\r\n8Z54HKc89ItoXuv0dPkIAC/plcduby4DDuqLvS3/1gBM3ra3+xKlco1DB4Hv\r\nnNA5iTDaMnFXtBrl4Sjgw+DLf8t6aAPd6RxEfeV+0EUL13ZOG2lrNp93c/Uf\r\naYbyfr+M5dDwMES68kfcB4aycelWwykmEna+1v5MKLUYk7uEbNr5e+E2uw70\r\niol0AruJHU5qHHCwpd2QAS+08wkkNyAddprgkOZEMbxnG/70CT69uzRpvAVE\r\nN9Md4RnDWDGJeL3vQD+lcB0lJo5RDQ00JMYcihFOYpmf7FbdREcBlpKnvDu4\r\nzp8XHyvlaTeZZQDbyDai5tIBkyY6+F+25njUqWIyBwolMfpN/aTYfeNE9Ojh\r\nXERQbNYiJzcs89rHLaBxCQXXTEU/NFlKbc0PxxPeUaScxsWfDKhhHggWmcQV\r\nvtWBUpF0/QWhsv0IFIPrCDXdFvyOXOIoBXM2q7+JdCAl626wuLY5RqjiDCpE\r\ndjNPze8TpQBRDMZZcqhnIrcixe/oVIfsu3w=\r\n=rgVS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/density":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/focus-ring":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.dcfe49c98.0_1647888282023_0.6233544562687878","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/radio","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b866e0b7c55b1477964fb8964f5e8b0c442e6e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.f31a833fa.0.tgz","fileCount":41,"integrity":"sha512-8i8xLE9eU0CBKT3GlAT/1nordIem3bi7mZEgfBIQC6tNkMfg/vyC6IjfBHJGfL6P8W9rF6NQCrHop+Ua278n0g==","signatures":[{"sig":"MEUCIQDOcLfWPLql3/PXE89Jp85we2wwBihpujTMYSb9uzx+TgIgZuSOrtYRdXaYq+aUcnMMw2SvQAhqM5AQuUUUGXOkQBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzVg/+INpMMeT9Ug6CW4k3tGzxfPqhrNromqufVt+PrsCbFrN1UxBI\r\nFCbPx4FOUVqH2H3ndFa7KPO0iv9O1SYigPk9x6brwziTU710fATzD7Xe9FNv\r\no9nzduvhvod7RY2mifh8tazBfMwyjIUuG2acipeWmok6bxkvDKBs+6Ey03su\r\nDWfFLxYBtQnlmfJG1di09Zxfrp2WDm6BLtWqKzA12YCsKbpd5VW0tI3ACsYX\r\nhlIiGG2HcrX+qwg1Vs28vSkh9JH9niw8F+oJfu2BbO2XPxE1+bEbNVhgE714\r\n+qMfNTXxQdkDm8ATlyOo1BKAadAoS2APA3jG+onHKMjITXx8pzI95/fRThB7\r\nC9b4pYWNVWxo28aBRDlGPxy9YLvoRkQ3clVwvWA7WWJgFWVK/QQGSZ1BLlse\r\nUX3Mm8N7T1kaLSdz5plx8jg3JEuJq/QMCaDa2hMk+Am5quVZocYZUqZ96E1G\r\nBN0501D6Wl2are6BiqCFbgAkeAD5cUtUDUvsoxL7ehbfN4oKZN0r+0gF7Z5o\r\nIngNMVyXKKF/hiD2VxiPFqjCy9drJYbBtOf7P3DhZkXzJEuMQ4WonRTc+ohP\r\nS5VNUObVCVpU7C397VcK1yYeGLnqtGt44q4HjuEpYLSKlWzZzyWYgpn3WIYD\r\nHWKSvDrAG9y4yZfY9tANrkDlgnXtxBPs7cA=\r\n=hJ53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/density":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"14.0.0-canary.f31a833fa.0","@material/touch-target":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.f31a833fa.0_1647996683153_0.8479701506989761","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/radio","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"485da1b505174c838b7b2fadc6e471856cc18446","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.4b92e210a.0.tgz","fileCount":41,"integrity":"sha512-p+NISsopmczsMkBLjkkzo+5lG7DoFJwZRWwsioL+eqpiL1q/VQUBA80hQ0nwYRKbyBPbnUF+TMgBdcDxzElrvA==","signatures":[{"sig":"MEUCIQCu25LoVYoaz6hasN7a05wLX055rMMCuACGjdLcaHZY9QIgTw04d4TuZjUQyYrLYIZAWlGEGShr8gKVPV6VS7ya6lY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNI9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Ng/9F2JZOUkS6mmVyoz6JNDcxkavGsc2xFh6epCVMcWaHlzOrFak\r\ns9OmrbJrpR+wuObtGGpp2cDC3YVMnq2GkFq1MQIdHQa63QrWDe1OMdiB/MSG\r\nwheuHYdGuE2RJF3cWijU61haiVjc1p+veUIWFTI8b7QWf5GO32JWDZGG5+qD\r\na24AxPu2NnrhR6c3BAUil42TgTOlpVDKSpl3Fk4HXsLFMeW0h5/O3llnxaQu\r\nqch03RBlt/HA4c77jwvzCUlvYpn/opuvUrMHSY7co+FBocGUhLdLn/Gy+OUx\r\njyMHImVuv4SBi0yca2JxeGeP1xSDNbgZqcmejhW7VhmjOhmJDRIGeumsuU4a\r\nSlqsLAutf94l7PF1sJw3cznKK46Ysy7ofKSvPYytcDcORfer68NR863nrXW8\r\n2ZHkUXlBFNZoAL+bWQme8Ih85jmctJ9RGpmyhoK6NHc5g2mEhNr0jiG1k7qA\r\n4KXLz+hFmqap+LkDqaBbPEG5MExo5Jctt9kdksyQeRDALxbCNEHqPSRRDkF2\r\nQAb0yQFavEfwgEleO5KAJwXQmVp9bB9FOStMenc6DHon4pKz9xdCLULgBLC1\r\nLwwbI6F0EdgjMA6ZlYMJdIiaSd9hoCpbmclp8AyMdLqslK0/epxHhaZB1Amv\r\n4HJ6PT4F2uy0q2kxF/meGV5qU/zBf2FXDt0=\r\n=3NhT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/density":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"14.0.0-canary.4b92e210a.0","@material/touch-target":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.4b92e210a.0_1648153149087_0.4516041280151588","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/radio","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90e8240099baaeba1e90fd0e1a0b505d3304c22","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.a657abb61.0.tgz","fileCount":41,"integrity":"sha512-IcDO0F9hN+04J9tXEQmqkMbFmV5TsHw5i9TVvEdbZrMFdlJq0tSFiLEtPeOf6tE80670WbDkh3dePp6XnXhu/Q==","signatures":[{"sig":"MEUCIQCFEUahP/9uMKd1gnb5lkB9e6Z5IFnxtznyXLkTGp6EIgIgY4EnmdCiWlAaZ7V8V8WFFmfDX6l+lQXK7q0YOtZUl+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMrhAAkhcQj/+FkPXv6oewMAP1bUaQphXZb+YlPJoHzD6otqFCwynl\r\nri2I891GCyazXtJ1DQGkQ0zsJNiVtHC6ZgHubDv4wMm2NiZg+po38wpj2BTL\r\nzBpRbfa7tGFDheyF/4jCuiH3qRXa1C6GkEkuYdQTWhft9SO1iIuDBjZ3ESUI\r\nms7xVsejsyF2yE0eGJTmNVdpHg+ouxyPrq7FR9+q7JTtq62g1eIBzQaAUCkP\r\nEY+ILOxltB3TzwMfBWJysCCPjk7Qo1aYnPEBNKI2S7gO+sFNVDl/KZAgLlbi\r\nwqpqQaM+txmqiINDjaeM+QW5zdkOxK3XL771MAO3U9N67EsnsbKWcVaqdA3d\r\nJ+yZKqtb5j2kTcOf6PshTX0z60Hber56Q5LrCxle06rATISARwyP8HjNDgrV\r\nA3677A3BLk9bTplKHa854eKGhN5UGOiaP5DMi+px1PFzlKAkAiggxbPvE7Za\r\nXIv+VtToktDkL+TedIN3jsN1Y7AESnNPOT6y9MYA/w32mfhvFaB24HGx9qWA\r\ngHwQEYvGMtKR942+sQyW02UX34x3CiA+d46Cg71v/odhUmfh3Ofd+T9t3oZN\r\nD2ZeECnjbdRcoPuJikys+42fRz5oYrfGbP/ZdLJ8IVj1aJF8Gy+gi5RF6Dwx\r\nHPS4RdDrgr4GUIF7LZ917QLUrfR395EFYGQ=\r\n=q65p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/density":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"14.0.0-canary.a657abb61.0","@material/touch-target":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.a657abb61.0_1648154432196_0.9197431483964329","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/radio","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcb4d13fcd409ddaf4c6daa125a1abae94b85fef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.443f63f50.0.tgz","fileCount":41,"integrity":"sha512-KSZr5ifB7KvoLrUuOr1Va1ZGetPNxBZN5Tyli/Re8mvrthH5eeDxFAgNAx07j9/gj8O6hpUPPlW32L3AjXmVxQ==","signatures":[{"sig":"MEQCIBG/xrqRYyzp2j5B6vEbBTLMzNsUEnff2Wt+qsUVSc/1AiB2HP7hmylTGBvYHmQGtTSpl8SE34ISAwB/BKTaMgX8yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCUQ//UDDLwQq8Dyxc843ewpqSdaTAY7uWdDsugMH/eOTSPJytuuL4\r\nCwf6cPjiMxwQzm87Z5dIogsVZOQoaJw9d0tRrXSCIntN62LvxB5BVqQqT95T\r\na5HlODU79NVa4Y0Ut5LKhQskW8sAaOvPxUy0rldZuSvYgTTS9PhtIvfSQDD1\r\ndHLhEJMZAAAX1R6idep3vTU1U2luzNyDz5ozlAQyonsgIOqEb4ChUBAKanpJ\r\nOGkqFpgkTK0+x7u/W9UBJ/3AAzQ2YOPMDy0Q6GV+jhuvIkJV72Lld16mtGpx\r\nmkyrPaSmKvzUufE1ZozdrfkmGGRHJG6jRgHeMa2LjklRAiOw50vQa9TtpqQn\r\nmhDWLoISu+ybvF3QqjsiQg2UAGgxDp7VkSsuOsn0KkE+3YoaMIaS7Nzp9Mhq\r\nUOQcsDJZ1doSX5eUzrHJL76WvBkkoy4HuooyEPAfPdvpZluHEq4BzDXeAXAa\r\nSacZ+OZh9ME1d5lTIStrXS9Am4UhIMQ8A20r4eLWtb84Mv0iDimPQAbSs9cQ\r\nM4PjAtiCXWKOUg4+PfFyDCuWlfgqmOM7t9eQQlhBdOeH8ffgDgpPivhIOrxb\r\nFWL6doXuCMxfwicVtMNhlMYn2WB57i7hTzq3H1x/QfUxxHngxDB19JurrG7t\r\nTxCTRacocQPDuqbokoZN5auP6RW+tLtSA1g=\r\n=e4a+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/density":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"14.0.0-canary.443f63f50.0","@material/touch-target":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.443f63f50.0_1648249512285_0.17665938716730967","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/radio","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bad18c541849c8bb84db10b2c2a4054b1839ae21","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.eb382f318.0.tgz","fileCount":41,"integrity":"sha512-ikH8YObAypfh5DtynrV2rgg+1VCzvKKCWL92eM+hi2EQB0vhXgpxFKU+IONpiAoDRjswVdpnecF7HgSkzTmGFA==","signatures":[{"sig":"MEUCIQC1V/eYzHCAIXaO13S+QWkcjeZPw1t+r6+7Q6pL8T5ULgIgQaM6bQxtLKUb6XKBpqNuZnZo7hPCYcb9NbVW3V4/1h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgvw//SuIOJxWxrWnO/chfOymuWRtgc0Z/oRdyN20mgw5p9psO8Zp2\r\nUmU72P2u9WC7ARj+G1eG4itzrCyGJy7XoTYeeWiBD2XP54F/oo8s81dh4gYC\r\no+xUE3TeEuhL+SXhqKc/rRp5ERGJGSR+8fbooPpUS37G7A/IRZTZz/ocDbKA\r\nDWtWeuRfh74oMZt/LZP2rjuVtBo2YUvsyS4Y9PLJtIRitbvkH/sHqVaaVzWS\r\nr13ns1MAEZM454kUZA9+sAcgQTknsf+RxAF/u2KoX8uT6gehnr+VVivcLUfY\r\nD5X5okZITM4KEtFY1rhLIJvaW0kFgCsVbrV76+mephheQFIsmCqQ93/e51Ih\r\nQnZpteQA2T+5NM/E1oeHdxHgEktpVBoeZfa7julJ3EXp8NgO8CNq2RSh4cUQ\r\nbx//axBW5UewgMzxlV9ojUIrVh3bvlwY8NlswmbNHC5BXI6uXoIhHhrGLaWv\r\nwuGBWded84ZOTstUZWGDO9kQT24Hd9si6p2MWaReXIkJeWgc5xXKALOdmRy4\r\nQCYvrjPH9DHDYAmnOroN8wPh+pmuTe8+YpXN3IeL+QYiRoN0vhUDNnYT5jGt\r\nkKS3TSw7xhtdmSLyADqV2fb1d4L3iQn58iwStt9lvAXUp2ptRfvd/WUAsuOW\r\ntSuJRu+GYmxLMQqAzypXwzKEQEEKRRt9Krs=\r\n=6enI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/density":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"14.0.0-canary.eb382f318.0","@material/touch-target":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.eb382f318.0_1648575332133_0.21648782176350512","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/radio","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6124947433cff5e4253ea153799e12d9b7db11a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.344d52823.0.tgz","fileCount":41,"integrity":"sha512-mR7Djl3Gql7JDLBOQoifrEN0ztRKIK9db3EI3GR+vcEvs9IJiW/REJEl2K33VbDrE9VyYjlZY/SBf+yZH4Cxig==","signatures":[{"sig":"MEUCIQCHXJj6FgTJd5YdtyAtPJQb0ubqxu2+JlWvurjCSrZTGAIgb0Rx5m1EGXyZ7fz1I41ZiDQ+aSdWB4BwJqIFSvsWRlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTAw//Y9MzXs3bMiS8xCzTxk7yRYQmbrPcB+Ryce8wnl8WwrSTj6bq\r\nZO0aQKWfHpePeaHkVylewmmf7XpV9GHMqOFah+LpV0ezLx0IgGpwZgi2H7K3\r\nOqvJCnbuOynJGkRQh9rDd3VMX4V0jIdhEg5sgXnhm86HV+3aCPkdzWDH8/iZ\r\nPmowMUSzCmmeV0B2g53u2SYlOdm16uV8Pe5HaOy8zljNTZXvvjM2Tg6ELtXG\r\nVoS3P8Ehpp4IVhtAm2DMLPrd84VXPebYE5MJOh4ek4JN5R3k3h4U0hRDBUip\r\nn/72MBv+88ZbgFKYHpM0LWWqMrDryhi3FeRxdA6TFZsCH+HR19nIX5B0zKVQ\r\n6Z6/2F00ktQenWfaUcR8K5QVs8/gF+HPEk9vSbvyZuK2T+bEt7OY6IP4cjHi\r\ngF4YVm7mJ36+t07k/hfG/wDX5arAE8oOMRtugwF8vXHGerEl5/YyJ274nvHg\r\nEAGTer48wRamV8d5dYneEMS9Sdsddxw53TO38dztbKq1Z5cB5Lu9cJZD/V9x\r\nK7dTbXzwvLg3qRgLx12yNFloqqRYS1OWaStN7aXqRYHV4AvuYQpkyEYWHjJN\r\nNW5WRDq+xxquizRhYRdMfugm2VjFYH3UMqPGWJGeuFVxN6VxSmJHN1nrkOIq\r\nbhb9EcZW9u13LNmid52mLdM2KVv/ZKRitrw=\r\n=xiRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/density":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/focus-ring":"14.0.0-canary.344d52823.0","@material/touch-target":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.344d52823.0_1648579432943_0.03482272625571681","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/radio","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5eb1aee768c2bba7c77cd70a285e71937f6ce90","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.4e372fb49.0.tgz","fileCount":41,"integrity":"sha512-hh50aEsyHIT5BSrsTtwWGTg8En7FcdGuQ86mcO3wxsb9AV+jlsXnfkv0c2zoXO83Nc/l811ttbAKK1en6y9xMA==","signatures":[{"sig":"MEYCIQCDo9lzPngG7WDHjPFFrS+/BFKmyhZhWJDvhuYjn7RpVQIhAI9WmvDBkTWMqb56Jsf3FfBogBXNNyH0IgXg4JOjqBVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPNRAAhqm2yunesiPXhMQD3IVwXZDp7adGVuKaxW+jhagf+tkC1hU3\r\nn0teEDkYB2hNZSnXG+MTQ9aIreYhArwBSEVIR16/TODJqfvsBdeL1akRm9vC\r\n2Zb09cNFC1ny6Y85rvMiN1boef0ULqtwBNRArBCZCJ+7SDSLM9jSsZEwdz/X\r\n45ny5I61EDpGgdI67L0vmrgnMDk/o98N8NpDuZDa0QIleTAra9PVTiYVtUM/\r\nphaWSwWHsud2XaKMtT+RFBbIZEUCHyrhNZEB4ykz/lq4qEL2Av8uFUK5WTKO\r\nFQP8w5tVCMTFzwuFv9nh6rJ90QOBOHS6qiXxVKLtTrHOeBL9l7COus5Io26j\r\ngPFTMAuRNrGpyK6eiDEInPZ5wskEpGMoSAn7aYt4gJisT6uUwjYGOeup/Lr9\r\nZ7ss7wivfelKHbHHkfropnafig/O7aSXw/so4XndWojVk1Andw26BF4MyK5i\r\neEISudoEAdqyij1AFjB4kcjuS+p/5XQoB6lainnmXlRuO6KhKP/lgS84V7lh\r\nDU3IpQzHpfSKQZ9MjBStmxW2A2KwUPSqMBzvplaB+yAuyj0/1XmfwmRFqeXx\r\n90PELKoK6nBQuju7qNmTmjvqZ3rv8gNU/tSYIxk5Dv9b/DRJiyoPvHXb0B7v\r\nvQgGJ9I+/tjpNITc1KQcbnwXqVyqrITbyvQ=\r\n=Ivik\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/density":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"14.0.0-canary.4e372fb49.0","@material/touch-target":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.4e372fb49.0_1649363613301_0.9268664189602924","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/radio","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e12acefa1dee2c09d525134d173a9155c260ec","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3e30054fb.0.tgz","fileCount":41,"integrity":"sha512-EuBgeXOFttda67PxWomTl9LyDfqRuQWOA2DgAYEbEm4uPgMFi3Lx3IhUMLJVqFUifX3n2ow2dQmjGyGtBLgd/g==","signatures":[{"sig":"MEUCIDwEJRClZ6Y9tHSSn5OKJDnVsYS1aL8hvkqpoe8YS43TAiEAk2lRcy11JOSezdkBBXI3Akwxvo4ffB517hXd5U0Ms/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqexA/5ASnnm8NIo0e/9GD/5b6kmgYOBoeGtFBrqFRtKeqm9J8ibCqC\r\nRGupS0sUspJihMwCJ+b8xK/HJJOapEVoX7hQeEGfGkwaZ/fzrBg1wyNgh52p\r\nWGaLgw5Ec1wFENKYEEbayBiNR7B06+cWphkIaUj3nx0W+yRRTEXmMjGdyqnA\r\nYJnzT/z+G/NsldAolKwTgaqxWfX5KQc6ky5Nn6zAK9pk6SV46HRTOHxiVh9v\r\n6IX1mZNHxy3iCaQ3Ebvrdp9Do36sheuCcLrPaksMysLKGmfDIC/jkcIDhgCZ\r\nPIONnTeIyMCfXjRTvBejBeFtX0FRXCF0YRY121WEHBD1VfvCamOnGScPjnSU\r\nwIzhvtXvQ2PcXbHPqDaAX3L7cY7h88NDKejSPNgOT+QX6GiyX3eWRJPDMKLQ\r\nYBkiYifhnLMlC7yojeTUxUhLe83dvsFkBdSQaVwrYF3aKNmdvCEJkqf9qGcL\r\n66WCGKINXyAg0VzTwSzW/AajEd+E2oA2nL/l0O6H7o4XbK3XfZXkAAWVnQvC\r\nBzbzkxhg+BZZwEJ+hwcsmkQ+8TdlTDsnB3OUmGmsf6IvU0LA4+ir3KjGE5cL\r\nJeMYhGBWaAz0JvXbruq5As+9j0w0UQ+HMBQtoigPyJXMlz7Wl3+hnYm01igo\r\nx6DZ8eChrMe96XDh4jWvFudUqJFpPXHOhNA=\r\n=3o+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/density":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"14.0.0-canary.3e30054fb.0","@material/touch-target":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3e30054fb.0_1649888090771_0.8042720459647807","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/radio","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd82eb673f602088c8fc8cda199d770db6ccadfe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.8c4da223a.0.tgz","fileCount":41,"integrity":"sha512-Iha4PDTGpA6VjYq8m5HysgrsN0OEiThVXhaCHaY5muDo4MgIilvXs0Alzmm7PdbfjHbHJsLJncwXVGzQD0+7JA==","signatures":[{"sig":"MEYCIQCOEMHkq7ngLfvTPZ4U7pz6+0VWrqu2pbJOc7fm82dtaQIhAPGH6KvA2y0mCAYVMJVFGC1cSpQjwscrc5ySY4T3fU+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIxBAAnqClsgwvpRXwRrBCJ7giR/iXz3BQ04s+Zsj0Vk8SQujSS5Lj\r\new+p/+tBLyGNuk0ArhQUIPgi2/iCgossEI2idXuMb4pUVAlezhnAWHRU/u2k\r\nAtuUHq1Oh8tNhgMa6unL0e19lqSKg/udYLN3LB/OGDfdYfUJFTfu10hqzsSh\r\nyfD5ffgPwR1+rUUw5McLAc88jGANLSfJ3C+EP21+PD3Y8m/AD0tYPWfhwi2q\r\nGxsfNRObqBjZUPvxBKbA5vDLH16JXOH9/r6HkwNpKFC4xasK/0d+BUja6sGF\r\nh1Mcgl/YnbuiquEjsxgGkmCE7tD/OafTJXvKqwBHGMy7PGePcYG9/h1bAQhI\r\nMQaXfivomxJIj4f22chaQUtv9udCmCuxSxxZYUAFOzNSPWI0fvlwTwYu7OET\r\nFiFsuggePrdeL6+52Nlx6ppfQYZmNGe8z391sDW2izKCDtZ3efAjyfxGUCj0\r\n3ItdGVZKe5TxE+2zNC4L4AarISsWK0VnpPupLz6PiWMjQjzpu2iz341zp2ac\r\nwrCqW6ngHbGt+6bQoAAT0eFCdMLNRX38Qz70cc26b62twLZdyPyVmiG9wmQf\r\nmaDOUROtKzkMCU7YCZNAnWzg6BTpn2/HvsBtad699okYq6WIsaQNJ3sVENcl\r\nx5+6X3GQy/Izbxo3u4+aDUj3mswcgWspxpc=\r\n=rE2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/density":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"14.0.0-canary.8c4da223a.0","@material/touch-target":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.8c4da223a.0_1650381889380_0.6168085193498041","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/radio","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d5d87a3b0210d2c06901defeb10a688fb5d4a78","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.7de8965cc.0.tgz","fileCount":41,"integrity":"sha512-7GWEVojkYkBmtRSOcLLB+fvH67MmG68Y59rUvJY/GcW+VVvGJZhivsd7rF/vJzCyip2t6NyJLRfSRitqgmI6Wg==","signatures":[{"sig":"MEUCIQCflbs72WgjuxxT3bMFkLTdDwJah9mKQZofPtd4kZuz5AIgUlxDWWl3faLJ384oxbSLCiBbIYHEeb0AGaWHrodWQE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ8w//bd/Or5db5MO431cd+sfaqpuE9ij/vqLY5eFUzD3dycMFkjaJ\r\nTXrxs3UGfFCSMigFu48RcBjmen9QTwsr21kdG6Yw52z/lt7AP15acjmDiv3O\r\nKV4LlyGhCbsiQvSvJaar+3aUbNDOqnIVpS81Jen6M3uMg8AOXG5hEITPMF0O\r\nuva0m5PQiNyury4alyjEosmu95yEA/u4QJkKaBamO1WAw9EwhksX7+ygM2sM\r\nMZ22SDfK+68AvlsWn8nzwzQjz2nWu2oFabpNN8Go7CcSc2NngUaNcJFBDLHo\r\nSrx0pWkG0yZxTk7xmGhHJeFzRMTb95+o06O+DmECqXVkzfHgR1Axz/ggVNDt\r\nO5pDO2jZ75gdjuGa/QEdM/VEF1VppecTBZqvja6rZmKK2QX+d4R69jBd1Eaf\r\nTfozgsLdfTA7X5W9DBag9TSfHAJjLjDTN+lSBfaDwzbzp9y2C8hdDcnaeNsq\r\n8pCRlMRy/VPAXbJ5F9NWXoMvMZOf4aZO3ASUdDkbuNRzmj9n3Blv3orwLIU8\r\nmK3FnfWqAuFtSRAt8IaEcVX7NQ7LBp9z/gyikYdWSQfxGaAnj1kURTCpR4sP\r\n5fkas0b1q3wsHMaM9qhKTe73muG5rbEVWMuLHCM+zYNHjwDQcVtq1dZQ/VE+\r\neFvVI86UcuHcYuFraQmbRv9JxQ7xAzDf6Nw=\r\n=LEVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/density":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"14.0.0-canary.7de8965cc.0","@material/touch-target":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.7de8965cc.0_1650399839963_0.022885599563525538","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/radio","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b46edd53a7eedd41cf6b41a83669d9e1f9479f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.641ed0851.0.tgz","fileCount":41,"integrity":"sha512-rxeBpAJ744FtyzqGAo9UVkX+lepsbQtgX9kHJr2Xk9NNvYrCnLzm1jc2ISqGnyflk7PC5mDSugl5bRdmj1W7Yw==","signatures":[{"sig":"MEQCIF3DoxDXZofGO3QC2S2CGhHADKGwn7Hmfqs+54juB8IoAiAdMb5g06LxMyl8FfIwmOPUw0cR+teaj+V66Cz3fv2S0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":559937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/GQ//akxIo2/G4qt0hy6g4Eep+ZCcdNuLntyznovhdsuczVsXXalU\r\nRoouUdISY+cHE3kuUVQ1JWn58KcjrB+AOgSAvfwHwPHkjT8d1E++lBA932K8\r\nvCHY4JSxuKlpDmrrgZ256x3UeB2LUvc1aPY6hBoGWUE/dYkMcFCxX4W/hrGe\r\nriOMi8Fs2EFqWQm5fFXvALS/8Nv4ELUePBLLtWKJDFxhL0h7F+xD+p7GCcDw\r\nsara746LLvfzU2kOOrHXxQrIB5r9OVLhIESkSDPUIOPUm5ObDyPwR9eizYJQ\r\nLq4ijCMGvuC+VuNxVYxuCp675tz/phWWIgPGXH0171dfUDe4BRVmh5/tLlbw\r\n9A443Cj3KP500OF529UC65uQCTyO5nvuTnzakfWGYOAO5QbmOOdCWmIlqXX0\r\no9SFGPWNJXupdIDrghmUULpzniiFqQYT925JzBoUS9YlLPjA3xTouGfAY+7v\r\nj8ZwrLUWdfIUbQg5VRYck0Eq/Ipmx+cZ86C1fTFykVHSCQbp5NLr0maZkKC0\r\nK/9rwQbS3jP0/r4XSq9cGifeU9fngNz8kRq25vy/4ZCTpo4Psq9oV0pyMoZi\r\nM6Tj+26Uctkcsb9GAHx3wENSRcT7B82bn1vxNEI71FpKMMNtX/UrnrP28VXI\r\nkjK2FzwHxCdH72O1DUYzvqWjfzcqKYzAYto=\r\n=0FCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/density":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"14.0.0-canary.641ed0851.0","@material/touch-target":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.641ed0851.0_1650470779448_0.563256699360325","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/radio","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff5804d7cbb0f63a7dce27d3c2d8d75d5d5c23d7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.e88f83024.0.tgz","fileCount":41,"integrity":"sha512-HKfg14jnSJAtTu5vDOVVPrxs1+xWx45hBx3mY2Tq907itD0S5yK4SDxwhfFvzHqn/VERzosGBlp6NBr8iH6O3Q==","signatures":[{"sig":"MEUCIQDgM1t7mnbuJj41THXXhXjCAHIJh4x8N7IpCF+Crh2P6wIgQ+RWY3IjQVwYZNdfqjFV42ocZlFeqMFVcNEaneiBcTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/tA/6Aq0kgulc6BcLg8husqawWC6jTlG/GxE7b2wa/F+Qho4Ku3OT\r\nce6annbxfHLNJJ0Jin08FP5SmBaGVE7k6ZDeBt8GfJaQk1P6ZXjUzvvXOdj1\r\nsY/KxzCC8gL97M69kr8wT4fODgElEasDZ8JT2wiNT9aHexH35ombhv57y337\r\nJvJe4E74A/ktKVH2EaC0pMe79+R/djjlJGzyTu4W/wfNcOIPRdYUCYCeKNgl\r\nOqaLxXn7pyzmp5vvYEnxge6ciD8tiEVeWkNmMc6DIzPDqx6yYB+bBDJ40MVg\r\n8NXIp3Z47f41TdVIxLBBHVw8oX5paxZ76zlPslevEWLWqIbomJSQEwj3sR7/\r\n4JG/pWpP2QWpT/0dJBlYHY+cKEKxxbo0rIk24J028Lu92EOPxv0FrIju6wae\r\nhWJX/8jXSPrx47kqU2VpxvAAIX5dtMAF34KM9ikYwzF5FN2bG4k2Pr7LgpZ+\r\nuqnMlNUj8XX0oSzB8FJMA3Ir92p4bDJoy8T8we3/hsoAJ9fq9Oox08BeXdH6\r\nAlgm1lgNsd8ieF60Gu3fLrgHkocWDgcYT035qVuKtAmMyCbPfGhbKXL3SiOh\r\nrlRMWwLKXHMoUaT7Zeu3ttGQLgTbHU24/jLVViYLrL+JgocBpCPR2RM8yQte\r\nCMWiYtDTCNayye2+awktd90ripnOAv6WJ84=\r\n=4IdT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/density":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"14.0.0-canary.e88f83024.0","@material/touch-target":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.e88f83024.0_1650476900422_0.6784787570021249","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/radio","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d18b3c94dced757d80fa05926042efe6877ad49e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.7321d6254.0.tgz","fileCount":41,"integrity":"sha512-TdxUvFrSXsRGm4+1maHnJJyMk1vOMHGcQ/xrPssS2svNTFKzW/Jz7/9Ns+4hKk2IZXndDiU9zuJyzpZ96YN2GA==","signatures":[{"sig":"MEQCICaWZJ8RzGXqPwAuwtfvOoodIW0/5i2XXqeRUExH5FqOAiBChXWyauIsCcGC7kke8MhVzaMywYGXGZgs4YAKbI+d8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi3w//bsn7SaOaAp5rFVZSQlLDqMQ4CPqjcRhGpgwxJQUwzo/ERafz\r\n7MoVzdLy0c/GcLTBaS6Jj6PyoIz/mL/katBP/9qwG5N5vXo5GagZpmcpub2J\r\nlbvWw2Wf7cO8+Ki1PD461zEaDvvAktVM4Kbi7z87O8Wvq6FahgD6zZibe8kj\r\nfU+A5Brs8zy4PWjs+EhCMltONH2k3vjswWqa4U+wWVZJXZUEAyKUxxygTwlH\r\noW9kiMTXSBFDLsA3vDPMINs53Avh2Rz8YtXnuaQpfpbfyYMwJdpxDB/NAgNm\r\n1Ct9Oe8vnOB5vWnqdaHpNPfoeVh1QuiaOF59wk9kJgPsPd+9pN3+8qJ8iVkA\r\n1zV4taTp8/5oJsNxmK3RdvRg27vPJcAcGOh4v8DnnBCxkMzR+cJqCN/x7hj8\r\nE+T5D8JiFblI+UvuNIrAu315UoPkxnZDYX3RXxzkzAa+Sq/yeWSTANA5jNCZ\r\nmtwF6HL55So0yQlAduf8U6dD98t26axRr6IhPUYhHWF8JTfAf7bM1GA6Abkl\r\n3iBd7R9mnOYieB3Ar9vg4Ud4LNU9UdZeGpV/w1DWmGMnUmN7f/hiJkZqGrgA\r\nSpAIxPHMzjnZsLJTAkF2gZ3FU4u1h1A9r+CzRI7rgLLi16XJCSfyutzKvcZs\r\n47OT7wuJGEBN2JuuO2FpmRNGVusncwboZnA=\r\n=qqT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/density":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"14.0.0-canary.7321d6254.0","@material/touch-target":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.7321d6254.0_1650485515738_0.8475936161400048","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/radio","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2db4bac9f480968ce8031a4049d942fa7601e249","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.3ab956515.0.tgz","fileCount":41,"integrity":"sha512-GmdFWoF7DZrldJWd8II0meKlqvAdyi4eTBhBan8HSr7p4gxbF0qqh5ospAWmczImX4eBPfI/FucrWghtVY2WVA==","signatures":[{"sig":"MEUCIEBLnkB8b9wF8QNiFezL3yy9n2M2UOqWGszpUF4FWif4AiEAp7yrZSBTNCsGf3v3Y2gquR6KGGpXh48OoM+sT1dt7dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojaA//bbKYa6Fv/MIvedM+lFgTgDAuDRfpLzi3Fe69fTPRjOmW3/MV\r\nBc/6wpf8hZvT7gPeMJRca+rofUyULz9Ogy/9+RxC9mVfZ6ozVVvxcNgvy21J\r\n8V/hUeowcdlaLZjyF63mKoxjgaGXdssNBPb+oPSG1P5j/1LLvXHxNwfsyY8A\r\nh3hCKSyHLNhTF1LhCKe/V0W53zUyEJE3wheB/Fweuv2PCDfTQ9y8jrP1uBHD\r\n4N167BWWbRLbgolekj/wCIXES3YkqiC11NoSJNpMdXYv7hGPkgj06wG8aMdc\r\nMARSY0QiwLQFdl/o5bjtNEJ8S+QQLLu52L/+mjcbO96MlFa7wUZPv5A2BQC7\r\nDe8ceiWPaS5XqTvnetGbcuAMtd7qocAg/sNW6keOHQVls5VJDLdutrGsJxUT\r\nzDLK9S6mct6CYtI4ubE9aUKlB3dcTIldmDQ1dOicHSeBGmti3U1TET9lR5X+\r\nytgyQkpVUpcfsQsq0QTxJXKPXmlPnEjuvkkUeSnLlnliDlZGbDw85arSryRs\r\n4p5ZctYzXKdZDQXsibQSEobfRKXsu4+iwrWYdvhpLvPUmS9NJN2/MiOO4FFH\r\ncLIVmlIjKn9OD5V6rHAwlDRdXiHfxfnIX98q+SL7YVc8zUpPRZvwugn29Sve\r\nWbU+89VN+g1I1XMcW3f011H9nBXP/HEj91Q=\r\n=STcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/density":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"14.0.0-canary.3ab956515.0","@material/touch-target":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.3ab956515.0_1650898950443_0.3619343163078219","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/radio","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ee17e301509d729aef85cc1b22762f504a21b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0-canary.53b3cad2f.0.tgz","fileCount":41,"integrity":"sha512-V/AgWEOuHFoh9d4Gq1rqBZnKSGtMLQNh23Bwrv0c1FhPqFvUpwt9jR3SVwhJk5gvQQWGy9p3iiGc9QCJ+0+P8Q==","signatures":[{"sig":"MEUCIC6Zolys5Y0y0iRFodgZ8pC37mReyHWxlKkgMquLjqUJAiEA7e6B2O9HxiJkjIOYhE/ssI37bTuj/EgieVSkO/AkdYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsBRAAmSYS6rasVlQzZNF03AiP4GDht1SMjEoESErvKzIn4Ajze6UD\r\naa8eWKdtvkff89ZHFGyqAjZ+7O3SjXQuXUvZumXSCf+XpOxxHMm78FjcA2ls\r\nOFzs59ecfkE5d2rD2fAM0hMrO7Ij5LBOCkWyqCtw1wKQUxs0BQvkSZiUgt2C\r\nOHRRLWAeaycZbTSmD9cAC1rWDBRK0dHj11NIm+KDLgLvD5z5k6xVY6lqrUtn\r\nauLLz/uKPEwq3VV+0DlX9cKykIy64jf/BYmXfXgSqlN5KatAaylZJmkFsT7V\r\n3DxbfwLUDp09FtYTBB+nUrLfOUA+uGoQOHantmzYG4PpvnW+0DqKZ1iUWsiz\r\nmtheuEfThGmIlOhYvhx/+nUifzFovq7KrOk7ZwQgsulDkeYIYW+xX6okQQz/\r\nCegYW6Qhm5vMpHmjJondcQ1uUm9o0CQVpxS/sqZ8Hf8MBxCOOpCuUJgc4ULh\r\nXbVyXbm6e+m1Mx/LbHWr4YffbBsazeTCd876r9tDqazqwLIhNJ/nI5t+uKGx\r\n0p3G2dWaWhKiIk7c4p3F0ZwIW37Q2CsLFJXOpSgfkXmKSKNkNgpoYxlTYeQQ\r\nSajP/0h1k484Rcx/uD9sf4WWjWDhgA/AGptfkHKxmfDTpz/J+rrORS0M1ytk\r\nvB7R+ZLDbxXuWkcTAA7faCxp1AJqJryZtYo=\r\n=mixk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/density":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0-canary.53b3cad2f.0_1651063560033_0.7870142850931865","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/radio","version":"14.0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d80ccde907dd49733f48819a44c699a4472ea59b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-14.0.0.tgz","fileCount":40,"integrity":"sha512-VwPOi5fAoZXL3RhQJ6iDWTR34L6JXlwd5VXli8ZhzNHnUzcmpMODrRhGVew4Z5uuNj6/n2Jbn1zcS9XmmqjssA==","signatures":[{"sig":"MEUCIDhUiEXqw63hQzmA/jRsKvcazVzlw/udGOAkZOnxWS2vAiEAwzY/FJHh+D+6ePfn6e1MjTpnsyKdjMvedeIrVJEWUIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpBQ//Qs/qxFV2o2lHPNvoyxSTkCNcD6RtlNqZ+rHEl/JD1ZLdPTBM\r\nRvvakeHMZ2XWiR6+aItJxt4HnUj/RDILIYTTaBEuk0vNQxvQ5JvW579m5U87\r\nbetxeN6hMkB5sr8lw83fn2AJ3bEt7OOtMDJh3n4JNkCzWBjN3z+TuAb2Bnd5\r\n/z442yeKHBuQeJ+GB3GM8452RtSmu+w1BrAvmASI424B7NuM5uct4bqMv54z\r\nlFl1yXOLNrble9OwljlDet4iimXAE2f0NvxvDTBYUO7uy5kguhCibrHfdzvm\r\naggBbDHKChJ1+2t1jo4q3lexTTVItt3yRaCGj3eh5rRT2Zw6qbF61DxKz+dj\r\n5pwyWHgOhCkMI7K4GyFeCfRLMsy81WKbCgwh5hlrZ4LchAwa+nqkIii2p7X5\r\nXFLkExsJXqZVbeF5ODUDax4OKWFLCmVm5nRC2pstYUibPZLOAXRc+164ziYN\r\nVGZDD1PhbQehB1BPaLVHIaEjf/rxtrfUg1lk2AsZPC6aCHynAjnNzBhqi4S7\r\nJccoepCGOfjba2aBF82uVymVm14txvUWz2+PPQLgGZqSOWSLp+mBHqoki2Mi\r\n24ygxgoJaPnLmMS4/sRD69ZOwXma8Jp6uy2WcfWW2EjY9+nVlfKKep2xWZOa\r\nPM8UGifu3CpoNqnpdjlYUZkdO2EKAyf68Fg=\r\n=Gdm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/density":"^14.0.0","@material/animation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/radio_14.0.0_1651164995002_0.9540344103941074","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/radio","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89163acdf5db0f82a89627fff8a475c30070379f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.432c815e5.0.tgz","fileCount":41,"integrity":"sha512-Nw842Pb/LbmKES/c9B5beoK2cHBpYnc6fYNQEjZ3y2YKY3mu7WLRzzYo1CrwI942U60Uz2ApyhzpX84ULbVF1w==","signatures":[{"sig":"MEUCIQCPWb0RZzLBxv2Ieq3XuZ4bnJkTnL3rShA+Xp/r3e7KFAIgfuhYT1Ar7DdId6r8+u7Cv2Il2R0m+wGZxryirMillOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9ERAAlvTbxdsBL2CG5q6gfA+jINJm1dxSinLOYJGT+fW4L2g4q8+Z\r\nOWiElouNgNGRMPtAuXq0oAYYFVUS120uDdIw51fc6MzmFryTtJA6cC06gzTo\r\n0v5CYw0o39uRJtMi+FqSFg+1jz5lNL8uzk7cJtGi/CztH6tA+ysdAU6m48nI\r\nmUfQJGAuPUizu8nQl46csyhlIQ/p6vZc4siEkqFut0j5rVVUB7wXgmT7Bwa7\r\n2ui+opqkEiYIrhz5iqbEIPmI+GzDGJu/PvRHtTkMZBI1MAOxisMEwhObY+2Y\r\nps1MlH44LpDz7Vf7SjcziWPXSI2ZSe7dG3Ay9kxNepvLm7hgE7u32qABnALR\r\nbyPLAwwu6gQKU73drtdOLJDvM+HlREhwUMTcdY7h8ns0Z0kqk4JmVIdnaYBX\r\nc3YA/AumqyC8F4unQULvWBYPpWYaDaTEnWs34bHhh1pN07veGte7d9uUz8xA\r\nRudpiI5aLi6jJ/EEq2UI/l6mWHfVV65LfKnEaOCwAQYyUDsDBC4KIVtwoD+C\r\n0opJXPW9DbMawpv0+SctLshgiEeDBMbKTotVK2iGqlhYARtMIJw/15wUKUgw\r\nX3/H30T7XzWsQB4+2CKYarsWDs1T4obZZ3Qutjjj1ywj5Pu8p2zQlSPrkMte\r\nqXslnh5m04ngsdl31uDbvnyw3M0hzWJJph0=\r\n=oNX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/density":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"15.0.0-canary.432c815e5.0","@material/touch-target":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.432c815e5.0_1651165059903_0.8625096392031684","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/radio","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c24b724daac80f89503d52310cf7680acb4d22c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a0f01f669.0.tgz","fileCount":41,"integrity":"sha512-lpIZS5k4cSFh79b3PfBfnegOn8HYVgJOPjooUu1G7/C/TbqV8xbaozW3xxqosAc7Va47XCr8N7sg1kwL3R9Vaw==","signatures":[{"sig":"MEUCIBG6g0dcY35uUtzKDrfZ/z/dd//PXhBNsbh2O5xyXleUAiEA5TYYxh6mwPhyCcSzW03DzDS8o98phPF4Xzyg6A0lFuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtbw/9GVt+fl4VsT0DkTx+MHa1HqlspYie7ibU148YAuZHAqspIb1I\r\nDXYWZKkYICdRQ72EV8EOHfykPpZXUNGSjDUW+jElwa5GNccCemTI4TQpqn5Y\r\n22HAXMEAybY8Ux7bvob1MHzMV6EE8GSKzeOkzhA9xlC9SBpkZCvu16DM91pM\r\nWO+dveinfI4bLGqtFQ5crnIotL8J7uzclRuafFL4Zz8FxH7kXVP8VEpYCy8B\r\nzvgGPRsJduUMskVqciHwMAuw/+8w5dU95FyK+oYaQ47SHl1Xf3OFeO7+GD8Y\r\nDxb2Eiylbc45Z+wbZCz7hUHhENBmNuITEXn2cgMbXvX3sCiYMvQQbTWxhs83\r\n/AJVaNglQzr7iOxnj/h8mpnZqyVSYIMCWaF3Snryti/X3Q+8PAnoV1nlQ7AK\r\nJTLC4NghTddsiish8eXBvOFnrKLatlDU5dA9dQQY1YgWeB1LtPALxZoozzt5\r\nx0+53WZhf4i2dyr7UfoZRhpvWUxxfP5kqQg0I2fDhSGmnYci+KOv+7wfZ+Om\r\n3Z+pRhZgMLkmaHdBADf8anfn2fOhcCHeYq0DIpw6BkFx0gjOKwPUQy9q8Nu2\r\nCwSf+1DRNSulRzzz3/31Ww/GBD7xGyzk36GlfBLOWccLSFKkRJsQZq/mLHdP\r\n+kU4RsJvpr/+fA5GICqrBZ+V5o7P+1j5D1M=\r\n=tl+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/density":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"15.0.0-canary.a0f01f669.0","@material/touch-target":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a0f01f669.0_1651868117001_0.4444431771728077","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/radio","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d12d74cc9be6da29f50f02f78db24283c541cd6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.276cb39a4.0.tgz","fileCount":41,"integrity":"sha512-VyJsVS1ux/szwsfhksitHH7f3r7d1YnwnKq9R9QMA3f8Fi2x9a2TAUu6z2TTLFC5Mq6X1sjG5nX80NqVw7Trug==","signatures":[{"sig":"MEQCIF5Oa2tg+SzeNsp/a6bEOWfxIb18ufXBrW8EauNFFQNoAiAqfnJJjSKdYUGLiC/qpaZK7quG9lFzockhzbZSwzovaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq96BAAkOH99wB9oMgYksjCIGwwBYnU0ZavHL8ZWpiYDW/mMlzx8b6D\r\nipQFwdr/Z7boH6Gj39Nao5MWnZGg/vn/3HLHgfMh/wcX3zNSyUswNBDlCKo7\r\nlJ6umgiPRjsMm9ZYqDQwCv4lCcJpQUQ4WTDhhOLPTABSzw5B56LkA908tJDl\r\n/KzaHl0E+vcfBSW0u+r2RXH8JWP4123OU6YbIgACpI0aimgLZZQyDKABN547\r\nYY2zNvwTFZjgUhCOl1J72co/GE/fwxjzc4F/vJEmkx2sn9BR3VM6c6MlJlh3\r\nx5ilVFx+JwgZOcJEQNDzsojoTg1aguuNF1u6OcTglYq2brEdLXaTTpZuNHHB\r\nZ5XABsLlyrvfWCdPY0LbD8iVSOpq4TZJ/pBW535TRGM8izIta9G+i7GN6qC5\r\nkOqgMN/eI4DyNsIkVS7bnIEQBDv6zYIHC72eb1ARzO+jbnbVUh5TflGPlpPi\r\nUq4gX/tZtGbjhFT5ZUL8lOU5JJXtvJaBwlbojvcD5TjDaLCR2b9w+2kvc9qK\r\nPNjWJjVGGGgbOpQV5nmI48lotLLpB+j6fE+bTKzX3D3FZH3Id0/UOEwjMY9D\r\nI8w+lELSeyk5T9StYWdiPi3uxLrp4v1PW+z2mmx1w1Q0ncy47wmB+jc/gS+x\r\nxFYqnGHLXnJBCPF1X+qkrjKE/AnosqJG6Y0=\r\n=jOsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/density":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"15.0.0-canary.276cb39a4.0","@material/touch-target":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.276cb39a4.0_1651872728216_0.3802485084340659","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/radio","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"505be64c228d77c6ec5fc360deeeed48d87a2d92","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4fe98ed70.0.tgz","fileCount":41,"integrity":"sha512-e4fJfvXtpOVhc8TA0KxxcnJm2qk+QZ0nrccQ5k4nZBLbVnmBpiXcXSck0bNyGCx93JSdMiWUomjNrESdDhWwFA==","signatures":[{"sig":"MEUCIQCsWOGOc1MGyECxoPKArI2gb3OpFajwOxtX4muturVT9AIgDpH9elxZmG85sA23ikR8S5mlCE3lOxq0JyNTP29QOgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTJxAAnrXvN82vuv1fE2gpEgdmtTLXf8if1IYV2yZBGQM9+P3XPUJw\r\nmjdqsx0eEipM9g5cySQzigQwdbL2vsYG3thYtTnfXZE8SrKxXSaAjK/OsI98\r\nPrSUaaC0zXOJep44xIqXqOoUvlniJ5ZIdyt8kBUsLYBhqzuYb0A6ARaOfFwR\r\nVAKoTcMrgYgRzjtlRp7/LdQpAL2iYLWe4JpWQS22h6W+qfBUt5c/meg/ww/w\r\n8vkkZIv+EOuku/cRc7FwyyOd3FJ4lrtoh7g8WgFXO59mJTYdXJ99d6nMSMbp\r\nV+UD8pXsQeuZGK5OPx1vA/DtGYHnR9/4OwzktZHv/CoHrRA+4/cqD/Fj2FKc\r\nVgeiFO/6XwD+W6CHv4QAJO7m/U0XRi7r8S8W4Cr8614++CE2T+lWVosKn79A\r\nzNPD3kIe/SqUcDi1A50B0RCMz1kwhAHI37yoO5Fqdjwwvlcx/TlWlcWJf4Gz\r\nKRU1rY1LEAgl/1a0J5BPVXw8kevJfyEgr6RpbjQQiHRXa5KYKfZRpkvYBsLp\r\nsiXyUeW5nJQ5n2s5/Snu83zaV3u5XmvZH4mazuhwGDBXKj2pqJXoGu7AN27U\r\n+CYdwy3F7kgPwCLw2yDd2i4RMaL/JDadnN9LXTc2xFOnaUCsUe5+ufNf3p24\r\n7AecTY8U2VinTBHhnDX7IpZPryhJaF+jCPE=\r\n=O3dY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/density":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4fe98ed70.0_1651874198965_0.454389632834858","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/radio","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df0df8a3d6cdb1eb605a7f184b14b6a4dd7a0c84","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.58b130a3d.0.tgz","fileCount":41,"integrity":"sha512-lAdg2HmJNjbja2ZXVS2IL1CkIfcslZJOZHaPwmGK4QzISs0+T3ndYEWQpdHy1qLAZZ4chTGetIXa9Y34hZv3QA==","signatures":[{"sig":"MEUCIBAK08pb+sU7SrWl6GhYuDqOe6Doj+9t9N4Qz/YtBg8HAiEAwk7ra44fvqXVtCu+gNobsX9C0g+hIhsf0V0IQa7uuek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZoiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa3hAAlstZtSzG5WBryp8bXZX4bWEbKngfiuRBIqs885zDt9DBkzvd\r\n/fBvrNunWXStzkQlEcZKkWQfqwCEUWWDcV1FMsDmzi/7G/F4eT4kRQkgof4x\r\nSvZIURG+YhlJSo/baUS4JkpA+OZ2mKqyL/9tG5hwNRq699JMIz4T+d5LzBaP\r\nkQSbCoOW1tA0sBsXLzgumgkXaxFeACG4dPEi8WNrZ426r7KonHVZA20ZuTKF\r\nQe7w7Bpbc3BvkEyQqwYZQwQe9d1czYNrgp44ziiH1NjowpTkS76rgMBZz5qw\r\nw2k63YxioOCCKCTM3SLnmqn1uNcQvkqjjHBmHghFCH1QStZtrQ72RM6kfkKn\r\nqYYsEqTBWg5CRyJs45U4JiLp9B5H/bZmqS3Fx5Xnqyxy3XLgxbL906ijHKWB\r\nzGalQaZ/Kkj269YHfTze/baaO+wa4w+COxtd8PFBiD5UQqDMqoZ6OL5b6xiW\r\nu5UhISBR5oCOwRHXfUyPCTb9AuxEmUcT6K3ODrY0m02N8ZmJ42SiBadZ3H1Y\r\nCO0xjUbSbLXtyBEbManUOniNh8mCMZWJagDUDsh8ZsHI6ja+hOwa3MXhOpod\r\nzPMvv2TWX77/FXTCMRYnTxSJfM5eREV892IRCefQQGWVVMG9/gf6We5h30Zy\r\n0tXwYEzJSVIS5/7pgihNK/Zp+uIPFYgI5cA=\r\n=39WE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/density":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"15.0.0-canary.58b130a3d.0","@material/touch-target":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.58b130a3d.0_1651874338580_0.610630147511694","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/radio","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1bf549a26ca8f060bf426278310b2c07de6d1aa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ae278a2fe.0.tgz","fileCount":41,"integrity":"sha512-LKai4kQ0q+QuU/Tmx+Ov+EHx2ohSAnnJ7jNdue9Sa9v1nz9q47FEYpTgRuSUFch4MQLkD3buoJqSi2jUk/OGag==","signatures":[{"sig":"MEQCIGqd7J40R1ys3OJnYPvo1s0HQiQr4jFVZPes+t3coB+wAiA7lAyW4ywbdCixuaR4qgWNgdtJlVi+pJaGNvYp9buwPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqedg/9EWuUivxEYFKyMwnYEg4Ik5OOOdgyniaGwM3JOoY21KB5cw0+\r\nCCBDz8ziNPDK2+v1dsdBSeZTThRQjICZBpb2IuopnUIiG0O8yLmoZsAVY2pl\r\nCju+6Mevfh5e7+17hh4lVyBCHVqXO2lvrYs+DqO3QAj/k0MP4ZxDHcU7Aw7A\r\ny3Bnvtu3J6NUiAEWgcydJXaHy0Oj79SZBzQHl2qggEeqIzwLUfnj1hkHKwnu\r\nmBqOeoyj9f5+qi7bhimAD/LgMS1ia8C5qrB+p3SxFBguspWMKqU2tuefDd9l\r\nljeGUdz9uMPYAUwrqyLZ7bn4xTg0ER8V9VNbcCTijr/qYFhylZmVYmzYWOaU\r\nrYBkMdl/J+jW445joWgUyp9k9o+ShZk7NFGPhIkFfLQAwK+zILxYu1/UCfV0\r\nQbc4BcXg1zJNBmG8Kx+SLJZfVThjJ1nvNAicYLCZKl6BSmnd4513HH50NRvW\r\nbSfNFMZzkuGn1uB7ACox1CkoALmS5r7AnTwkXOnvDKpPh3dnZ9Nr8XAehDQJ\r\ne8h4hEdJoiPc3Jy0ckSOGYNveB4ium5tPq6idpmIjdoGlX0dxe+livf9SLWU\r\n56FUL7Ws1aFnlq4+bu5Mh3eT+GhxWkoKO7e1npUMqIYme7h6RqeECWuwwm8i\r\nkcK2BYHOCr/LCVbysOCKltpzk/eEPzdqpPk=\r\n=O64i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/density":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ae278a2fe.0_1652109931463_0.1019868138578861","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/radio","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7a907ad9b4623baa99183707f9699b0ffc66e7c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":41,"integrity":"sha512-jx/u/x2FGhn6fHwDImqmp8RrIj2iFHw79r3txqADw5Nzl207wFWW1G3SdRsEonyaIYkS+Bwn52RvOxMwF2QTuQ==","signatures":[{"sig":"MEYCIQCIynAfAb0N/X80BauEVLuVBEu6LGOqdmRIPJq/2j0gxgIhAOS5MsLF5ytgZmhJ7Nm2xsQfdyO7QW2XFRZkmyCMq69k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyI6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok3RAAi0gSRT+Uy0I/LupYBm9wt+z2Z4fmIpO+W3XN0E5aDDzFLZW5\r\no1umAkCFsCMmTbPNjw7Sw9OFUoeRitFozLUcZEpvzTznZObSPg1apoIuGw0c\r\nGrxBlbQO1BBX6WGQdIMpitXvHqNaGYlR8ca16MbgVTyGubZiYkzEeJGBtQOZ\r\n/TyqYHmAIixlY1mcdXSBkHEgRIrjndNGKybOD34uTaPQg9EoqtCZ+vvnYMJg\r\n2fi94OHkqoVfiHwIon48iWRXjujC8X+C7HxOiyluyHLoBNAscJ7ZJEu/rpc5\r\nNBgSYoaqQUxPVCzYT050+ehBufJYBesOxJDGqcgOHp0J5Lv0idNqH4AD0Z8y\r\nTA1pmpuy0Y9UcqtM+fUnAMjlNnPU6CpfDYiJC+2vcI3KsrIHQGVL6aq9skrm\r\n9msh2KluT5HDgM+1hMH9uTE4q99sIT5OUIbu97KjPJ5rbr8So/Xh3dVInwEu\r\nGe3doBm5AjOfgJ95YeVNWciEpgjE6qN/yMOFCx83I9v4uHITwQj77Xbn5jDp\r\ngjY/+lAvSGJL+fCX7zn64p3U7nuLEKnIpDLVS99H0npNBDwCBFaGYNJQKUuO\r\nJabLXFWjptrXCtpaEa7rjVcZIiiBxR7pHl8zFml+kbMfpVjH3gq8iTU1O9Qn\r\neXiW093eieLzcShxLMS1H+6Ddqaek1cKnrk=\r\n=iWtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/density":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bebf5bfdf.0_1652236857996_0.8309182930849628","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/radio","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"319b3599bcf49fa7ead43bbf0c8c10f86b299784","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e6072cd6a.0.tgz","fileCount":41,"integrity":"sha512-gKuh/hlFt+Aio7gFH/OhzlomeE28IZ5urPnw2I4rvHiNsYd8gSFqXeWRspNioYzaTu3BbkRYTyiFmWZefNTKGg==","signatures":[{"sig":"MEQCIGSpKty8SqdRBrrW5qTBXcW+kVgfVtYpmYIiYJmQZ9EFAiArt3ies/U5rKuCJ5ZFmuEXdHCgc4XwAMFWtg17GDmklg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwORAAjtRQU0CFKOpp18+//hOPsOqIojyDZhrCAUXle759UUiKLUmh\r\nWDd2EShPTfQU1szuNmMY8x5TJsxYglCwuz1FEBXSvO08VFgyWf7dzaefW59R\r\n9ODL6w7xHeM2BEryM+tTco+t0tOpw9nlsn+TURPtjmEDz0v/9qJGir59ZPnz\r\nFSsDtZYwkaaVByVkl4dVNwEA+bCnm135yuFenV2/smEgq4yq7hQ4G+VPvyvo\r\nQj5K73LZWrDl32eNrrt4kacjsV8Akx3ur13W+wkCKtkSHM1tBzoqDkhlIl7i\r\nagM37pjXhjMHDU1djQa3JtCRJNVkS7FGwEbJEA7+s3CDxiVnZnqdTWNRCcFx\r\nGhLUUicNmv3kklWhR3LHntzL7yHXEeADFhwPE7UyNenSsWUuYm+gAI+jh17Z\r\nzmTofnHYllY5D0a8zRRUu//TJpTbouw/7mA1UUHKQP35PN7sEEifglAYINtH\r\nxmxh4yvJCVZN32DtmUkqGo6+4lSdVAj6uqn3bAjNAdalSmeWfsEMTxIi2S/k\r\nUnrrT9WYABF2KTuXk83YAJIfBnAlGn4A8N3JMBZKTHb7PIMKdAzk05Dfg6jQ\r\n8v7MsVxP+4J3Xn+ltZhZAEkIAPBT8UFrV8brlT0Ag9giLiQQUTZlzADR5SaF\r\nNbO+4MCEutU4s8MPzl/Vhvx06SyNcGaQrGE=\r\n=g34o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/density":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e6072cd6a.0_1652300345409_0.5441152463461392","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/radio","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51be86e113c4b718e9d2a59050f5552a03682c3d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5b40eb988.0.tgz","fileCount":41,"integrity":"sha512-azMJuRjgtR91Sm7Whol8TfAlIjL3AAnoQtPWcEsWQMT6/618h8BX6sY0K8koYZqysy003tLPm4dnIh0gbFcoEw==","signatures":[{"sig":"MEUCIEjXSpCuaYp7tv6piMiks6NOiDW9Epn6RIzQliadOQPeAiEAsceuwDzmQ8tG0Asdd39dTHUJ+kCAlTX909uXX677zP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUmRAAjuQCXyBhkU2utCZIvtWp8RlqDpe9ZRanSZFqzIM9dY0psWwa\r\nmsbNWdKho+Iq0KZKuvGw9PqeOE5gp2ODW2RdGNcn6aacM4TAm9GdSiEnqIaY\r\nNNXvapMwF1+1gaecUEEAkOBA6lTinPw8qifW9MeR2lqlWiO9R/ox1S6vn3Li\r\neRPbHGk+x0/VMDL361StFBJ9dgkDl2hjFsmhk0g3scbiONO3ORr+8rZHvpSF\r\nojg0oxX7fBSrbpnS8MnyHzesGEme8vM93YL8oq4tdhT5XHEMaO/JD1JjqI+G\r\nQJ+hVzGxyUzLP+16A/Na63zVZ/YjDrrj0b6x4wwNKPq8dP8NCZGEruWsOVND\r\nMXIsuH43bWip/pIE5UOiMVc8IPuEFvgH3AuQMg4x6ISb7tDh42SYnKh9Q67q\r\n+pn0kLteTPBxRatAwo5vD9Fr9cavE+QIU60sPezkoHPPNmnlRhS8nxiFD6ZJ\r\n57XIXbgrGxJA2/E996jBGvAwa+ByXDk3PbycdtlFz3KaYipE1tY2tXFL94RN\r\n6a9boc6Mmq0pZx/dDHb0WEZLY9VzhD7v0LLPx01I3OC7x2g4FYZOHEXkFCBP\r\ns76esOxPv/sTtKkVgTNhO/B6T3gZT0H3I7eVoafOnjKWdASY0MNAyQw5Bzcp\r\nbEt9vFrE2VAaCOcXFg23WsLBQNWjF46RSJA=\r\n=s4OO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/density":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"15.0.0-canary.5b40eb988.0","@material/touch-target":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5b40eb988.0_1652323493242_0.7088908094452719","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/radio","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8469a5b1c1261fb1f87ffe1de8dc389044f31db","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6a61d62f6.0.tgz","fileCount":41,"integrity":"sha512-4pOIplQByI3E1T/FvjMpahdpv9qcxZIaEgxhrwE7eJ7Fw+B5VqEd9xURd4X+ideeIYGMGorTy/3vxj32LeVSkQ==","signatures":[{"sig":"MEUCIDuFgVmcJgp4eK9bYTYQAiR75+OYq9TZ5hV2RS0M4hMfAiEA/TxmYCG5Hnl+Qia16Zkz7CwDBxsu82KQl4kQXxUVk4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkpw//UYkUKgQaOSCuuVNg0Z8evV6tnJyrkI/onUAaVdunxqvEDCR2\r\nUvMN+3J6kQOjYhMVxW2bY2W2IEPXWRdN+lVeUzYpRY+9W6JZGSWoK1BxowhX\r\ntmUnfbjrRBXrq0JM98ApVHQohCU+ASndv92ABAsd9Zj/ym4D7E3Himr/cxeO\r\nL6vliUGykN6nZux1jGojcPFrp5swdtl7iZkvBJf027k0RBzSIHmSW0dd2XYN\r\npvhAlzgtIJsWuPWTbysF9I2ocGGZPq5sv7qk93sY81g9kuQNAiKH2dk5+HzE\r\nPQUAVpi88qpNtDs/TAnv0ZaV+zzZAShR48NRukRHhRdgPxf3EzaKFIeX1Mwp\r\nuThloBUDuFrwHO5vxAoQ552jX+RdN3QgEfkNXgjvnUd5CZb8Kw4EnQ/sgt+N\r\nChXXjgJoNmlAIo/mVP0BwM0XDrAf4mSJKLStqHFG7fvZU/o9NjIbjPlrBH1E\r\n1wG9LNfeNbOGprJlX/Ov3KM+Fc/fzoPmKNX2npCElNmRhlVA45ZZwWrPn9j9\r\nolUQRzGzDIyiHwLk9L0EIwbBemoiyMssY+WXXesuT7PE2gEudYBIRz2+/tVm\r\nrnZvlOPZ4IP+BDZzQEIqYOfgUOVxLh5q51r3GqF6s4l9xw1py2P1ZYDKawto\r\neXk7HUUiOP8zdHaxPIaPYlVkM0eJcZ7+6vA=\r\n=/9WA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/density":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6a61d62f6.0_1652387250921_0.10558254977037773","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/radio","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e144e8a892ac478a51075491c66164e2cf02069","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.05930a453.0.tgz","fileCount":41,"integrity":"sha512-32ZzA1NO97I1LGnCEtoxu2MBW8sLXgojmWA4QoOE9KlCQmYL98nntvDWereHJmukUVzySID/ihzXxwjEzrxhZQ==","signatures":[{"sig":"MEUCIBv1oltoKR1mKO5tXChinQ/I1sjcQVjvbWyZtyvi2AmrAiEA9IRt/mfZE5jYx1Cs7wdTVhIwqYlehmatmYSHVuXngJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1jg/9FY5FEMkxnRt8bNYIWbcpNIm+tRjx+ddhBpJlQwEVg4ugaCDk\r\nPquKS2VHg5/ycu0Zn7N6VXduMgyIi8sp3NLBySu9i34gXe3SXhVcJMpcPvVU\r\nBbPrebkiHONPZMStbxK71K7aBcKZ/VrKZZVRqdC6RYN8TTnXjv9TwLs5qEz/\r\ny2qPOFnUdE64lvNGE3z3rNo3u5to+UErZx8STMAFj35E8cFMvriiDuvVlFw+\r\nusooyI95ClMvTi+O55y+uXUwLVGziOnRwA4HF+jB5t7tjZq1Cw/YDXx2qS6Z\r\ntS1NmLPh7RSiKpTi+CSh0APHX8Hu9RNzxDAs8KZxTPkkdQcTu72/fk0vG3T4\r\nwQXpeE041j+SXFbnRly31yePz3I6DwScgYRTn5iEoLFLCGjgyQ9u/6P+8GA7\r\nR4Z4CUR+zK3c3g0GyBz1rF0pn0uMXFczdunIjNdjZla/MCYAhqdMH6oHftIi\r\ng9GBFPhmIZKeFMf1lxLI1tpDzQiOAEmGCh3o5+5dN1xY1oio3SYT5hejYJSP\r\nUKqYFvvWTU61HhLU8J+S1zh24O539zm0gF+WlOkvEGaY6ibVK82LALDSZJQx\r\nmzdgew052CvErgFjF1qkAR6I75MxQrMraduWBvy3X4+DLawK3B/+zKVa0lW4\r\nziLcIKUUoyRkOScSsNLqKXUJezoMSw/1+NM=\r\n=flNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/density":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/focus-ring":"15.0.0-canary.05930a453.0","@material/touch-target":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.05930a453.0_1652467687874_0.6558854380068728","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/radio","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a8dac05f233a4df8d27a97935ba61f8a4d0d9d8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":41,"integrity":"sha512-iWIzW/EgO87zs/gjZ/PDckDdpxsEfIhtNPMjMavwH5XcLY7y9FDfsEb54oLD/8x3MyHazhsPmaGaSnqj5eD1ew==","signatures":[{"sig":"MEYCIQC+TMUGAUtfvU6qHwgFkjBkLEgTGmWU8Uo8gohOzzGHsAIhAJRd46jfwix4RGAFCdMdiGBaCPcSnOWLs2hDj0KzENij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS3xAAhw6Nji6A57q6EZOSepzV9x0Web2VW48vVDCYa9eGajFvPbKl\r\nydE5p2CDG1+9Zoo+mkLUNDNwQi7rCyW3zYrfw9cRTHyT8pOk6r03UfDUfVMA\r\n+zs7Fq7gThgkIdXSox2dtMsi2RP7ntcOFDQJqsTCG6bGL48/ShvlbprCmXEc\r\noUMW7nYMo6EZWyS7YQRia1OxQnd9fL++to4E5yxgE8k1JMJpb8FjVt0AMJWl\r\nv35Ep7n4lvsMNqM0OlTLtjSCjnMnH9dB0BZqQzpOjBrsg00vvkOZlW1mxbCC\r\nAX/VZoOKlW9Q/AiSowKclolyvuRsgwJLJwRdY+mBnhEErz0WHWUzcRvlccGd\r\noFcJZhCqg4RNZR9K9sxYWj3TH786uQJrwPDM7a69U9ILJqsxUQIR6HS49tEj\r\nS3DoOQg3ItqaAMkD0esOjE/e5Y/fC3i8oifKwy1qogCSnRfYm9586QXSzd/d\r\n5htBOwsae26ZrCovpoSOE9OgszeKE0Ud3irSv43Ukjr0c2/wjpEVVGhRkAIH\r\nCGrGdNvDmF3OmTL0g84hfGl+LXllj0pDAbhKxl4W7UBDjSbXKIlzuN8hM9Pv\r\nCZrviJi6GzeEbCiKS9wTsW3DJZmSmAIzS0cj/6zZaPQLOtC3tlLCRIS0/kkY\r\njC8AnqRHd81iVDdn12ZWL8aVeA6gZVl6YWk=\r\n=KMXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/density":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c0a11ef0d.0_1652911298546_0.5745068778301152","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/radio","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e7380046804b77902678b40eb261b9c5748960","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2f9b268c0.0.tgz","fileCount":41,"integrity":"sha512-+U1Gfm8Vqr1yRT1LcHnP4vmxfce1seyEUkCR4zK8aE9MIawXgF14QvSQb0xNbdcHIAi+5Ze1Ahfbu6muVOZv1w==","signatures":[{"sig":"MEQCIB+SFaIvpqVbF4Qz8TBNQtMH8ECBnVR71G9+6xhtNPZkAiBQ/93HAhRVlWk/5uQX1fyaK6TBZ1W7Hbvr88dIlhTKpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqorQ//aU8qMCq/kT6Ky6hObxJTonAKXWvjVqjECCTNY7SQPfwCg7n3\r\nthyQGriOjXwxmdgJASY3N9rmTYjvlhKp9VPhy8TWy0GhQZOMyr8YtGCAHIu/\r\nUHM8KgUFSpLCI4/wxMWHyutw0297FIcWXPS4Jbumg5ChO0QDRpcTNKxPuZZT\r\nHsb69udkA6RwA2jylCtw6fhqt0IA35+IOhPevMS2kRrkkjsbMpGReNCOhVIt\r\nkMpk/C7YK6uEd9e1Yb5RrtcVj2iYbGf8aMItpUfpHCjPIXaEvDwt1zlS1i5e\r\nTe8TluGs4805p9MY7CjT+tGk7beIh8gkGlRYnFpPZsvWh/ZyUGe6Wn1Enciq\r\ngOkJIDc9fsZk6zuZYacCJaWG0jltB/muw72qGla7c+OzaKO+9Z07dOrftsEL\r\nS3DtEHOrw1LfDc0N9J5ha+f2nnG7vC7Hz0Vu3hfQPN/GxUCfreqMFkCZppIa\r\n/BD5JqDnkRCnNiMcjYUOmfMhTqcQW+pHYoGkDVRgWw7LAZUTyyMHOm8HUgMk\r\nRqwEYdbzeC5lMC/M0dNrnsmJAvfDCggvgDaBuRf0gwmKydfOCH960Myfd1XQ\r\nyzZz/qf1yfZnQjy19/LH74GFAs/CeAFv86zw3ryigJ7oM5DxBDDqE8+JSu0y\r\nZd+7h3G9lqQ2AyKIWb+aVjv69Lo6M66sC5U=\r\n=vFEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/density":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2f9b268c0.0_1653075200594_0.9279024479681359","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/radio","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bf76bc113f753759fcdb843865f794b27bd61f6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7741345b8.0.tgz","fileCount":41,"integrity":"sha512-1PEl5vIpuxLqUolVKVYjoGgEemubJAdQln54uayrdhUQ45cHZSoHAStYBrjn3d5LPWgCxbMpSwhts3Sw24iB7w==","signatures":[{"sig":"MEUCIGxB5boVNk1RZsO+GvFpStfIuaAQzbkBfvY345AUwpz8AiEA5fBD6JtdO4Pl6qtXiFRpUAUOQeUCRCZY9TBtNvjwGI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpixA//QP+U8MubYHUWLAzOxRw5R7sS9mo9lnzH1Bik++3DSIm4oOQT\r\nEEKM7+2urjQUz6lgyv3+G6fJO+C/JHJSERyG3CSFo1n0JnH85xrM4tZpzXQy\r\nmYloPdq7zQhZQF3Z1uxBTJswVzS1qmQm0qd76DLYUMxf/Ev4ShwiqV4vKBQs\r\nUrTu7GVUJcnYESs9siCehNMJx1n5xxZGcHniN1YA/LMUru6Z6F7Ys3gXT3kC\r\nYNSL0dV2zAV8fA3CqRXrlHoAGDWnCuusNBsZb8Gv+XWPjljoGNynJ6IfvACx\r\nsUnZHgaubZ5hb69V8ec6KdBm1dbk0uJ+Yn6fR3h3rF8cMRDa+Zuz9xQTCjT6\r\nwCrcFfwSKS+VLWeGGoQaeUOxC3nmcYc8oJNu/ObjfQ+NzEeIGmffGf1Cu1Hm\r\nJ395f+7URIQ4ikDxPvxTwzhcUqtI5Nt3HzVNJTZfjgDHkyYJ8tDbLhKqBftx\r\nvDgGENw6cLLALhB7TYCG2C8eSCzzVBBTYs2UcEQNmNxMi7VV01ZPWki+AJ5F\r\nk+PndkwRXlwnLokw3JoRP5Bk/gU8n7eTqrQbph262LVdJ+tK14t9AJHgHQrN\r\nygnAiaiXxrbKye1H+ozM4ZREsl8bu7haEtoird9WjUDXDHcRqlcXD3ZVwjRg\r\nACbWi/Q7w9VrD+eAQCvOEWm17inz/H/UNUM=\r\n=Mr4a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/density":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"15.0.0-canary.7741345b8.0","@material/touch-target":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7741345b8.0_1653077004826_0.9587042807231916","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/radio","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12d90a70031a66b9aa595e9126e510e40742b38c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f807e793f.0.tgz","fileCount":41,"integrity":"sha512-FKHKorNgLXHwqLt+0cgH0RgBccvaTq2T23Y0WwAa9J/8ptCRznH5kHap1lviYzD6nURmKIh4glDsxtdtJYrp/Q==","signatures":[{"sig":"MEQCIEa2YMXyU3kZyKrZIm1RcL4/C+6UZbKd5mgwTUv+TT5IAiAsu4h15PFYpOyzHUeW7WPUjU9wRRqH9X2NH/J/hKTueg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHsBAAifgjyS+3zjW2PL1igpu4p+s4AvBK4RiwubfMSSBqBrg8sXuF\r\nd6zvLokrOhX6/X9Mij3MfqVHs4fs7qQd4S7pOWj2Mjw45DEDsN/mklxTb3h0\r\nUfBjrlRkTCogCtmXe7/VCEqwbTBommfIez8Xx3sDvm/OUxxtB2+MH7ky0jWe\r\nvc02ZvidF6U07zmuNhZ8R5AI6hxHV1j9SWPnonD3/Z7zXN19SYIQuYOxiHml\r\nnU7XaFo/26r3QLbOlNj2UYzlVQYsJDogXp9pkrO765IeRYqG6rFg854d0q+B\r\na3uEH6VmEUWWRmMDxJ2Xs2GVn+U23ZI1vwXWCNbXFMvyd8CxhfxZQPRV0X3g\r\nwQBtXm8LCxbXzqvkTWXO0BbTQgJ10MeQoCmOf8kQ43vp8a6AMSkK0uM/69hr\r\nVOTj7YiFyuDPjuKQl3/XOXZp4XY6qPKzEE2dGi2Be+rM/XIwv4M5ZIY9OH9i\r\nr1gqJd4JqHXYPWql1o1BLkw+ZSzmv7Ngz5KJePND5s81r+VUhYU0g5UThFRt\r\nBeVb7bMQWLki1uDQGAtl6KOTrjvDDGfz8utjRv3YQDpXwiU62buyfAPC/4Tt\r\nqkxl9KLLM+dHkzX+O/dMLZ/u4l4rPdRSNnPwOjTdRfTGjhankz5wGYGimDP3\r\nIKY0FLlpMWLLSdy+0FjPx7ZMO/eaRQivhVU=\r\n=4vLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/density":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"15.0.0-canary.f807e793f.0","@material/touch-target":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f807e793f.0_1653085348294_0.7186817187359695","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/radio","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912693de84c553e7b4deb4b9a2f2f4ecdfe310d4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":41,"integrity":"sha512-gSzDGCN4hehaKb6YmUPpcPgD8noUVNIeMuPNLlBEzfCid0sJVHTMIR92Fge2UB/7Cp7o3s9Vbba3ZyFsg00ckw==","signatures":[{"sig":"MEUCIQDPOXQ6FwHeWRN4et1BjU1OMkD9Px1jgQm5VBRoeS6bcwIgKQkYHPH0jzZaQgqX4OUmM35djCxYqD8Us7mb8HEvvbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6ESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc8Q/8DGWN0DxiaNaPnexMdRjRv+h03iW9fnbmKblHwTrRYdQtcY2i\r\nL+6vOZ4IgGQOw2BseZfYrxqbnqX5WpTtldMlW5zN92yQHMivP/HHPc766eAi\r\nPoyvGCduoD5AqLrM6czJ34A3nhJEBsMNDKG+fDjhG9lL3PFt1adcTwjfcfd2\r\nkA+PYRAwk6vZ4wDNmIBxNz6R3JYIHFDIko14XxLAqlu+JmVIY7a6Xte6PmAN\r\nX5Cb9NYNHXTNqMqE4NENYULo2XwS5gFnqXiX/DGMISWu4cZPRKvNrJ+RO8WB\r\npl1xvJPWgvXCu/Or5e+VA/etep031sODCZANF7TxEIwC+Kz3sQ5UVDT9SO+A\r\n/yKMkxVcGFphjVh7jmsYZa+sKq7A778VNiqHumjQC5m+K7NJHrCBXBOkLfZq\r\n9kA3gYfRrG6TZBfwujX25b3SUp1WX3R9njt7XyyoKSLffjrSUj/aqidcVq6K\r\nLnnogELL394XHrxlpaB9X7vCp64Jboh8KDx3QAB3TtmDcnYkY79xQ78skbaQ\r\nnYERU5dWcKYmvAzMhoK1RUm4e9v5+ue1/1n5G8A78124eq8L+azc7JFgpPFx\r\nFD8sO0bW4aPEwXHHcdUvAm14Tz5NTGMhiCy8P08Sa2fxbHh5HD5Drti931UU\r\nNwrJKgjcIe+W8+JOxhF6qgmjMMQ40i0nrLM=\r\n=rdjc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/density":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9f53d4a8a.0_1653317906426_0.29790431592007893","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/radio","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6414123bdaf69283d91599df257a54a60465a7c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.77cf00e37.0.tgz","fileCount":41,"integrity":"sha512-MLqQ149x33aI6ifDFh2+/TLZqzo9Pifn3IsWoMMz+hB/knBjJKd1/MRLHbj4NPoJz+Gw4TuuvT5aRP7SY6VGig==","signatures":[{"sig":"MEYCIQDiUBzzsvakxXLPuE6YrhXBe7OqXxQEbEPozA5gaZEN7gIhAK+nnDUnY6N0jFwf+fDRE2e2YM9h/ij+2XgxyCa+cvVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjjw/5AO2AAdpAodcxmgQBNZuYoZPS/nx/g5dfuotFO/wRmf9QlLJ8\r\nSETyx2coa91OXCTJA9nePuyT3lq61M3U9CqsD+bp072Ar1TF5aXyYEdgiRNe\r\n64TYrGy05Lv//zs+O0NLcodR3Usb726AC7LDUBl3xF7wtQmy+W/HUwG/uDWh\r\na0UDJ1m2XeD0KWWWyBfpsTFk3FsnstlyfBBbEcODm3HiOOsxbQg0aHgIwRvn\r\nt5BQpaMGHEDO9ppFRb3QWqmbvz0PejCvsYEgehGlY7T+HnBatT0f/C7epIjY\r\nO1KksJRE2a7QOmvUt1mkOtoHIyJ/jnGDJkl7K31Nyb7uKx111x6mv5To8vAu\r\nB3lfXC3bcfRQDGIBeqTYiPCu1k4SyaSJ6fMDVUZoIq1oVNxJCfBt/sSQDkvx\r\new8g9sbQ2aySVrOt5goXsbTFy56ZRfC1hhbGbk2ikvjQYzPR5Rb/zK3m263C\r\nCXbNL6I94do42pP8KUij9GTyTzFkHvaXLNcQ/4SGoi4VwzdeKRgt26j/MGc5\r\nAYl/jFu/wageocUfLX3HvxfiQ/tYUoVTxRobjjCUaWRLAx5wjg+tDfbo8lz0\r\n9Ecn3QHM7GwkkJnxFBtxYIrBF6zTwSGT5XMe5aHt4D30BnpVm5h4wwOzPR8q\r\nHi8GwzA9dB1XP+qbhcWAfJa/B+V82sP2Cz4=\r\n=tAcD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/density":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"15.0.0-canary.77cf00e37.0","@material/touch-target":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.77cf00e37.0_1654018844728_0.6694840962965758","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/radio","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"039f22d46867372d3bd8112670495e4feb6332bb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3c7b844c2.0.tgz","fileCount":41,"integrity":"sha512-7P0UZAdIZIBAFT39OLjmlIGroQlgJbwC+F7i0iFiAwh9z8Ugj6ml1knjuhxVTFWo4uNhspQyKRwzhAqGEt8/MA==","signatures":[{"sig":"MEUCICCyaa7EHYsaarQhhXIi9sVxbmSOznPUIoA/S5VdnCsgAiEA2CbBUYYL3knO9pEnb596bpBrc/MQKi9fSrEAEXJ2n+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin895ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm5w/9Ggk4zXMYkhpDAqRa8Ftrg9pqCWBhm0w4HN9y1eQbFzsE9NW+\r\nmm/xX0O4z7vMNzhrR+P657g/Dgo9bdp3o+r6fdyZVHbVyijDQvvsX7pQRgoc\r\nJwPql//4fBifdETeyS54Y4XcY1SGf+iGfQa9/NFcVZZ6p9Eu+hv/lxOekVuf\r\nxF50lRCSeG57zzLEIPrUiQgKVBr5vwqCyrUiXlhtl+bNTzjPcTCo+++Y1f4J\r\n7ZIPGkURQERa69KNDEfJSAMWn0Y4Yp3o7cG3XTdCq1Cgp6XHu7dAsWz6v3UW\r\nRT49MQ2MGwIeL/p+F1BDAnQPtO3xJTRLRQwtTzcArWLuHSwoDRfJtIPEmTJ7\r\n7b77XVxn4bPeqM+FuDmoc8Bi4dgZHTMdoLt1YNYD/3u7rp74tbj6M51Z5aa1\r\n0I+dRiofm2XJ8afRDAeAuBNp+YMo6EIX6yKFN27VqEA54417ikfcuZG6E/5V\r\nv/B9y1GJsJUnr7+ep2y56qw1IUoMk2TCjV7cjbhuHRMFiBNWfNwzAx6Dym3W\r\nsXF8diQ7r4GF6AZgilNNi1q99KWq4Z3fE2RbfaFZtMUTDEYxpSKeO+NslPSR\r\n13rx57v88hYJTZHmFccOKGEYuMpizD2scdFq9p3rj37+tRmNE7U75lfqLUS4\r\nMPPb9rh3EjxgL/heD6wtbs9/p9HL9W5q1kY=\r\n=9LWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/density":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3c7b844c2.0_1654640505441_0.9644356485969143","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/radio","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e63814e71be529164b160a3a3426aacf1ec8e7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.df47894db.0.tgz","fileCount":41,"integrity":"sha512-BDb4W3w9H3b+pStmFVOO8pLCrWfbNB0eW3uuG8B/Jo4enNIDZJcOkjZZGMPgsttylRBLxAqY7gTaGwZH98aWsA==","signatures":[{"sig":"MEUCIEK7RsLuWLtxcljHZEKwyWz9FZrUbmp6G4J8ffdRJ08XAiEAwkFROggi3OR7PZheueVco+IVR1Mz6ZOAW8DSv1NjDDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip284ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPdg//VF1/1mJbe9s7HCAgIuAnyyycuTL5LRWAgbesgm4JVC6P+YjD\r\ntsIWpAclfklEJESEF8lYxtINDVteyJYLfmxlGdNiNtsouX/N6MoP0jZQhSw7\r\nmn58pbSPwZD219Ie0KPkQjBc1Okb6TsrJ6Hj8yUi9YT9PCq1t4R6I5YWgyWu\r\n1CXMLR9IeHg/GPzV656gerlNzqn9GL7pifIXJHYsDHQcrU0IX0gryGnWTG+T\r\no7/Vzwd0VvweO9wrkHT8Isda4c4YXbpNb9uRJqmXfP9RywtBErUOcnfDV4Yc\r\nVKM8xjXlpFlIMI2NuR+YNwAdAD/q0kGYsF1oJPZu3krSKOVk6AgNK3WiKLMR\r\neI1pL7RHoPeRcfVwBPIBTLFXLRkUhNTv1Qvalpf12a/xE7sQ2oruQX5pyyJW\r\nljF5+BzPwbD0ThYglSB/E4zZUMMUs+iU0ka4l2QIyUJ55IZJ50HBQ5sLd2zR\r\nFYISbFlybvK13Lzl3sh8LAh6n0+osk8VMXU6pTx0EMYt4gRSLmx2/IszEiZV\r\ne46W++fn/P5XGXA682G7LXAfQAowGQR9EWnLQY8Q0CCMazaTPBblLgeTYxKd\r\nDuD260U/aUtSEefmGWMp5aG5g6ckgjgyV8hAyNojU/Bg8XT8DbVWGHZvqT+z\r\n/4k2rwKhmBQbxjCejHvtFPQ+83ZYnSZ4cHQ=\r\n=2r03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/density":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/focus-ring":"15.0.0-canary.df47894db.0","@material/touch-target":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.df47894db.0_1655140151881_0.45166798084345827","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/radio","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"958052de3e5d537d5220053820fcdedc4883a89d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b18a873dc.0.tgz","fileCount":41,"integrity":"sha512-AJZFE2UXd/dKcCnecF6XFMPsxOaVRRdEt42PnsD/IF7S4tzgFKMJtRZro2Oic56l/wx5YjWnpFkDIEEhI5M/0w==","signatures":[{"sig":"MEQCIBalOqt/iqVMooK2Mo674oyfeJ0bG4/Xd69joHaipvT0AiBm+hI4G0Y8oH86pruq3LBOSLVtmiozXMqPLZ5qoAm/nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCr/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfXg//dHSIKt2s7i6B4fbC9QMYcnZE/N5gSE67Tgi8DBQqQCg2dwXh\r\nEfeWl5wUcGQSlqL80iqHRSyYUxGCaob7jq0SwN9Hl3KnI/Yx8onZHfcCSQTY\r\nvkv1yP9WVVQZWt3eu7VuY7BlqaiQs9oAukNvjNXQ/r8YUX6luH38Er/+b+UF\r\nxkxxaHq/f+Xv+4603ha/ood2PfTiOfRnRlKxAtMNQlSJ2hPlnkWeUKXICZR9\r\nhPQbcNx0l2aNU5lgzAwDAAxN8bqjtmM4bmp1mox257nJm3N2Qx+1qWmrmwXq\r\nFDaLvh/qz5JgFTo3E3rHD5SS3MC8A87sjWyg89wB7UM8gf8650khLdyiP/ys\r\nJ5lxtp81ZMo79eGZFy4dJQnSX3mVHHkzz3Yq94BmOZO54MjsTFCCn4d+uA3i\r\nfNjVeA6jVUhxF7ruHJ9U0kEZ7kvY9qI35H/YPh4+MbwZI9m7hQ9Mspx7VteQ\r\nKGTnoCmv5YYjIJg/GuPvZ3fSwlD9BMlocWqBmCZ4qarsvUE9VLY+SQsc9F2d\r\nv4TQ13kfuehSzx+MkC7XW1lzjjvtQ2JgMaLax04DMTJEgP/LUG+o4v0XytMz\r\noS6PFUUHvbjtr6XJuySo5PW+y32Rg3u/HDu78G6iATPmWqxtn1yHnZq6+Pqq\r\nNAP+yq3XTbB2UaYQxposvr5Zwow4FMwFWfI=\r\n=UO7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/density":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"15.0.0-canary.b18a873dc.0","@material/touch-target":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b18a873dc.0_1655188223078_0.022889880923776085","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/radio","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d355d1414e8e4b52dd14c2f89399884d0f3442b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ba9c29637.0.tgz","fileCount":41,"integrity":"sha512-RiaKjfdWhsaqeznGKYhhwcgdQy/HD6W+AcCFT7ayPlj/9UtD9W7Qi1RK+A5ZpQBTn9x7U5kUSB5h05qt++BqVQ==","signatures":[{"sig":"MEUCIGIVu6Z1pDeUOySfsVwP1L/Ij9IIE4Yf6dXqRqkgJzmtAiEAo9gxbTCrJLclCTKei/+kJzSuI3iWRyDes2GSSDKiAOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNo4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpfA/9E2/0TD85eqHSn06CBdzeCo2z12eY3ai26d9s5tHCLMlYlYJ0\r\nc619OCB9moKOSwMaYl3+3GvuXHguoDHhiASZ66gTby2j93j+Kl/yDH5KqjIK\r\nj+lE3jKGAUq+7uuyY7U9E9RZVv70B7QelC2NZV01HDIBv1qoQLfh/L5hOBrz\r\n2RRZHoT7MvX4UYVap3fFdaww8M79STGTjv2aOAbnBhgYkQWO2nMA9ayEGSZE\r\n9Vorqie9XP/x4ZLAJVs/35cb/YyScEqdA2ug46zBx3OD3h9IiHqkoW9NkVDn\r\nbenmlt3VlGT2wZHlCI7fLZmaDYfrDlklUm6USLLN5IEeNXnjb0GueRlpFjpp\r\n9cbtiV1JvRf4zNeArxFDm+glpnPFg/GBzKt6JOqlLPQCHa7nBuZzylzv6FiI\r\nV5Aho+NxzS7scJL1+UtnQTKRkjX6ffsBOJPyZq9ld7o4irLyTKhtGHc6Y13g\r\nMiOtXcKshl81fLrNt6lkDJ1nVhfFdyB94Y6mmP0A3B1oVuEZskTJnB/XlAtB\r\npVyLecaTsmyz8+NrrElpeaGnwS/Nu7leZkOd0IMRtZhFYOXSBDSEMhOnb9x1\r\nXzAS9h4sLG7umy6iYnPe2rhsTcStc2u+QPCPmV1/8v34hhWrB4KOsbcJl7MW\r\neu680qeSJxWAV+LHRzUOAkGI6+GzFUvlx3U=\r\n=xEK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/density":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"15.0.0-canary.ba9c29637.0","@material/touch-target":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ba9c29637.0_1655233080421_0.6630497380143199","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/radio","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423c7af72f7704ec29126c84dbde1aa770f56752","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9bfd12f01.0.tgz","fileCount":41,"integrity":"sha512-55ZmOyumHi0yDFVyuLTIh4zi8f1QHn+IDTqjLV9XaTKoGeom7qriA9J3kZG7KiDskq5uHj0cbkxU9VevatljTQ==","signatures":[{"sig":"MEQCIGbty9w36t++rdKPNUhXtfIgFGXMoyDrm8Z+oXqKeMqCAiALXB7NRc6+EJ4iw55uY2P7oVPbxD1EIobniWXxcyhLow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2weACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Lg/9HENuGJ/ZoGppGssW7LvGTbaIdPN9P7JHLG5mSps21E25h62V\r\n+hc0bUm4pCQEJdRnF2mKPM22eHVqhRRSM3spm/9xjsLkA9OIZUtwIPi+sjW5\r\nIqTO/CcYD10wzjWOGzufskksi4iFpY9tox47Bd5XFoGGSEWvZikQaM6BIlP0\r\n5hN/AysjUmqdM6AdiJkJ5up4st8sFjfHnRkPsUW8LRxoo08G9FaoX0Nruyt1\r\nhXYEd0ZSjJRwAYbeYOHp24RqXJOB1a3kpqh52pmP3s5hH8RG25WXknyD4sgO\r\nDbIyF3HdupyRXqFmfTn8Iime2NfpfjgyVfyb4bBq/ScEl/OFIoZ/y706OTAt\r\nQIcbGBk74d5Vi7JLhmOZABmDepjjsrBdou2dD1DtCmkfvncLusfw7H60uVL8\r\nBJAvVsjTGzBGYF83z1e1ChQlL4MhmQv8kBrv96KFD1gnfZX6L8/OLfUrDOsb\r\nss8u7Xyrks39LEm7bx1z/7y+YfuKCh3WBG67EW42X0jbJ7ZcEMLvq8u4x83e\r\ng11AaR67s8R7GuDQ/PbsQNjfs9nioQJ03U+xnQMg9RqLhuY5ylJzGTgP5A96\r\n4Cz+zPBuj4sjE6jfwKc7vlD8kUjHnB7VkkKDOI+3pglpWsO77fAGXkt0YBCE\r\nGY0M6O463/5txow9R9Wga/BwyA4jJUfe5Yg=\r\n=Ytsc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/density":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9bfd12f01.0_1655925790040_0.6320033994732599","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/radio","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a09081235285ae783535648f076b6c89bf5032","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.764de225d.0.tgz","fileCount":41,"integrity":"sha512-yfNJ7kXY6sh7d0en+O6OfMC1+TDpsh1eW+aZstC/SCbeoYKIV572WiaiEx9dPV/Hwe3XYvIzb4dgC9xKuTbmXg==","signatures":[{"sig":"MEQCICns3lkCbUQg8ll+kaAI6a671PtvKALAav50ZmG0vuCMAiAx1YcAy+32oimi3RDqfZwQufn3du6EJdwU2rm+t9SaYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH18ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolHQ//Qob4s9qCmssrnwQiWqxku+JeOnVBYpqj3nZTK225SrnBRJ9P\r\n7AWfvuZyJbZTB05OYT6FG+ZkFjiJRfS2ZtYcUYPcsMkHwSNta84BsZ7vhwaS\r\nFCH9sP6IywLv/MND1k8d5XWnmbpcsnDj2lLahm4sOQeirIyBBga6ZvlpTRXK\r\nQ5mcDT0eukwVASKqsvZ1iQYYU43oAwPKtsOLMS67xm1qPCx5K1uEZ8gLq1HL\r\nJ4SxNx8f54HiQ5HGbKMQHoCPa2Ggo4q3OmAgT74zLPs8Dl0P0OirQt/NxrqO\r\nl7amskX8L23mVT3CJtzejBGZDgUNZTTiDLDULcx98rt3K7JgZztm/L8NILuF\r\nU1oDPT/3BjwWwja6DQa2kc91QxG3nq9E8knRNl0CaV2RUz6tzj23f/zTwf4I\r\nkwGsE43/vHMtB/9C2dX7LU8Ke+zs2cWFTnUsIRffzJ1pGRmvJUilncLIRgbu\r\njzqPDVhiPUQmvmsGIKS5q2b6uXtqzqpEz481tIQ1Kk4Q7fjdzy9sKZZhB2F1\r\nC36zzQuz7S5q+60jBMlzaR6q2hMdw2BR4iqXniRlpWAkMgnlRgpqsMopvFJ9\r\nqS3mqZ+CDLSMtd50p/s5VohWiMJq1wcb3W3lo4zPxRyBBYPAEn75G+SKu+vY\r\nFOHyiENp7VXppkhpkJt5tqs9PRdbymfPKE0=\r\n=LAuH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/density":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/focus-ring":"15.0.0-canary.764de225d.0","@material/touch-target":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.764de225d.0_1656520060166_0.8265213670159499","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/radio","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90b38bef20e9c74ce3014a8bd43668599c47a987","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.31e517cea.0.tgz","fileCount":41,"integrity":"sha512-UDql+xaGgL5p5dqXxdnHn/mXOPn7mSwfZp+7HvrmX+XtaN7ZArUAe133zX5DXIXOBOCpTkxJDGgbKbX5iA6w1w==","signatures":[{"sig":"MEYCIQCP+H7SPkt6I8y3YgLuXAlO4uwUMrtQELEukJWTwhBLvAIhALSjx7BIyXFQBkYDC7hKc00u++Zg7GZEK/LnOuuU/2xd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk7w//Z8aSJTMgApxvpgwSa4F9ynhkybFm1is92ADx+3wIduQ2z+gq\r\nYv9d80pz8yXc8x8Xv47t9qGq7qn3nHworu2/mYvUnkKXh9M8y18DUOMXtVcf\r\nTUEBm0l/Uvr7UmKshC14vb/jlEx1764d4avWYOZ+IT844F+NLb9EgAC59riF\r\nDev3KUKtjjBPnRE4gIjyfqiqwBczIQteBg1nxFNvDwrWEC7zFKv6My/9EjRR\r\nlD/sP1uiLwhffsKfrUa79iA58yQAJZnOXt3qYuFTA7P7hlzIKaGOjZsNbHUw\r\nqJRPw29ExO0tCf2OZ37DzaV4Y8nnQKF7fulzo6pqeyiLcXj7U4fJm9u1OxAb\r\nwJyeV/nfO3/zwHDUFWfAQ5SMnnpzWL5FCT5YBsupBPPo8qaQyd8siReE9et6\r\nkVWmj398sMbocNmBECpxG9oWTcumSb5YKm9s/UiSxtQhbqsagJ2OffCrxK8v\r\n+Yqut+3QVV2HNsvYj5MyDrzm6l2R0EzYozaBgit9yfxq1dMyKh5AjJgz4bMW\r\nEnfBRlkZIP43BvFhgQl9Dka6xroLSM5JCnzMcqzmiEIwfE/O/Cpo4hPxIU4L\r\nDHP0vSBEEky2vFsmzXRAP5J4PyUr6lUSFjjgqmaUuVBOXpEgxhpbFe51XC/3\r\nVJEGKFtFSy5uGSQ5RhWoVghgd/3qfNkGhcc=\r\n=rMfd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/density":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"15.0.0-canary.31e517cea.0","@material/touch-target":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.31e517cea.0_1656700140768_0.9863814026798665","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/radio","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e663e2b4476f6e6882c5ce575e098456fb57b9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":41,"integrity":"sha512-08+690CQyguHkkhaK3gmaB7BRZO9j1iktBTqD0x8TjCvMMpaa9TFijmbWg4xzaZ9zfaxsd3s6gZ5Be3ALRH0lg==","signatures":[{"sig":"MEUCIQDbD0jFFTqAKNJATov5RYB2HTvSJYwC+sB0R0LwbPcHCQIgfTVE7fTlte6djigMc/uTLEW8PyJ14EV0kHUOLLf3sYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq3w/+KAr/HNoCeSDnZ7EpoyO5NjGH8oQziGXvp5hL8Rdv/S8FM75L\r\nfYMx5twnJYSUDP7VNtKHqQw8c0AvhbKOdcD2j2Mq3K0CnPFsEo/Q2bReIU2Q\r\ngxkkgv8EZxG6Bbii5gsX+R9ErdOiypQl6yPfQga0BNG3fd04/zZl+u8kVcCb\r\nsiC32AI4iZhWELCHbgl0Q+7pa79ZOAngkXMCyLQKW6rHt5ZJe52jlZXjtxOJ\r\nsTdXCHc1I6TSCmt1bsOISXX4H2AB7ZLPNEp2fe2mPPNsj4e890mqyk0GPXRy\r\nbRtf13INhQEKgU47T6CD7ZqrdTategVWqWa36JPW/hCd8EES/vG5Zqun0XlT\r\nSsYe1GQpvdenF5wAKCXGDPnCXPc8fBWBRgnJmhHLCu44TVZnXlda5swBJmsC\r\nIvDKZ6tTsVJ9PLf74pT7njW2jVjblpnYDOimnWwsgwagt4f+zRBpqvKthlxK\r\nbVrf/YGXSL9V/ijqmFOdLvFIyxMLIC1aGdFH14Fi631FLmpQuktjSkEjfUqA\r\nH6/I03wTgV0FOxC5SH+lPtDNsUVlHbUiCfRi0tbs4UVNPx3SJMBpQWMMOX+4\r\nG+0ahSklAnOhwudpjAxBdTnTk59av58CmEMsXoEhi2QARmkbPD6ni5GUZaIj\r\n5goWzjvWERscpXJ4XZh8tVgcXuaST9L/7CY=\r\n=XW8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/density":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9ea4e8e9c.0_1656716135510_0.5856753848606884","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/radio","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ec186e4c88c196228795ae82e09afdd2095fa0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cd5bafabb.0.tgz","fileCount":41,"integrity":"sha512-OdUZQIcDBnznM2d+nJnth8PBdiDbeE6pZIqmulA8UM1/MCvtvXRGsLc3FxCCedTgfIaOkLyxBzftHp5jigdbfg==","signatures":[{"sig":"MEUCIG3XPoBGoSOvrzWEkEjRNSac3JCHEoCM93OAKld1jVxhAiEA33MWurOwxtZmTFcsSJJRIoXjPJ2HCun5n4sKXQ9cteg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcx4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPIw/+JMauwKF8Oc6A0CUajXWOxZF7AU1wMKu5W8pd4vCynlU/4Us5\r\nfchPjjr4iOwRMop+imSLvHfOJnbKVTIzlHJBqOckt/6GGw3+0nLRf5k7F5DY\r\n2+oD97rqrAIm93/ERRj39aB20KnUgnSqTuBNSPeS+1dfCWUWXmJbaFu5VKAf\r\npG4q1GJzo5bOekB9ypuCVwR45Ah5vrabjDyGPxedVoSvc6TeQycplkeXpxhH\r\nSy4U4dMVlAmmDqJTGfT7Je4HBXtXEc0YsQV1/x7koAjRLNJL6actD90GYe4W\r\nhM3VxDmWALw08wkdR7q/m29SHIRCOx5WquOYcfw31EKiGI0e+VvqV7YBKIDI\r\nC7D3ztLgrfBvlxDZ2yWZjWb0+iFD25fMRv9/VOz16BaJXWQN6JUFkCw/wm1e\r\nBuSbRNlpLEHsYqmDPRJtdFIbcAeGrufDBWPU1aSp1S4MiY42l9B4n92/91eR\r\n5+pRBzy3rfW6Nrl2xq/UO3EF/1/vAdw91RrVRJ1JrsFYtNCCrunAjHOfpsMC\r\nsFTVvFu/pPajWKr/0YeqWLD1OND9cmj9CFNMScQbpaMZpVmKTWEtvH8TOkhF\r\nncCxk1jsWuNSyWe9zuyoPSZlfjsQf8MC4RwSoimFPAjudIr2F3fl/1K9PmPo\r\n7NhOMOD+Lz/ONz6BEXK+/avV3A8o3pOdfr0=\r\n=3rEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/density":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cd5bafabb.0_1657130104596_0.8627735684661777","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/radio","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f7754e6bca3650e064ecdf87c11cac0fe0f561a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a02fe49d3.0.tgz","fileCount":41,"integrity":"sha512-gEsG/gwTX8/7CXLOwXMzqpxX13ELaxpPRM0XdX3nR3IZtU992cP9PTS2+J3avHul0ZisZXs+0al0kRVHlFjLPw==","signatures":[{"sig":"MEUCIAqlCMIKsQTEXqmqODOxMQ+DU/2uz4qiEBJj1+FOjH/JAiEAi7ZldHm6ZH8wGCuIL+70tW4VefuWm7mky6iETHjqcZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdm+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqRg/5AGXJee7KhlD25sfaYztC1Ym8GJMTgMvUziQ9RykeUzgKNL2z\r\n0J2JxT/Xb4nnNui9k4hDuOzAf/cCNRDQcmec6hcem+ehTvDHtguwWLwXtnIU\r\n8MdNR4GKx27GhFkNsxOL1slgkKMiqKmyELvjGKRpVpFky4+kWRZcnELAN1F1\r\newCgT55GKn0PUgnhyx2zQjfEZITL6jgbdAGzJb5hlfCQA8RO5OZ0wKq8BOvX\r\nGP1ytMy0cuFIS2wVBvVgvwcB0n/CieSzHI97BE4yRFl8CUg7P6VLLMSj3NfS\r\n0iw1itbB/O0d8L5TLcmyusYAcXFEiRm9H+3NH50MPqCTym29jv67ri3co5Iz\r\n6zSOICXyytfa1Erq9o54WCILDvdrYD++bO4Ri3Z/jRdQ7tP7OFxgRtop+S8y\r\nkmhZW9S87sejqKieFvPM+z24orQYUbQB2tTiF6gZdlZYwILhixAPj5/Jepq9\r\nWhEV8wsF4KsKr5Yn9GbtDzu/ZGtl5GYVETrVsZNhM4s53Ykq3/wT/ruk+Cwx\r\n+1FvasBsNEi1fFszY1zYhX6A3pMRr4NJDWbH8L9RIJlDc4Y4YUEAEAX5nKJr\r\no8AAdgH6271Fs8mn0v0ONC9UGn1D/sPUenQ1H26bnTzp2BHEQHI/wXlNi0+y\r\nQCsI/1KP0otRUJohDELwAXzR1gTbRLMGPgE=\r\n=+Gx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/density":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a02fe49d3.0_1657133501788_0.9514157517150577","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/radio","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"429ace68166679acf609d3df931a18d7bd78f3a2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.826a3d8be.0.tgz","fileCount":41,"integrity":"sha512-9etRjzhokb+SHDP0R/Sbfe2G21vt0yrkG7kFE7CX3aVJ8zD3hMNUXZnpmjK/wIyq80EhKUm3Pk5EgyLP4FJaGg==","signatures":[{"sig":"MEUCIQDZoeM6QVSeIcM8KQUXMX7l58B4ieBxG6NhVjnd2XmAOwIgUBccnSFpNWMeXBkCMtdDd4+4PUMYjt8U0KYSX7K3UtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA5g/9Gxil+TIeUBakjTKc8hs5RWd0d6PwqWQGmhnJ1IMEsBkSypv+\r\n7uDmgJ7k49LvFCiIohcj551g2VGja5B+YAeuHKDBvBsYe3B3Ob+Gc4D5Mmv3\r\nHgXbEYZmOuTbSkP0l2t7x1lVZKTUWkAbfTR5sbDGLDV9uesz6m3IX0zrZyE1\r\nfTm3coqSzjUkx1RrHFgYavVn3ungkm81ycdJAWHvIwluVvI3rOkRltmizAxk\r\nr5TaCZP6bjTKn690ryLVCDx5fagUwJxGaypgtAqTc3lHnui+E594eTgv1Qyz\r\n0ejpbvLBobiDVcgEPu/albIChcGAdo3gyN2H0607Nfsdmm49ourFUutGwMWP\r\nZxjFKXoD8fFiANE2Mc/EwSl0KjDHBbpq/MQN5pEASKDMIJNMcT2YoeIduRMS\r\ny37N+NklaCkoIyJL+95FYXGrRI04G0/k8rLpbpm4uWJs2fQGaKrIDZQM1pnK\r\n9LUL1cO8pxSxvHPcNAok7jxLAZtk65Uj4wAA3LZTsQ1oIYib6ULwrxN46RwA\r\nxbDifdgv3EOh1q0FNXJN4AOGTodeh1F5KJ/2g6kdm89VmnnIcqLguatkv9ft\r\nv6tWF1ltB+vazJhfy+S/fYhGECqUujzTdwOur5L1ij4TdtyEz/qrkzaRQxZv\r\nL+OwJtQYgp/hBCgwPxweka04c99m0ajcTW4=\r\n=QV/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/density":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"15.0.0-canary.826a3d8be.0","@material/touch-target":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.826a3d8be.0_1657135898532_0.014070290078047387","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/radio","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea4ff40174f08007fb11335ed2b04cfd4c61801b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ef276aa93.0.tgz","fileCount":41,"integrity":"sha512-ocYLO7XtxY+PxLe4eAhNogUg8XXrx9DeqSxK56AmAvO/vrKd77KPfh3vPhFd0mK6hJ+2xaZmtLrBleRPQLdUyQ==","signatures":[{"sig":"MEUCIGbl+H8r4411Ms+fw9j41+bCKJlEHuJI8leONw8SDIEXAiEA1kR3pFDOoDLvBfCrOfnaFUULAztieDXpKGIrGivf54o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryhBAAkKFCW0Fl9dZxsILxXgzSrkGLVfmWNcXNCzzEyp8g8ugFwTMH\r\n/4RtOUwCNtFr13ySvE/7TCjyQXLRB1vlwhSs0dn0ethv/nYoOyyEb1eYEgyn\r\n31ThfIOacsPz6SIrmLsq1WH0z4NBHh3UUPY2zCroIkr88mhmfYO4k5IZ8pZD\r\nuHz+I2FfgD/JfA0lNzdthNm3gp2CRHOcTCl0QcybxSVWUQv63XtZyT5Cr6XN\r\nM25zYsTogHRncgDpM5465D1rAue/1d/hTjJc1V4AzJX1p/LocpNrvO2u/61y\r\nhwRMTg+PWlK/xwHLyUGIf9FieCHTcTaGuO11+52zBQzO+oFl6Yd0utDnfhxm\r\noDaoAJHf3rDZzN8HmF+S9z//bEOnhI22a58W6t+/c1rWywm076a+GBygsNmi\r\n7NQiS9Oj4gq2ozsQ97uSdufoxehzt/lr0QVpvBuplvJWmsPYWP3rg1yFTRZt\r\npksWqImx4Qt4SKB8H23dOlA8dcw7Co5IFINUi1IPGBQfmsnG1KFl4M0zFOhW\r\nipEXV+9QxLteNDf++VeZMkASvqp7CXaEg9qkazvPaShWddB01LTiC1uw2nDs\r\nBE2n+2TmSD6gzj42SPKLVhuRRECi75kff8LajKbOyYB2qmJMMsAdhP8Q3f0b\r\nz4eHSRVyg0fZMyeebWjBt0MAjCtapQDJuuE=\r\n=qfqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/density":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"15.0.0-canary.ef276aa93.0","@material/touch-target":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ef276aa93.0_1657213396161_0.05725036901751124","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/radio","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c6c301ffb647c5a7949cf5abc0f83b9a8d1fb62","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.59cf61d6b.0.tgz","fileCount":41,"integrity":"sha512-DE/oPD4JL+dhbQg1JEA8VzRM58mCcMx2CGsDkxqm4nrofLeFHKWmbL2LKnPZZ1F5oJoSui/jBulHxro9RXrx0w==","signatures":[{"sig":"MEYCIQDoFytZ5Q7y92ZHKeTO0FfylRZhYlyJA98+wY4puU3djAIhAOv98R9bqgQvbe2jl0Uqyet02KJ2k1m8AYJa3y3eQTcQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/SQ//VCgGg1zD+ZxvqfLWUMYV2K77jURr+d8Kq2M5+HtsxNCZysLi\r\nQF4vuXMpPdJ3ZG3vRj49OkqwRqnXCS4oysmTAjy4TJd7JEdvlBio/V2UFvVc\r\n8xmnIRU7JJoYeFSXb8T6zsVB553hcLnmQaWMbIfwswWNiwpB+gzA2Eu4MR3V\r\nPtvLBXNQGnMkgs4rbVWR6dd1D06yQ6MJ8Q4I8hhtgqgviuXcfsQSlwbCs1n+\r\nVghLLwStgKIcDPwFnANeWG4J+NTWzjcFx7jU/aDJL36wz/EYf7brYC8/rNYi\r\nX4ATnoS26AEnj/e8ON9+BmhEHq5E30j3IqGPsZ85DW/z+eggbYB0yY/Ta6Kw\r\n3v+0aYCBI0+BZQ9V0VKK4uOARSqHxqYeHsainMaG/Fk2xcx1mWxc0EurhHWB\r\njuaWuHN1FF+oV/IluYwLaMeSFiPJoKCsrJSMgYCw0BmY4twk7qwdVxjYrFsQ\r\nuyCnL3jiWorhBCm6q8mEsXCs5TnUMiBTt9iKL4CyI4/AmyvB2TwGg3dK8uMv\r\nAN5UxWevIlv0pt9C1f8Mi0/vRCfJFCvpJzfPMoDfOeoZMcMefDKH1lkE0CQx\r\nOGE9XB4zPnxaYOvIVgO6HPzxnjZUUdBhiWjHwFQu714T+juSOmG9D8fL9xA7\r\n+C+RQqwsJEU462Mmns+7X5+3B4hfYMswAvc=\r\n=qPla\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/density":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.59cf61d6b.0_1657215123118_0.5710624393325174","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/radio","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d458f24dbe28addc8b735def64b63bb17577e9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8647092f7.0.tgz","fileCount":41,"integrity":"sha512-9DTSUwnIbb7OSM7LdK/Ugf/fuV6P+8/Hb/DCGb6hV0kwcTpb2E5ZPyl44k3OvBlCBsDbdA+pJBBaSfnNjW7n/g==","signatures":[{"sig":"MEQCIHFcOTMrOOCdXK6iMiVz8ADFvDSr4CFynkCkEGwjr9m2AiACPBCsorDD3fVCuPxSk8Nzgq+Bfei9s+ihiJbYlQj+vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0R3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoiA/+IGe+tFTdOV9X4cSpxjZu5SmQLEz5Zdh/q+rOyjWynhcsQ+iB\r\n9PBd/B/nW+mMLHWBhTg33vSc7BWlAZaEBmTUk6kk/AP+yk6oJ93C4QNMjKnE\r\np/KZMJ8/5Pru3x977MaCHgr+spd2iQtT1AE6P1QZ6hK4NsxCXeupEKnjFheI\r\n1g8VqPfLwDYNoomtJqnJSNvSTZKHdi8/QB66wpqpDqNXuOoCduTjec+M8AWP\r\n/sMB6teUWL1JoV5mq9CCN/fSOjTgNmZkelnLOF9KikryDuGoilVPUXiVqJd4\r\nn6p/+KNzbsAvLBkufDB4iPAKjVRLf1MtIhvrpDaT7XR9pRXCdc03H8+Jwqpz\r\nvlt5BKcHh5/76PuWgwCSm/JbmdPVVUSU8A9XwQcFKbz+D4CsqJJBhQ1CU+1X\r\nTjP3kYF2ZDrSBYh4j/SB2tfPslyrxnYYmWe3tFfe1fpDpKcQRASVTWniBhuK\r\n8L0WstjLMUZMhcc11eMO7GOcJR66HRjUc9RETr1sdeb+E6nbiFI4X00oZ1Hj\r\nSPLpGoL9wGUqie4/kYpcogXjNdLt79mEPaqeuQt8Tpaf07uTgHB6NX95WDqV\r\npuTP5vU8qOM0zmNvRYCKg1vPsVJemZ/inxCs1dW8BVMInPibonj2YVm0KRKH\r\n4LcdD8VrXjxf3eWlU8a+l05IGwXho1AQpQc=\r\n=vlTt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/density":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"15.0.0-canary.8647092f7.0","@material/touch-target":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8647092f7.0_1657226358824_0.5301191521091781","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/radio","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2e60cad89437b7173bcd7ac65bdcb557e47f14","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.02ecd4d85.0.tgz","fileCount":41,"integrity":"sha512-FbLNS97YPWzkmI1nGDBDEBRAhraL/a/aSlBNJVFgyXBEUd6OPcR4ar0Vwy2pVVU40AbOdYC9on8zfyvwtQZbCA==","signatures":[{"sig":"MEQCICzRr0HV0CsNuBb2YpP3Ge0g9eUls0vH3Jom3g6XpZy7AiB0w2FAJStikVcT8ViNLbZtLS1dChilErnY3fuUSt3CNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGcQ//d+cl3icQ7awX4Ly+xVWjC0Ni8BvllQC6DtcjD7wdw81ZDaxn\r\nLboVyAoPxM6qtoP6yawhHDqT224x18N7ig8rtu8ogi98xHJsxdXaU6vuqWxy\r\neMm/39Wy5QW8pAz1xdaEP6Q+juK48x5GxOwEbEQHiZ38cv9jfD10PUUSWlcO\r\nWVBrD10FmteNIG5u5idUUDDaOJdbCJQ8eHGhD1wVnB7KSbdk4U27XZoUMoaK\r\nxvjUR478xBJ/Jof//IXZeqL7dNR8Ed+nA+KC6jGFTcB37xAbAEgSl3HP4JMW\r\nZ9fWrIKJUQfDq4UrGz2/9yeiO4YxM3bT9XaIQcV4cgtyRgdVTSBMx08cWnUP\r\nyy2IzJoGSdm52Df8w6DKlFEf16Gz2oH99SI9baTUPQ8tVzJn8QbWYv/XN5W1\r\nuZxelQmGmpE6tOUJugsceYTP9mW0eMDl6PbFzfhR0hYOkn6/WK9li2lwTW0F\r\ndyAfVJUKPc7nMZJBB1eUJ/BugWKJLLfaN81U7rNcitdEdtMpBET7kOOWXNFh\r\nLX7sJ717zw6K54nGtd8hZpEXihk6k+Nv/5RTfBlbf1O1IuwL4LCj0sczYepj\r\nOojLBv0YXQCBGlZvKOhCfzOQ5TRIU3SaW+9BzMNRvdh1qPkFf6m9T5UyieTb\r\n85dG8iLf7AP6GkW9a1JL+osZZUAaWQvFYL0=\r\n=tE6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/density":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.02ecd4d85.0_1657557596413_0.8919367736689139","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/radio","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d7a6298c761e67d15502ff4b0530505c4c1fdb1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.63d3a146e.0.tgz","fileCount":41,"integrity":"sha512-Wp9CnhVahi4t8slidRN0yk3ods/QGUMUKoxaFZCoYPSfHabh5sQugzBB7eQkGMjdqy0gHOvfZUZIinQzEMtPRw==","signatures":[{"sig":"MEQCICsOjS6JUkzL8mvuHvClUkhYDGbaUN0x/OZG4CmF9SuGAiAuy7Pqm2Z5JmPqmalPPWdlmgquZL9PYuNKtRoOGtIbuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcQA/9GCV/OFABMrbGjJocSzolu2k28twg8LhBCZY8027AArSv/ERp\r\n2eCicmN/Vzh3eUpGnq/EoxImCf6yAff7tB8jpD9i7w/clnC102a6lTB2TecX\r\nQ290n9pW/e6b7e16oP4RbmMCw4Tc9OtCLhmnTvS2nEYeKhpzzk5Kz9dM74pi\r\naz+Ov289OI1ipCGnr6rUYYQebVHjdlxGsyolAHrmQPMqDlMg1AaB/CFTRvrh\r\nkeGAeRG2lJBvTo+qwMAxvFqrlFGvKF6NklBcfwqLXTMw8DqwgaahohFUk0XL\r\n+pK0yZkS1mKz8zpseqnnFcXgkMGKjzLmjWTYJPANkIaKqNIktYCZ09Pm8T6c\r\nkjyROX0sbsjM4umytFGDZ0oMql8P1zJmy2B3yL32381HA+K6HOWphZAaOS1H\r\nw865yT5VDP7lmG3qnbmTrRuupbdymfS0bpzZzvG5cAkOAFcIr9j3zYGkh4yn\r\ncN2ISez+zzZ1OBdw4er3ZTT3uRHnVcZS8qtM7+Holfxlgaynps2IqP+NTCxW\r\n+eaTrc6+5q9p8um6nwsxJKE4Lt3utKOvkWTcHMHRyf9JuniX0piJ9vAqexBX\r\noOyIYreNhp7p3RDIghAA1Eqzf/I6luH0T3xYro/ltg0rF1i4KvKkLCxhcGS8\r\nASSQr+L0mTNQxvPb33dLq7fErGViSZ5Oan4=\r\n=GX5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/density":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"15.0.0-canary.63d3a146e.0","@material/touch-target":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.63d3a146e.0_1657625861669_0.04021504491696093","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/radio","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d04c77bd855747e747850a4c7c51d9ac5523b8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.88db01990.0.tgz","fileCount":41,"integrity":"sha512-CX9NnJT0X3DADMySIIh2M+67liR90KKGFjrQ9nObvcn9hzVzZSDA/HqtfrYXX0E/iN8Ur5/es4FIc4lzoZYTRw==","signatures":[{"sig":"MEUCIF647p5WYtcQCNnbLo9NDV/7/rTVYI5HvQpf0zHedbD5AiEA+Zp67foHFJPeM5F52ZtZCH2PDIUp/jCRGYSe0FHtDZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV27ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu+Q//dthUnaZMxXWvrXbihqX8HiRNW1VGHUjDcm3SmkgqfyubVvB2\r\nLCyF4mQH2lY1sW8so8wMBivValjpx9bOAT5AajSwkYWiahpUPf/SMPwJDjX7\r\nGTnsmY0HgoMTEDDQdMIto9iZNi8kR/OjzNzVQs6muy9Yw24lCjAndWwT1BM3\r\nmbt97O/+HU/2ncH3PFaMX50cHNbWktuGyMCCXgv+5HTzJD3zd14TGJMVTv1s\r\nn6iCiVbG6/URTjBqDndAy+DfWboZ0ffCspY5qQcesi9SbccVSnHSSvammo6F\r\nyfI6CVI1hW4RRjcwWFpFziVqLGylQ8Eajd3DyVKz5crueoE3Rg/tlN1QRjCx\r\nLewRKM3Nu558rLpaMcdWgxGPFTiInOPNfM1M/PkoiJ5J3Z7ITRW2qNTsNdIC\r\nz5TZPaO6+qZV1UIslhu/RgMqgW8yAnxMZKnAaSi3ckDw8o6b6ITmwIqcvcTO\r\nuuHcJlHpmbHDJCm23G4KciITIBNwYfjXYYg3z3UIk8b4Q0b7jf+CT8g+nTo3\r\nmXayyTsJcLexKXevklH/Y8PZqGCp8XZWO+wV4KWG47v/cBuk6FwgPvOY8JgF\r\njj1hA9z1lfM9jDGZFUj8Z+Vs7uuOqhKt3ZFDD9B8dm7T3knw7480dWcLxae+\r\nDmZNzlPHN1NnCWtmTytMzEkycfrEbZ35ZgI=\r\n=NL4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/density":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/focus-ring":"15.0.0-canary.88db01990.0","@material/touch-target":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.88db01990.0_1657626043093_0.4158258759567379","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/radio","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d65b1831fd074b6e0b2d80117611428f46b1550f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6432d8fd7.0.tgz","fileCount":41,"integrity":"sha512-i62HrjoVXyrbg9klIE4pACUceF7vi5KHCo2teRp/wTt8Wg8wVxSeeXL7Kh7M0re7LfyeqFPo3OpDZD8GDdYrmA==","signatures":[{"sig":"MEUCIQCvFDECS9d4oWJt6P3Aefgw1WHguCop2A0xKUREzdrufQIgPcsZK3wGRr4jk8ry18zV4Hjs1HUk9Wa5z8cVx+FNTuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoEQ//XAm83ZfhIqgq7mxNIqUEPlw8x20ZNPGlWYokwNPmK97lzCnS\r\n9mqUNjUQXXqItYqxGDS4+yI8OQtP5AU45TU6ptIFjC7sce/6vptlg03Qv/xY\r\noDBJQRpuRjg3jG+5Zv7nopvndRKG3VdSB18IIkIZ3lZlVoSV38l/wSRWYvhK\r\nsXRWcR7pF+yHxs2Qey1XA8yorwC/Udc9FDvXPDIyJczznE9zMt4TFwvKFyC1\r\nJMSR/wjx35v/fp9f7d+SFwtOcnhCM9Brhcl/6TzlLZBCbrMP7RoyTwQGfhGo\r\nz/W8qwx0/SQOOHgch4DmCU/eLXhImHhoD+RaurzQfbNVj5h2eli0nIOeljA8\r\n+1YKB9LVCwK67/+Cua6r+hFnCuncaUwuAo6vmqVUynbd/7Ww0BYdlij6I2XO\r\nxCeGM9ODn0uSsu7x5aG1W+Ha3OBBQvuNNCmyYeHxPl63JDFrKjW0+UkWxqs0\r\nax63Vm1cnhWLW+VZQETcuh6AqoJ9yICtHcq+qRBVGPEut7PUMw4eGYVuyG20\r\n/r5OlngzKZSdpMvHPSouaKqNjP7xSB67njczXuIMJhlgiSIIiZgMgMe+bsyn\r\n7kxbVLdNYLbQdVp9I6RRG9qBZJ7Fa+t9j8pOSewp0CLcbPHYYcz1ZMV9oNfz\r\ndfn9zaQ0w34oe0SHncYrURoSoJldI32wSTE=\r\n=zpzd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/density":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6432d8fd7.0_1657783773413_0.6467504331847151","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/radio","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7c92de25d763e052d62c5f34e64ef508b3e709","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.085f9b25c.0.tgz","fileCount":41,"integrity":"sha512-UJwhyfJLxO3ty3zSvAySmiOm2sztcwq/ZOY6XBhFDhMQdxLuvGXA0UX1f+effQVAtNn1uoKJ5oSLzsnP2DFuqg==","signatures":[{"sig":"MEUCIQCxY+lW5dukXp/pzIRkvuNjG4xS//HBC++r6gufMAtCVQIgJDvD/5QevwEOwDN7jjbCioiMsNCmplWnf/iAcI64ccI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA3w/7B9Gp46WG9v/MbiC2/2Fk53hN7b/7GeVxHX29HOj9yUoi5UcA\r\njeB4SNZLMcOmCiwJMp1EQQqioBWM0arfVuthk5w+1Vva6ERFw/OhEp+hbTpg\r\nu+1FNGXZ5nziQsCJLZdcGhOl9ogfN8TOXnP+23GyVXufIz+6xmciS0MZ8MIc\r\nAc+11xIu5ZVmMIs6OW1pVPCAGng+D6Umrs3+ChyHrdSW+E0BZGHrA1ry6si4\r\nq0xPp40eHZII9Zie0mOpfzpk7k8BDOGX/tafwLEpSeeI0FbwaCbtsNXmR/xt\r\n0rtzvSAj9V5Gy8UFpfzu3EH7UG31Agf+8vzS7BY/rSovJ/uLClpHrq/BUNY1\r\nZTYZCzkWT/I4dFyppwtA4F0gC27qb+TGf3H43SIVq9VU56Z6yr7VdaTdLvkm\r\nL4fFy6jt5QRSupEkrZ2CrmuMeKdG4jKC8UyhMyFOLYiSEFs3JlBtPEEJe4iU\r\nSEVo9mXRcSaDdhEG6eoVEhRMN6D0VldK1Trm1z/vEmAseWXFC2H9Xi1xkvJ7\r\n+uTmgJp7CaBafpZFVBRHECk2LQA8j6Xghen86Dq+f/kVbIq0AQz7cb0Ox5bY\r\n+96LIlJClq2SrIGF5ubfLfsk2K6N0IgfQpLcZz6K0TR3Mb9UTpEQxQlOWtbO\r\n7RSzDu6M2r9QqGLSQO2D8jWnHXgTBRnZFsw=\r\n=Pphl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/density":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"15.0.0-canary.085f9b25c.0","@material/touch-target":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.085f9b25c.0_1657816535182_0.7519118441724035","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/radio","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"577095b4be50c38a6085761a23c1ba09f99a6f85","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.39f9424b3.0.tgz","fileCount":41,"integrity":"sha512-hDCi7cr01rPRBymOOgkayJ+TIQ1O5h1A23n28sHuv6LoaEs3ShfjRUdfd/4ol+bBa8mDlJaxWKdw0vkm3tGvyw==","signatures":[{"sig":"MEQCIAiDGAk8V/5/Ur+QdfJ/eZfzG8c2RLp4m4NqdSj9mIgqAiANbFRYLDJZ9F6fro2CsQh+MrQREpmjsjnZj6QsFa1M7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR3g//bWWQYhJ22iLUFzMkt8wVV5E7nD/dU5ccONOIQwzivCZcFgDR\r\nhPhfVZjJILYW21sdglBOJzZXnLrs/E9HJB8L58Dq2iCEdokWAs94Sbsuw6Dh\r\nayLGhodM5sH1io+Nk2Avr9wGOe4k5N5AWgC5fWFjnaP+MSy0uGWLJop/X2z2\r\np0iCPR4INYIn1dVPUbX8qEEO8foqu12XvMi0McWgaIIiZG+MEy5vTQzeGdX8\r\n5sD0SLCkFCuBfqLIx37GFhrAOgf8B4Td9M41uRwLWnWW2+WA1UXGkl7jJ7Ek\r\nrCvaBMLge21kxzoYzAoTZKt6psSLtapfcNuubVdE+zpK3yZ9Y9q/4aCtfECB\r\nA6k1cHEhOIwMz7+ygWNLa7LZJRJesTN+YlHVL7ugX0HhYSO4SEJNDK7E89qe\r\nTlys2iRv13Kp0lue8kwmpi5VxTFHpDhIBJu6QkCuRsbdieuT96IehfPyaSNs\r\nL/WfvNPWelY3fp15y22QQqxeX9hqc6FFxGBcik0iAotpDua6nfS0rLHgerPc\r\n9/g/NfHM5xRhzMW+CVBOlo34rxuQEitBGYPRPwlbntXtAHEXpr642E1qJrj5\r\nZ7h9MU7uOiuPVfWsCPZtgLPfTNF7sEn0S9Rblw4VS3++DbGy+lrTO+STxtWL\r\nVNR80DkEXK+K4WjExUiZNnsl+TDT5Pfzx6o=\r\n=4Qei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/density":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"15.0.0-canary.39f9424b3.0","@material/touch-target":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.39f9424b3.0_1657818353675_0.3694999387312561","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/radio","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0af050ae05ec932d3dfdff32df8c84fcffc5b14e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ae9fce587.0.tgz","fileCount":41,"integrity":"sha512-nk4DFSbySUhGICQk0TinxOm7epptjZzT913vcv3QtHxhdqmYY1viuG2kNd5bmMhLgHP5ynKvF4Xcr2KHcEWGPQ==","signatures":[{"sig":"MEUCIQDlb/NQZXdldnKT/NzF5n7GkRd65YZruumCwmCZdc+/AwIgco3crZvDpP1hgLPqI0cglpaXNt+zBR5l3dMUzVipzjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovRA//YelVD+y6CqmVgwxGlQa3td9L8ONmJc3Sd0XSES4hxD4DkuKj\r\nKb13mBYUp038PEvG7RupuPuo8drHG6x6dR+PT+qZ2eyqwXtie1tKh/XRnJCa\r\nJ3f4oO/CrCd+vSU+FBn1UG3qsl/XbAVk0ciPr7YkxOedbHiHVOPn7RFRfeBD\r\nK9gkd3dCb12HWJ6gLkDo9f6l+87zozO643sOiEvipO3IVIXiSWywg0+Z80Y9\r\naxDeZ6eyR0ys5qLzr1c4PXqxtV6o48KY6dFzYOA0HNvwB0NTrnJkgMFwCPni\r\nDNaXziNkHzQAapTglXtZfYCmXwIjA4UjXBNiW+rv9/U0uFfCNFSWDR2U5JD1\r\ny9gtj98BbaiQ8Dk/pI8V3QxJwNG6apMaN8KwL56eryTssaqbymFuY/8kB/7P\r\nd/6itwv6iCsVySBWeHhCwxZXUDG6U3IjjhtxS+Hf2xL5zh7HpCVxMa8+1YQ6\r\nMAXOaP3p8Qc6cpKpm2HSUYCJAdpf263a032T/mnrEIEqsmK+jz0IsCoyEeOM\r\nGnzykO3SxmWiD98zGVi8W0/bicL+gtZgr7dAt6uv2piRL1txJOPFJruziKOh\r\ne702iVNtSJILUeB7SGdloPuvIMl/yGaJUpyjkTiR49fz+4whLtZvucOpnjSr\r\npbpz11g4lsrwqhNXdvfryOzwfQVBJW006/8=\r\n=EeMS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/density":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"15.0.0-canary.ae9fce587.0","@material/touch-target":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ae9fce587.0_1657822124871_0.1722718970148278","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/radio","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd40e23d2aa8365783f5ed983a418d12e7fd2645","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1ebddc343.0.tgz","fileCount":41,"integrity":"sha512-7e9omHrzmDYKScwK72qZHsLqzHGSqvXg8x16/7BWGAsHQ3zv+dQwNiJRiRBLJ+MxfsKCzbF3PhmYh2g5ptAaIQ==","signatures":[{"sig":"MEUCIDwD2/8QCIj8v29Tn4dZtbocqPzQWdTIatJMCJF2eKT7AiEAjBPG8xu26Y+qqL2V3YpCpD7EUUjWBPMsZg4TcEzGWg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0So2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMeA//Vm/XduHXYq4Zq1CPS7AS7/H0uYYTwUoTSlX4hcgv97K5Oevt\r\nABG0LZq/T3ycTZyvuxp4l5tEzScLExe8zVjhDhO33FGNZU3zqjsbeYY0Olnw\r\nwOh8RtkqJiHP1Ro7UPK9DgxYDD3wJEWIKjM3L5fAXRBX3IuEkIfEBdRkiat2\r\nZTF77qq/oLR/Z8ZckUKMG+DqXq4YiUbrVrJ895QAbH2TrX15jibdW8rPibAe\r\ntN/bYDomP2afNSTLpZZuONalULsjwYZtIbWx6XjaFJRV2Oib1ENH4DPpRUYb\r\nGfXjaORd+r3X1F7uBxz8gZ9wBQqnHaH2RE6c1pXAnOKtin15DUnsn8oPNChR\r\ng885SCm+P/5ZdUs1PeI8J/KwPhU/Dyj3Du8YeZnjCYngXXOW71RUVMR7Jx/N\r\n8C52zhCWdn0hEvv+tCFfNPdd8Yo0jtmpYNMStpdzkPrf+nu78SX5cmHHSBA/\r\nSCbl7hEQajBkroB/l3jUAxGgglFO3uQG6WABaBkfaxITjA/Ue+JIg3jKDfYm\r\niUr9YY/WTEMFQdZeo+ZPrX1Eusc3+pd0ZShKMBfoECAE5Tcvol+qgbs7jn5g\r\nrmk9W488nCOVAavWjcTXv1EnK9rXQ7dWdVv2E6bkokQnoKaT4fF/TbN1eTL/\r\n9KP9fGcqlQyPKyZEk/Ntx8ccY73WnCUoY5s=\r\n=/ACd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/density":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"15.0.0-canary.1ebddc343.0","@material/touch-target":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1ebddc343.0_1657874997868_0.94406365074974","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/radio","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f5f1ebbc1895a789f0bc3ae1b4e5e824288e5b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c5018840c.0.tgz","fileCount":41,"integrity":"sha512-q7sPJmDPC+htTUTwivVBjdzkgDLdLvIWg5e9hQ0h67qsw6/2AwvLHRmTc7+Z9J45hQ6kvHgOjIVJNdA0Esszaw==","signatures":[{"sig":"MEUCIQD26eSJqXnAHkN1un30AjauAfFRCp26sYmd97dB0SfdAwIgCcLLoQabNw3MGgb7xg86SLle0rorGSs56qySYTEIWTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKxhAAn8WIfkTbQgW4knoHu5jkNPVkTCjh6GLm8N/tA+cP1QrhguS7\r\nm2PRkYMlx/spzBn1PFpmLk8GG1cNP7s+NChY+Fv0U4IXDSmpNaiMpqxhmRV2\r\ns9CIdYPf1GuymTrCaIXjlpY7/5IxDPdPlfhaJK5zMEWzXA0GM5A4Qy14qGbn\r\nVd0ct87w2lap5lwd7cl7L9XAXf/K4yk5Gj6XE3DtKMxD6Psem/cde47TaEUa\r\nlAgq+DTg9yHGu6cbBwpsKxM4eD8ADFIYAXiO9u4KGew5yHFSk17XdWBeAlNU\r\n/HxFZNwmrHt2S5MWIbcD9TyQH/tZoEviog6s9/bwD1lTQm8vNu6aWeWD732y\r\nNHkXFEwVIrV54pe4y7pjpllGl6cYARb9ahVjBflmX3dF0KHocN/ZpTSPwg2I\r\nMOFwJOqNS9BGjgbZ1WcFeJQlh9//4F4dVcAGWm4uyCL8DtVf8nPyr3bVovGl\r\nsbRZr8kV18Nb8EdVMvBVqloHWxZTsnAoLGArR6nDnr/SK+5ailPUyOq16CYB\r\n4bRdl715XTy1rIIfAm0YkEEcPfbM2TabbnEcIRgVvlPjO9TBdxQQthH342Ry\r\n+Ss9FTxEzbfe3SyNzp3AN6B1Ks0wiw5n6a8fBw9Oabi5Ofg4QK5BQ2HsPMka\r\nSm0jWf3/VtaawBiIY2oqr8DAAnYM7jZxHqg=\r\n=MJJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/density":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"15.0.0-canary.c5018840c.0","@material/touch-target":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c5018840c.0_1658137428411_0.17080464194455836","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/radio","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4365b22987c409178babbe5245fc310e82895a2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.551b40d18.0.tgz","fileCount":41,"integrity":"sha512-aH+aF/Ie7kG6AQyQ5MU6W1HixHhbMUgaU0vA9BeVFkUIAcAPCCShJYUeEGYcw+aVJmAg9Q5sumtfKnvGjSNhbg==","signatures":[{"sig":"MEUCIQD+wVBfj8Wk8I4UPgii/ll4/8dhDbkXx6Obu3Zx8YwNjgIgBfkhE1PkI+cv0qFovdqpdPjntZO5wBiaJs0orVyuOMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuBg/9Efji2Vp/cgkMAJ8dpIj2z4Udppm6LTxNF80ngwdnqz3hgSBT\r\nQDi42X7A/kneAXzxjYl/LyZkaoM21D+GYXHQQ5r0/ba1yb89F6xumRYwgVGN\r\nb1d+YNQbuUeEPHU6zWL5KtFeMAV5dFS2Im1XSBd+7BVfETaQ1kn4QvRLBD53\r\n9s9Q7TsopUza3vqEtzQL45j9TQbpfglLeGP6UKv55mX7A2xLDWbaalSLJ1ku\r\nTmtHh5yTOMxEJG+uzndOdXIIyX8w2WKbeTM5vRLyOyx7r0VmiPIM1eKBlFFj\r\n79jjnfUv/C0vtHjiaHwLt+h/llA/b9KTN2HHeB7a2UqzAmUtxeofMSPo3QT9\r\nhLGO3x7bhe9/Qak1AN1y7YVxHgTebNCbxTDBbbfj3kWNvkT3DIrQxflkGXPI\r\nHC4k6x6e53RXC9j/JoL+sxm8H9SFzy/tgwsF7mOWPE20C9j+5kw23u//7a9z\r\nA3fLW9KJqmdKHGxBgnueKmyZW22GZbdED8yVd1cf8/eXBfacbc/89dLjIa1O\r\nSfNwJYlrJY82F9c3RWoIiJx9Sv4cr31CbDhQ5CvBzznD4SHViBsdzOhgBudI\r\nVUpc6YKMrxADPPofM0M8weB/6pu//6eA0RMqytebv1L0eDVo3v1lc7EI6/1t\r\n1p9draztakilSy1p2W7vfPNN/MdTTujRHsw=\r\n=8/Hl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/density":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"15.0.0-canary.551b40d18.0","@material/touch-target":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.551b40d18.0_1658138503560_0.4484844966260735","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/radio","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef2c3877b4befa2ea11cb7a8cf847183035487d8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cf9f12371.0.tgz","fileCount":41,"integrity":"sha512-bND0yWvUf9Jzx2mCdL7G2EMm7jf6/IrZzJB/eLzZY/pGEP05n+38lbwshXPOWaVKhg0It59OFg++twbS0N2nOQ==","signatures":[{"sig":"MEUCIQD6Nqf0yn9DTThFfy8kkFwmbxGxuymX1UimnLfotpsZCgIgHkxl3yrvTUhyXm71o9xPYcrdw0wrzFf4KQlE29UhH/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql4w/8CYvGU3xQKMo1Tkdl8DyLoEFJlTLjbNXEbmYwV0jOYfphf7SO\r\nmMedxx/71+PMq9Ofl+LWwbhtukAVe+WxaILSndpuJE8U8DV+8SQxmCwrbzNQ\r\nrvlsjntNSAhBCJTm9rFg9/zKtpue0+VHBSGDwzNSunh+FDR0GkU+UjX7eWZn\r\nM8eMqjqbneGsO7TB5sX5E2/q2JmhqaixG502C/kCrdnWyNcgN1GeFil2NK+N\r\ns3LmlVU8d+cEOTqzkYprsfOLAaKBEbr8+qKdJUFjB50AUj2f6uNGBUaYTBcG\r\nsuP0t0yfCJNtVjHfj0oT2fGgPSPlHkW7gBNA1AcE5W0TNzsLxFK04jnmLfd/\r\n9gNXiN3W1MnXn0Hhk6LRLC1HotxIDk02mYi026qvVLrBhY77L5ipfenbhZ0S\r\n3xKx7Z5pxS69hBrN/2b3yuRQSI4BcjE8i4RWzNB5+Qok1QCc5g0PtNrBJJ6y\r\nc2MldoaxFsVquhICmANnzBvDd3dlk1hLANbshx8+rKwX7B2/JWcW0PLAWIDr\r\n+LPC+FVQf3jgDu457GWD1k5q6WvWAHofBun6cvrxTyS257T6AYVaoxnBWcgM\r\nH68M1q8Bgz9Hlz54eXfgPiuaXaEfcE50ObY+qHFDa2ttVCuOnZnLqQQ7+ees\r\nk2wlpigkmpCyDx5LBOZD4UNBSnoihvnJh9Q=\r\n=0cy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/density":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"15.0.0-canary.cf9f12371.0","@material/touch-target":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cf9f12371.0_1658138742512_0.8967996945385586","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/radio","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439b33bed9c1ee206a8ac92f33454b16ebfb7890","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2797ff8b6.0.tgz","fileCount":41,"integrity":"sha512-40+7aTVHpyR8OY1tgXSeZx5P/cxRFaztAmyOu8ikYsGjkqxErN1ggba6MYWxIY7g877x+86MiljjyFUpEnObOw==","signatures":[{"sig":"MEYCIQDTXj2b0fpJ0W/FaJoelTk9yS4B7m18DVpl8GMOhPkVtAIhALjcY4Dl2T7DqLkVP1iyRbl+OUAcZsuEm2fEqBd3FRzA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXPw/8DjD4T89J+qWFAh9b4D9hAAajdCkT+PiSt/vf+5tpX3TgTz3Q\r\nz+d4adPWMZqP+BfVbBXoxCHZrVgVDe/Bn5YFoYRa8xv9vEWgIOH8aF+0mdNF\r\nE2nprMM/pguPRyMjVvNqGQo4xpwB9d2gF70FjdlLCnAkM0XjBqz58L4fBD5X\r\nkDFklRvjPAnt6qtv1GfltQUvDSIRrPeKYXxOu9ooD2ZAXGSOdMFDO0Hu9Rc/\r\nGlCccQW5bP9/RNiuEe3FcfiZa6hJQmrhZXmAJQAh4E8iVibgrQ5MJVxo1ihP\r\n0lcFwbBiBDpXMxS5lWawpNR0dY3HAZ/Sw6QVTLRLmlqOqwzeYLLwZE2Qv+ve\r\niwVOeAq0o5nnRXRzmvcvysyLYn6Ala91itsHhel2Z+4SD636TJQ/7DV+ciaK\r\nNiDpBpUM00d4ToZ4rI3ZWg8OsfbEklxOW2A8cQHvRtxp97qOmW9P8aCFvldW\r\nUF5cGluG1CDFdJUUVc3r0W9c6gYDVxsc0GCCj3I1W6JJTWR76twxW3tEFE85\r\nZMgSE6E9rVbX1ep4qxbiOEbg5wqvSBldzwwLVvIaKVib2+zJiW8HTuFodNC5\r\nHcJaCb7y8FX9+kMJ/DjBm86aIFscTjIAudlQ6zir+WKMTGqViawyulmGM2fJ\r\nDZ+qE6VC8dmFcwEOPGS1XaQdtG+V80MiUAA=\r\n=800A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/density":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2797ff8b6.0_1658190287712_0.052336205660629354","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/radio","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e14d9b6aed3b3fd5f4d92bd0c0d551c1c6b140c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.110fafa17.0.tgz","fileCount":41,"integrity":"sha512-tnArYW46LIOTiZlQowtHeBYV9TeID2huP8X4yJ6LLe98IBCVLJ8meV0bZWNVAhE4zrhL8E7xTmdCBfjjzotc8w==","signatures":[{"sig":"MEQCIDwP8Pba3XL7cw72ppB+F5kBapBHwZ8AgwLh8XkGAgyzAiADbdrKIc2dn1kqH+CMKGTCn0xmkGZ9B/bE1pasO4wIjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHfRAAiHknnowj17YQ0nNFqu0OFXyM7by2TaO1befdDM3qqpiZv9Y3\r\nXXYS5RFs7u81aqR+ChP/D3mCoubn9ZA9Yr4YW9NMJrSYu0jbgr+U/7DEgHca\r\nkwr3W6buXIYmsBY5ghhL1WJZuKsF6ygjpnMOLL+OULdCjIyrCvM3w8Gz9wEz\r\nXpfXvFXVPljUM2hOFnluOXzSEPQm/7GWOc1KLFesjTr3nZbLhR1+pzgtz7rW\r\n0xHjpj7jY70x+U4i7NxjC0ZoW6mnJyO4r8VKYvimZ5WCKranmvwWsHsxTA3/\r\nl1t4tJ4qBvfHMa6/GgIdQU8Dm3O7fgSM0hvaEIxF+OFAXmLmcNA3VflnT642\r\nqW/rXSi8D98Evkdb4kIFxKFU164eqNEFOrw6H6U+3Dk6VyEBM9TN8nAIVfnq\r\nJF1simvdX357IoGpEyk7GHzFuRI0iAmEY1U7UCjVXWK80Mt+4magdgnAaE0v\r\nNEkC8Yv38n/sGaRmOaAPYpvzTaHEFo8FI5BFGbkp6IyeTfjgE7b7GXRBC6Pv\r\npw7vPnIgWvmGMQaPq/47s+J2d2mB7Qoi08JHIUaZ2qPqb94TTu5Vd41GX5z0\r\nw1ao+LcuUH8XZyCYuxBKcipm+mjUbPR3d0JhgKsL9TROuaxBVH/TYcfqjfU7\r\n9K6VOWoG5JZuqkeHFtqESUIijgtx+dgZA04=\r\n=/1gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/density":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"15.0.0-canary.110fafa17.0","@material/touch-target":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.110fafa17.0_1658303240378_0.5797902395227601","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/radio","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b8ac6a555c702fa31739fe52c656e7efba9a2c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.386ef1d2f.0.tgz","fileCount":41,"integrity":"sha512-KxAWRDWe0Xqcdnu+MBVmUrIQek3C9GsaLmy6LDvXmURvrE8akV3BhHXPncgH6NAVuu4w+QfbKYd8iiL60kdJoA==","signatures":[{"sig":"MEQCIAo8hvOP0IR156usoV0ka9HJNtgDwpBdvDDWCZF2kBjvAiB4PvyeG+WRcRxPZCS+wHpEJFos6FjG9oX1nhX2BEDQcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphpw//f0993YX3GpZHGVtRmGTy3FIQvDOVoTL1vwnp10F4Jb124QED\r\n2cf6qrumo9/D8aTv/ksz1YbFBZpMh0BaLR2tF0mw6w/Q0UlW9Or9gpydOsv2\r\np0JpP0mV3U2DO/Qd0PHpxKm0BW9XY3w4H4OEcGt44qnN3wS6KIwUPh76ZJ4q\r\n9yrPPNBtyUtCipGKaNJLzxmhtF06RzRd2hn/xteSDfUyCNOVK2gstfmOJAZK\r\nKoFvc4TPFJPN8m6C12hiEvSuMn9xz+rNtbg11kSH4YwW0VaSdZKzygo1QHmU\r\nmlHTlZQ64eDQ0/ERLp2MOArBOxcDJFiHR5MPQ6h6C05itxRw4L3JT4CULAfU\r\ncOBMRWrXw3nQl5KdE3gpyJIVYh0j+5nT65yKKCmlukV9IdEteP3D2LgcDeO8\r\n6klHY+hyKEYWUoAEgc10sbd2gjPZnGWN2jucbyQvkIW4Gl0/1JwuWNAj3MP1\r\n7UdkmCXUGkqhEGc6TrFA0UTUBDOXljWcOowgUMjTWkqKkgWof9PEv6BN3b30\r\n7TNHev1S4vrzdd7poxQ6ma+zi8Anx6We9royeJ6Ag5Jpkl3oKPIAb4+3pwZe\r\nJL7kCY1StU4YrnKikbARXtuzrZQ9edzRf5BRs5ZQuIytobwIIf7LsFuiHXvf\r\nVWmqJFNIE1isqnznfYVF4G+PzJFQdIp1MRA=\r\n=s/7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/density":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.386ef1d2f.0_1658341229479_0.45243554612086867","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/radio","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e4e288de48f29eb403aff116d4d8fcdcfcbe5d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c3924efef.0.tgz","fileCount":41,"integrity":"sha512-6t4P2jv0VRhUv54eP850/7PsYVApFp6EecSW+2AYQnBMLGLBhKhSGgNQC1RNqRHKFi5wyLknutccU93tdp7vYg==","signatures":[{"sig":"MEUCICsuY4saAZBPHaaJXCTIEhakYxgyrHu/TY+mn/2/XLVDAiEAxmO91OFaEFuGSFhL75OK9SHQrZJ1u1EZPsfCo3sOxxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Em9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob0w/7BOcS4uhnftKV4I8SAS1aOWksNfMk4Hvr4+EGP4O1r1S9wMd4\r\net3mlA8SSD2x7E2OOESur3MecRHsDfq9wmcGzTVczPPL6wPnpymxjCQFMxXL\r\ne6bG/bW+7K1EjG1LIN8LHuWbj125boxg16sImH/Oe/yzkeAIZ2ueS7IDjOtl\r\ndy6tHcTAcuUe6kxBtc4LctnOCk97k9eUuOO87ae8YeSqwssjm72+innwtkiv\r\nI9S39rxdpSJeSB1As04YyXMF7IZO5cQ/OQ6is0mSBXf083GKkaeE0Egi++/j\r\nedesjKadef6iPMJtGcmR2zbhAqb3ag6jHVarET/n7LYM+qUcX2l+DiZez1GM\r\njDObzxBODhZRyz3mGavObf6yrcU4H459FyewiXXD6vfwIeezfiz98yUzEmhC\r\noiz1+uMPwqKRHgidS6icdsLWH/6oG9ZpCvt8taV18ukMO4Zf8Kq+JC6Ma4EP\r\nIDh7VIt6oRbo8w3Acdkywp3a3ZVbWFmOYHUPrxlIKpWdfbFwW/K5+ZnZiwHE\r\nmeBSqDs0s84ZuLzbKcu1hwbbp2szMIKf0WZqLgPox50XqG20BqP9wcGoTLcK\r\nHhnJ5X+wJ5EweVDf6mmJvyzbc4Z5vWOX5xqANR0HnXzF5xW34oowgRVJIZAA\r\nDUhAaEYZFiYYwjjuWsD7wEb4CtQIhk57ybU=\r\n=jw00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/density":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"15.0.0-canary.c3924efef.0","@material/touch-target":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c3924efef.0_1658341821355_0.4712554727190832","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/radio","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1f1f9bd2a61f4fa8051409f3c2c0277c15a046","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cf5c5907c.0.tgz","fileCount":41,"integrity":"sha512-pqRcCgP0LNc5tTDWlDH2IAhOvlAIdk22lL2ven8lKg24xSzdvyNycsov/InpK0FC3D20R0yMAa8szua+CI3jTw==","signatures":[{"sig":"MEUCIC82io40Uo5Oc5O8l6I7FJ38ij0Z8yFAdynto1U3aMuuAiEAgyhO/2tiauwlBrYL6EyZpXlq9e47IbB+HigIAE/I/JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEqw/5AGs0t/kuioWTjcNLMKhqz5qORq3Ew7vO4uEuZr82yV1zHd/t\r\nHkoHohrgg7nFpnmKW3cxDDswWVQmmR4YsZqMYcHVzWKz0mp19AvJCKVhzMp4\r\nJvZ6bRtA5P2XVw3qzU9Gjkt2Reux+wg5oSaijZ50NUIkP3phPXsrRt5C9ZrO\r\nkW2xFvU0eP+LeXYvW2H2jt71ElSG80sxxZyRD/hvFOrvX6l+oVvnGXwbn5JM\r\nI+SFTTvOhrUx4GJL3L/zAOR2Lo2WHFqmSmoac0SpjnptT+cbzwKROMhLWYWw\r\nDz+ZcVZVI6YVCJq/bS1mAlhmjTo7CTf0DfGybTqjGyLwAfDLR9D1mqwuDWXB\r\nWMhjhE4y/qVIMC+4zfcZKLO83b5JVcM1Ck8+cYtPhxH5dug4QKUkKurxdojG\r\nAp2BiAnHVUv7rmginFEhdIAmFaW1XyuMtb7yH8zIOOEHNdtf8MXdQq+nEyFL\r\nFiQkVEJef8cuTNtLgkYVX8HQEfWw+awOaZikFZTWAaSW75mRa6h25DROpBvz\r\nds4U/COmcWf32V50/XOvaYOWRls9+F3QorHWI8AzXlzh97yoL0B/T1ARmSqn\r\nK5CKwHY0+noEzypDSaE5kLgsP1FKLoZq3aQQ/l9aaseYdDGssHIeElMLLg9+\r\nSkRMQdB1pVx6STmGzGECqwzgqpzcE1tmw4s=\r\n=oWkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/density":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cf5c5907c.0_1658352145475_0.043337157294478956","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/radio","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ee0390cf2ded2a56d9b2f390232838d7261f16","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0617e2319.0.tgz","fileCount":41,"integrity":"sha512-fJlYIXb5niRnRaJFELgLniH5bJU2lwNAiG9/exonwPh8mzY7m0E/f9uKEBIflFGak/2d57qwg1SZG9AMHJ16YQ==","signatures":[{"sig":"MEYCIQDzamWNLqwT7Raco+57jETF3jhlOfd37/CmoMTRP1ju9QIhAPTIiWlQ+onjjfBtgRwv/EALnx2RLRpGMUtG3ckMbwmE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc/Q//QSFZl4qR9FLPMiYsgGR/0iC6p8r37AiaXAnbbLQOoXTGROs3\r\nlRX2hsL7LNvYcJVsF1xGk5Wq0OkTByEmjq8gTYQ5iZt0/HHdTt4k3+bJNI1H\r\nopt3VU2z32h+7HLeoBl8H8Eixmr5KZrTbIqZBbubcTP3dwCr4RRX/M8/syB6\r\nCQYmp4ozbmdNA+RKVidWIktfh75YjkyDljSt83/TS5m8td8KIVmunHnKuqBy\r\ndwc1HdHiDOZ0au6IxQ64hiAe/4MnvcaCWTCCOexTZkd8MyImBA0OrwNpyE7H\r\n/YWap/InPZRrAKMMp43rAqZUojPin8lvSaAWNEkYDPRarPBh3FXmHvTiCm8J\r\naOQ3USl7wvdTd/GOePEB8B0JWLXNDtE609qtpiC+QV8fyKfu8SFloaXNzGNH\r\nmzgzwp0pRSAIvZwrwdOx6kX751KUkJwhpBX2gmSTSMufUfnscZzhZy9WlQXo\r\nwGeudUypqyCekSEEof2P0/vF6rBmGwHMQBTnR+TW4TvuV7VL7H6crQr2IyvA\r\nZ6os6I7W5V/a3ngraPSeO8QaJbSyY0hHgs8q6wHC5uCorLbqE8Zu+wXp3Wa5\r\n68P6YGybPdwB8aHdmLC+nm3ANAmprvnBLFOJgVQYY/8mN+M/Ga3DYtHoPMdI\r\n9v8Pf8g8bbeqH4+TVmRLjKHTID65AyiG8mg=\r\n=cjtW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/density":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"15.0.0-canary.0617e2319.0","@material/touch-target":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0617e2319.0_1658353244821_0.6087646031984195","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/radio","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"362899c14ae648244ae8ffabf64b7377077d3967","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a743b7967.0.tgz","fileCount":41,"integrity":"sha512-pEmfzjWq3MxUZyZrlz8Iq4n844dCn5KMcWsvTEeq+SXsNr4+4VVvwmywic235wN5yxB3IsiTnmYyccSfPBWWSg==","signatures":[{"sig":"MEQCIDZIJIT81snchI+omYVYJv9lfjlyBUM7yQ75itpUBTgvAiAbKotLzE9D4byvgln1wmLJv0kI0CrlNY8KccV5cxNkJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAg/+PMjq7EFD4Q+kd8ikJVqvQAsYsL7RMoFl0t/Va95w7Rxt2H7V\r\nlxg7rs9D5wnAB7hIckRE3PtkdAt9Nw31OaChXcoyRfI+6RN9LfYEDm6l/txT\r\nCj+GW5SlZUfONTE0upQbMdzWZdAY50PHbT7WIk+cYfwxYxTeXC4m2rHdBB24\r\nJf2US5g8qpE8kDXdnrfJr+7hP0lg7vJCyij6fcz9yoorJamtLM+GqIwa95Fr\r\n3arnhsUfTB5GtV/lD6EzvWfeG5qbSVnLSUJ74hUyC2CPgOKHwITy6Q7T+ee/\r\nhQ/brkqewUOnkQkKeuHoVCOnNjCj431MWvneBRhzIIZET70CSpPN7m1XSIzB\r\n6h9Gkq3urq1Hf33LDvKw5OitulR20vzdBVPfwrxTsAYQdFkEuM3yI1Ozujvo\r\nv9tECvkMk6J7ibv1ScIx+7AEvrQRnx18SJuv6Pa7osXC5WOoAI87lrD3+XE6\r\n1PfQBuTFHwceDbxa46moUczrH4ADC6jfLpBUK0658RO7UkrRjqPIQgBEU29o\r\nB4av50nWlJsNGUmC8PaLnqgx+so5M/SEYXPU8L1plTkcfQqWQlpA07foUy7t\r\nHvMniwmDzSu8LJR2uubyiSVhHtvMxBWr7oV+eUK+mGz9gTCImGoHeKwilBdS\r\nEUtNf3UMaygXh2KEYOg7YcwpS1yHjrT9aVo=\r\n=ifV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/density":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"15.0.0-canary.a743b7967.0","@material/touch-target":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a743b7967.0_1658354263234_0.3603483325413397","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/radio","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af8e2a0defbaaaf575178d7bd2de9f501120bde","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.69fd619d0.0.tgz","fileCount":41,"integrity":"sha512-KgIQqRpdxq+lkMAeQ7oLdAPNdfs2FkDhyJeGAY+QXVxQMrl5SnYW+vkZYNHYxz2yAtFLIoEamnyHi+lbxLVldA==","signatures":[{"sig":"MEUCIQDEExMaNhxPHTua0VKEVTRA2CXrfJC0vbD34NdTwn69IQIgLZaZYMfuerNTmvqmB3OtyhOV4N7/vjeXQKQ++SCyoAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQChAAgd0v9IXWX1EWQFUpdtfkV6OEhMuvNXxsx+q1Ol6i5kY+QwGr\r\nZT6d0R8yOIVL33BzP959BfpPEWDwyw0VHUSlUeyfz7GhH/bBkRNLpXfJOPXx\r\nu6sQk+gLaikZN1s9N47ouHHKPF06DCfctApVsVSY83C0+f2w6SeZb9zTd1+8\r\nXqjogpf75+GjJMXvBgYgVtIFXYUInf4PznkieRFix/sGefiMcxMTtZwNEbBQ\r\nnd+KNu74Ld3QD6rgmL0swbfRH8IQmPHgpmkGdSJLAyYF2c+Zv3I1bI+oo24t\r\n8SvuhX/3DytK7HuCvENYS7oDfoR3+PGj58Fpqk2hmU4FKPhHLQ+B7uT2qPu5\r\nofc7kfsxC4p/noo5wQDSV+qkKO3QiQvaMHT1TALo/Fh9HVeJaNV/lBGTSyo/\r\n3/zfxLQw12BSF2weTGszL0ASL5IXfdSTuKdOIryKoUdnmYufBYubtqagxidB\r\nzj+tAdNEhvkghPsXGx+jt184GoWIiMrqNkQUyYNsx40Qy99rb2vdpVnsicoO\r\n6OHhxgUp2JCjEgDTu49TSLCvoGGDUoDZ6Zt58Gb3cnHSw13NzJ3VYfslUsys\r\nr1nS1QaLI8kg69acdh/Fzh1PQFlhCiPuqfxlWy04WHDGZc4tG3lWezX50yKG\r\nePtgZfQAJLSwU2EewhhB7jW9zwdGd/qYbvg=\r\n=0E9b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/density":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"15.0.0-canary.69fd619d0.0","@material/touch-target":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.69fd619d0.0_1658354990274_0.20306868703822611","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/radio","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cd206c6279c2898f6c32f0c9f04ad8d9bc7fd35","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":41,"integrity":"sha512-sCeoNf7szjR2MKhbga8Re5NZ24655ckqnUqpD3ibxwZeiTcuy0GNvF+VeVekb5bM5U0FX7wppO48SNTEyEAekA==","signatures":[{"sig":"MEYCIQDus7X/Wvi4liWFvaBvweKyouG6e9GaHf7uKra3tIlJiQIhAN6mRkRFRj3Ro3Q2llNbxYT2+iqpCWGmTgwWNAHuQ9VA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLkQ/+PfHQGXID6u0LuEvJu/dxa/tbqaZa/DI8sWc5yvmo6fcbpO/k\r\nwhOrnOuo8HuEhhEhCcl9rrOcGpy1qRQwCheUy0e99txk4bRe7O2onTnGE5jo\r\nTLcdVQl7cxUHEKNL0R/D4OSBBnN9bpwfRCj5dpcdtOrHcXm9wzpdAU02/FZZ\r\nj8w/tE08ZBfb/Af8BRiVsPI7un+/haIBVg0MdCIkMIUaZ3KEELOfSpKDgrsG\r\nmIp3g/tdRRyWqBqBgD7azqXTiYBDoOqNdVjvmzGMx/wRNFSs+RU8nnS3efQ2\r\n2KihlaaZ8MowTTFzRvqFGMjz3Z0xm7azVpUpon30rHX4JYQ3eDJ3f4Mb8Cnx\r\nRmBnzuZHF7A5uTzSNTD+lr77P+hKWFJnA32W0CcGrmWfB9Q9tI3ller7hGkp\r\nM6QNgC6TaHRI+v4Qm20fjgwwkP91QDxnXjfwDyxPbzafYCuJhz7nND38hNzM\r\n5rMcivjqgvje7z/Cy2uUlH1BuQBnFWNA8n67kz+wSSzY9HCiBktGGbn1A7ZS\r\nxy9L9uLIRfNFOn7M4uKtkzVpVPO7fhfVIKN4cVVxPsHvxjwOiarbQR7yZtgB\r\nZ884ODK/VLqlVF/ZIz0DFJkpvdmuKs0Ty9bd1WLB8SMiKj30OSN479xK/WR4\r\nz61D6NMRgRmbilo+mqPLpq4FhAC8B6rEaOs=\r\n=LKN8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/density":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2a6ddc1cf.0_1659110712618_0.8383195389508482","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/radio","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"286ead82e349f4775b9540a75c9b89391e62f822","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.86efd56f6.0.tgz","fileCount":41,"integrity":"sha512-wlLpadw7x3wg+pB3ntqwGN6sntQ/Djy4U8GkYuBk70PP0BB/63tBeiY/noziUeuO//BJOyIGIY81nCPncQPEDw==","signatures":[{"sig":"MEQCIDC7Qjip6LgfWP9Ftyh8F0G4blwsiPFCnjOYvjj4zpP+AiB/x4xCfbImwDZ01QtB/co0PWDZABIZnvU16ecPPxlmUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Ti3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwJQ//ZESyLrZbo0L85TohmnrXcCmBzrvEHp+BLLSg53q5zYNYhvp+\r\nuXeGF8rsIjqI50tGDBupfZgYR53FYEsVgSwZxj+F4TUMwUmGsBuurWYLlUK2\r\nVf4Ukn2iBoJzfeWROJazrmLujWWS6Kh8UQkYqnmzkn73eNLeU70EQWqYTW6v\r\nyyRvlKsLzlza0GFsszMB2wWdIXfGhDRy4PEYbsEvN5Ly77p33i5pdBDrgepw\r\nt45HF5QJ6L2NcYUdzCmG3EMuBABRZHpLQWt0Cj/gxbq+hYnK4ULjO1dDZRLf\r\nBmZn99eeSF+OMRptjuGUkUGXlSP02AH0mlQEiLKka3RVSkJQK1jBSZCbWNKK\r\neqjbDjOuAkFtO6ghtmwH1OYaErj3BXyGdZu9mgwIszRALFL+zN+yTFd3yE7o\r\njQsor7IuNv5qtRGYXHSoprDctsMkVzF6B0oexGkk/vLprcz4jJ8yWwofX7Ub\r\n0IM4BU0BPCWJKEScqMc7g0WRybZBQM6x3Ded0it+YGGbD9wt+020dlmrGcWS\r\nsxRqYBJPakxXEX4h6qHLl7mSCSstsGBhe1E2IY+VmKoMKT11+XSzmLJpuvFU\r\nftLvNUYpk71O2eRtcyYyegM0NYOdlCpiE1o2T/EbvqqOxV87savpzr3BOpJA\r\n1DGNMQ7Wyy3sFXxivqulQzGDS1n7ouZtJzM=\r\n=PeWB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/density":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"15.0.0-canary.86efd56f6.0","@material/touch-target":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.86efd56f6.0_1659451574700_0.8643961240069897","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/radio","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5740a38f19eea2a73f5da046dee7e4571bc3256","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ccfc24d19.0.tgz","fileCount":41,"integrity":"sha512-oKQaW2ZpaqCn+gjikIhr87uI5AiJfxzaNU7IXkevT/ocXbiNvV6BbdkzDzbbC97bkZrxy7p8+Zn7tsTsJKwzSg==","signatures":[{"sig":"MEUCIQC3keCgGbm5kD9CQWd63jllxhGrkAxZ/Sk0Xs+hmbjGDQIgQaIAVlZaDcij54ZXZck6MMUrLcZXpENSI0nXvT5/tDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rrwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcYRAAiN9GbyZr6qrCdcILncbkBCd51H+ipWTig0ibJOXVkAUx1+bM\r\nwMwmEr8xqu5UpI2goc3FZ6uFhEmrAK8l7MM2TJuxmbdxuwI+8+OkBdeFfqa/\r\nv65pf4qwC00mU6oaJu4RTFJnrtVF0yuCqSlb6qE+dOcDvXxvsRw4BE0WhMQv\r\nhhWn9/xn47J9sUwGDGEChbjCDtI2AJ2mXwmLdRyEKbBZbIPaQFKOiblmd08l\r\nwokhJCJxBQc8MTBR4TJr5Vn+yKlbLIKUmRwXZosKuSMQYnQDuoQNBLX11+1X\r\neO3H5lIPWVaEPMGSa4/s77G1xWkj7V4IyKxI/5hMKufGrkEyYEm5VFpsmCn5\r\nx/lgzgq8u75EWGPbYxeJE3fcBndzEI63LVG2YLY2KfRM2vDORKeliBJqQSuk\r\nqBgc7T1uf22rRXijmJDYUaJmndDWqjn8OK+OwH9pwkiJrfvIjaPiBAxP0d8A\r\nAFv0smWxFXL+yi/tl1fVD91/kq3fnF8MwcacSP2TA9iWkdpwxKJes6VeQEDq\r\nGW/j8EY8lYiJ95AYV9O6ZHLOOApuyDJRdO/90Tis+iyhEFn3oVRjxc7dbgIJ\r\nhcHz+xLgsq5YDHvW8hQEYlKPP4rPGCPyN/6/HR1Uj8ci0sK/yssLXSazpev2\r\nlSYnGRM1WAKbmeEkbwGnZ3GRt1yLDrTsxd4=\r\n=UW++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/density":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ccfc24d19.0_1659550448160_0.06418082899395827","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/radio","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc23135ac789da8bccdb6916d737a9ffb698f5fe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e4570146f.0.tgz","fileCount":41,"integrity":"sha512-FWVBrU1WKTghOq7FKsokow5mJe4t++51DidPHAcLeCvHk3K4abZLA2yAnCBKKYhWsh7QV8Ok3PUHPl19B3WGIQ==","signatures":[{"sig":"MEUCIFjEf27cT1o3VJ0zhGhF4nMqi+69AcngMBi74V/VODh9AiEAgj5LidQSBVPwbTBTHsyQ6kkKQGRne4WwjQsHg582LyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo38w/+LpQm3YiJTATIifAhBtGlEEHdrwNeaVzX2EFgvyhJCSpNOIsa\r\n+51t+l/2VXVKo8dsx7SAubpFDd+qvX5mGar16GPnZEnlQRdsfRvz9Rc9tkFZ\r\nH1r3gS1DBhRQZeAoxC68M2kH/9gtLqqfWztP4Mx/9iPYudaqPhmgw0NjOQrU\r\nI5bCeRI/BpnHO+sPynWwaRMIR+FNFwpK4+FgfpS31UAm+9PGhYiKHxbHr9hA\r\n6ab8TcapKph6nk6HCoyiTQTso+XRJSVgpNBDdvvg+YHdTTbgOTb/F/EA6lZE\r\n6Ngfs0dKMwY9ELyyv2Wl2kplHXyqwsiQlBTWJDRe1B6qj0z1cZBveySdoUHy\r\nWeKufJgTfyOfOx/85TZd6/1Hsy0XHvfD0oRBsadUCWyfapJqeb2RapfDxb+4\r\nbDTXCB+Yx5V+HulkQ/YdUX9sIPitohXHtIAXkHStYnoX4XsrQzhEcAMCT04R\r\n/6Re4dg5hw7IBkH246H/YEZk8tBGzThMncrfEJ9g/nxRDAtfOy9ZhYkxuZhR\r\nGg0rpzhXx7vNEUMd9rshgR0vmt0R4AKCIWAS7whvUFcR8e+8Xygar01aXCJo\r\nXG5KYMuAREnJtkzQjsnpBitoUKJzo/C+5Vr1Uz/MmX8NbjP0hK2sgjLBnrND\r\ns9ky0MtLS30YxnZzDfOz5kwDCBjQsEQ1pNc=\r\n=1J7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/density":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"15.0.0-canary.e4570146f.0","@material/touch-target":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e4570146f.0_1659552079356_0.24281914504637325","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/radio","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e1e2f732191b6b4ae2c19e3b623ffbf9fe29d70","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6683a36cb.0.tgz","fileCount":41,"integrity":"sha512-+7roapHJfOMZux6J3mYAqY5CPNSKwONiPMLK4inWMlP3jFyp7SplAeXCvvcwbytzguuG54NkGCjzaFs1p+0PqA==","signatures":[{"sig":"MEUCIQDn53K6iOSYQmI1/Bbjwyrz0imo8o21mbEfTq7mctPurQIgD/FN/nSFxo2lrizAhYn09T7XENsdLfuH+Wp1Pvh/b5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/TBAAnhP+jpJJvXM5HE1WoGYB2cXT0ZqI+9loi0itYTtKfuG5ZINR\r\n4MGQSL8QfZcu439cwEmIgbq7lJ1y1+dRSr0yBGh+wR8mHtwoJ8vj/miTnYig\r\nhPsazW5XrwZXiB0bBgO3J3DZ4nGCW1KmaXX8F7q8lT7DWFuCHEms2TyM+NW2\r\nxXEPDKs3iMkJ9feecZyFirQwVRS/QnFYSEUHeb+V33ojxdpv9FcpL6McYQfy\r\nUctXjve9BeTln+OIhosNnU+u+aPdaZF/daIK4IBtAZZcC8p6GkjGgW5Aczst\r\n6z3e90B9U+fsJi7ubPsrm1uGYDKZ5L1Ylu6v7RZrZPVL594Hfgo6Ptihn30B\r\nw1ft0mZePvvYjPcWE1F+bhgtCgdV+ZKbNNYIgk85NFPlpBQfsWRcyBe7gPn6\r\nelGhvkUrIUhKCMisrU6zd3ZY2uGNrNauwNStQDh/3HO97wTOPn7vLpApI1no\r\nYBIOx6uif23jRspPs4/DX3nCXprN4ZCTyvLGE6ySqHd5A8oFPV0JbePhdZao\r\n2OJdZd0saLrLYUxawYdJocgUSYDzHzge5kvGYmcnvH9LwS5HOnqB0ZWZoc+R\r\nudU9j0izu39O+bJAwtHiEH2wLjTpWrbCqjoFu6Vkdubx4Ijk3WFVyQGrLTiF\r\n3z3sO/5nSSrccLAom6NDqavw/QDmWNkKxNU=\r\n=KRyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/density":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"15.0.0-canary.6683a36cb.0","@material/touch-target":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6683a36cb.0_1659554485534_0.49216843618875106","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/radio","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0acfad029e3935ab0694ed4e7bd2beeb55beed5d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.10196647d.0.tgz","fileCount":41,"integrity":"sha512-7yCscr4jUVkk1LjTLPcHArx1jgI+i78M3v0YZsOQfujkBk/A0LVoCZ+tbuDoWggyjBZTlsPnUNwddCGeqp6jdg==","signatures":[{"sig":"MEYCIQCCrUVzxUaxx+1QX8yGWUuq1+hOy/0D66OfE9SdJDcadAIhAJDUua0gb2xEE41OgOG5ZrWJnWbrGxQ6RXhqfVHEfpZ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCRg//bWcMbSAr0s0mXqhbqHriCxcnUD/hANKkhuZVp0RO2qvL7s4O\r\nJQMXMIC3Vbpb1pyeyJCtW/z4ks3QAdJV0EFCOCPfs8Z9Ywdr84hd0UiDkUZY\r\n45HPJ9UPgxWlFgPZQ35NKm+pStChMr2Qd5hNEyePuowBqQOmxYya+AxITtja\r\nYD/hn3TdSqK4KEGwu0dpDjY8lz6+mYffgTdLmDkHn3aCJhBnXr0DmVx0xVWh\r\nEpW7TP6LBD4QBW3Vk7F/tmbC0TeFauVKYjSRzZexhXn/iG4KQ/0mdOWHJtjf\r\n41j97WRH4W4eDpqyhI4tCGX3z7HZrjmrL6ruzJo7DhPbBkP5N1Gk9bDWPMVi\r\n8iqgdj07GAZAGNPXJs6KpDQI3loR2RG0F0oH0XvdjjKJUzslpFTOrXQ8X7dx\r\n3QUIgusKHDgFbwqmhRIZAshdRQByU2Uqn/WOsl7hqQRoemxiZCB69zRc1lgQ\r\nx5w0XPN1+1tgBW9474ovzxN/hIsQdCgoUOnucndAmqdD0cUXjmVXXL48t4ut\r\nHUBT4tyylL1SmXiCmCGnZaaXn+zcDMiLqaEuOhDVUWx2DHV+t4H+VLmi6nyM\r\n3QLZM0WYTCben5NrWQyfmuyKgmmSl3Yl56PR31DIhi/u06QBnT0mo6+2Xt1x\r\nrl15jI+4cOHfTVkjFwLu9ckbtV9hKtKWBLk=\r\n=CGX0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/density":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/focus-ring":"15.0.0-canary.10196647d.0","@material/touch-target":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.10196647d.0_1659563658222_0.09940825794456831","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/radio","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5f0dc272c0b2d4be0b3c7976fc58d9ff2c781a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b20d3d73c.0.tgz","fileCount":41,"integrity":"sha512-jCpZKYO6bFY71ePR2nkH3E0e+imV9UhmIJ2y32x7hDNzpmhG/P1a816af8I0QIpWxdH5dUmqlJH53k1FF4BrTQ==","signatures":[{"sig":"MEUCIQDq5yX5CBHuLygTOsW04KijaEy265EC/JvjHy1Cddo/zgIgMwhhE+MH9whUb06zfU0p5pI6OYrTpB9R2UXWlnttGrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDNw//RlgDqaEhhiZNF2GBlDjZ+McLt6U048M5I6P4OgHrtWB0US47\r\nQqaXD0UBdJEvWnvPz3OEjSnrv6LFvCeK0rw/Z+YigqEA3LMMlvtkEJTv0BpT\r\n94j6MzuTR+0L3q0n7qaIUg1zUgCV5rpITr/nhZCDb/7AUQWUMbLzeEOplhli\r\nCCRKbp8z3IcHiDJqv99YpR3FKODFk6jpoCRlbA2RfQXslxnZMmVNc+OVz8Ju\r\n6rglyaTWJeYlf7/t1m0n3ZmufeVhcSQHRcEQrwhzEbCr05pbcTzJ9CjE9B+A\r\nMPHU3+xaRIcMQaGfx+ybnyDJ7hTEXVhbV1b6qJ7UrtqGgQPCgxp8keEHJ4vN\r\nsksDRcf0oH8Z9Qxhk65pP3yBeGFuIyakTdpAbGk28LmlnHXuibxTzn8FZKcJ\r\njAAgZbxtqVsw75ypfyfs0RXuiSO7Mj1SXbc7ANmiNoPuRfOPkSVkTUJ+NB1a\r\niFa9ALVkerEcYnngR0l3SrmeJD/Ld9PuXMho7eRHP9FhXLtdrZywhN+AbJxE\r\nhN+RaIcfMRkfoC45meg7hNpS4wXovbyTFpBSAbunuD8GvIjgca5zJW8Np6Y/\r\nxqU6P3qyBDaWneJxqPI5I9LFhlgKMb+bUSovP861QS4bgU+dFSpvLNIfQeNy\r\nTCeN/UXGLKxIltnw8yHgnBPqmUfMSB8I8mI=\r\n=gjIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/density":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b20d3d73c.0_1659653010852_0.6409664941976934","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/radio","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc5738f50e77f01cb7f76eb72a12cfc7ee339840","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":41,"integrity":"sha512-KQ9rULD4pUiLiVrGr3kJDRWm1cMHykus2VWXZM7AGfRYM8yc+Q3x8WuxE6ZFUVtiI9ZNasp+OBukpNcOto1e3Q==","signatures":[{"sig":"MEUCIQDpIXoRfne3pQBMFAh6KowaWCweyuUs2wSNOdKfffaRugIgCOQQWfu5D9p8NTP1O/DzTS+UV0i4Jx1Lu4wOY9za2js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6SBAAoxOwrDlVRvMnDIPdnufEDYPSuBrsBIHD6IYzG/KGHNkkPsHD\r\nR/KQO7hewCGMLJfbVRzckpLDldU66FDW+XitCf1vfyZBQMdP4Tm/+qjvDrlC\r\n7mslAG2aoNKkY9d6Z/0wrt1Rc2/HUdSpxlff2pK+MYDEfGWGUGZDxcYbS4YA\r\ns1BEMsK+rFbphLGY0E+dBzPgUGFXg+/KaL5KsMUmfeCi+zKX7kFDf5+M57uM\r\n2a6lS1I1ZW9HzxT7HsCNj9HIuwDHJyUKOkrZTu5sh7eL2DBcuQXvKBb7Lwtj\r\nhbzpq07fSJWskmrN2VJOcy/IEUvQ3CvuYs0Q+WEclFY3RsUvBUiL3ejkiqvC\r\n8VoEHOMaKXnPuN2T4tghd8gntBq4xn5HhD4st2LKH87247ReCWajKquLnran\r\nVDrDBEleKJrl3l8Rv+0lIuhTng8miS0hHN/4qXpuG153RAKPr/ITVWqVHUle\r\naji5eo16E/BOX06gvmYu61lofGzjnEk2pbAR4b+a7oljd+edAmS5po/+gZWN\r\nzAz5ma5QZZTYjbrzl7YkX1OrmeexzBVq/4zyULk4hpIrXAFKtMhihCdoTH4u\r\nnmr4D23fjFzp8d5QNRjrDatl14mvdBE7GB/+G/B44jjAbS2UVdwbiCRJB15q\r\nkjC389Ps19ekQSDtO+A3lVD1dgfA97qUH/Q=\r\n=f1vo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/density":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.47c0c6b1e.0_1660058473963_0.13796342496405467","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/radio","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcd78bc1ab0800f22b20e367e581a6d6d32bc851","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":41,"integrity":"sha512-UWSQaqLXACQk93Oloj5nBqwRwHDayKdq6iXF9MKJThpMtnDvaH7wUnmruZuGBaNXmKQqrTTtEKTrswaww3OPRA==","signatures":[{"sig":"MEQCIHRJT42KPbBqh4HcLWjgeh6VHvFkhDYg4buit+BV8+u1AiBeeTn6Tl0B3GlxlTrdggfsJ6hypHyqEYsyJ5JI14JNbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodDBAAlcN1c7Lnr1Iyir8SFy+YpBLiwCklR+wvC0JBWo3uGdWmS5fR\r\nI46aPW3vxhy9IIau5PR7GEdAz2nHA54Ug6gzf1H3OhvkvB7WIC5a1z8WbLL5\r\nqJFOEIjB3HCPm2W8S28CQTbdRDNTsD9Wbu+5O7MpzDdfPijeSHi02D6XhZqE\r\nqXgol+/V8ohnPuUESKIVdru9LeoPzW+hRf04Jtb0LQ7NGPXlD1R+UtJBDxHh\r\nPinwzID6Mrdee20mUIi2P+Az4Gycg106Bh9NxElMGXN/pBA7UlMlQDTXalVF\r\nWtkMA9naG9Yb4I9t42sEB8T5Dkr4qHdMGtt2RYW/x5VKAbCyMo1Im5KSiBV7\r\nS0Y1xLS4Roow/8iaRqwB4lPlUBLTwj5REcSNlggvIAGoZaRmOJ43lACvLCUw\r\nCTBu8bse//WS334NDOqzcA/eGuU7OjT5vCUJ+8IxVSQ/2PHQWR8KFIPTF6si\r\nAnhvnwQ/5p8oZM68ruUkMzy4bpiq1dY/u5w6BFiBfktylmZfXxQLH3/LZKo1\r\nS7DST7f+vec3la+ntlJh8xa1C6mPcWY3iFy0Mazqnix6r3Xrb4apPzTNpdZX\r\n7vLX6GtrO2yIOcvfzYr770janIbf2uIN2D3Y50ZjhJnGPScxUPk3rzIMKdAk\r\nGm2D8G6MoM/j0EmikLofsqRjbdv3FRjA6vk=\r\n=NuLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/density":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0e3dc8e38.0_1660243590855_0.5052987617022522","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/radio","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c6bcf06d74b9d8b8bb8eb9fe4209e464a8c70c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":41,"integrity":"sha512-x0lEc2LW9bRJ8cBSXPTLzxWeGQcEYL5v97ap3UZfKfd8s2gifMamgj2vfL/vM3gDhuJz2vTFFfjavsWJ33GLuA==","signatures":[{"sig":"MEUCIQDuZ/TWriadd9JXPYhlkhnb96q/rHOnNw360wZp5cKSVwIgVZPVZgUiw4wnmMo0heVc0tnQtCcMQrdiB+OS9DGQufE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2txAAm4rpsPX9XaVyI/9oUr96L98FUWk1m0jX/eZREinISau6PQvO\r\nLhx5SHC+2sGIdm+wvOnyF3OOHM1Ukm0zcn3yHgwQbWMvY5i4WFfOHXtvNZhN\r\nBRvCck54PpNwtH41t0so8bhWD3tn9t7/35HR1nJbK7161VTQZ2OVBjcTsJmz\r\n2dq5RedDCS0xK/7s0DnhGitjhUviIePSXNlNwGyX9Y5dvGYhxEaj+Gd6KpJ9\r\n9vYf8/8KAu9ZAXzeUTrfghIxh3UZXEswzb17hFD85gnbvk6dqHqKyKGyeVux\r\n7BZ7njvPi/0dk3f4NgSvC9DSWe8uf5hQsGTYybMiCba1xRVYI0TlneJyY3vL\r\n2Bu0lKjj7NYLb8L68R/VUzpQQKpg6WfiJmjUClYpmqpmff5vY92lJHlDUjFc\r\ngqIbEnPfTcpn9Mq2bH2Ma+Lr65Cg1HAFWfMocVUOolZ/NVu1CVyu2ijmiqYE\r\nP1d8BjVLnOpjjOkSYEAyTO0zac7m8zvRrAFy/1qHQAt5H+auOD2i67L2vQ0n\r\ntcvOk+XLLT8KOZCQ6N5tE9QJ/RW5Uqk8FDTrC1qao0iWrC3rRuHv5hT14dHb\r\nX1aIGI+PZLGCYkoy+7wyk6D6cdochGWVsVecycagg3uwl/bT99uJ/u7NUUaX\r\ns5N9v4pQVe4cPxCKRMw3IOCKBcgXj/NTJhE=\r\n=L25k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/density":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d5a11f1c8.0_1661900512964_0.9423422227562921","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/radio","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c9c3e803b6376e84cbfe7d508ef28cab730d695","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bac992a95.0.tgz","fileCount":41,"integrity":"sha512-4SiiIgRdg5N42bmRvhk4/awel8e2PTlIZCv9svrc2edpIhv1TLYqwqwlAOplhbeqXSUQ4PMpPG5+K8PpTr5/0A==","signatures":[{"sig":"MEYCIQDzZVHMgBiMniSBpE+XafxO+LTTWkN6gyoObxTzSuaH9AIhANc6d4S47uG3duBEjVmaF1inYmkjfHOcg195bCPA5kir","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFnpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlDg//T6+kgRKR0MWy+HuxX97+zlGDkqoJvYLt29BzJ3jqk76cBgUO\r\nmiLGgzvt2V3PKwpGeiZxT4jabfCKeftzwRf9kTVBITn9rT+6CrKjBUeo3xVH\r\nXoGgJJRanCB28e78trzP8CubLGE9C7CH036YESNy86/Z8diaJ1W9twryPXdL\r\nJaqvcTB/svHxLeXTHHk/UFb/RNLKKcOx5UmwLwpaSmVpGvO2aRgQUveEoNkU\r\n20ffLerMvQ+SQv8LuWnkn1rKq0B35kZTIJqBv+CpxwbnFUlECS4kxIBhq+DP\r\niMFsd09oQ4o+IG2YkYlKlC5+rKiidxNWBFCndPlFTcGcEcsfjxxlrnQEwuIV\r\nfMNzZO93emGS6ukPeUZQ/bSBGgtyKOf83aMt/7y1ORVR4gHlQ3zmug0mLgv4\r\nh8jcZw43SybWtk9OZaxFIdjpBOUtmh9xidItgi/RrTNEUKqzl8Tb4MUq778L\r\nH+k9llk3un5dBFS1diKDdmGv3sdR2yTYeTTJYrqjhdln/0+Sb9pakPQD8X29\r\npTtIai8GEVsSpVkFVDav7hltpGIUKWaGknWywkXl21DjCovTgUutJok2HAsF\r\nsXPr0SHboZfPG4E/Xna2vrn9V1m+44s7yVe5V8Bpl+gx3Qq5PpHwk4GxDZVg\r\nnWnJNgjQ4ZMKKtQtSvoEEi5SUrOmOxLdyQs=\r\n=m/7x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/density":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"15.0.0-canary.bac992a95.0","@material/touch-target":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bac992a95.0_1662015976921_0.31663878871998397","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/radio","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76205fa9e43f481d041b12ea0de8c98649ce19d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d25f3404c.0.tgz","fileCount":41,"integrity":"sha512-rMPBiVXGTNyLEieQEwOVOnO1nauYFuj0n/iMyquzB56hwQQNolQi+vnmrYQQ5qfRXDOGAn22buldkVV3yylSrg==","signatures":[{"sig":"MEQCIE6ybhdmQR/xZNPVaidRdFnpnMx2Ol3Q3pQwugsPLmR7AiBpdCFiWtM8G736ihkyig57RK+r4gossRihaTYdV1JPMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouJQ//XnLv8n54lIaf0w7AqEJOH36SMwG6IXF6aujjQsYcxmPrz1Q2\r\nyZTC9qSJNQwmjnl7pB0S8YIPQmX85stzVCVtTxyuUrE4ZPxbdHNxcLFqU9fo\r\nTAU3IxPNcvU/zCNCxtEo5otgdGbHBrG4MblewPPhNy1w6KsV1ZEkzLHwgvR8\r\n54QNMHwN28LUkdBSxS56v58X9xZcQuWa4LB6i9G014G6kvXRs0H+rYEUJo6G\r\n9vHF19XhO04UZNmFd+dCznNAdugf3AUA6M+8SRd6ZZtqULkHqaIwXm3nXnFQ\r\nk+ZPn7vi0OzDKC/xTgb4PFNb+qA3nE9GDuyV4AG6cQXHK9596cswekocPyNE\r\nJIbfuuXepKjBataCXD2iWPWbb1zM/EtZ0gl6ubHk7cvba3NJPcwHg/q7PVM0\r\n2KW9+doiA8P+6FF6mVM+hb5DpJi44yIU+AirSU9QAhC+jph511bh6jr1MGl1\r\n8QNoVgVuSNdnJWOmS57ULL81FyAWsb/YYw9d2N1AXTaIPOFM0XodLRPoxDwh\r\nd/exC1JSzxlSjPStBvtD/bsWCHnTe37MymQfL/xIWibbYdSChe1M/SEkOpQb\r\n7KgK/ULhf35i8/ZQd9+q5wELlq72+986VLwEJz8tHVsUvf8JP6VECNvSTBL3\r\n4UcQYfv3J91jLCipmXTQ9HvUPvVsuKSCZ28=\r\n=00yI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/density":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"15.0.0-canary.d25f3404c.0","@material/touch-target":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d25f3404c.0_1662025512403_0.9238050609619861","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/radio","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e7309b32eac24a73096c873353a4b08746a769","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.920d8a79e.0.tgz","fileCount":41,"integrity":"sha512-zL3hpqk14T6ApBbd59fi4OHWSE+C4i5HjJW0gkkihS5xiIdsVVvt94kHM4THrVEdmsfIoZ/uyTDhYx2QfUwz8Q==","signatures":[{"sig":"MEYCIQDH8GMPKqoQmtu6Tm0u33B1LORnfC8lAusydu5WCW/rxwIhAIKNHPwv2YNri3tFjSeLHz53eDwyoySYy/q1jbYKmLwr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTeA/7B8wwPTys7xKeigq1X7k6miBnl2gbNfrGbcuVZQWm6AfryIDg\r\n3Of9DPMSZYkLl9kUjg0q+8CLkXzUFWW5H9sKPESa0bjbgONlFUnK+VG47u78\r\nqOnEkxGagZ4aJOfatB9Z49EQPTrKDl4U05v0tmlW3NrbXDprEdrZnzbQHEvC\r\nM1d8NNEWuuqppO9L1Z9g2yWXJmWH1op9ksZsLIBFEaPXWH6ebAZJiqmtlcT/\r\nMgHkAyfnHOLJAg1zEm5MGEP0pP6DSz5ZTszzajsZ0oOFZqhAruO5WYtcGLLj\r\n+r2xapnPWnOZ+Lk0CtaEPYpicoQlRVEZf890X4kiLcCx6zF9URyh9R6CZWXC\r\niBv72a2HmMcvDi8BcITlby8j42VaCvl0DHkUD3WPLWCeahZyJKwzdeCIm1cc\r\nJMCLgdhReHZRRX36P3s1sMTAnGlNJmXlLuTEP45nXUJn14KsFMTux9xD+M02\r\nYyiAAKg+w7GRjIoaeX4wUuHqM6LSWO3JMQPqXhmcSMpuAvx2bxWYk/4iEeye\r\nCyDITiNCU67tYIw/gu2s4zw309KxGASQdzB5eTJdkmc9e/UQ5hQRcEQAuSP1\r\nz/o5othWZt8YoJrk+PeL3Jwo2CoVwxKUyUYYnvyn3c0nzXTb50/DZjbWFj8q\r\ncCUoUlxKz9y5ME/cQgOsgdxvy0c9jZHt+Yo=\r\n=HWEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/density":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"15.0.0-canary.920d8a79e.0","@material/touch-target":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.920d8a79e.0_1662063695520_0.8467375007994447","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/radio","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eb9baa2f80bc3a7eda9ce7ab8f21ec9f2ca14b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c363f267b.0.tgz","fileCount":41,"integrity":"sha512-7h+2YwfxiRQv7ndpZ5VQ0rDW9ZhvTlkLYswyWjFDKqgqkgnEIDmMp9EteQ7RcAtEZ1HBk5/rZpL7/d/v5ZyILw==","signatures":[{"sig":"MEQCIBPjcVKMwaoNL7i2KeZ9lwhtE152khQSFnf/9jz2PPJAAiBk/1GCpzrihab6cMJUD6QzdxSFDMnPwMbHaWELwdUSVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESG7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJoxAAkYAdXNgobfeq6itOcQFafRZPSgHQDJavnZio7cTS7+5AFsp4\r\n/5yb9ZitXlhk/CKdG7nmEE9gyQF+p31MmnxkYVjWYOWVQFp636NxnPUkYeSq\r\nGYNfDF3SMuUetuaTwY2n1t82+PKoehSrHwsXlwi73QaxACgAlo38LSQL2XdG\r\nz9zE6uVBcAfGIPrQeG5gf0lKCavrSDFvzbbwPq7GIfuDBzxf7MubcpCrISuV\r\n5SYsRbKAzk1a2G+tTb2z4nDvJ1alOyYgpL/jDtPfF9PWtY1qmpa+kQl4xtQ2\r\nGozx435an808bL7gakKMZOAKyLnLo/1unvKJRKyVINZClQuSJ3izWV/5bGM+\r\nF+7/eryjFiDvZOSDilPy0DQafhSEDj0uMU5d6hmZoH7jx927h4lvpiLNyy50\r\njZPkQ9j9OVE64TVgnaDxdw+TFZyf4IVwbcVI4jslvqKAD9S8JU/ZaJZoID/s\r\nD2wLpHtdNY2L2EB4ZgoHGXNjmuB92fQLroDeIAM8SBIQd8tSmUg0StjWnhzS\r\n/3OTz7BK4uo6vGtjIpMx33uiQoB+N/FC2JwPO6bkwU5BR7C7nSttvcDHx5OU\r\nJd4jY1UqTKtRs76EHb95ysFdWCvavTiEPEpoVMOlVMbaz7j4LCuo3+kDwRcy\r\nsQeUghThisk3uPmD0PwH98vjzxqS1ucCRKA=\r\n=YCUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/density":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"15.0.0-canary.c363f267b.0","@material/touch-target":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c363f267b.0_1662067130985_0.15691274953541323","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/radio","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c78476c88f11779f55c319fe36534a7541c79582","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a4eb4937a.0.tgz","fileCount":41,"integrity":"sha512-7tB2zkXwR2Ygu6bU4KUzkwzOdk2gxZvDFPl/lsSblrG2O3mzwy0nuIqH5q1+OK4De1OQ6jV7I8oaAqa6FQBtqQ==","signatures":[{"sig":"MEUCIQC/UywgFKVZ1eL3QFo99RMjheDbtoCZoYQGjeb60544FQIgN7nHMqn4WwgsyIXzbg59PsKYwO3VOLbplaBBsTl6520=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpURg//SAN6RxhrHub12E6q1LgO6886O3KX6ceWE2mcJkzaMquwJ0Ra\r\nTzEQq2r6tL1ukIOXObnRsLGroriCL/tj/RSFu1yfakLS3kO/qRY0XrvrBvyT\r\n42RG6jd1gMsh0gKakADT56bDpC1hY6GSP29mcc3LAhr+yeeHDYQMW23rDEq6\r\ntcr5PAg026/I9+Hh2KUcErGsgeEeYLdjrjH4EmDK57CGXfSNGL2tbXqq/xRq\r\n6+PUQe6IVT2Gy+vMGDZGNWbCvsMaYMdN3B/bM7oc1JcW8IH/4UCrWzkDiDV1\r\nPwHS0ffByfJoDXPYelsYr0wW+7kAyfvdJ5B2gRJhollBcIkTcKjZlDQCo95L\r\nlMroypfVd3+BhVCBmJhJ+/OWcdo75/APK8vXvlyKmEfzJV7R0rN7T3gW3eRV\r\n4A49T99qCLK7wFUhEQTHtkjP5lzz7l8Q1XpqcmnuOVHOZKS9E92KxheQcRQa\r\nDCJ2OrUdSJKXnyvlD9jEHy2bsPaalXoZhf9cEYt8h4/937Wgc9aOIladevA+\r\nyXRAcA09y02Lp5uEOQGEHmx2PuhYdD2LTWeuatmTZkwT0jL9bwrtXNuQoxSJ\r\nw9NDlDRLa5jNcTuCvsLpl7hGuVHkkpMv4TAWTk3Of4aa7Skv4zho3dXGcmwr\r\njqq/tgwl4eJUwP/GA12CSkRKIxJsaDzNCPE=\r\n=snz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/density":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a4eb4937a.0_1662488420154_0.1296603951623856","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/radio","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2afacff6d8bd562da3e2b4617a64f1ffcaac9583","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4299717da.0.tgz","fileCount":41,"integrity":"sha512-QbVUGeqqhShlhGQnie9s8fwhDPWBvTjEVcSdNwIB4i8wrMAYNuwyGXSK/OvHmwH0e052uxK4tlcbB1nDYNObGQ==","signatures":[{"sig":"MEUCIGP3EhplKT7e49njL+i2NGo3ZKZMDPu2zIuEmH0iHFgYAiEA/KNf8oY5lXRmhQiVzkuA5bJk2msjq3K1DN8qcn0DXuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWeg/+Jc3KHQLQ67OPzq/YHTC2I0hvlAn+KerTNBPVmOSCBP91jAsN\r\nS6BwbbRV0VtyXn96zTLEJVQwwP/IcnO1GLaDelngIJstAV0MdnWHnAOwJVSR\r\nf4UPmqSGJ/rHoqNKbUaQwoLCqMcyZ9uGw06dpnyrfh79jd/GUHNnnhGzC5KK\r\nTb0yebd4AsYCXNYQ4cxnS+bdGUDRDVB3NysihzPOLZbYN9KIU4/28DGygKqc\r\nybaAgoRAiCydIRpIIb88s2OvTKOpozcCx6hGkZTLWUt9MkJpzCh2dmTuG3r7\r\nNlUll94CkH5KqVYJhX1TXZ2IlZbReOSlUk6vVuxFxXCMiN93Qk8+VyEpmaaR\r\ns7l+FpGM65YDJBqOg7Vom+GOCVKj4Vuk0PO2jXYp8Du2pNxE4T1c4tigfQWy\r\n/oLJd0HxBRHdlez/IXrsYJLthfhmtpcIxtSFX3th4J/A9hRXcV9YdG7vjtsX\r\nnlgMJBJZLWpFJkmNvVEzToSNXZgh1c+OWYYbN+jgtsNagEBgVx5YBeW5PTcj\r\nf32KkfYYBd5CSJhyMbiuSXRFTtee2HhjPhVZtOwS2znwy7lNSlePb72NG2TY\r\n4cWruezlzy5N43YpmybmKdEVkvHPWK5r7bp/PuLJRWhals8z+4RZ2z5KQBLX\r\ns94xr0/sR5btCaA7+9Dd8bqOsfENRFRNeA4=\r\n=5Ixc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/density":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/focus-ring":"15.0.0-canary.4299717da.0","@material/touch-target":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4299717da.0_1662567374948_0.2903116996521429","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/radio","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5489ec2d94a72558b4ad14e890bc036502f0cd5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":41,"integrity":"sha512-k9HaJ1JmYh78ur+2c1UgDhQS9b6NPTpBS7xveCg62hx0BvZKRWyMLLtPYILZfZQavYlqgris/Yxz/RT6yghkKw==","signatures":[{"sig":"MEQCIHEDSYLZDpIveFsPAHU2puueHFf2fsFzRNAu+UkUbdN+AiAElnmOlfIthL485rD14NYePvmbuPNixlwlvXTVKo+JNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokzA//fJYM0oRkFgHLaRrgrVCDEKZZ0CcZY2g9bQDzbB6wBd8teoVO\r\nX/l7R2Obd8Jl47PV+jwUzomMrBifhK/p6nHCLB60PdQN4isLPoJ/alXkOzly\r\nmSpbjp5FCC2PoTX4n0hH/cbEgxb5JXKdoXDS8nltn7d8JiII7u5n04kkMD5q\r\n7YRebsm9nse9WwSAlkFYvhMId8HW4oJkEQLy3tniBEnPreV/fSHH+bG1aE8z\r\nlDIIgvqFHvBgHvrDVL5MiM8gvbXr9Wep6Ij44zWORN6ydDXofRtwu721g/uR\r\njNgOJ0RD3PtnBnBibMxMRm5Ct8l4zRorUeQCSJhkft4NtYKXLO0ep8g+oH3H\r\noiRwEHaROaKKmE/Hf4nWtBfVwRlG7nsbtSCWj1gQH33tCG9pmjw6xcY538QN\r\nvDOczBNW30LvVJOIm7dlJnjEiYQ/d2Cuvz7k8MJsXv7dyuwM9lAIfdUxPGfa\r\nuQ9cnNVproWXExZgP+5Eox4pLpcBlnLrwfgd4C4zicE+9/zfDf9hklNNvhYE\r\nRzNRy/3fGxiPamIRg4/RFQEbJiqvfra0YIVtHIC0FgFSfw8BvXef0HYKvfPf\r\nSLY6Fh+4OydemKOAIoYoqaDNDhxJ7yIIFtqVK1n+BacplwHIsPwo0VEABYl2\r\nvlZycfT2oXWXZIHX/eMmZqdojC5gUkNR06g=\r\n=Rsgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/density":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fa7d8d44b.0_1662578370555_0.8659826670976782","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/radio","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9915f7c581ad4a31202fee094d59efd41b428e8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a40e3c768.0.tgz","fileCount":41,"integrity":"sha512-N1TndjDa3Qrx72Asmizxsq2yTok+tzyjjmO0MotOQDUNyG6fSeimQ06EmhenZvJmfd5b2etcUBxPFrcDnjPsEw==","signatures":[{"sig":"MEYCIQCNSC0z5+Bof9tyNqnz93MhK4ko2VwMtERin3OSZX6TjAIhAPVah9Ug0qg+rQKTXZjgwZi3yb9wYJAtT+P98aVlVQ3+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Cg//Zs1PljmCdtMC9+u0QfDR5hvj+oEZcmiLguQ6fa/FSan5XmXg\r\nPnFa7P+fIWbUreRTcRzyjrTj3z5zgLbyL4hW3fLHdATzpksi9YIPPSeYPWbP\r\nAdFlCJHbuQG+gq9Qd4TQenpPJO83LS1vsqvHxu568EDQTYI98v3TksV1JRDv\r\n8N6oGc0gSg+ICo9fdHRvX/AFaMOUtWZQohhINpBoqon6BTWIJgqJOkl+Npxu\r\nBFQR5LK8+0iAO3GLo3mOawbRHRxMhGDMhV+2LEAg41D4s59DsDToRRwwrlgE\r\nk1Iwyj7Zc6SEjajfMbDlSkdjY14bELd+CNzZea4ImKr1QDzvp77akT/bEHfq\r\n3o9313Sj9mp4ygHm6fQG5bt4rdfhzhb6Gx7uciNMnA87/CW5BKf2d+xLnKyk\r\n506pmF5LwkxhqCO8lFV1EFBj5ny9llY66/VumZff78zt3OsHdJT8MRD18Bvx\r\n3PdXYSZFIxpZ1FIxKf0tzffEYd6faOZJFJc5gwgE5+u/UPwu4kTZqy5yTrjh\r\nn+yjNomYLGw7zsy+X8g1qi4tG55Hvr8YaReorBTMp944QtT2QzZncroteEim\r\n2qbijSy3wA45H4PTNGhP8xiQ3b2lnpQdqO5582TA28G0BBhIvzOIg8aJs80l\r\njRdBUR/n5J+8Hnz/F4gSm/He7ZbRYPim5X4=\r\n=Uhp+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/density":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"15.0.0-canary.a40e3c768.0","@material/touch-target":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a40e3c768.0_1662753869412_0.03420122310671703","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/radio","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f5c7f247a6cabedb5747b879fd262d2189dbf04","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.18cdc9a00.0.tgz","fileCount":41,"integrity":"sha512-JALJPG0UH3w9Bz7SwY5am7xiu2BjMp5n7aUXx1COgkNJV0FU1G2jm/i48ExMdaWCfV79E8n+RECtCyEBkY9hkA==","signatures":[{"sig":"MEQCID1psxH6Xaf/HpFhzDUssGWx7pGLNjHC25VBnfTzM28bAiB3z84xhCO1Rw7RySqc9XChpkG5c8UMyTvy1ZYy0QYxIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7lw//fIjSto2s3Bgx2BOhpWZ9GWxDbARrd+oNHtuOYHla6xBy6tSs\r\nVITYaTvdUnCDFpLqpGQpHgfh0Kv9B6ygZUl5btIm39JWxEaowsKvCNkX3YM/\r\nnnF0/QpwWjvzMo93NzoeCwayMZCHTJpo63dKgtxlzznKFOuj0BQLCpI+p9rV\r\nEeIpfEn1X2A09p3wEDwMEE/t5McTi0ljiUXwBar4mXTULWPU1KAsMR8q+bw0\r\nikr/6iPSvIh1GOTtZ80Lgk4hMb5YXfdp6KlVR8ydaYa6pBwKtqYG3MY0ZP7F\r\n3fnuM9cew+Y/NaRhw51oduuHkkiucEpqGCLcBz+5oGtVBTpJu1SoC2QAyo0H\r\ntWd9WXKweTuw8iC8KSUqI+0ntdiR+X8cQu1nHkR67gFvd+HcUCuLeVKrpccu\r\n4yy2savoWygMersx3fHqCDZ4x2aBL9OfZqi+0sFPWCUFB2br4vn3CUksB/OV\r\nWWgehGTjdgrM8Qf3pkNo1Vzq0P6rQlPv5kgF7NC6Cw/w0l5xw2pBNMccYPLO\r\nWZi90nJuadb4lvyRGJG0IT5b9f82lEDklBkXZd89Zsg4Ck5XvVAdWfxH+hBI\r\n4KUhJxKdbAiUZ757Uv3iEVBfolJBr0XhvebMPv46sllnwmAQkqohQ2GAQT+G\r\n5Epknv5p9R4dAlWFysDArN0rWGHjIlWv+Zc=\r\n=Agm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/density":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.18cdc9a00.0_1663016614373_0.03330071507362997","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/radio","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b698c91f429578912ecd1271dd27a06517c2e6b4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":41,"integrity":"sha512-k4BomX5LnZqt8l4u8Lf1vmp6NndBt4NBRdwmXtt7KSExEZLOzNFMO9UP6a3rMGmdvBLw/ALKveYJSJCB6Yl6GA==","signatures":[{"sig":"MEUCIQCOlfSjOjEV4AGFZHTVukaSaGqJIlM2pSDe9B7ydAwrcgIgeCF4+Dd9GR5hTWkE7hTmqJM6i+5HNnwgSEqOGT1Xvy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQayACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptWA/7BubtQE5q5yHK7qVYv3vpBqwuzuqCTOF+hyDfBfTzj0WiCSZL\r\nbpBlwIZH6lXHDOl3WARKQ/U2CxgU01KfbHRdUneIrVqAaNjS1JERaVksnEz+\r\ncuA1r8cVhO16ElQTeGz8Qc+bhZxF9AGpKNUIo0VbTW99xYVw27i2U+HIFo1/\r\nfIsit2Kc+pKzOQfxGrJroaijTN1n9tWxP5Sopq355xdSW2RpsxX/F1hz2jlD\r\nBOFPbBPPjlkLSAEFbu2WaXggrPRg8NOPIwi9brALEV71QFTbrApj8Lhbgp6X\r\nrv6b5IAFFCejv3VKVSfa/k7vPmt+pK2NaPcM5w5IaS1oDsMAOFemCZF8D2UK\r\nUTtaLBr1fLh9Wsj/9BQa5GOrCkyK9flMZfSk+hLRkat7B5w0kQuGULLQP305\r\n4hm40/W8zcmohuqKllba2fnnSZsSmR1XwnZLk1HpKNTYsl/2P84i1wVlPTrb\r\nb4B0aPOAvQ80q0k2YVq+U0WymWpl+/Qo9hC4tvF0AHbUFFlcuBG2XigtKvz2\r\n1CiVwfsm1iCm25l7r6L8ulT85c8IVOYIcXmvo89urTWR/9+Rwwof/puA35td\r\nhtAp5Qa/WYM1t0uSGlj87vR+2WXtr7r65vAiMAVY1VxojIa0vPhSyuhv0MRE\r\nFxhIzbsRSAuxPA/Mg0XyQAUPMY+mjiMRpn0=\r\n=E/eV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/density":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7ab3cd3c8.0_1663108786404_0.32518584352251656","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/radio","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157092d022e7d8352b0f8bc3343761dd96f64d1d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2860d244d.0.tgz","fileCount":41,"integrity":"sha512-eO1R6Tw8DKNbS6aDjFsc2XLPDWNxf/VyrVMJAKuHXsaXG1XEk8/MFhaDmO1VDCj0tJbnbS9xQUxIjfLEUhQ5gQ==","signatures":[{"sig":"MEQCIFN87AhZ8vj6xAVptvypcQ65HBqLZpA/1RkqdJjJq+oaAiBz38QySVgYKqTZbFW9IPyamaBG84s2FDvpNb/qqa0ePg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUvg//YkKQIbENOD0rXO8pqNM2/KoZ78WU/mMPYwoS7EV+6jP+m0gU\r\noYFZ7Z3+du4f4cAUxLCxLUe55/ZQV5tUKtuD5eXDzgfaTl0gnafzbRheAizU\r\n4OcuTO28PvXbFD0O02Vxj9BaCyzH03xnUqS4Xq/KfdL61VkdXVoYOZUCo7Wd\r\nUH2KuvAIep3pcETUFpmxZapqEFmgE7wUll7jBRosmagsJmcUjY58B+1TMuWi\r\nbXfWGeJyilUP+O2uS/PHqMWgjclmKgcjEnpXnQeOLOL+F+JillvKAd/ZU9aQ\r\nhct41OF0ShxpMyUaBanl856NIJ0pwQS7dH2ZL3+xw2ccx2RIpDqCXp0CmBC9\r\nU9k2r5Bokpd+GxH3Rs1Z9JO8Lfptbxe2bgbgezxqwR6ij0H7ok4UIqQ3PklM\r\nXHl/AZZYyWGCO5BMf/3B9msbz2ydgthEpIq8wGMQFssxX5Kwot3KC39Xvg5e\r\njGjwNHX1kM99wjetrtPsRXO7tp03jpy7jm+YrrISaB4PdrjYqjjYTM16ESBs\r\nvqVUQRDOMiZINO6yb3HJ1jlrjGrqCbAVzHad5WKTIxPPP/1FalxuXc6ZY7R4\r\nEhfoamo6mxFd6Od0e8bpl4S15gBY1NeRLrBMf1XMU4aF8lLazL70TUYmPyja\r\nkxiFPtvEF305Ldyoxs7cUU59dL9BLt26QKw=\r\n=o7VF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/density":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"15.0.0-canary.2860d244d.0","@material/touch-target":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2860d244d.0_1663368925163_0.6475052172240054","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/radio","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"654cd92681f344b5b8750f7a2498a6603efbb305","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e8726533c.0.tgz","fileCount":41,"integrity":"sha512-uKX6Z7OlGLAN3gWJVN3FpztrdjZEiw0OaU4rfs+6rfiYVqrVoHnevFXQeq3xoZJXdHeynnicDjgnWja9OjlvvA==","signatures":[{"sig":"MEQCIB4EJYu7z1u2thzwRSAFUDnQlUIW570Z3adbZ0aKGBx/AiAXDujglbu5BEPJuBalGarka7c9f3ELISLV4P56vNntpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIuQ/9Fj3rFS/SidhXkQfqHoSGMp//ADvzz9n7FNN8t46VDJWkQJtW\r\nXcgyKjlNitNyRlpgl3EziRAZrY4sXuz8CkTo8jHkyIoYkeHy02mSbmyXZgj5\r\n/cfZ0FruP3PdmW3l1NUIEtKfqWJnac66ymqIHZze8bS2uE5fc8NF3RWNUroC\r\nafMDIgo+MFUppKfBnHtVQNFjbv0INHPGUfgTG7L/tKC9Cg12kvkktHpXLwra\r\nxDLsGWTdj57/WiDO6yNgnStYYOcuIRS2ss6HvYExJpWkbK+OoYCyYv5+CWd5\r\nx49zG9Qlam+9P2WKsMWZizDHgypwMV+AD9g9v+7Fi6PSU5DBQVEAFKza6Un2\r\no0JKN7PkC686+zDoJ0NmHD1ZXx2P3EnQlEdQ4dGNR5Bez31lXDbeAUeJqxif\r\n5YPARhFyHzRgudDo1HB0G/vad18eSrvz7pHjXLVWIbCRQ0UgwPPhEyKPPqVQ\r\nvtu0hlYSOac+7x38Lv0Z8axRH+D55uRW4wVPmE6T910INCQTIbDcA8jWuYxm\r\nOzh/nnFp6VbLcEroa//3TailgOKgzdllBi1X9TnAZqv4r9HC+EG+XarevHpj\r\n8JJC3TAoN3g94qGpb2IWvIWyuvDCa2KeLDP7ndRwNCSzHQrwxcVoVX/0aJVX\r\nQAXY2ORD7RCslxDOZYCbsEtS4Af+oclvY3I=\r\n=qT71\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/density":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"15.0.0-canary.e8726533c.0","@material/touch-target":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e8726533c.0_1663705097451_0.8239943265581553","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/radio","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba39c54684a3bc1e3557de571b2037dc53bc20c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.00d8de0aa.0.tgz","fileCount":41,"integrity":"sha512-H0nhQ+4MFGroX1G0Pad6MIUuW1rUd5aWqna5oJ3cQ85NJ+kYmHN9VLbmEwaDbEe7F16f2CYNnO0A+sL7uQejPA==","signatures":[{"sig":"MEUCICqVCHEueJT71XtqJ6I6GtQfnOq94JvcROIloNk3EcTMAiEA6d7xNoZqRRk3EC3cY7SqRiHWu76Gdh19kYBcHrsNtGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcmRAAmmrtyVfK9LyG5Z/yTvprtRiR3Rp4muoYcXihxiIFze6wK9fx\r\nMNIVb+pRLof1f1XFwWrJRp/MpAXv+EkoE+IqYREeRgZhd7Du+vI2aBvQk7DG\r\nbnuqxHWL0idCJU6Ay/xNtURNoLHgO2IWbj+ugYEvEiWLE//kodR1WnGoi8gG\r\nB5CYgJz1ctUQA5AJz4SkM0jRiJbEN+hX4FiBR/r+uTFoQcVtOmQAU/5TBkjd\r\nxazU26h1gABH1pbIRfalKMeN8QgRA8pTVZikepb1FiXD85o7pu5mFhJ0dKxO\r\nEwTbYPifC2KUAwvUMS4PUkXKsyspaMVSDNGgBJdwNIYxtKIYoXugUY76mkdb\r\nHHvCZVD4iciIBKZIzgtEhoi2XWfjPFrwM2q9pyamQy395CvXaRO6KIRDikS5\r\nUq01OovpgQbqW3aSWBtNIQRrzDgmwyJFOVIhDlgcwsHCNWitDxXp/ymWpLtY\r\nmTVehCY4C3gIYFQjgTQNrpJEKVWHCmQe+sSD3atWy83qEGXYZBw2l7omc+4h\r\nwokY9n15K8dhIPkQamGB3PNMg3E6xWc28dC7nZ4OcepKsjiOW4NJ45GCWV7n\r\ngjBnQjU257fjvccUmDUVicUVqG8fIK9jnnsyDO+jaD29+EPpqBkfrmnqUjIr\r\nvyD34pvrt0HtOVS9qKBGw2Nm5NeIt75Wwec=\r\n=k9yR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/density":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.00d8de0aa.0_1663773662727_0.4117608582732397","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/radio","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6095bc647b63919039fe05a2338a349ca85d3243","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.271aedc30.0.tgz","fileCount":41,"integrity":"sha512-yKEVell7YftiZ0lAwgZgIYRSFRk49hG2M+/QSH1DsXZgEhNtHcqsr72eakhakUp4e9766AdJABECVAmmZE2UJA==","signatures":[{"sig":"MEQCIHNLPDQszLZ1jaB5eNrsC/rHwDuc1mo0P+ToEwGlIPSNAiASAxE1bDtnRcRH9XLZnf8lB7vTpiQlPuHmXvWPy7veFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMaQ/+IeHlk7LiJBbHU/kK7lWc5aibAwnJoriGCG9K2gTshRnnB7N9\r\nb0ylu+D18ocpH6ngyKUnvpNnICNFQ+sRmLByyWquR3k3InfZS514+QD7/VYq\r\nzZ1Oxq6/zJo+khUCPTB1qzx9hsqXa19luY684dS8K677J0BL+VKlIUDnKhn3\r\nYYQ2Ur4HatnRAY/8dvXArneaDzd9LKAWMr6OpPyluVfJBNKfjAgmy9Q1ROao\r\nFpJVxpdobeTkqcb9QiJLAr/PXeVg2f5YOgnCGEUaTldx9U5znEDzlJHSB8Gq\r\nr7tBm8X3rlFFypIRXthii0uWjZa/MI73j0oR0nrTdFv5p7ApP1VVNJyOL2nd\r\nwXXeI+m2+OZPhiXgUZuwG/BsB479mDeqW886gZnzB3+9KG4quqi2BQn9KwX/\r\nvbNhD/B7dma3uh6rM/gY6h6WKefH0rG4eGoowfko4eIOBlzrUnLAXTOp923V\r\n2s6oDxaHTvXmGZmigMlxpM87DaJlJAqT1tEzb9rJp6B6X7fsHnUBlcG+byrd\r\nR0RAL6yPPDktnpKrCuu4mQcbM9ckwG4BaU3P9Ljk0kck8iIJW3MkYsl9by/Z\r\nyrY517rxUZ8rzngUDFgoTWgcj6HMR37XxYnpoxNOvXFrw9BnJ/aFMdXFOKpJ\r\nY4MsNXMa9il7rE2kNMggaLALKVE5Z9nt8P0=\r\n=Dqll\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/density":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"15.0.0-canary.271aedc30.0","@material/touch-target":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.271aedc30.0_1663774596422_0.6681811273337488","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/radio","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee3966854c2fc4c6ca001ce621e850ec428a247","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d3344c16f.0.tgz","fileCount":41,"integrity":"sha512-IqiucO3dGyiWY+A2liCbaK+Bwsuw+M2E1RLUEY2dLy15Vz48F46h9TcmoZQZjP3V+NY31RCMi2hNOEuzVTmNng==","signatures":[{"sig":"MEQCIH02R2KLqhYCshYpJXYanhvumqH3uR72MbTLh6ycx05mAiB+ePJAvgeghlPH1chdPZw6O35/VLepFb1UNdG5FDa6pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocjw//WmUhLwPENf0zpsfrZNrhJ8dbea5aTPVO89Agu6+hMoBDBwX2\r\njrVFcbs8uYYPN5Hpq9y2oBkUzYtADUFfQVdq9CXDo6LSM9C0TkyPXBT/vAAL\r\nhlfyybAj3/hLQszMfb/hfd9uZZI/uCef7QUw09jKnRrD8CMfiSVDsyAn4RZ0\r\nsHhxEjavCekSgUfDqqz3/Zs+Fid7qvFmX2UjWbOi7CQj0SYS1ZYh8ynQQKvd\r\nAeFxnk8gnccIeCj87CmgBf5YQDTqpVEJyD4bv5eQn9Ylj4QAomgX7z8atXH+\r\ndo+sZ+li7QPI1AsvW/fL71v/EZ/5hJh0fCztkRG0XtsdKnvWC5O18njh5J7U\r\nTA/EaEjrE70up4Y2+haq9eqk/aBJvmLTIg1zHF6IwKjI/lBEBFd0tdfLYhH7\r\nwI+lKOs7arlrZM0pN4NDR18DqUEW8ZlST0C8KYpaFmVg4AqvmDFSs2yB+Wfw\r\nkg8reueiSzxkXvKQdxyYRjjRkjsMfSvvFFazRoHnp3Xyo/ZZvQfVHrmswGCG\r\ngfe0gKMahDHIo+fT+xw5hq+8kPnm5fo+ryp40qLMXW9PHJWD8NXVUiAVujc6\r\nnAreiY8Mdqc7LBZ3zxhP6kaqHoP1QJ5CrG/fmJgr9B0s8VxGjigGswzMJNKG\r\nHBFzHvhJ7LIOwzDxMTv7Hjpvhh67uevsrUc=\r\n=WF68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/density":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"15.0.0-canary.d3344c16f.0","@material/touch-target":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d3344c16f.0_1663838702525_0.4095977597746192","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/radio","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e39fb7bde52423e156173ec47953e8faec90edbb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.94f20ccb8.0.tgz","fileCount":41,"integrity":"sha512-sPZYGBu+0qTgHk6gbK/7zJtOFCjGPxpJxLdfdKM/hlSXjl+QQtsps/1FvlqzD8j7mgTkjcCyE5ZApEV7H1U9zQ==","signatures":[{"sig":"MEQCIAsPGUpusnj3jyhthAqDUQxB+tDXxtIukZn7aM/vi3/2AiB2bfV5VL/vfFF14dWwn0zXig+OpI4r6SEZfxmsZqWCJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr28xAAhZf9pB7HhNvRnhrigbJSWZBvQvzcnx8dMN6mw1N9lR9GasnR\r\ngxOglUbMRK6yHXeeA0hMoQ92hFHMQELfSLySzCLe19/txzVG5ZQRexUAsUO8\r\njg+kkY2gqQBhUnjM5GbLaIWXzoE6sSbysle9nXmg/xWiCu72EqMUG+EZsZPt\r\nmQm8R9QnVpkPN+HlgaCmGYNin6yNK4hpgxtFsNMvN1VYxEaZrxKsv+S+mdoN\r\ne0EBo8qXSqLhK6WAEJP1jEXGCQA0eB0tMPkgsRIRxbTSmQnHhvpIA5m3uvx5\r\neDEMpLa2AS9p4Pyb0xjO1EekTSQ4FEdHkZmWUy6ULMu4N2ffrbH44SNbWN57\r\nfuIJA75S6dauSTm+bt0KD3ctRrbUZ2nMljMUsEPUShcDd/kNK66WF/Tpcxdu\r\nMOwD2PFAC0pwGVBeCzOSz3HuS5BmDKjWUjNGF+AMtD4yVmf9trjcSQ406SAd\r\ne/LLM8YTNYNgBSR8I1f+C4Hd2/AROSzEjtwMNR7cON5AusSvFvdxHACVSdOj\r\na6UMeB+aChoIOD0YA9WXqYj/thOhDywuI7oBYrlzBvUPIgHu/pQ5cOg4Uu3r\r\nvu8DyWpx7vZN22XqfEfMNWWT9OFMShBJsc5ajqvwVYh1ftAAYfZZma8hhrWX\r\nbm3bEDTJfFzRN+u98oTcw3N557yoKDSuS7M=\r\n=6RCr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/density":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.94f20ccb8.0_1663879696110_0.8384667793611347","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/radio","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a104453d4af72a82dfe7213c526ac13409e0dc5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":41,"integrity":"sha512-QqjlPjOE5gChbWKL3w64qAdbZneqG0XLuH0CosHgWLv0fj57pj2xRqhrwB5yTzhbC6sJBGYzxQ9N45dCwd+O3w==","signatures":[{"sig":"MEUCIBf787AN6xqU0mgR2K3W3r3ASAUjW7u2FXdCSE9H4rT5AiEArPLAtrHvcZCuoK/oNr6l0ugwvfhyOEmDVZMK3mixNdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcv2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd0hAAigGG9KxOcabrPDsNZ3a4fJZYU/yCFxmj5Poj2ziSZCFFb1Z+\r\nrrGbJULg8LtATUEDRsY9jku25Xq/qtwwo0R6zDIPgnvRSpGE9UNu99P8lqdU\r\n8q4sAfwQicpujdk/VvrV0ZDWkwJSTaMNAq07zsoySed0aoOtTuyhM/ObX/ve\r\nPjWlgzAewB4j9tBFnNyX1ne8JRP29aeGvnc2bDb7uyEO7yKcL4Vp0PcChQ6N\r\n5xZiIWxwE5xFSS/WgfVrFYTMjCdJSDkiEc7KvyUkZ6QzChVLRHDbx4ZkcZH3\r\nklGuUFwvZGHyNUCIsCLlsBhENXDdITo2vnlVOVgS0JsNtWgbUGutvR4YNmVs\r\neVFMsgabu63qQ/AWh1J8EeJSF9XmYYrKDDzHUUTbCkkYhs1DegfYh6mt7rvL\r\nW45b8zNaBsA3RhAQ0QTJPYY9/GLv4W0WaFl1jFudQ+c3ujrn/io8M6jKeqzZ\r\nPNPdmXimSjN70gFLl7b87BQwmuf/ALgapX+qXs2Yc2pqWah/zoByZ7fh/DaI\r\nkCrwO0GAmWcD4JU/j4igb4CaFTChsF3+X3/jn2OmqyadyeegDvxHyvdj0Bv1\r\n6KvwRbWTq5iomd6XXT9FhIXF5uKpxjNxn5xKtQVEwv1VywxxkrQ0Sybakzpl\r\nbknPGYTmHm5qiwptNgQerm9NtaLRrlnrd+M=\r\n=v1GI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/density":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.81e4cb7b2.0_1663945718426_0.5016097264648758","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/radio","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8ccfa29b00a0915163df1e58f54f9ee0833268","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.aa85f9413.0.tgz","fileCount":41,"integrity":"sha512-9HLFiYaZg0UcidLIgfCG2rByRCqLlmy4eJtRe9PRNsV9OxDGxy7+94n8drzivMvNmmqIit1ldTm30o/hsGXMNg==","signatures":[{"sig":"MEUCIDjopkrbu8YWLYCBro8Ug45mrFVPUT1fqIumQwTQBYWKAiEAz+s5P3ewymkc371eDS+ODcshnjcsp9DHfqOQmaa7VbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI9g//QbW8MFiWZ8uEo1iBB6m6L2hUdcRvOoCgLhzOYXImiP8/zJ/3\r\nEHYVD4msJeVEQebXlodGIOUqpW+nrZynPc16mhUtuGThdMUSg2A5Nn+wzx/C\r\nelgw0dhh71JvR0D7mXeea4/kMeb4bT+oS22bS5gyQwJIx4rvgKIxP0lBHL0T\r\nKcX2h76ilsy14pkjjcZ8Sm36Ig80hiYZ+ADqBDHCTClyq4LwGePreavuXSL7\r\nF+Q0DzziTd8vb8Gm//A6Ck0z91gbLC0rScdh1MD8mmaBXFeNiajsJ+bvOUpe\r\n3usbuyPYSGgf9lFcS1pjkAbiY13bf/kMQx3njcjsbNtmAZC4dL5LxTtgGIfT\r\nrUcs9R49YKLKZ0B8PmiQHCcWpApw9mPKFsbS31yTMoxmyCmXJYraOGVhTZWx\r\nLWU5b4vATYet4whF2SQB3XWMGnThsgCQM0R6f8Qgye+OaQHvVcqMvBZa1wCP\r\n+hOpGFxXE3oCFdMt3mkoggjtsC3xadCam2sdFUH8JxmrQIZJywESgFCAlUsQ\r\n8/TFQPN0WIdvaAwu6UoGWYgWfPYxPN3ZQp9yXKzTAkRj85C+hbyCHQwTCPX9\r\nhm5iEuD8zc06wbhjsLHHcvxL30d+L5dG6DmBwvtBjWf8L7GaHOLDMu7swilQ\r\nqSP1A+YL/NbKUqUAg86EjDJcchzkjZBHrOM=\r\n=QJyz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/density":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"15.0.0-canary.aa85f9413.0","@material/touch-target":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.aa85f9413.0_1664215011608_0.30682484962545575","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/radio","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c27a77dba07cc6fa559d48b8c2824ca0929971c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7134a7752.0.tgz","fileCount":41,"integrity":"sha512-YAh0VZrdzE0l8xXWy+jrAarcQfTm9vaVffiAy6KzvOA1j5CTwk3GAf5hwq8Sqf3kuRfYeAJQiV1rfFsX74eLFQ==","signatures":[{"sig":"MEUCIASaVFBcKCg0HXwPv31CxLnGulbGyf9fC4deCFJg02FCAiEAreFdyBFzdbN4gVuBwWRPjwAD6CgEtJMbcdkTMNEe5gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaoRAAkuX5DWwRi/UaiQ1XQxLfDkA02eKpD+UxOkK8iFrjQsMVs2th\r\njKUBTzyC2Z0nA+N22eUhpkxI5hLUHpQpZUMS00M5L0VYWoxOhOp6TvM6+wD3\r\n7z16ic/QNuNZyJUYtTh4A7NwlxZlifeMHTaWcYLGMSKOxWZtEcbwWgSAtiRr\r\nzPEnIvV9vyrsvsp30xsI0onP+oaQaKDAMDQfF3obsd0r0ZtI+ahpDO20C4PI\r\n0cwHGk3YHOVU70Q2mqgmyhhEdChrpbCtEscnS36VSgCHkB39tGxUuCgspbc5\r\nq5QlA4R8BjomcjhbSPp8a7AKU4KqXhW74lb4TqVNJ6DAbeek0QNllGf2gRgd\r\n+Y9r4ZrdS2Fy14rlBF74qLWvWlOpSWAfXXphsOW9CBnyssK8TFEhsSQk6GId\r\npdFbShwnoQNW+HREozZZpSquN/QYHNzvDbkgyYTrH8tmzs0K42SXznLxeZjP\r\nt5/dBMTQUQL3V2d9CpPvrgINHzz9hKPQm0wi8uZKDHmbgWOA2y8PW9JWot48\r\n21+cxcgpKwKsOQBD9KHvfzpyyvBFrDWVDoYYOE2OKNBXtQvGE3vdFp9Q5NX7\r\n9XNuUcGCCl7M4M9FINhBU4xCQVqIumSWU8v49DKoJ95ywCwfBi5VyPq2FU6O\r\n5Ke6ZBoCj5JqM3MTD8lxxMK5dVwYHtuWW6k=\r\n=AqN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/density":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"15.0.0-canary.7134a7752.0","@material/touch-target":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7134a7752.0_1664229486266_0.8681470900554431","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/radio","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f61b10f5e6d10f9950eb5da2e93906a19022bb8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.70b8ac16e.0.tgz","fileCount":41,"integrity":"sha512-yWxEL+9AyS8KpvlHwZ1v3qROLy3qhjOdlIbDVM+ythBEi/vsfPTWCi5XyU7g/o76dkx5HaDl6pySpZ3/Zpr6iA==","signatures":[{"sig":"MEQCIHCksvGIbRqMXV4zLorev3MZTmEbNacz/pVYFC+tltm4AiAI185ioyw5z0bWQg/UHQ4p0YCi6hdg23NUcDFZwCsQng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3z/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoWg//QmP0TziSTlEyBNa7dqgM4C57uWzI0sKQQD6rcYuQ/K/3B5Q8\r\npIBfVobQ1c8JENHryDwJYvLG1T04SYnuiNu6QEBfcWMgSoawJTveijhvJr8a\r\noOKVWi/+6Sse8IHu9bfAq5Jex6KN3EFAWfswejI0ovX4vmdU7xTXwYGzfzDA\r\nNnR3pL0JnsiuwBIzWmGkAWp5LS47ZWjL8ppWo7Lbl+Xk4+KuTyx1QbLX5KQH\r\n2cjGYSedE7/R/YaozlymgIiozVMM7uosM6SrTZHbgNJ8LW/DKYjaKYpQlkUh\r\njtszDBRl66rJAZMM0GqBmPAk22KUKlsGPOA3hntCih4BM7LX8mdAa7iRhCf+\r\nQV/L9L4AvGA/XskjHHeDopNXvbE6BeqzR15tz+Ow9lyL/Wto5BxD0wr7pvD+\r\nRlgOlmfBBUPA1h+stsQlzv0j+fMQA80ZbRU3qanbHyivJUth6A+nXxI7YYL4\r\nW5bbmcHBNPgI1o6T4UxIDxK7tFXTAwNZVM+byBTXwl9YQfTNuAmgdq10iF5w\r\n6AiS+ZEerWpD2Y0h5kArOLtU2KockyiVaWqDUWFH3MAMRqp3q2jT5lbqe+xm\r\nlBFLezbndxwXjsOtXygc2LbbUY2cbY5OcYNIHX5i4h0gDj9TIgmuwxzuTOUQ\r\n1cGVnEu8UqbAlGVWtVNxUkoJBxijzuxJUm4=\r\n=bexw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/density":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.70b8ac16e.0_1664318719648_0.7030522021599428","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/radio","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999b3e0e296e1f1a3fe01c174aec9bd16d97c789","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c20d74405.0.tgz","fileCount":41,"integrity":"sha512-7qeCBTuHsPpo+/++04JFFWfRFJ7FDdTxyZzgNkyw14tc8QXnpUSfiMOWPc4fsoKvKNYb9NLU5J2NNW5c9RJBZg==","signatures":[{"sig":"MEUCIQCbtDdotIefNkAhgCEk3FL8VVAexV9Uixz+WFTeNrE1OQIgBpR+yMu4wm3kHKFL9fF991cWcTbHF/DnTY/4gA0WiJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4ffACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRaw//QQ1GqZjWCTe91v6CKCqFZdfy5AEJaFaRrup/RGWFNfj5b463\r\nWLEHBpDxr507d5SV8P4W24jJajIP8d5GhFE1uYUrPq+PWdVJ9gB9n3DoiJCo\r\nnOBL0m61AjMBZ5YmCFXz2cxvMk/rL5ldDsNHT9BGzQ/NdICdiucm7FQKvoH1\r\nMuQAmen9tZC2VxyoOppm8hgnO6kIdBNKiAM83vPrubALGWIrZXeX1g1NsgGE\r\n7cTPnWsCkatY7LFWQPgh3Sq4molL7GDiJnD6ugudcg4aDCmuO+TGgnS0Ezx8\r\npLXWSqyvJUUlniED4j9hRbIxq6EWMRVmTlHqxbfaRZRiKtfSQqcCKdpEdD/P\r\nX8wVgaBPYMOPqfoYmPDs0Fi6Tr3kFAnIUcsZZhbxDqBHFOz2Q7IOfuDIhOd0\r\nL1TLM3lqoCLhjUazoR3hC8HT51BEx6mYm0XeuINHqmwOi/2rO7RFkogkRgvG\r\nx3SgejH+Ih9UGkbksjrxwEL8nNqWXrTKepy6ISUKT0sMrS3XGidvwo+L+tfK\r\n9andf4BcbbFsfdfQ2A9a7wG+DoF0buiwkIq5nO/zMGDceXHzKCTzxyDAQE9p\r\n3g9frk0GxebNyLPOxL/kqFIjXWR3p1npd3/Prv18L4OlSHIPmKHOQLdJhBaO\r\n11sFQ3zZGaJL+QuX1SPah7PAKkdMYSwBFYc=\r\n=2Ngi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/density":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"15.0.0-canary.c20d74405.0","@material/touch-target":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c20d74405.0_1664321503170_0.48576393299829856","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/radio","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a72498de7f105eda5abb0d923b0f0e813022f2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f033fc8d1.0.tgz","fileCount":41,"integrity":"sha512-T2ZMSKtNiFbwRHvYgCkR2WmUbAss2zT7dew6oADPPNrfXWqxOZVZKd3FG8wsdL7/JSvOsKhe69+zlQB2Bme/4w==","signatures":[{"sig":"MEUCIQDj6RJ7XKnqofvFCRrHMLp1IqU05Lfa5qcuShXTn5s6vgIgDRQEVnuCat/r3PgkHn3xEOEN2bOgdsWfZ16W8YEvZyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/dBAAgemrfwLfWfzzsdawRuIlCGQoco1ltbONB+toVBKIL/vGhfqd\r\nfv+GoV1SO1nnYkB3aTH8y4J0YMKWhvgLBDoLTjk/FGYudThLXXAAAYgXCLnC\r\nW0YxJx7IJw7Rxvgw7U5GTASIk1E2AoTtW2BDUjGnWSd2MPlUqfppYNF2PT1o\r\npz6k2Lpjhlqf1kv0iQwpVkBzjKJq4C2lF6LdzYUjh72C+0R2mlOh89a0oABx\r\n4SZxxHZ8yg/BT/VoK5C0/oW1k3ReomSV8h/5yvKNlUmOHKLLg2nvHdLoxgRU\r\ny96Yo/T+rSHe0v4lOQclehnhosFkoN/5X6ivS5vYUYi0HX5iVGuzoX06oBKM\r\nV+WKid6pjTgBaDdoiAyZqP0uWF1ZJh63Xv9RHuLrd9zLaVIZR364VXCZ4eaA\r\nlDbQF3Gvqn54tetYyL79j/CXN+ev1wTX3VAIH3hIEIoJF5ER4kUEM2JtfDJr\r\nXHcKKRih53vl6rWu8FzdqQKq7MBReyMKKlu0cEH696RgJGDQgyKXJYBgeAGH\r\nBv/FJbDMbs8d1WIR+18J/LH+oUViyCEMnagRi1HDM/ZgbYBE4678iH+fZqzY\r\n3UnYdPqh2/eddtTjyhIxmgt1klKiJxZUNgyH0ncecnARD/V5u/6+ny31kWBb\r\n+th3qiiMeKYuC8e5vz+w/PoAVdVNnLeosX8=\r\n=KLPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/density":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f033fc8d1.0_1664323070486_0.5538233850341892","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/radio","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13d29422c9d6551876e9992688cd2c99b3447121","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8d7ae912a.0.tgz","fileCount":41,"integrity":"sha512-Wo86ExzCPC7VzB7mHYSxUlHTlJ9vA+VAyA8ovqJCjEuP0j03uTMfEkPxGABSbklJeCH+SgsC9RK97QMiWa0a3w==","signatures":[{"sig":"MEYCIQDSrIcylZAxc/J53pEr6KIzSbmUeTSVU5iaDtTo4SlstgIhALiPTB7rTBeXCL8hUf1vt+bxb7IRIM/Otp5TrBorUwdz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6BQ//eIkfuyKu7qKWIWgsKltgCV0YECOY42WTSfinTxirF16hnkRd\r\nJxuTetEq15+AbkEIW5/WvEmVkaRhvxb/DwE0rBqrf8vN5yoSjHMBgV04EG+4\r\nr5UkseMExwZTh3spuExmT5eqX62MDzntTHlKTPnZx2jll8d/w7/ICmm5GsKd\r\nTZrxNqfhjQCmeEC9Ru3f60rwJVuSViDu50YLolo7cIItKcYsJN7phlsGV14T\r\ncAmojd2n9kU9nQIw7Ix+AEyGDpJOv9PKoWDY/mtK8wcItxKtUami2e7V2fht\r\nQIdpWdVrD3S608m54CyCKU4MNITT4MxH0yWe/paur8+UhQs/lSiO3ataHNol\r\nKIJkNkY0UiTAOn6jVOPq3Wn7BBkmAfPTjNer+lIpUebSUEIKqDwWfbDkNB9N\r\nslBL3Q1nE/LLOL+K35Zw7T5FlCmx1fC07gTPGCPGQ1PCYgS3044rAEg7+A24\r\nA5DEVfDDPfcBVub0hgLuyrMoD9a9KUReqpWdTApnMxpVXfztKhzda7NkqjNK\r\n8tK0AmqR9sUBjejl/HwwVfcdWZyYuqz5s5l+HwqrOqAvhIZZDlK7m5QEKnJv\r\nnPWPhMXzvrLUVvWFn4qyVkunYM9VzETXjAf3dI+otlINbzqy6fD9AniBHM4X\r\nbgrNaIjN0xF+XXgegnT76bAuTNz8a/VH/Fs=\r\n=UTyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/density":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8d7ae912a.0_1664351791611_0.11136604572656639","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/radio","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69a41d0d7ee6e97e8a201786717e6a32de974f7b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.db414b864.0.tgz","fileCount":41,"integrity":"sha512-1YY+5RQ5xE4Oz8qqpKAaym8rhWZAwAUoKTntiJfarPig52/c+sDwvjo7rRKBzptk/vNC4jim6YxCw7M03iS6OQ==","signatures":[{"sig":"MEUCIG0pzYP+qY54XZa+E3ek3dATepo1umDyHf6kMobAxSe3AiEAyb79h0q79rWi6lvd8HA7n6F5iW359+cu3CmtJEZnLwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+EA/8CgwYCxLJ4+Pvt9f67UzGIR9WQDdJtJWuLE0IJpoex19R8zzw\r\ngGCXukHpWU0Mb719afYDN0cx0abFnWI47kFjTGZSCovYBqTSI6x6L5fiXrSb\r\n79wezPiXWqRhk+5Gc7dhTEMGlv5mSi3kmY3Rsns3INUd1XV5XX7r2/tf6mTt\r\nmfF++WvtqqswWYztK5aW1zVL4MbkhFmYVzIQCALs6hl1BNDxM3iv7+otNetY\r\n3olm4p4PppPhLMcoaFZAZh6D1yHSbWNPnCrOJyPe0IU/vYU4NNaDHa9xNwD6\r\nlW2az/LQ4bF5kXPaogQ0xDoQzI1bBXKD9AGDUaCRftFuOox0qDIQLJv5x15w\r\nJQpsnPqdeT43rgdsXYGY3lZ424Ednbtmh5+Xc73ZAk9xAqmseCd0YW5Z6rJ/\r\nFzoG79wf4HEb5xwAXS5iMWFj3z3hQpltorhBiQe0l6DZDI2cRSWJ8w9Vrct7\r\n+++DpiSUoaJWFImpxUIa/c+wG9m+3Ha1kml1b716WHFmN1P6zfz3Ue9Csn3V\r\nvu4IxBtw3FdCO00qKlfSrwLez+MXCGB42FQHRKwGgHhajRKzmeiJy0KY7jdK\r\ncTg1jLpQuuTKlJRVz2Wea71r7Pc6EagPGFWUIf8w3E9tkKn7szNf8G3+crG+\r\nkisqkgyTcL3n3dsTHT6aK22lEE8HvQW76yc=\r\n=Hf5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/density":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/focus-ring":"15.0.0-canary.db414b864.0","@material/touch-target":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.db414b864.0_1664376791102_0.23803217838470014","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/radio","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee1ecc3d870d233a8f110139a6d44cb20e0dbf3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.28cc6791f.0.tgz","fileCount":41,"integrity":"sha512-TuR0xgrQuzU+L9Ex8RyGDG/iCryXXiQzS3IN7BNHSje5f/3U92RI3OcNNcvPGwWAfh1uqNxmVZeV/qgOYyfxTA==","signatures":[{"sig":"MEQCIEk11AKfF4OD7Z693pORuC4a6KK8g3CK33jAGLKt95DHAiALE/4zLBj0cdpPqIXNUMb8XrhNmnCorDwAjq8kesbfbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCAw/6AnXeYBZJF8uX1gqBc6KJWjgvzZQh6UTvUuOEBeoncgrX1QxX\r\nmbtR9cCVKtH4ALnPnAo/OVy0vzMnm0CQRXF3pUc/VdJ6sG3mxaMp4Nta8svA\r\nKW5/p0xX3MLWtBW+FvOHlmNw2ewoSqGROGzF63LV+jcIOe7CrOjwRlIF69i7\r\n7snrsfu551HGs3XDqgMBL0ITDroM7taKVMeLMrZXhATfXaQFo0brD7EkL4ob\r\nVk3DbHmoUeREfOvDPVBCWwzHh2SgwOJ3WuvY99FHebXdyPLP6GY+YwO6x4T+\r\nVjxwjYD93CssYrEFGcJJsO/nkSEUZzXp5tDR0YvElhkeklSo4D4iO8Roo3fV\r\nAfOKbJRvWIMJERfnNkJDSaUJgtLADHocnU4t7969FtetLLWzbXA8AhnfZRlI\r\n4mcOdNVBt1oOput0Fb+z+fJRP4yQRkWOwCOdbPjP6bOvK7qN8qbewnx7YZwj\r\nk0DXL6T5LZb1InxBfdjfPDZjatQmFPCRveY90rm26QA9SzPEdXlESRdP5Lln\r\n+KkV6hRx5iSjvTd/Og4X0sFWocqE896BZq/Fm98iMGpcvTfDFukV44ozSz0N\r\nZrTyjVxPkgTjbCN63JFTZ3OTw1JjnlBnMnnfGlruJXIWNlDdPxASwZiTnxyn\r\nPypvz6K34RZOYNHO9uJIdOOnSfaUgTjmr6w=\r\n=Ip4a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/density":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"15.0.0-canary.28cc6791f.0","@material/touch-target":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.28cc6791f.0_1664388445496_0.7430262736080544","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/radio","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4551cbd306780a86fb5b85bd68a0394a403ec104","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a515a2d18.0.tgz","fileCount":41,"integrity":"sha512-fAO+C0tGKAQC4JHAwzCe4ZLXPmAXXQy+LN3AIvHAChxClFj3lNaButSFVLjmtqRoJzzylW9G4iIMu0vSrrf5wA==","signatures":[{"sig":"MEUCIGHfO+QDT3egwXN1RTHzQkK6+ulQWHJgjBlRCVIMYksaAiEArXm/4NOQKplm3ijOjBpRARZ6EHBiBYwhDddwOjjh/Ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHZQ//So8UB8rJ8WbCbpbvypVIuoso3UtSSBGNbFy5M+/7ijJU+5lN\r\nAgVcMnU5ucH8ZEx37Tyu4Bal2hHN53i6Bh+6LqzWMIDtMRJqG05Zv5uQTd6+\r\n1L9sa1hu8ryZKyUTUrlW+MIoXd0JBMmyHQZrPQzc1Pj/7taXgrWoaswB+ET6\r\nCtVODQ7vzAiZExtaAsUp+se/qGl0IX8IzhmyS41waubf2yaTsFiVEPk9OwB2\r\nIrEr3mnoDXeeFcemiIJri9lVExOliuthSY9A0yxEMaPwrqOpXpT92vG7UvrX\r\nj1VqqfCaItJWRyo7c+ziogOeZl9maonitwlK2WsZwnar1PWja5gZJrAAgMZW\r\nvgQKxFuA2+c+iFj8RYvIq4B5pWv6oKC7RRbMHnYuQFHBtTy7L7JqF+qUWtOa\r\nsIVc0ZzBvQOnpX0LRljidRYU/oJBdEQx15TiiMO8+Kx27DC5DXbiNiX4fwzi\r\n7vT8B/UlgEHIHGGGlCkAddvwIGo9DVP5JdRZHIKTtV+MBy9l0JNFwuU+3x9X\r\nCGWwE1tNiBtWb1TMJFnKNbkyz+WtC/GkrMrOwNLG3kK5GUNiIKb6zqAupQvt\r\n84X2WUwOUDLUvUJpXPHa942mhWDAaLEw1oe4xtTZ8xu553SQjAZwf9MuRAHy\r\npAP/zNDc7wCHip3k07buD50IrVGbsqO3wMc=\r\n=PqcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/density":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"15.0.0-canary.a515a2d18.0","@material/touch-target":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a515a2d18.0_1664391374485_0.3854062125267108","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/radio","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6aab1cc9c66c77aa2c73e71d136d9e014bd9328","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ce9523167.0.tgz","fileCount":41,"integrity":"sha512-m9eULjN3oa0ixjNmlWQ+dtbep6ke+UUu86oVyM01mRPfztspnwnTfi3gU0Tu8G9Ftu1ibkMHLHUFLu/XfbHRXQ==","signatures":[{"sig":"MEUCIAOxAvp8Aur0WnX3Sab5VefxGnLVaZF7qIfmPGuFrv/uAiEA7fWIlQCXaFcm8t6Z75XqF6JdxC5Q4qAgsZ0YRi+T410=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH8g//SqgqOKMKJWPmZ5Tz1VzrNQ6g/Pmqq15IkJW12+mHni8aOP4z\r\nTWsQrOctuMis4scsfO9a5bQRDy+3t42StAgNG1paXciWbzX8KGEF43ilEEW1\r\nG1o206N+nbaOA8b0IzwqJxONH83umt6EhlX0jL9d0tO8C8umebto7GL+KRDI\r\njweAMhPEo1QirwMEcAMygsOd85ZG2sYUBN4GXvOeWYMzgwQo9jxF16genGGj\r\nGnGpNX33s3oMZe4EbQA2PiSAeff/XyutZCHf7592iE2kIPzM7dlTK20MutOd\r\nBya2LHSHKjQXZdbQRr4LabFsZwPzpDcT8UI0xxj5wQRieg1YFl3k79TiTHyg\r\nWodlO3RBp/A0kzajSHMbJkfoLAJyqt3GSqUIBG/ullnkPKob4TmvYsPlC74u\r\naGZEMbpw0c4Ru8NP1DxupbWyMJPsZ8ZRWRoxsLRtn1ttFSMQFxTqr2jOIpgO\r\nGNxp4KFBAXTE8vUZNKMXik4Etkgptay1zV5/PPjmt5gxHGpFPPuD4NYqghBk\r\nLLrj/oYs3l2ly3H3i1bM05WsNXpiwjrWNyMcl6Kw5K7ttpgBi0H4mUvhK9bz\r\nAGcHEwhpSjwEcJ1Izj3J9JOECKueCdUUq6cxRI+bNZC2j27p+d3Ke6MOygjH\r\n9ofOwRqifo8RVCPpS0jtBwgN5gLfg5Xhzh0=\r\n=+iUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/density":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"15.0.0-canary.ce9523167.0","@material/touch-target":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ce9523167.0_1664483499705_0.5163457314580682","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/radio","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e8240870d002e3a96e111b3b956508a01376664","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b2310f7dc.0.tgz","fileCount":41,"integrity":"sha512-xGtBYWNgT81EVTvLccQ7lQpOUb88rwQbMk73CIV9avJBB0RbvmWZ019gcLHtY8oRKPm7XQ5dOocaO2lBEhcLmA==","signatures":[{"sig":"MEMCIDVxXeOcLFBH+3TKCvkd04bbhNEjYainuk63kaCP9Tc+Ah9X3t9sJiBbz//rVyM+gSlR4//Zay6qNy78/PH0dyln","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrujw//bdxZMD35sWVhQvTh9DP3tanqLJ/im5eq4cjC57x4BTAHYEsT\r\nYr3rFwo+9ugpLDPIVff7Lz4n8wJrymG4lxH1qrHjbCTp6POp2Ytmgr8cPCdL\r\ngNZFdeKl05d45Tqcpe5dJktxNKHbA20627wfmN83xGlpXkFvy2Gf0PSfsTev\r\nWBCysamz/Y9nsi1A/bjtI1d8Gxhj2lG0lRqfBXRtIO8rH1BwiuMwZiUTTGHj\r\nBwRL23GgSTZDYYN4DKVl+yvPMkwcMsKlqObkJmjlk6WL7EIcC5fJXWBX9Ldb\r\nQ2ieUz5a/vSM+F272OhecnkbWsW5Z+XjYHMaku20ilCIo34ODK/6IFY+JGq/\r\nYqecUNMGaHH6dKwC5jf9yIPB8IdPRjQBvWnp5niizB4U6C+VHeHqZ2IKjUDO\r\nTabDOQ06UpfmC82psZwHSqbC2JYjjV5Tx2C+xe63pC440cqKQWR5BSA2OFPq\r\nMpWPkMC8yywhBvS8x7IRt0VcQ431KuZnhRI2GvwNGbgNy/PPXSzhEtJJ/H29\r\nuhnpkquCbooO1iZLh3qq+VKG2wCFG30HWDDq3arS372v5v6Ue8dwiLMjNR1y\r\n8Nq40Fv7t9YCA265kWn381AXuncUn3FugXP7EKCEIIudFoeRjpuauUaWAXhi\r\nh3lxG8jEvqCLBrYzBBIUnoxg2vPP3COdhrc=\r\n=U9Qs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/density":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b2310f7dc.0_1664496856053_0.6250648336187843","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/radio","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cb18d762fcbfc4d601fe7fbbcab2cf6cdb2a05d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a44241e54.0.tgz","fileCount":41,"integrity":"sha512-U9C3i0FzaPsG3B7lD6249zhWxPkBZqPOJIPvwFZmHf9WvFzEOveUN2JDTeh2DR+Xxiixu0QOzmfy4soh+YEjAw==","signatures":[{"sig":"MEYCIQCri9KKReJlld9IuZJiY6HUIJvU2sKFCcitNhYO0sNeBwIhAO68aNZ8jSICjgUNb5gYYdIDs7G3gN9G7+V86s3Szwrc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0og//c562c8Kh5Tk8Pq8twQ6zS1+vK3+QK/C+dtG9GZ4pAqHFT9rb\r\nbJ4/TOexZPzISAsIzTXy8eD0hHSOwy3FdRuWmHyZIbuiqwhHHRL0AGsO+AvD\r\nc0FuxjBzAa2QvLGDFlENW4fdPn6MPSkay3fELs+Bjuu69cBKxnPesqsFq/u4\r\nLrJ4aY/dxBhEbVEtoc0x8y1RHpEf7q90EJfc6vSewQBQv2Pktw/Bq6HXRkJv\r\nwX6bunpzSjSvMdvVAWa5EAmGehgZwCQNdHgXjlZey1D47abwH+DVVIaDkVuo\r\n/a93i6DfIBy3ipC1q3HKv9JCrVxDfFKcTwUtzJNcJVKxJHz/+n9uOks8+e0P\r\nJVV5I9YerlgCZ5qx8fsztyfVq2z8illBk2f6qh4Xc/CDNKpwhHaloy+DS7Lr\r\n3AR8hfYtXM/1jRNOemwdbkHL8SEJR5nLh8v0+aHB7e1YxtWA9v/EB9HTbZzG\r\nrtlnz8Cg4mv9Jn4O0QhcNpDgk5z8wL/gL9RCo7qRUEKFFIz4n0xRozTu7vmG\r\ndRm63TAYH2DJB8LF2tjJCDfMukG5bLbDJeUTMD3uOHMKX+VRsxKj70RtUD0E\r\nOvSttA+wauK9RO16waXAUKfMoH6JPtPW70RC36L/f6ny4NwQCs6XXujVI6Ey\r\nDkLTiXK396sNZt2aTCg6G1vu+F6Jlr/tv3M=\r\n=Swhu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/density":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"15.0.0-canary.a44241e54.0","@material/touch-target":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a44241e54.0_1664526092440_0.8417925308283642","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/radio","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c808fade7c10bc557c804945fe75be0e4a90603f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0ce81e115.0.tgz","fileCount":41,"integrity":"sha512-5limyxbl1SErTy5n85AfX6NqxeCXz4MrlxP0Exo7eE4JNrVpAYQlISz0iF37IQ7Sl7gYAgNSPLyvFypzxM2cPA==","signatures":[{"sig":"MEUCIQCbVN5zkPZPBCtQKrb29I/hva2+BzjlGc5Dr24HKfvayAIgAsVGqKunuZMa/bwp0eBZFyuSLD/Q6GAUTsaK5KVC1bA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzL8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnLA//YXqFmnuhdxst/6UCUw3PhyHToykKObYjlPn1xttYhgBwQp0k\r\n0YNxA3RatspEeqOmn/X0tICnTyzIrzvw8EoOC2+oZMNy4rXm8vG98XCDfypY\r\nu+2bJa2F11bF/iTjDOjdXAIndYf0kbB6xRmaB1eLLgH4uxakBAoLfhXZA/2q\r\n+xQTqewpBSU2g5gK4S66svawF4heQ5T+oBNB9fe353ABeUkG6Bgj8Tb1iCnW\r\noKwc5GbDheH21cfw9IqgX/Z3i34HDHH4D6LO85GXgLDdXZMfPrpA0v79H+16\r\nV5pEzq46pJEDmExQ8nugptaC2BiKQrwruLCMkTbuc3bfp/TZkyyuHhbDkyfD\r\nkUYTNjEkdJKmuLcWyLTw9+0dgyjWr5ZUz7e5FJRkyjqgBNvdK1OmMBoWhc2A\r\nU08L8sTlodOcoNf+6pJ/HjbUvpQhTfAYY15/KdEYpc2k9kILjUbAiKHrCD//\r\n2yTjQFxFWLDyz09fdCCkHEeMmkXW5cDmqwSW1QcRnlB+NYX4H8kFgJL/UlpJ\r\nGflkeWH6HcJecWQPU9QIiseen8fgd9jZl1neepd3DwiZEMpFgjEg+b9HPuBv\r\ndj/UDxVTCk3Z+3Z6Hhob2yLfH5B2YvrxBw7ZL1kwRw/zrvokf+KdYq04Ejhc\r\ntuN+N8PWzQW9EHwdeq1vqvP3wyejR8mq5a0=\r\n=hCNB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/density":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"15.0.0-canary.0ce81e115.0","@material/touch-target":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0ce81e115.0_1664561916688_0.8173911889636944","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/radio","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"609f4ea02a80f119a91d428e908c0fc4af0c8127","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":41,"integrity":"sha512-vKEEc8E0dGFAKBJws2RdeGCeK3uNG333e0llMJS8txoxymds6I1rxFATpVbu+0X+rN2OcIs4E88/ZW7bdB44Nw==","signatures":[{"sig":"MEQCIG1+g5YuwUVjuZHbo6IumLGXz1QotBRHScXxROLlAvA4AiAIj36hAAAllmMjhBNRidGEIoAlS0Xd9wqCAW0l5HYWHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGs2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptYg/+OeL//VbSuASnaaVpjjOv4Wg8AKBdZ7/bnaqVGpA927dNijEQ\r\nKm/W6aHFYG4F/uw60g+ENJTrTdloF5QrnZfQMXlGgDxS68776rKcVPO3ywm1\r\na3jUAZSqjz8S96V6yeQ3lV7qgi1xLfgKeg30gFZadjV94lgvkBctvFqgfe0F\r\nmFK6tGw1khRERsLBUfR27Uchs2vmk+UWAAAtfY1H6lk6ZxCQTJYp7pXV9uxN\r\n5XdHc67QWfS19iSgw/07ilYTJl4SesUTB+9XexLuO5BK48SQMCKYXkV9C6sN\r\niNpAcFpkyWWGoy03NYElEhGYGeP98j3i2/6ifxGKY9eKo+FlNT1IqdOPz52k\r\n92aMrkrGjnO7CkXrLcQO5MhprveIfWaScOobE5yzyfwESqhjAgw0UnuY7UGK\r\nuG73kSrElLNwgN23iQEnMDJat9i6YnBTNNuDlJ8erwUQlLXt/NJEy6EwEbNb\r\n2hcyK26TnwCYhtL1i0aLkCjreFDTCKMzOACRysIvfTiELUgNZreDzdA24Juk\r\n+Sd4cQW21QorRKbpprbBWyg7KFT3F6+Jnep1k3pnStOu5meKBe4KUpKFuFz/\r\ngaGZl0GK1fJtai2v+sJq+HX6Lr2TnZr6hzwxKTL3aw1dwsFl8c4RRXPv7keW\r\nlnAtg3dUrxwZ8BANORiIa7zuXR5X9JywkmQ=\r\n=nSNm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/density":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3cc30f6ad.0_1664903989766_0.17989651084920966","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/radio","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"683ba467b7461237fcfee8e8aac84df9c1205d30","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d9cf98e60.0.tgz","fileCount":41,"integrity":"sha512-MqBPJogqZlJ3hVHJ95/z0FkqjItLD4HA+NDwDfjOKwjrk5KaqHHhGRg7i7c8bBpjUyr8FRvXXaoyi79IHLnc5Q==","signatures":[{"sig":"MEUCIQCwOkqqJs0CALOOjQ7OwJ3AYd7NxSebs++u9IsXiE8FnAIgHuWJcVknrfXnVH8HVrWLqiDOCPnEkT+83e5Yj6zw/7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos3hAAm11qWYPKh1YJ5/Yddz4gVCM7CoT4c/tFxfoFjIcYamhpAuG7\r\n/OIJiku5V+rwuddWybkPJpaPm3+QITqbrx8XaFNSdGWcgZRwD4gebYjFkpbc\r\nF9zsZLWHEEK/hBDMkSx7yV4qY2qdAehLf+45XDCAfg5cuQuuAX2EpFPNAD2t\r\nvhNYj1XOumpvEOBF5h5nCd6eRYhLRYhqbc+h4sHEL9HRnP16BezUPRqrpetX\r\nibzb61oXlIRSjNXZkiLfnvJxKa+uBXS/r55SWTzwWAtN/7685j4Bw2Z8qzFs\r\nSKkh6jTU4SZsUcfnNzYNobZbYh33L96+9TU4JLQN8DQEEdmYc/qQFb36rOU0\r\nTbaZNv4PEItZe5rRswL4maE9LfmXDmyNqIDZXAdtQBzceY+rUaNumUYCLHl1\r\nBib3vdYxrYdBx4TjFEdGujesnFw55LKo30lxQAELjd/z66wcNM3EmXr0VwKO\r\nQC/K4rrxS4Z+BPo3R5Es7s0C1+gI8oEyrjIybcfNCKOhMq1PVSvIaT6HhGFs\r\nJNq6Cpn+zUeK0of1+r8OX+gdqqRLj9AThiRUnA81PefWRSJJSPBIHDGNJN+v\r\ntRYjwTAibDrjYyRPhvOeo+DJ9EywF2GMPDOswR7ptvV+0JHFLj4dCP/lvrNV\r\nhk0DV0KAaGlTAksnrRSpJG9GUWjkErDniw8=\r\n=9Edy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/density":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d9cf98e60.0_1664910249950_0.11979742048444564","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/radio","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a55cbd41965a7bf252835ec94b6912e8473b319b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d71935c8b.0.tgz","fileCount":41,"integrity":"sha512-bwCwXP7pyE88oQfMZmZ7UvOFGEL00u3dgVJQ1ALL6qiID7IzyU+DIhVki9/Bv75x243uIvHFD+1ltj4KPAQ2Vw==","signatures":[{"sig":"MEUCIQCuW3U6jm+oXRH7pDr2OPdlgrf5QVWE0dS5X/hmJUwHQAIgMGSVuVBR+WgA2Dlm/j9vKlnGqWN0baCLDME9/yq3fnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW1Q//YzJa48LRSscyz3K3VeR0WZU5dYUHUtP8dEWqQJCYIkY99zz4\r\n08fQTXzg9xyE5metpbW9mrJ7r/f2X4gacJUifLDB23K6uDnbpmGpce/RJMi/\r\nHCQ2t+nKUzrT89iii/3j3QChWsQlSvRr1/XjzhLru9uT7rtX+3LBCmQiDBiv\r\ndDKUa19oLnVGW24VyLrs5+gyLh8CDpB607OSlQBz4nYivG8UOq/APleCTbcd\r\nATU07UBKl0ReNclmqd5VPTgzx8m6rytmPhcGyuHJFIWRIJn1UCcFWBf2O4Mn\r\newFmtRUTLCVRhR1T9sC3AKM5KR5f/a9U0nfOEnuq6zkASe74rKVHUx2xkcu1\r\nmj7O0miJLTF09v2H93pz2k8I2x4mLMirSpxxFn8uchH9YEkkAbTDS9q1hped\r\nvsm5ERVmBhozoMKvrUblJvgl59XFkpNtC1FELFsAj120w/mdf6gldlJr9gJo\r\nJNZtGogEMesXcf4y/x2sUr3h6Qyw62DT9QuyVr6bNDObS7jBfc6wdCIg6Sn1\r\nVPAQJB972LKjTMvMkhdIH+OG/qiMpY5EMEvsQdMEyZqXBxZEHQ3o5zUX+mCD\r\nOwSJIxJa9nJeSvGY/JsbNN2RO1x3+lPWfe2BgRkjrQOVXrSM5EqC3AZQrYkM\r\nnouXqZD1m6Y9TtzIGZ865jNgNAqALXLhU1E=\r\n=PdJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/density":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"15.0.0-canary.d71935c8b.0","@material/touch-target":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d71935c8b.0_1665044118603_0.921095420570786","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/radio","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d2b1a91472fd3dd8eeb406939c6eb875963a6cb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.49c56a25d.0.tgz","fileCount":41,"integrity":"sha512-Ndc0j3dAomu46JT82gazVnqpLylkdpINQ3LoCVKiR1oorvJAVAVH0tFEE2QMhLuikPy2mxRgqiba+fMDGQ3y4Q==","signatures":[{"sig":"MEUCIB+ieI0suhptL0gmBAWjal86aWeWqxIBUsgWE70bGnWSAiEAzS4Gu2EBqHBCOc5IedNg4DmTtQSGAuU71ULoIVzWC7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC1Q//UsRnSNO808O057og8TGpJI5ko8PdBlL2WqfDgD8UsxygQVsm\r\nceVvpSPdNqv99nRykTAAmoNDmxjhrU3NDDZPywM92E8Q9y9i4vaof4nCe6dO\r\n7bGWalVkNFY1bCU2DH471BSC8Dt23T7IXzHZmgfyMRD5J0optsyvnunqzCL2\r\nJY88/dy1A44YGJvoU/YuSDGpDDD8sd+t3YMO+aH34QHR4ScCulmQibBGSkTp\r\nKqvBrinezeZXRYHXnMh1E1C2C7O/aD/Lb4KvXjvgJezcQEUSmV7XAMW94bWm\r\nGRbRILNjRmPaEInTyWpV0SqzjhVtTW7HaGCEkps0gU3z8ePRcHM4+VZmhNht\r\nR0gJfugUdY58hyMH6DjEX4v/vcWFC89P6U7MWXsqsW5gsR2SNZ9mh5MjT0V7\r\nocmz+2Ezok2guRQ2M8Z4Ub17t4k56coxb8MPlk+jFBP5WiOAVnEeVdD31Yv5\r\nCT5y1k0e31QtsyOUbWaBPFp9FOIXJUhf/Y7hJiKVSX4RjHwkK+gh76SfIuJE\r\ndpTYIULwH0X2El4BMjXoH8nH7lroLBB8q/09dJJWQ07kCEVi4ymWxZ93scBA\r\n5VS8yx/cKW8VONbb4lXDT4r954obnWGtRIxNz4DdF7g98ikPZtd+CmX163Gg\r\nZJKsTVJ3LBAf80acHiispR+SuI2+dWO283c=\r\n=f+hb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/density":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"15.0.0-canary.49c56a25d.0","@material/touch-target":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.49c56a25d.0_1665082281698_0.16492169903715626","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/radio","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f191ffeb50dd2feb2966a3ea29e861db0f4af0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.07acddef3.0.tgz","fileCount":41,"integrity":"sha512-VmSSXyai+aSJWtrgi42H1tG+UVuB32eq5dHxCcSmIuDybCxpnPOKQXLzGj8O3zNhrrxBV4LH61NaJ8ThwUuLSA==","signatures":[{"sig":"MEQCIGxOrHDkhaQg6vvH/U4DL04D+cGEyfVldzq5COmRmE4HAiBpbeU/sXhA3JFAEnrOERyNy5mXix3lXTuG04wYNQg1xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJxCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCEQ//Y8tdcGA92lnuaCCNJUd+Rtcwyiq91fY3OiBpTIMzDvINbTvM\r\nBpX5iVTRIRfJ8dpIFC+NuQD0NPepL4m5C+Rpcp9dxoE0ju6m/gb5CnXBVgki\r\nGbM42NEL+ToFyU7pw1B0jq7UAZZbdur4uNUp8qjtiE+rc931bAf6gok5tBcf\r\n5T2M91ugI4tmTMZgvoG4UkkuZH88jMA0KbGZZoVlC+4wdWSlurDUxEetBrkJ\r\nCbW9PdE4KlJmTE1p/JCz3WevN+UG1qZy7neMK2iMyXuiwXNUqlTnkUc3QOk0\r\nnTRBjNdVWAfEMS/jWNiCJChbUFueDT6yA7tIrUY8SccsWKS52+GAgNvXCsjr\r\nW0dQH/rRWeogLZbaz4mekrY/FNcsTqwU/6Ni4la/4RWFXqMuDs09IJxv8s+Q\r\nlTxkHPC2/1BEBXicyfKJF/ND8rplzOkWCKI8abFuwh8Niq+IQb08vNbZO0Ee\r\n432IhD1GO2BIYxttJL6yuxUiZaWENmMRDV0fIAsyn6Q/qjccYdNi+uBfGf4e\r\nalxUyngbzZmHhh3TMY12Db4UO5GnegEOq2+Xs231TWn1pN0mN6++2Fs20NdX\r\nOTnhNEx/L1NXN3PoRt9czUPo9Wh2AH+iUK02QXFbAn9e/h9piYKOef81ieW+\r\nMj156teA39pn4hxIr41LvX2YS0L/rhhLA6w=\r\n=2wZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/density":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"15.0.0-canary.07acddef3.0","@material/touch-target":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.07acddef3.0_1665178690602_0.675450771036995","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/radio","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"384b4b23bab582e693d3c86dd32ddd5c4a38d59b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":41,"integrity":"sha512-Zv436SLL43Tac/nqouxyZ2Nq12Yxa6Uax9tuQLhMLmjNTJzsOnapBV0agGiz9jlABSc0NIAikG2NTbJUwsjutw==","signatures":[{"sig":"MEUCIQD+YUS8JR20qisQiR1N6QBwvpu/h+tnLyv6LoR2BJ3//gIgd7KC/+ZjwboolMOxtjZoTM/AaXJLCYjCY4MIxml9+mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSkw/+LPnH0N4CRes+sNJV+QEqr5rIIAMIg83sR9Z/mVPtEs+lnAQn\r\njxqDjb2X8H4kurm4W5J2f8OD11i4IHTn/VW1YgHE07vOjc+q5+sAHRVz1E9p\r\nU4gQB52DlvudJP6DWGkg04ii1xbNRiNzD0DZSs771oA5NdakG0OZQ7UrOzVE\r\n90vqU7OJY5drJA/aLDbKAy5mC1H0ghPBghGatPk7dMiryvLS5FWIUrL8Xp1u\r\nyzySnvW8WsL8kVWbb9Pol2IjQZB6GWTZP4Vji19tep2QGm6nyxFqm81Hn3JC\r\nxVWzBqm+o5frilwLvZotQKj+eiopnAHJD+Au5SXoylhFqQAZ9PtnKHhm24ux\r\nJhJ+v7kItHieSNHBKLOltCZBGThyQjC7VpJF9Tr8XzsjeAA3kPRWKCwNrkvn\r\n12C2LJlfgnqzM6aWuD2SwfyMy3G6r2TtVJwPzbUChhKFCnJko/SCEPuX1oWL\r\nQmkD6FMgkgQvuI6MZShi6QbxuH/buhKCp0SVVKFIllDdJz+EWHTXs49H4S+a\r\ni+qo/Ld9pkkULhBM8pfQkK3oy71VTRfpycTPJwWwQgFbmCjstsSp+kJj2sy/\r\nEL5E6XV3r+03PfX5cSfnIEqDg/sY6t5EA+4yj//UZnpePhZ26GrxCaIjT0f1\r\nZTbgMK0c6RGiHlofbH4z9rek6/1u0FWjZKM=\r\n=0l6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/density":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1c74eb2c0.0_1665179746078_0.6506539408950494","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/radio","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0080abdc9abe35143157ddf74999cc122f8af39","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.dadfb713e.0.tgz","fileCount":41,"integrity":"sha512-iThRr3NCkUNl2wNcY2cetjwVD17ddsmAEHxz9j1OloW+qCs1oyXYPfNzMjWSl/8evyCUfnRyEkeZ1j2aSmnixQ==","signatures":[{"sig":"MEUCIDgP7K18mufG7+tPC/DDZ5Ni20LCTQtFUJ0vwhuCymD1AiEAmkQWd5jwkFSVpB5yV+rXibyFaa34I0uXVd6XC7PMoGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpahhAAkIZF4oOD8w6+8MCq3UDMir0nGfDi1k9LspDqET6nF2o9uuk4\r\nAy57uANl0mpYjHgJxJ+87mbKlV7QLBRK/1HWqu+7c/3RrizfPNhr4lR9+jaO\r\n1zce1UJCZPYk1lYMPX3NDZh7uNhjKgz+GTL9VugCY463EQvoGcsHWDcipY3K\r\ncTYezTurNk1SNh6tMlCep81GZFs4ZECuKOWiQhnKs1zv1pRMjtU3F56NuJdl\r\n0vse0QoOnGh474J51Q/gtoxP28mN25oJbtRTB6DfGmek2Q19btfusx+jSeim\r\nJAERFPbHGF0q+Gs1zrk8PLRPv4g4Wzm3cfuItYWTbvluSFs2E+2L4C5b8yHN\r\n8moOTOHkK/AL226hgIyFZKtr2IteEINgjoXnrYkccXGB9S2ltyr7HSxtHQR/\r\nmOtzrxH5cd37FYrQkrFIhjwFUSiDmtm1/ifDJ/q1qqotdEaOVU3ryZinWYJW\r\nnCeRnElicz463oifJbF0Dlb7I68Sl7ThfPOK6idVHDefpfXOYurEOLSN3PdZ\r\nDhBawKxYMF7OwLl0nTRKupOskZ/XSyHNLwKqOWrvA+2WhFcc3QZFto00VbGJ\r\ne4OEbzQCMY5yPD/Mk9UTGeaRj1jMiOvWcySPg7yrGhLtDLhKM60kKOVS44OB\r\nZh7X0Y6jh9l6cSav0RXhvMjRq4RoV6xuh9M=\r\n=ii32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/density":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"15.0.0-canary.dadfb713e.0","@material/touch-target":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.dadfb713e.0_1665205582858_0.9959164642456346","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/radio","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d14dc0b3ab147c22cf566a05191e3ebccc721f52","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.395f1ce61.0.tgz","fileCount":41,"integrity":"sha512-RXIuUTrsr9u4nQBTJYm2mzYnYo0soPNvmwYz2dW/O2c0jdVVnrOxM0eyONTwPi98EShjUYB+eZX9AiXp8a20mA==","signatures":[{"sig":"MEYCIQDnUwNS9n45P7l0dAbQRxp04ri+68xG6PvKESW1xUzkAAIhAPTR8iE3Kawg8vdElDCI9SnJPfkJ3rzfz0RmyB7vigvj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH7BAAm75SiTQUylBcZKXyDwauNcgo6O1ZcNX43eiDbmUOvT4I9FyI\r\ng3daDiscgJ0vPxaQ70v+rykMb4ST+mG49PSUklIFJC07CvEkQY+mmlKEehhD\r\nGfwBJpldaDmQNgMsPuJrwCQaBqgUKQrzRxE5exykD185uSNFv7lbsg8NIrHP\r\ngJz6I8ksznIHIBNsHU7xF7bEoJQPzGhaLDEf1QmFLGVSz00l8ROkP0NvUtPd\r\nyslneh37sQAf6hEWg6m54n/+MQ2cyUTYR2L01PlA3hr75ESsuw2sFsDKh+nq\r\nPLRJre2GizVbORKWuI+FDqB29KhYEm+HUiMLKgt90F8f8qR3W5ks/mUFZd1k\r\nrAt/Kc9LrzcP2c8VmVh/Irae4IplNZALI/B5O9nKbkQmghm8XqqrJBLTioez\r\n+nZ4S6Wn53VbH+R/8q8fVty771XEdKqLZofrZWZDhortW9/b0Dw90TiLPc2s\r\n0mh2W2fBebW5tj0OTBWCski5xPWnvEhchfDkyTmLp/8PM15dzURTEY6dqtRE\r\nNg9oqKBuSRmTBHZMQkxFL73wJPqHrZV90T9TUgvkhjtUxOJoELMhG+eZNClb\r\nZfRZfuTqOqTSnjrChtJOoJiNH0T8qradE5m1OkMsMupENwKKh+RTszTaaUo4\r\neom4qNnSEhmp5FA7rJUv6BYqHiGsiIxjWGU=\r\n=II2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/density":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"15.0.0-canary.395f1ce61.0","@material/touch-target":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.395f1ce61.0_1665205703746_0.8517929215055355","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/radio","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69ea983174dbb4bab8257ef8cf4e9bbd9b9d594b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e741b5c82.0.tgz","fileCount":41,"integrity":"sha512-Uv7qNx71hE0IzfPyZSVT1XG++udjM/awrIPoU4P5njdZ+ol8FkdhrKNpRcTcLC5w/pLl39Tml227xWUcSsWMTw==","signatures":[{"sig":"MEUCIQCUh+pQE2QcTdAfTakgVUEBZ+eAMyqso7n4/0VEOpmUdgIgWo3j/qAz87v9TGjF70dsnh5rRs7L2hhPxHuLCLMYkqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFijACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfThAAlqPqKXx9S+xp+9L8T8Ne0YdTjRcda4zhB0FtdkRTs5Ick5SI\r\nXLnauF63yk8xCzLIfRvhX0Pd6qz1xFSc+HeavuCJKw6cOanTD/I/pc3fxT3e\r\nsQU2N/OY1R6azgTJcF/8XakBmMi5ONp6JsQPXmbIUDdVvLzuJWv/mKM4YhGb\r\nPnrpLd3zIXLVzH4/ebIhQlqefH6OYvrg0ncnHjTzpRjMKeyxZdJMzltpwJFu\r\nPd5fTZvh24bN2HjCh1GI1zF3eQ+YDBNS57c3lhsJCZHJJrBX6Xp02FsAnMmt\r\nJ89WG7BX5wmuIAWx4m89IXv3TPjfXTX0EIlXQvvG0dl71RM10AX6t/xh2UTg\r\nbluWv+hxkU9ELV7mqMau/7vbSTrMdn31QkaW5swy/7nA2H4GKl3/UyhQPUWd\r\nwhGTp/HMqcCBKqRUBMT7dq8nKzxT7/FCKkNaEFS84gOZe0po8ckwpFTtBkkN\r\nJdl4Swc/GFh1fXX5m1LO4hNXNraTC1LoyvhM7kW10UqyUwnlavi6j9fIrRTv\r\nGOnTZGFcpLoNLd9tsKLIeOjithyv7vY0Kp2fFIbDKjt75xDqu8mMlWoPrt6y\r\nIPoK/Ifa2iJFGYFrmpNHit0msvcUsTaYN55txY7kkU9n0sCA58Z4ZhoP/imi\r\n/SXf+lCB3/4eS+fS6mkUm2ewXuuCxM/cfQs=\r\n=XKsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/density":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"15.0.0-canary.e741b5c82.0","@material/touch-target":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e741b5c82.0_1665423522987_0.6892324471389115","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/radio","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1950724a70b728855e77e065083573bdad0c2ceb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.582f3cc1c.0.tgz","fileCount":41,"integrity":"sha512-LA7Y0uwyPfM5CAVS13DPpiUl2GCu3wpKPXM4RqL6ASc9gKRIaM2p0G674c0e1maeCdiWUKSOYjSk5jJ08PTaCg==","signatures":[{"sig":"MEYCIQC3chX/VIVSen3E+VqVdGUYAHD+cGk/7Z/vSlUvAHDHtQIhAL82cCM5h1vMnVd7D0W03ibEoIcZg2femZYpi1gH12rR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptzw//bt+Yr9Ptaknz6rFe488sK7PumQs+riFqAr7XLBVISz6w9n/U\r\ncnJlVwjj1EBqqu88k6gvp0+U1b05+YVf0EUPasvK7voe+kg206wkElS1HDMd\r\njAcw27VA26CJTmTM5Oi6KaruzeiDQyHh+iggvec1aNXCaFslxHDiOtoxQgMg\r\n4RTjlp17pvPCUXpaCtKZ4Dr0qewqMoBL4seQUVSzCUSEA3DTv8dIEPn4pUny\r\nipW1xwEoJm2fykXScEfL6WyYm0bAAnIOOx7guuAs0/V0pG4CnOhZO8dJNbhg\r\nor+NA1gQ4ygIj+99Apy07pbkCBZgKnXAV6kcYTO4e0CLN/9gQqUkqTjIcsyS\r\n+pGaSBLkJByGrusFiZysGQLvroYIiA0TdoRdNwohOeYpSMBnx4wnRM42YiZC\r\n9n/wvwFgPLSDKKGvpnWgb5d+Y4ZybfywxBRpeLCoec4VF/l8qjRHaAI70jlV\r\nxxaznYPehUONs7DfNremdBHDlNz5wG9e5bIVR0rZ93ArRWZJpIIuZr2JEw8j\r\nkAI8tQa+DKv4HDkWDE87Cc+iA0CHe/NHm8I4YcIBGTGhDzzj/tohEw+mOeSz\r\niHKil67FzfxS13hCVLpMsPmUULJxMQ/t8cv2ZRDhGCInZl/YCA802m8DSpr/\r\n2op+lPY4LRre6RAD2P1zBGz+PP6ISVUKYQY=\r\n=paw7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/density":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.582f3cc1c.0_1665463780826_0.395205321451249","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/radio","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34b2e7c795ee38fa92c215820af289c7d013c29b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":41,"integrity":"sha512-hHccs8bCfgybZCf5j8+r8hvA5xpnsnvJojaWMXbR5dJ69zmhfHZ/7x0r4qlRIVMui6LTeV7CIAdk349htxaokg==","signatures":[{"sig":"MEUCIEjbnBvTIKF8mQI6EsZEVWlYCsRgrM70v90+vfsD95VZAiEA50buxJdSA0vMYU6lg8XtgCua5eVYnszkftIp3idtfHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBog/9Fbuh85BnWIoUjIvw1cwontshblHMpQJtzEvvBD5FvFGzxMlT\r\nTYD/17TgjzkPFiSHJJCNjjSF4nMjGeNwm9568lbKkNQJBWZNBaZsPcAYUyqQ\r\nr+hOnwZmUblxmp0SBMbXlQ817kAcZ5lB62H6IjM/41Eb1g7egYv9FNQ9xyq0\r\nFewyO2qUN6yay7JIFIYGJb/o/1jD5JuWO2+GeA7rnGp9vgcZTzG8GGl2U9j2\r\nyOjOnGY3JlPkCQw/YMua2uM05sl84hl1JleoaNxE7SzGzvWkyHMrg8Oz90Gm\r\nod0p5ypRYUviK3INGtz6ObHOkKlmcfyVpGkJ6BEXHzyi46LadAt9yjFtcq3g\r\nfrxFgxbc/B6xzSoRBh/Aj9rOh1xoXgqDQeNL/NBBYSJhj4eIAlLi1VpQM5BO\r\nDs4OlNqkbDjXg6VhR1uweAoHNNAfnnKlhVGFzXfyaaAw00ohcC4MNWgJCCvL\r\ngdCfNWreRvK+Z8BUgmHdS/52bhVcm+eCKWz/HxqDnQMoamY/8rIAayMGAkTX\r\naVGphPhy1b53gnevrxl26+lKB7J+hMN2+2Bf7ZwzDRM0IeWqdWEStPZZeTDD\r\nhi/nr0LJFgofstTQGXGR7YMnAsFBG7jWRpKanzOJgkkJhLdyPhze3R98NwjC\r\nsTyOiijJt7edem7+BPyGTIZSEPeLSO2Rrh4=\r\n=NLov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/density":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b1a6e3e88.0_1665576177257_0.00990402212404029","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/radio","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb73b67eaba20f64443c2766f0a214fe0c2f445","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":41,"integrity":"sha512-Mab1iAcQv6WsQmvQNex5pkZh0VR+o8fhWyXcyN+BlU9L8toXdxAifv4itGwjeghOT0ZDOfX+9Qgl/+tOVoN4ig==","signatures":[{"sig":"MEYCIQCskp5f8jWuqRIjt9qGNDp/oVu7OBaN8nbOl+l9FSXicgIhANxY8iCv7Nfy7BhYK3EKfXc0DYOoZdUPFXvBeddB08X6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Ng/+LSDYBZwlw4jPNVGxNtGQtX0jWhjYwylaZbn2Tzz4hJE6F24O\r\nvTtTvzu5ln3NOrFv9ZNgVH7vxPGGebuHqmrynqoTnWpthSSu/Fcm+BeTDMnD\r\nDl8mM+DIiTiaF3vhVakkxa1lBxO6mPxVqnryCrbqgX9JnHjhNH1Wl/7LLt0O\r\nYNgl2Ga5bp8OFA3PID07tkOcSCs5iUgouuLpvugBZd2dcuCV5wUZwKKsLOtT\r\nQLgWT+8ty+amTuQpzsN9CwfMV4Fxe+UZsZCLDGxIqXQTHHNjthHoy3YqkloK\r\ngkMKnk/PfeKJ/Czh1yJHMgxeByWl+7LK+cPlyBvsFxBSWUBxiM4oeuSx4FDZ\r\nCBL/a9l/+LzlS+sqJbFocuEXD6BijK3lN+Oiuh5SjNN0V0dyS3gS7q1/fHwp\r\nYUgcGilXtqPOwVnFMRpUQudKOe0wOOKCXSypxZoZL58aZqk3mENndzyVVbgU\r\n6iCC0TDjh4wwIWXhCrVFKdzW2pfZLPj9zcrw/DC5I9qc+GL9eDtaI9HmslKm\r\n/yKtwR0hXi2lNATfWy5w0iz8zaoJhoTGSZYcIKFoRgkUn2PhMXmbCbXqqpQn\r\nFgyYA/52Roi13pS4239fTA6hhXa+poHtyaVwoSULcq5U+oUCyVb5CDr23Z6m\r\nTv4g0vGlb33T9MIuDs+qi+d9QIFtB2v2gcI=\r\n=7Cqa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/density":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c9b1a31e4.0_1665593950770_0.21681172044920838","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/radio","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4915d24175aa05ac7374fb642d27e9897a54743","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":41,"integrity":"sha512-nVoFZI+2MxCI3btCFBvX5O3OVNHDcYaI/Ojgp6ueq0Tj4mVVkrw/NNSnkjNhUKiNOdAmSpryXwGZx8CtJaJnZQ==","signatures":[{"sig":"MEQCIC5vQl2CQifyE4xtRAXzSvkJAe0LTC6Lk0FQEC4o5AftAiAFsDUKOF8EVPXYo6sjYmH9RD5tuZ4jab58VLp7+hEsOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7xw//Q0df+wiy1DsIRa8cGTQG+GwG1OdN7Woqgj02Q1q++z3ugw3j\r\nHPEWnTzrqL8Wx+E1WKU/aba1zrUCwKFXd2y0pmL9rTykYm4HUpk4cDcBewTi\r\n/qa+uRGTCmKtrAkhn1kXfYLJEbRxvQhzjn6PxCAmsRi1ypSJKSftZHcm8/7C\r\nWR9Mke1WBMCYE0bP4u9+aG/APluNDD4thKre0ln/d05EZPI8egcPa3vh2dJV\r\ncog8/ofe2d9EAXNbpTSkUth/MC9nNwLqlEzIP4n2F8Ay7j5sryjKgsEeN3+O\r\ne2Hn4vPGVdQUpg+OhJYgv1HBaHf1ZIL/ifHKQfKN8qVmODuSMrkeWNg+uWxZ\r\nMqhARzNj7OKHycGStHF8ntfw8+47Dv9jWwG/7jht//NGsNrkjFH/jmu2Y3Bu\r\n4CmR9PwTyYBH0Cx+HB79cOQ2+HGb/OXoDumOwJWstRnnwO4Q3XuAaT1Dg8p7\r\nLJCv4+bNuw9EL79NNEXiT+5GdOTkvY+TG+b1pbgT27ZkVSuCHtfRUq26ejNo\r\nSkJcoALALY1xfG4WniSbb4yTyXxlxSpkeUqbDnlN4Gxlq75lXLK0uRnC+CUy\r\nuexNOVVq3mMRYUUq6NwA7M1/dI1XBTeP9EQVT+AhFMsNL5VH/HP6OWlu5J5g\r\niIKEI0Lo7+lemaC9fX9F+UrUK4b2UoV/wJA=\r\n=U/T7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/density":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.13e9b0d1f.0_1665602512752_0.6423959378067989","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/radio","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd21109be5a5d38973ee9a19cef3db86e8f03d8c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1dc797e7f.0.tgz","fileCount":41,"integrity":"sha512-1voO21SQLv1URb2B7DquneuRfkyhz5M8NQ5cmoiPg9vl9Fnf4zENGZyW3h8+leOximhkmPMUJjwlPpoavGxbmw==","signatures":[{"sig":"MEUCIAHHz7gbVtvuXRXG9bYM4ftEsvDRkTILP/NjNJoijhGkAiEAoUex6cSqusAMNyj3O/YDVxYJTZ4Rrp2blda2u38uU3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9exAAiBIzxhMRZvsncN066Basb6Mzm2GlxDugOULF7CMroyloIVBK\r\n5O2zAGi1Lhf82qmrpov1nM3erq7TIOUhFb2Ery16xgg9NOyG9H3GLI1NoyNo\r\noNvnvysMhnZuOuLKgUHh0IpuVlu4jNjmLT6gfEKb1JoJ1cBeNF0QShpRK14W\r\nePqfzYB6zntd6t0g2S+mrsBb6oxspylocOHs6Ps/oICikGGa+izxzOGiBYAG\r\niV+sc4rmBtgGSK0Uj4CMwVv70miHRrvH8EMYGXvw/gvPhGwlFSpvqaPR60H5\r\nd98XU/3xMt+Na95/HGTLkreAism5Yn42vLVXIqxR3pscCJiPednnJXKvRecE\r\nrLEu0QCNrVrIJqYq5JM3+SVss7x4aJcEmFXLbf+Qb8m01BgSg5OE/hDx/wYO\r\n6ISIgAoQo4uMpcvV335OKO4C45BFm0fj7BTbMUtts0sKHqB1KGcE9w5Wh1BE\r\nHdRmafp7mgpjGFjx50bAqcmvbkmFpVsym7p3WXcb82FQv01txKrtFZ7GMdKr\r\ntFHSMNrpOXJBmv10QYcUb5TVTvoZ8yduGjQrBOr7fv19TIMLm3Vhl1I/nqAf\r\nDjKFoHBT1QAy7fy8BSIQiG/M7j7QYhM8aovavCV2CMlWj1/OuX4nkGB0ZPyr\r\nSZgT/jjAzqziOBsouUksrej4wZUEk5V9iow=\r\n=5gI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/density":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1dc797e7f.0_1665740530210_0.5856601073597054","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/radio","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be7938f08c1cc6ba194c50f9f3931d9072833dcb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ed4009397.0.tgz","fileCount":41,"integrity":"sha512-1R1ORfLsFUIAGJElY0w2LY+0JgzzYUjJqjOCe2MTUUquMtmKTzDcGBjjbGnxq62M0hLP8W3FYktlghLio0pZfA==","signatures":[{"sig":"MEYCIQCbV0xRAGMw4PFH185q3Po74kPN2tu8WAQoiRwNJ4yYkAIhAPxTO1k6Z8J68wEQ0DNMmYnh0J07kyrLfm0g//4vWrro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM3xAAgBFbT/6K82XUVrxoAxzBeViEOvjV7F3mKGWpRrSDgVnuIVwO\r\nWW/HPwibIJzdDS6nbr+FoF8vO7u+z8Gmm7O/B4x3aJqaHWdX7tETNKHc4Lu4\r\nMvHmLrkxNaJiz8y8IsukHwoJos4WTVhu3ChqSI3Erb64PTKnWXffN1AvoBV7\r\nGr0adE3apn4vfr+EW2eVN+LeF6MhO7vcP3fFl4WgPzq39sxAfY9yCLm1xRiX\r\nlZmqRVicVHDK7F6W9rHU0Y47voqYoqmF+njJe9WlM9imevNw3W+M8QL7Cb+W\r\nk1u5e8rPOE13nK8QYLWY8+xutaWl4ms6jxwJjDCa+Sdl2fbMOJN6Orv+Pg0z\r\nZgbZWP7pcnGwgBgIuU5UpAsWdTWQMqNZ50BUXe387uWMDPQWkvx13u0cbFzj\r\nHAaaPUbauOtlzvJOC9tSIhHdkUePj7IlPlPdlr9KatQPPL0uq+DkPwR8MrAf\r\nqD10m0OmwzvpRPrQQg1CHmJltCEVpPkozb6qtgXerzxSBO1kB6Lxqu9O4VMF\r\nEURT1HeAg297MgleSxDwH4aD2pPq7TNuI9GpteLNpNS2JnVa/60wQSvRhCYt\r\nQoRos6qKUa/E6kds2f4iKU7oF8Ue6QjM77npiCU/bwUlNDAsouU3MY7KChp7\r\nOrgeUA+YCOQvKzIOunGgMDK0CokPCgLLm24=\r\n=PPor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/density":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"15.0.0-canary.ed4009397.0","@material/touch-target":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ed4009397.0_1665766308963_0.0793781795270494","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/radio","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224717aaa97552b3765834505029538435f76c4f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.95ef196bc.0.tgz","fileCount":41,"integrity":"sha512-JE6+1gmY/H+C0NXVEDZjI0eqqEbM5zYlsGRfBOIIljnkVreHmwl5Az+A/OzVIK5F7t/fvnA8CxROa9VqSkwkww==","signatures":[{"sig":"MEQCICH8yN55b0WWM6yt7lWdo1ecyg//WARfuRfNVC3sOaJkAiAPSCOpKsMkySc1vMPvybki5O2KPJ8z/0sTWLbAQT28jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgRA/+N29kzt8olpoFSlzDHbnBe8WivJk55jNrMPq2tWzo6ORTLlsb\r\nIoKLq/uODaqnzc1p0s7IVgEUK/LIIZndNPxj4IKtT7vZ9Lgs1FhCsDnDyM9b\r\nG+pIFPInVG7ixR1NfYzyQBlxlwrbtag86xf2uaeXBbJyZGCDx84o8x7LYhlC\r\nOmQuXnydGEawYgc4sd+NDo5HKpJYtnYobxm2chx2i78W81eYqVHKyHAnJTJs\r\nuMbpUeWBSNsHg3D6tkq4G8UrQUTCiUbS+o7g+CRB6DPqCUSUPH22vrR0W9vy\r\no/3h84JpM5knGPhz5USXUK2aU7s2zavVCrn/gXr/RjbStkXKGKuHQBm0juAH\r\nilDmMJMzZgw9B2UsFMWZr8DxeiktG3WPhcctY7GvzwDatk8nrMeH4OWYx6lN\r\nuDU5Wix3Kqn6X7YTz3iIJn+LQ+mq1RWUO5dXVpRptlR+SX8vq7iVY7cH812e\r\n/Dy2FN7vheE4AtLsi63EBJNMUO5ZYf1OprRss1f2r0vG0j23ca0EGoU86B/T\r\nJVx+ujfcV6BD4CV5DnQamijy6Dl97Nyp0hVSrJLugwYsj+9lRvlHQetu01w2\r\nVhCDlaXWzV0E4U8ujZaItcqoedVjpBuJNSfTo+yko9ioMtMGTlBGKvInRj47\r\nhlirEQj/0a7B2nLEZGVK+69N4IWQsj/lZeA=\r\n=ZTpO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/density":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"15.0.0-canary.95ef196bc.0","@material/touch-target":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.95ef196bc.0_1665789268340_0.6215670200679873","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/radio","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c2807a6c755220dc98b6b98c6708a692b771516","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.13eea1b2d.0.tgz","fileCount":41,"integrity":"sha512-jbQb965NcPLcYyK/k2xcqlblhrt9mimcGkzCBylysFHXwd7AnjXmnmZAXEOcWWac7YfNExL8HaDsJRuCrgji7A==","signatures":[{"sig":"MEUCIDp5rHXIwQSgdbBzoRsMx+y0Sal130h4Fkkb8SJfKCXUAiEAhwVwCRHVUrEWtB066J3PvKKiJAMz98Tz8yugp0cpsWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqusBAAm+ogEBRhHw/TUfGz5BSrGvvbs6jzNqZn1iDDWXajityiL7zp\r\nR7GSlVB7myeRRSQqYNz/ieAPyL4Yv3U7UtT7a4Zw5OERbs0v0W/qXr8M5YBV\r\nV64X1y0P11ww3nLUbleftWy2GBcWDTzyJc/HLaMJNO8h4tf/HGjZBmTq5TvZ\r\nROporPxSaPUageLLFiZwNwLTQeFsA34vIP91yvbFtP+CUXUqmw3wZvmmoSaN\r\n7oDZeuySrXLCplKGWbG7j2TINzsdcJHAigViHHQNUJHMi/saXnlw1e5/JQ4/\r\nmrmfbAZMHh1qaMc+H1/Wgv/ZCkjwD6MY2iB70dq4VrxM0zf70OAsow76J2ln\r\nJ9Px6GHDuRC6ssNm9LaRtJMOPkRjoAd1L9lLEO6Gs7RcOS5VnJbhNCryrZuD\r\nDUXt9bW4t2MGjX3OYn1MIgcJAvprIyKXlk2ECWa2VHdvRiUK05A6PPDpMNVS\r\nb9QJtwTgK9jGISWBgAv1G+J23gcTFJmghA4p53Qj0pqcnkVd8Drvu32+M547\r\nDexIX7yI7YxGUfZrEUpjejNG18MTk70Uq9RjSErSRcDNRbJvgRMFQrGSay5b\r\nlPrziZaDuE7XaX7JmXG6KyWA0JshnJ7VqUO3rMf+X8aW+6ztQyaGxjZvu2wy\r\nDhO+BZ8S40gwr0O5QnIt4nFTg0FNsljcvDE=\r\n=fOlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/density":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.13eea1b2d.0_1665978726017_0.752377938193858","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/radio","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6344dfc5a0aaf00f853475a4f655652ef04b3515","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ef9b2babb.0.tgz","fileCount":41,"integrity":"sha512-OOWmncdiZtIVf8/gZCSrH7/A/lCrEVDzxrdShGT5prOff20HT6DhnaaRFnMj/J4WnfBDxvlZLYFb+p+tbyxjoA==","signatures":[{"sig":"MEUCIQCB0V1sTbtey/OAhb5axL1FbG3RvxaX2sP5jAlO4ZFmAAIgNOYEdEXziXnXGK0eSbSnn9FxOMKcXGdI2Zz8b2amhM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA7RAAlcYEZ1m/kKoHwiA5XZhijqUfTNPtunCxsv7r1p/Zc1iR1vnC\r\njUaG6avLVvRXjBQHtVS/TBD9FegmVceBPbMA6yAYHOMh6ujrWnuBPjkVlPQa\r\nrIIlVQOdkxEHhCLYxbfJr6yaSZZnr3/hthQGuKaFCmTS0+fmf9rPrY1BQn2E\r\n6ZTaSWgNkNDG/DdEsNdDbsjoKZrvtQT7p+JA80N8t5kWuDK244TFFZgvgdbD\r\nzBRa/NZ2pxdZvTu6wluR7/cdaBW4OKpTnWGGNy79YlFyrAB/Vo0Agmv+LGJB\r\nfLuJ20n8RWrq+eKrPWgNkxvHerGRuPb2w6UzGXrHrWQikrIS2XltKQD52YCn\r\nM7si6yOktwWHktPMBUW4T2tFO73rZNr8f/0IZXdb56Jfpb4Ohuh59ksX362f\r\njF8RTtgKwDQ9tjUa313Mwvj+EFGuOf0/IaI82KhBIVBaDteMa2pqJ0BrjeFN\r\nmJvY/2XvVo6BoQH6VguRmPIkmkdOXBYHOz7nGuK/6VE2Fg9UWMdeQJ1Ft2AM\r\nhJaor4w1gN7+QWvap1NQ7zGUQujkiibG9x+jJkLKLZE7rHu1D3nZOzw2TqjX\r\n79XbD0oBCCqaP/NQYkdXhVncsMKQm/Wtphhdy9D18MAa6DEkLv9z2BbcpWxq\r\nYNFzIxWP1R+QX/kqGiUivCMX0+KydNgU4T4=\r\n=+qVF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/density":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ef9b2babb.0_1665998310929_0.251334313651562","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/radio","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd505d45edeab737013f582b885a68b3fbfb0983","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cec7fb987.0.tgz","fileCount":41,"integrity":"sha512-Hq+5vTxDXBLxwzRo2aPyZV+AoOzSjbLETcFa5Dw0EdzGkOjvzlJxJJ6Cx2dnKmhDnmjrrpjrRjTxvLd/1J+spQ==","signatures":[{"sig":"MEUCIHbJli7TbP6ttcRH9B71/2nA0Vs5HQTIrkZy51gM4iZUAiEAqxb2y+HgTfTMZS4INu10psuDMI8W61T56pg2N3ffcZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTT1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru9A/9EFV7L8ZCOoO6lHcfTd6XA+/wYsGA+cjG/Gg7qmOAD7xkC6If\r\ndj99Qp1TRn66hkhIxhLIULYd2xHX6IGRsCNGiThvaYO+2Bob8RxJh+uhWlnQ\r\nNGFyFD+LcQdEpaeDK8DtYEXO6RZT0WbqAr2SU0yM8yu/IB/9EEp4AGKWZuf4\r\nTuEoaQRjrImLe0Xb02iToG7iOy5KTspiogWy2VppMsKzi00YpZgWXo1JcRr5\r\n5iy2imZZkZzFc2UbBHH0GSZILBUR8lhuh34F1cHDlZEidr9QYNdOWKK6LBUA\r\nVFP3503Dc3UbayK4MZ1VTEqlD4zG3eYanTCW1n+5QE2nzUNUigjSYwlpp2t7\r\n/jKQwAQ8u0dj7RwD6G3LcnqSbQIxo9P4Lfom/5YZUftXDyA60mrsHjirpVd6\r\nRb2Y8QUNQvJJ8lr+Qea4KdeWrduT3n/uqNarJA/KegNDU43HLtB37W/pU78r\r\nqS3skTTgQvkmN20DSn8EitiQ9iiOB+Y0bKZ8XSNItM3JOHYVx2MTaym182t6\r\nk9EhrV1hQ/AQfjLgScBxi/1jOexrvHSETwm8a3+obY++bPvCVUqX6MVKFYvU\r\nAwymnzR5Skw5Qs1g7Q/2S9abNjbtvNE+ntNX+MYig4YtmAjYYj0Gcq0F5iyM\r\n6vfgtbOpRMSh8WBEsRuxi7RlNobXB8d3H+0=\r\n=6/Oy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/density":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"15.0.0-canary.cec7fb987.0","@material/touch-target":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cec7fb987.0_1666004213325_0.755214713657292","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/radio","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b321be8e21fb03fbec9ce26d2030dc2c2e8288e1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4fff58b08.0.tgz","fileCount":41,"integrity":"sha512-sjd063/92KhDo8CYHTu+YsTRc60kQ0j6hLQBll59L5rbaGI7+Rs3ucv06Z+6UK+Yj0+LrMJY77MLyZz25DFZkQ==","signatures":[{"sig":"MEQCIAYchhJ9tBql1IBEJ7bW7MyNdm0R09wt+1MM1pxDDBThAiBC2TWBjCIKWW+dOqtn6ZFNN1dpZjvcZGFs6RweNVumQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwmQ/9FCHFV3Zan3Pqc1FqW2gUYR1J6ARUnX7hUgSDvSjQkXsdAo71\r\n0QmUTTSdJIILGflqOTO6Kw28KDUweMCuEOtqRAzJSu9x+jB2cG9dm6+GiWMd\r\nqQL72y1dFF8IONTsiVXS4KnKFFv+izNc4/1cQTctsjwnClULerV4tyiv1w1K\r\nBOOFL10Fblqh+WWNUXvPuPCCpE5+oI3xbzm1UBONA2Gj7qH3yCEvBMqnT4hv\r\nNDALWzxf0u5Gqb8/r5qNDs7oGwb4KYoRekqYbuN3OIqDHpuozg3udWtsnP21\r\nY2IyjjKBcsYtiys8F7YoT67WqyENOSncEcZvgxDu7mMObpW8Gp5ITeDW7eN/\r\nZUVkDzCBpsZNmQtP/zCFuYjoTtosL8RS+IcGzCg2FK5kH76yMXdRg4XKazqO\r\n16+CWzA53f5iXM163o5TtQPLjAq7etSolYXN5XV8eqGDkiQx2vOcXwQ2nvDu\r\ntbkLQfHou1diK6DnHAZkFV4hw9mIHMpFwAmVw9s8p1s6ucE2vSeOpxUGO+8j\r\nMldyVI17Uc+00Q3qyfCOtDPboYje78CWLJTjFiiu1fnMiRCRMPDicKD02ikh\r\nndHYIWchwzKgWAbjK3nN4BvsM+m7R8Bqx9rqP2MnvkHfOyPgxnAfF2OWXMJt\r\nzbqih9cip/mpUoIa9fgKLakC3Vb7rbZozIw=\r\n=Bki3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/density":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"15.0.0-canary.4fff58b08.0","@material/touch-target":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4fff58b08.0_1666020189313_0.2872434132041666","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/radio","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c5816b1544550ea493a710ef35cb3fbfc469ee9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.587d8f871.0.tgz","fileCount":41,"integrity":"sha512-Q6Yn/cKCkkgE2vq4i+jRO/Tqpym9iUdMsxynn1xAx2sx7QtltCoNsxWXN20rRbhrye02HKmExNLBG7l4BEOftQ==","signatures":[{"sig":"MEUCIQC8UdttYMbyGdeGaoLfLHZzIGpL5Nh4K6lx0vsXU3Zu4gIgSkeXHtZfcvp2BmJ6pwbNqemaSB091K/b3PwUXp1Ql7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Ag//aOxn7Boq2JzyQezSPBYsv1jo7mMvBL/qL3ZtG0Vvn/oAYmXT\r\n107S79hA6HmTARfyAV7FK8JyKuCtryLKP/MUkMYQqdzq9jxNLI65G/I5awmp\r\nD1tjoPnApgI43iGzO3qb1S5NaBmJT+gKm6GzcrrdEhtCWOO9g7OowwJFhIhA\r\nrfENDymoWoNAyoTZ6yEAmrZN2vWn6dGiVpA7UYZ1K58smIa4CLeRSHgt9Llf\r\n69lepmUW/jR/bfNsbS31qVOdBLjobDd4Hfo64ub5T2TTijeine+KLnPVL7bd\r\nh4CtedKtWZNL+eNF0AS2DLt7tmEVHq8lzTQKlM5zX3wneiksqaaI6+6UV5Nh\r\nrHAfa7g730vBPtcyZSpg2ezPmgUKJ+9MG7MPjf/vVoUbbViNI6wlkrM/GF+J\r\nHmepyC+xxdQrwLveELf5/xzgRJdSFrrUYn0csz+7RueA9n3x5DMArhvKgjsh\r\nARTwkFObGSKAS3YcOguLLW3bvSlYMBmTYKqWAMX/1mOrmdWIteeYiZKdoXfI\r\nOPasjDTaBkJmoU8/3qj7NGkA57s7iNDjWfNQ7QZxPrlKZqfxy2d1CQsPYJ4I\r\nPNjOYEXGa4rvkTDk+MgGlUwt+21ZiziVGOKhImLlI30NFDHGunKkQyeCllTi\r\nZFdKWMDuIUR6p16+eDAfzxNjnmrCc8uuFh8=\r\n=hzdm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/density":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"15.0.0-canary.587d8f871.0","@material/touch-target":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.587d8f871.0_1666022258359_0.6794423654648245","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/radio","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e20fc9895b86648187fd529b446cbd67a34cb7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.edf4b98d0.0.tgz","fileCount":41,"integrity":"sha512-Q44/o81S+PnpNbiVsWSVU99iqvlfep4pjqsgikSox4Et7OAYn+bI9E+PdNC20cxjaSAAGRUygMg7KoCSBjwSZQ==","signatures":[{"sig":"MEYCIQD9CCA5T5Pwx86UZ6y3wQ+BmQU1ZPJqcu/UDFnTJPtDGQIhAO8RMiYXymJIx+TIO2Ck8jfDgOmCFi1ZuBatWoanZ6ju","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozKg/9E/kvaCych8llDfftwem8uUv/9yP9dP6LdR6qIo4g75t/swqX\r\nhhxGlU4C1N+ErGqmJrcyI69m2Ol4yy304Svvegi8ck1lMDX+NpJC7qvDep2v\r\n24pizAm7lir2gG+VGLmzZYNiYrOyPr5GiusznYFUkrtWhiynW8TTsqm3GGFx\r\n1PntW7RdKIof4WgsVhWsMenPnH7umYa5+vSBQ/Lp/7TqPYVIdKInJI6OQYUq\r\ndcyF89zw8Ec0Xe9bIW0TfXGnRFCdZLsoo9KruYSmNVIe/kQ8kLru/P+l71i8\r\niC1qfz1dkQTf+XPJjJKpKDh3WeaK2W6AVEUsmOWLqUUtR0aq0N0mM/0Fcz8h\r\nYQsrXcPMVIP3GOxs1S1JYkr0j8vFCUI49asL8bI/CPk/VmKpOQ4ZneJU48M3\r\nZfRIuGTrUw4/mdfUYLSu4ZLZ28ExqFFZVAQaKIjkQWIRj+XqrxTTER+1kGNJ\r\nPviY3lLKhlzobH/RJCD5LNt+2M8fVZuVxzVfsyj+7aiO2GiYO18oDgzvOVIH\r\nRJ+o//7TVJc7WPLQMvovZt+zSJUNuwaCc+imNgx0advgNQ2JALDWeqsglz5h\r\n0fQHPBJJ+RkQ5Fs2/0EErl8M13v39q/KoZ2YT1ILDvovWkAVEBrcPU5/5GRT\r\n9FTE7kDo4n+/f4hpCRn8FOArR+6ddyq+L0Y=\r\n=Xmyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/density":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.edf4b98d0.0_1666024859406_0.4101999111382668","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/radio","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"385d2c31d1501c34ed2c68d283b9d8a1b52adc41","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.024ac5f16.0.tgz","fileCount":41,"integrity":"sha512-V7YE6GvqrMcrMAbjFb0ifhjRhePh1PC0R9rRWVqN7ahACfvHtL88uhqpBkEwcV+hz1Oc9jsMdsfGHt0tnof4tg==","signatures":[{"sig":"MEYCIQCr/kCPx4AvHWzPXECgXvz9ZZtE2FNI4oMHkgQaN/e9tAIhAIdqlx/sVDyxV0BrX9+Nye9o+mXN2y5Q4UjbXcwdaZw6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdptACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNgw//Vm4UJaTxTlZ7uIwVjRmfs6vHn8ghJJoOpJ/Dx9fWIZSTpM77\r\njtbDfT+PXCx3nupv+vS39C3y2HncINim6wYGN7DUnB4nzTcKCqm2D75lxyKU\r\nIXpEYKIB3vxVNzCnufejTfWGpgY9IaFamXmJy9ykYYqUasOa27NSI7cGA3E/\r\nJUbrfWTIU7MvfMKq6gwtXcQGJkrvAgsH6iVYXfC3mnieWrfniB/ykVSZQdNf\r\nIU6oAx6sCulNJyOr+3qa5yQ/xXyWDxQBE3Td3/K56V1lDb1dXW0rGu77CGON\r\n6flxYaLYgMjh5m+fBcTylKhBTNv1dHd+4ufn0QjDCtDF7gWRtWMbq0c3j1OK\r\nGVIahPi2E6aXfCQL/7kiUlotoUj4rJDQjTogyszCISqtIpthHPTe0q3gf3tD\r\noJMdm/0Y7HfvJFDa88C/kX65nJq1Gz7HEZQSu7SnYLqrUOxmrdeLq7nGNxEw\r\nB5nj74IiwZ1Kg5S7jx2FU1qcr/jD+40AQbw5O12FRKPwKZ9Cv8h575n3WRnN\r\nKxyvPS3M0fp6PMgpheJZUxD3c+FfLtKfod8oL4rv7xj34YN0+0IJ7aiYzhff\r\nGtgGEUkBu7EBB0+3K1mtMD4I0A+7IOge74o4UMvgvS4U/n4UrRxCVoN/omYQ\r\nSsttcPi421q/BBXgt/Y+ULqrrAAHyrwsl4w=\r\n=GR//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/density":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"15.0.0-canary.024ac5f16.0","@material/touch-target":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.024ac5f16.0_1666046573110_0.024568466563905433","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/radio","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5164e2314b1547b9774d459687092751c5bc306","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c8bdf6144.0.tgz","fileCount":41,"integrity":"sha512-+jj6qWyAPkSp0cDkyy2pr10it0h70qjOgv4DOuaKdiaXNvwIrF1GUh0Y/94GzOw8fiRy5r2UZ7awE1idrcFdsQ==","signatures":[{"sig":"MEQCIBibl30YgqKX1zj4WVZIwat+JgwBDiMPMDlfNvCl3o4KAiAcLubxgfJspO0d1kZRiEc0orIikOJGmtV2gR5u7/XJxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu88ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLjhAAhGFKXTI1w2DKNelrqoW2koHSW6GRO9jZpT/265SEvOtYMpwN\r\nOixTV9nScqlXFOlRooYOGk9tfT7kkonjuUk3qvia2oRtNY3rh+YYXxXMoZjh\r\nr7kNikiP1brAvyyLoK8f5DimUi0p5/EU1eFmtr/RrCuD68I3uK+dfcQto14d\r\nxmM7dQ0v4iSA5dhrzEZxLm4cbO0IprNudloNRbVAbuoBJsHg/KYnO8zVIhBP\r\n7DVni7xJF3IZGZ/ChbAIVJ1bD/y49ZEK7U4nRYzzxY/TU2btF//1Ukaxowov\r\nZ4sFbVrsiaapheGAjUGp8dpX1Uvqn+U9Jyv/IZ3ah/Erw2u/ShkeRn0+FYqp\r\n8uWr3T5vNU7HSGT47ZDhBlKw55ClXVZ5cA7LA9YAE9UJkyWCoblshQswbORC\r\nzogdUypeMQhRntxDaok0v4PsHLwoz30ss2rK5/h3Dr1QDtmP1edEAzOuG2sY\r\nedMFPPUM7Ero5Y8ZalwdoWw2dwEQSxT1UyA8MYIicrhtBUnQGIs5oOWBva/z\r\ntwfou7kp8IchefPrjUM+Wnv/MTaDTtF+5f3IEQMaQojEI5jhEf7xDi4Yx551\r\n/2O/UWtRHBM3eKbPbC46ztzO0JS22+Fepbd22ffiq0Ev78X/+6iIl9P7zdxO\r\nCZ6O4EFLXJ5ktKz6KVBkKHyE+FdFEv9RmVg=\r\n=rwpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/density":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c8bdf6144.0_1666117435976_0.3474859122717706","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/radio","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d7f3456f2e07969a767dff81d208031729133e1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bacda4885.0.tgz","fileCount":41,"integrity":"sha512-nholTAVlIakX5XDuNs/3LmGMsgvXa5gXlwNiKbF6wL+SrDP4H9SGFWVka39k1fjkjjoyyj0xFbLcRw+XegjaGw==","signatures":[{"sig":"MEYCIQDr9X+A9GQZ0ID/TL8XMukVPRMK3gHLV7V/l76RclDDzwIhAL0TAYGWNKEcdLgAQjI71ba0LNWAtzgFdDrwbbY2Sqsp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvPHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3ew//S/ryCMeT5KjVDwesXLg62vVBngLiTlyiR+Ab6ibkYzBRfIm5\r\nOvIwwPPHKYZanyd+n0orRr1Ui0Y0nIaNokr9AoYKMill5R6XaZscD1cZ0C8X\r\nhyxzvZvoum8PcYDq9elul2xLLHgTBrgQuBIdEDDQBGReepPH+DORNOsxF3z/\r\nVFC4QfdLjEGDEDi80++/3jq5OEWS6D0mc+Sin91UeIUfm/aYzsnDBMzyTzwQ\r\ns8GH6zy7r5S8P+31P7fl4dD362YuIcWOSZpYQYtZD6aRNdKUUCFhTTuKNtix\r\ncjH5nmT7pfZ7xBNgtwm7VtIQto/SJcJ1BMx3JyOQa6YQzM3OTDrFuvIoMQHW\r\nIfN2DHG2PvxzdNF2j3HXHPC/kXksWCZvEcLwJGCIQTL++my0T1YAW7XAMFtI\r\nkueKZ9wcuTKwPq4zm+SQEBgArtqjkcdTnHFZ61GKPHJt4e62CTmpq5OVaSEH\r\nGSbX4WcmcMhe+eKzr12OnEq4V6xQQ/mI/OEd82HK5R29fKdY+s5vxamQHngU\r\nvG2QJYPZ7j/nVeCYDGHVWhdx64MP9AEISUEZbRaTkUKvh31OETtX+1eRKzGt\r\nYKFlY3hd3kY5IIGBX3mh82wbNCCa3vekFbGtlLzV0YI7SFYdcbQB1lJT7Ky2\r\ngKuojSLfxoChuF0X9/jnOzOUgE9y5K7+QTE=\r\n=Ivzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/density":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"15.0.0-canary.bacda4885.0","@material/touch-target":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bacda4885.0_1666118598950_0.7791593540566659","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/radio","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a29d8248dc92944d6768856c114cef234cda60","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.92b2556cf.0.tgz","fileCount":41,"integrity":"sha512-8VoFoNAlPMREAMjYgsMQJxHmBHDgtvlDB9+lvC+SZZ7/5HxkUZILVAa+XHhkG7/W6hQX4y2L5n9hQa3looroSA==","signatures":[{"sig":"MEYCIQDr4oq6UpEweqmqNq9hUIje3WAHIm2jfmzVkFt+uFRguQIhAP0O7J3rbzNF+pfzKVNAiJjEL9vGtyxYCFg1c4Wo9Ezz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ4A//a/DqzhNA23YSJzDKz+wKlYNVzFbPrWLzeOSMKXU0+vfs4MIk\r\nOC+Axns6LBc3XLU1fjlsX10AbwdaFimFlKEEecXflh375w+hmugAb4FqmZAG\r\nLN6NVMIA7J72FB5ob31VftSoKHu0XAYj1JhU1WRmtmSmxU6wIZL5BiO0dmM3\r\nR3Eo3uQ30Qk1lsdeJfZ9/EfQ9RYURduzG8uWklXvMYsi9RYBooUJZ2GL6cdB\r\nnRSBv5esiAcoW74/472rex36cE487LWC2ZlwvOdTxRZa80jru401tr0BxoOO\r\nSqFMknRdMU5ipClwzEMhk5fEpksy1w6NjnIHs67GdOQl3zTur+BqV8qqPP0a\r\nEpiOGGM+NIzkQBd6cC5UBB6TLHnfQXoosUn1bx+Jo5hkowof0LFYZjjMTlMI\r\neb4d/qTPb4E1/4HjjC1fjlSF9tMnvQ/tKxCSbPV4wt6Gfbt3am/XiEGVZaU+\r\n51XGY7d9WRmJVJvnFci6NU0NOB47xOBSLsp2lw+FIoUYNOgAutHWl6FMXQbw\r\npGbMB+G+VTbsAqzmVZLxqnoK7N/EDhUqd1OC4yL5GKhbEJmpCgXwxhRZKZQO\r\nDQXJ3gjkLTzP8KwBsbl929SuTYKRVGvzvih1M8VS/HUG1E4+0nRSWn9mj8eN\r\nGdPn65ltgL46oSKVlXJTBh4mde8wZfeZmgU=\r\n=7PdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/density":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"15.0.0-canary.92b2556cf.0","@material/touch-target":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.92b2556cf.0_1666142035485_0.0727990307378068","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/radio","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b252925bef25964d8957cf8a44df67f863e6746b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cc804509a.0.tgz","fileCount":41,"integrity":"sha512-vQUwgbAjZfYP66kXyrgyI27jn8Nein4MsAETQk7Ms8LTZvIYzrAxTr3qzk467Nor6P9eaOM6QPRjdBik0iWtHQ==","signatures":[{"sig":"MEUCIQDCLa4plG02Gt8XNQbjUgcqdLnIQNe+IbPeDG+fdGNAvwIgMx5A3lOeUvPpeeYsUF0GB4LZH0PTw7oGfXmS6fU1K3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1A2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpooBAAhzRdv/p9cPz2RZ8HHAHqJvwv9Jk8Zsx4nPCIMnvOrgXYnYEP\r\n0H+pJFZ1gKG+XKSSC6HXdAvgUBq0w5+s1U4I/kMy+vL6adc/IeufyuUUEqD+\r\nD+jJgeuFxNUaXP4bKCMMAl9PsZgsUcL68p0XjE9cWwRPWP8vWEsGJSWr45bI\r\nVqtxqfnWwsN1mN8bJEpRIcpXvauw/4ZwjF0nFOZxKtpn9uHw9D1oSG+E4XH2\r\n5aaK84UBctgZhIoR96VPxoeWKUc5bowFLH1nBW88UjntWYFlIhTdmPAdqkhm\r\nzk1A8OZ4LWTMuxiH/zlwUI3C5frldJn7NLdpOJj75V/VGRcB7CwM6ihym+5B\r\n9lEyC+Cn6swpC0DTWRgfkneVxRVtGh8KQC8lA3bFO2lVKZYJTvXTLBOrn3ZL\r\nipbUQxBel2r7aOlFV7A1OFmlbjRyK3RYU1jC0lW+vl726VW3AKNi9jTtiQ1D\r\n1D1PV1jC85b39l6F/z7qsiZqS1a6vsXPR0xpbuXffjXRYDYfy/ttG+vJBR7Z\r\nPnhEeC209ALTl3xwHSdLkDYECZQBnGcnlpzxGoEmaI4kzJkJwMqRROzer6QY\r\nXjw31AMImYwuOaJ8M62fpUaaYpyUCoRdZKe4MgH5qw41YIWbxWHnnR4jcPql\r\n1+ElVjVXQHqWofGfTy+Q0sejclugK9GmBhc=\r\n=JQYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/density":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"15.0.0-canary.cc804509a.0","@material/touch-target":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cc804509a.0_1666142262358_0.5789130761896482","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/radio","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64d77f1700b1f8625bc80d44973b60171d3d2623","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.982bedae9.0.tgz","fileCount":41,"integrity":"sha512-UUJEEhDGzjppqFPLXpuASWb+f/FiVQ4Li9RLLiXBsvYUOZbbVJR5SSKaJhA02Bt25KnNAVSQf83L2WrqbVhBYw==","signatures":[{"sig":"MEUCIBwWtt8agOqZbcV8Nh4j/M5DLogaNwqkvtOIoVzir1LSAiEAndsywy7mqj20rJVy8NnGhVBNIrSsFIN1beBUT1VAGQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqxw//YdyUHjy6L/jqe70CLHWvj8+rqvgtCZRGvJ1b55PSakGXAD6W\r\nUQHHirBulyYL9KQ84jt/5/TS1l4BBGdJb9vs26uh06nOSfqB7so8JVUAut1x\r\nPGKnGJontFkPJsiBsgmNPDxzZFOTaUt0FqVJgCDH4rRTNHPlWsaMNDoLArbl\r\nFs0q0K8mbJa15GeJcjWhExJMc04lniE9wqFByhZmf4ybe1OzfXqutjSGnxWM\r\nYx/ondkRU3YVCIoltG1LW+RC5cRpGm7wLCBzDPXyIPHp2YGp/4pEh491GvVX\r\n/ElJiRv+CDJUi9aU41/XzJ3XFohRbIFotTU93RfolX97Ucz3T0XmJGfh42FZ\r\nsiBtlf8SqbQ5YkZIq5P1B0+KiphafSG3/DK/qOdY3bFkEmo8kAIa4kbnWORw\r\n6aM4E5riEbcotEOGiDotKWKUwNoBetDPN5XCapSmZNRTRcRPOpTCydteDKmg\r\nzxlovYvaoJKjR6dUblaMHy/ybdoMfVhZtGy2N7z9C6LxwiCX1+b1Z7Kx7RdR\r\nuoF9LD3WIBwYYCXuLZjqboiClPhcPIqGAn4oULuN84YDP9VNa3JIsOLzPRDQ\r\nsloSzfXw5N0z+V/qm0asONIxbrNYdAv49JQEG7nzVlyaGv8S4SEJE2lqjSUm\r\n3aHvktUf9IZkfKM5t2rNAcHrLvNPat+OvNo=\r\n=fhVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/density":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"15.0.0-canary.982bedae9.0","@material/touch-target":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.982bedae9.0_1666143462638_0.35686917815454766","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/radio","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4ed8b32207e17551cee68020baa2445908134f2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ee40081f4.0.tgz","fileCount":41,"integrity":"sha512-q30f7VI8h8O4IfSxqFMDsCyDcDI9czCxtSVEXU9nDWlrMW6e7WVxoh1eWHV8iev4KsEbhZ0eJNWmIaOL6WREhg==","signatures":[{"sig":"MEYCIQD+frKVfJ1KFsDRdi/SyB6TGTR496fp6U4mmrlMkx8SIwIhALM5/ee+7hlKvfXet6c0xegw48mgfcMLraPAenJqGzl6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZLg//QIf5uBeNpKOS5kznAl+6/5lw5+2eVGRu04TdOzz+yI1rbAL1\r\n3+TRGDpn8leytLMzxR3TLJAgXk8g6qfk3Cx7pMcw5pGN22n9svPXm0RB1dfk\r\nJXL1myy7c0zxfqBrtY3a/o4vdbkCnyR1qtoXEwgNhBmz95tgKtxYaBQOOPcC\r\nVggVz59UhD7nTWSmFvnW3Sw155cEPqf9x7olmQQx7BsKdlnGZispf+gKlcNQ\r\n0ewN9oI5RCgnp6nOgtA9DWERNvCixZJmSwcHEoYk9swYiUX5mYR6mV5fNvf2\r\nyLDsL5q0XzOThrZyzYanRXuEj9NviAxxn7NWro+jSHnD+wvQ05T4K/d0Be6r\r\nSQmp/39cD0YsEvpHZU3qHh06U767rrHYnm8fuakH59UfzdoKnC020fhFA4AO\r\nShchTjH+V+pTvzuObqeKsmnw6yXEEbfqn5u6LnmDDKJjylc3bwsWe2CG+Bx6\r\niAXX7/6IUqy9/1PWQWZiO8JU6uKTn649VCdQLHNewKgWkoomwcmH777RZFDN\r\nhKD26WAzi1mGzNUKLbKDNB0/aOguGsNm2NAmMKiDUWr7Ta3LqtHIgK206U9f\r\n0aeqjNWsL92whQF4ahjkxTknFyjuT6ND6FCpr5mL6bLMEfEz1d4wKYgmdJCu\r\nNjxBRs06tic9C1i3KfsbRR+q3uHaUGjVkDw=\r\n=tq7X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/density":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"15.0.0-canary.ee40081f4.0","@material/touch-target":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ee40081f4.0_1666210346637_0.38793448795729013","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/radio","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a39b08cce371ef24eacf6f156ce61ac76654da","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.98f1b54e2.0.tgz","fileCount":41,"integrity":"sha512-6z6ETRyJsjyV4z05XGxmq3AOFA/7tasCYbISSLwrFMcJaG76C7Refh1sETo9u8JcYQqnLWEbp93fUUFcYYArOQ==","signatures":[{"sig":"MEQCIH+imP+8qJi+4x00A6xJFXsKKtAk7ZhWa+zLKFKXSJgoAiBg5L2fUsX1yvytUzkAmtlSqE6tn6zOs6aIyZEe6dw8Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRwQ//bhX1QPKxolr8PIzouw/86Jj9HSXswV39IY1M0t95DCUfMQv9\r\nfpaFHXKP38xSj5OCb3HQreYKkX2nIK17j1fmjgvFJQCbMiN6tAFOuYc5oh0i\r\nhbA4PZ1jHuBKz3aM924fs763TR4ZXu9KO7+K1X4ITNN3GijghPuyOafk0buZ\r\nWz2Bmsz9BODuncbd282/f8SztSftcQ03+UW+j7NVHFKPCEZZ7pLM8vIuv4DR\r\nes4AOPemoe/21jh1yjlqK4B8DaIjGxxH7LNwyCKjfH18g1iS06H9ZAolAnCs\r\nRco8YCdTaxhR5irsSxHCBvlUb8qRee4IHStgtf5MrSon2Fe/mmclIn+gpEXU\r\nDchQuAs1BDslghevw/PpkURGN9AyivO192XMgsnUL1Du8+/BGdMxx7LOBEAh\r\nEauBitO9iNRt9knlhsKFiaOJE6rJwkEQed26ZfDZjQZbgh42JpNcapkfRvyd\r\nSmSrhC/63rA1maqXTfwmPE71DUS3pZpY9RoBRSIk5XDnBKr8zO3pehxLTjrD\r\n8rELnSkWjpg53HEB/Q9FBczxyeXgSJnsuyVe9alWrmp0gK/EYxFYQAhBt3CN\r\n3mg+RMq2Lp8C5igkosbrIXyLxjGh1yGHnTk4wgJIDrKEV5zqHCR3v1anok7J\r\nOIWEs7SQHb6nu62DXHFAattuR3JBnCSqsYI=\r\n=tfrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/density":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.98f1b54e2.0_1666306635881_0.046484110389143574","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/radio","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe160901c3b17c4d276ce035cf9c64987545425","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":41,"integrity":"sha512-96zJbLkXdMurNDVEAxjNgZXf6rwxFFPQUkrGWHXjI8vX0xe/ajMCzOYzsIJoqKPmuU1+FjmH6UYU6AwqKJ8YNw==","signatures":[{"sig":"MEUCIQD4ZZLKklKDhtdfWDmZVlk3snusR15uY60/8HrKb8NbuwIgO8B1Yrf8nFy0T4Qd/bYOvGZemNFvHKtnyaItedFftGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrohw/8DwHWhAuDw22+24C6JfaJby9zUi+dk20StIcsvC8/hOc3tIr3\r\nyT7PGsGNEQaai6jbqI9QTFH28gCAw+AuEw265QYu0LiDUIIcryOFk5o6jKA9\r\nrlFo2cyDmokug4aqo9WtFYwrWsFmcEF0whaf2dLWZmi0SXh6YOPdETcGTUDM\r\nQDlFEF4xX5Nqy8uMUQfmP+NQEbaBfMxd1wNFBSCqjPXcSPhhkmHi8iEWfXif\r\nrJb0qKF2gNkvm89Cx9tpdGj03OFrovCgFAp+ebr39FiKsQkbdr2vW4GJW+9C\r\nhX6h1SWeuEB34QY4y7BVHWrMZr9Qbyb1w4V5m4bb9T9Zru6n1FaoupkvIbuq\r\n4o/4up0ZkSgHoQQSuc5b2p7NIR1AWndDcheIYvln5IaIQompyn1i2vfp1wFp\r\ntKvKGHYdNmNVLV+umZbSCAjcGPEwAGDVNbF3IvFiJJvQEw7xwsMoz9KANiDr\r\nOU2FaPnrvmFNuoltJgmTZv371S/K4zks5WF7TCdtjovoVRjHoRtqzk0HVygK\r\nrAN+SZfQsey125HyhbFXA0TY3cbNI1dupU59Wn68gxfZdmBq4zFqgM2opWIQ\r\n5IBdCv0VETHuleo9wu5L5N4RjFTHCHHQZLudZo+kQr4F4Ue5caNGCSx28/1l\r\nKi4Fsnt+7WMcbi6vKJHEJPlkzxle/wsUl9U=\r\n=ou9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/density":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e74b7ba7e.0_1666371979820_0.45659968424411246","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/radio","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6b779178981e0a9e249eb070e5d4928debcba0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ab55c07d2.0.tgz","fileCount":41,"integrity":"sha512-sQRNS0Y15YwQ/mpPZEYZpaeD5oJRza+MNTEknEjAZWh9ebv0xHlK6kxABMIa5rgbr16cQJlruuMewZdlxOwJZA==","signatures":[{"sig":"MEUCIQC/Q8O7M0SQ2QjR1tEXX/RWiAhO8ttlM/3R138ir6jJyAIgdCRz9iddgQH1YcgMnfQg7/fOA2ZMl62MIVSFbA+GMss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdOhAAin6NRWDRvW4h1m1JZnObvk+XGUENrcve5JxX8qw8eRM9kcFt\r\nKvnFabqY06n5dAWyZWtbZR/EQNF986t3bDEhIdXvdzSVRz549RAlqr3x0lyc\r\nbZ9OsBta7tefCk2dnkwg8qhEUPLhQrhGfT72vdVDXA2fNWjY0gJwfcCN09kQ\r\nZpDM8meV+rlY70voEA5Ykpj2jo4Oys9O0iwq2FZ5bGAguFcWdFQ+8Bl6qqEX\r\n7EzJJElp+ggr+i3o1GyrszQ+rySduYl3AGb5PLLUoB497Vj9M7uETVmD/Hj2\r\nIJI/DOSEX+OKsBJX8sJOdaRaTQjf2akeE36p5SnOG4CbyeAGEw1aJ+ASrMP9\r\nxZhItrT9l+8FT5LwTR1A+nEFc6RCVVOCEoAjPbykBPk84nLJ4iH1nCF/UGl5\r\nZf6TVLxkwvsTC37oSGqOgJuZJFflA0vVsV+rqGVsC5P+o+f3W+5tB6OBIZMO\r\nVcsm8HJmJO/NkV7fTclN3HjqLHJjdc38Npanko6wn/kilKt030KWBHSAwaHD\r\nfMucn8T639rXaRtWNH0IfCwyj5O4V3uPwxMhFYSzIV2OkIiozJfiofAerGmI\r\nCrg0Z4Bcz7BX1Tvt7L/J9bI1bDfGJxbQZ+GzXtZBX7J2/aVbet4A3A16tncz\r\niBy97IxL8MYor5ZKgNtNO8KDr3EQieQ1X3g=\r\n=LYi0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/density":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ab55c07d2.0_1666462781937_0.8051110419168392","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/radio","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c7195d43f7e08581382a46325caa17bccc226bd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fc539db34.0.tgz","fileCount":41,"integrity":"sha512-BGEXMvKPGkbdZFktJOCHOClzT5YsaJWR1FXMPwigAuSvvDJtj0ajw4dpk1hdfzwRH+Qlpe+LbTmJu4yQDQdpLg==","signatures":[{"sig":"MEUCIQCi9Ad2VLRV02vBWn7999ZyuLjrkKkuaogRlhtX4Pn2UgIgRqQHp4CIGq2B4WTCAVWOKy8cDc+a32TuzzY2M8uwwR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1vQ//e7g/6QpWIVTTOYxHGVeKH9oAlh+4N0eLx+E9ovFJhvLMaQT9\r\n9/pV2UOCCfYbIbqRCTK8oO3fKqQmJrjtSPtNlghVCxKUFYoPBtGC8HJo6zT/\r\nCtMBbeqzQlSb8ePJ/anBdRDxlMqgC94DslrBH6f7e7d9pdRuHWeIHn1FfDtY\r\n1Q+7QKU4VZncI6u0xJiEGgagEDpQdx/+kbNDJ2ebJewB7YTPgoPfD0fX5GPj\r\n0d1GIjwRO3SSY4yct7qjHoUolYIHYRjW0qByaWyDs7iEZdLvp6v3rtMHvooM\r\nTmo0p6pZq0m7odEoQCiJO2Du6bD1ofULaAkDCkzqSzgEpaCy6qZQQ/crL6/u\r\ncg3M8ovXrEvgwl09H+v8r/i7E+o9jaTSCgBV50EdMTFjbjUSIRQ05wjQa5W5\r\ncznwGAvo5uhikoFz2O0FJoELdlDbGavn0Ey6d/VU7cNdUKAOgHc3pnbPcLcF\r\nr6qHf7j3i6anAJwts3cHKogPQLWE55/9egBhl1GfZ/FtvTY/wSlYIqGg6pD7\r\njd8wcvbwTOJIWmFaYsF3Hy+WJPhf1/3CTSRA3aWxY0gyh48lzStraj5nQqYV\r\nIjLr13bEVn+tk6FDuYYfZDnoIyiHIyjD3aKrBllpfkuxnBwGfGcFFn6pLeK+\r\nMlT5Tl8IomsNMVMwCwt2Si1CTKWk8H8PQ1w=\r\n=zZAB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/density":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"15.0.0-canary.fc539db34.0","@material/touch-target":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fc539db34.0_1666637981535_0.049503739183847095","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/radio","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a60be92d660daabacc831624463c51311280193","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e340b04c5.0.tgz","fileCount":41,"integrity":"sha512-OAvQBin5Zjqg1laYXbcnPcwlm+AMBuGhoFc9Kf36UCuDDe7G4crRLkDwCvJV9nppiHjblPwHClM60G0Xgoo+0w==","signatures":[{"sig":"MEYCIQDPgxRcfmOMCpAItP+2uwGMGFzRhsEnQ4oZxLGMsHor7QIhAMd++3UIn/xNyVN1riAxGQPXWEJDzXkYgI4/Rgyd2V2Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG+w//W654ryYuGXOAayAF0buDYyZsBbdI28KrDR+lhN0WVfZqFwmk\r\nPVOBVd0/rzeSWrAMiSqkbOOoRUm0yVmLlKvR3kJJsFRAkEHeUzY0N2+QyxJc\r\nrX6U21PGDYaRaJtYHgr6geInf+sWrjcO74xSziZGDcDAVL3KrkiESYW4rkRs\r\nSOagT2H9pKATaiM3v+LTeS/Y5DvIgdTT3XPTI07/FyPlvxPa04gwT2wEK3bk\r\noX5lUlO5BnoZS6fBGcpKv3fiE4zQeK80buuasg5bTcV2m4iJRr7PCd+Xn5gC\r\n1Xwhs91J3Py1OKf1PXTDCeokvFxfbHOmHZQofq9YYSCeP7kE9uzeEOIm3mcq\r\n3anHJMBoDELKg3bEVIJxmIjgtDcae0Vpy0M8vtKDe8Hol1Zajje0ofONYnoW\r\nQf3dMsL1h+sdzbNk+ftgqNBl926mq55TwjWpAq9YIlcqqOgczTOUOxEG3Sgp\r\nr1LXZjK713AGslfDveY9qKisYsQTt7HIERS3P4woh5Bu20RqNnkDYsAXUujp\r\nfxI+kVly3GWraHvR+q+02r4FVzcndEmCOiNzNyT0MtwNSBKhG8EjGRPRi7X2\r\nVcRKsbseu7n0dsvEGMcp1LMB6tqQ+c4P44xyvv5peS7l875ZcC30jhdavizd\r\npmGs7+wThSxqcTQI0HQQDw6HGx2ex/Pmhyk=\r\n=Bwuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/density":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"15.0.0-canary.e340b04c5.0","@material/touch-target":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e340b04c5.0_1666741535332_0.31823180722256406","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/radio","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f73db160eee00797b878c6432b6ee6f01670682d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":41,"integrity":"sha512-ZKrMIgvx41LkARZfPmnaY4oHYqNmHfe4q4yWUFfIxGEeb1oEVjd6K1O0bkV9Xal+HlzzD60lukNW1LqFP91Jcg==","signatures":[{"sig":"MEUCIQDGyOOe8NEfpmgaZCEysJZyWTkhhY4D2R/VuLI2dbCJcgIgJR0dmaOW5L3EKFic64pZKJE9S8gM0ZWE5eb3UO5HvVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJwBAAoyme8/ArgxHj82VEVeC/fcsFUx9c+ITIcHEMvc94yXgeaBbH\r\nuYOnbCfLM63QXI09PlcaaBLdFcfvSsKUFHx0xYAzbXG5oW6Zmd7jny2VzsCE\r\nBzmdKf57ZlAi7PwmZqKJPIA4l5Qdofp+hP2ZoxvDkhLKqSKFxEGMO6yR7+Fp\r\nOs/7Y2Tvz6Kj4Ltsg9B5VRyK5121CTtAPdpVmwKnVD605DEH6BcViwtOVLXD\r\nTMdGgxlB9s3sYUBD4UFZU028h2ZqMpYHzlbgelfRgbl+QNSMZFTxjgCtewhd\r\n5PDWSrB+UrXKH+UnQ2MIK1hEzqlVh/Ed4ZNOYoJ7c+NnHRkWs1FjhlDAFRu6\r\nAF7GvC4HKiv0c9Ii0oevvOTrXN3STcW4BhPhaNX00mHdiT+rmukLcA9JMiBW\r\nm/xAzX1SHGPwa8rg8zbnZSXpCgKBl5NTNpF+UxCnREEFYXEdtorIzbLXMLBp\r\ng62n/Pk/5fWH2J9vYoMJDu/FahhCquArfbbFhOnCEEjASMyt4Gyw+DjQlEvN\r\nqJ+ZwiJHz1xvxlDtpuuJZ35FpY0KmCn1v9RUlbUcQS/q2gbOaFhzpDFta57P\r\naZc0Q1XCcdVfvJ5SvngN+OYLKR7Y91kT8NyzyC2gaBHG6bk8mxARfaD0XkMB\r\ncEESPcTEOJnzNp/IOyD5JSTpiUTR14fuM44=\r\n=j9+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/density":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2c1a8f8fd.0_1666805470341_0.4908544488560702","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/radio","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e368adb08633df47c5af5dd18b847cff49984b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ecfee946f.0.tgz","fileCount":41,"integrity":"sha512-jUihnBlxPpfUCD9o/77qtJZ0t0MaUs8CbdRsYjkuywnY3bH3vZuarJGnYT86HJu/zYTSHfqrnpZKwnRm47MXQg==","signatures":[{"sig":"MEQCIEepjaOXBW5+aDj1Qs3bB0bb2mwxYpvzd8wgs7qJ4v0UAiAr3JnLVSfmf80n6rmCSBBfWoU6LkZy4jIcuLi5nDOpIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZV3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0gQ//YU8ezUKcHvs9griv5Ot8w3gMR+Ga9guC0GlwANVuMhUYAWVz\r\nDUYZs3ToVIAOqN/i+r427CsO40sFaJ0+8ZmZ7KgCRYrLYCVnjOifmCaTdu6v\r\nx/N7cAJYrbOKv/g3zV0SG/ZDofbusWaNy3zjkY0OQZ0U5p7UPcV888l/Aiqc\r\nE/OfXk7XXm1d6zdtas/siBjJ+GeckHeTWxZSeiXuJOVUz7VlgVqM74ZQS9Rd\r\nxKpleAg5C9jWmkqkAvForBtF0x8dkYDwJE5yhwQIE351mjPktT8xO9JeNulb\r\nrgkCbrObft/QUFrL2XxCiPjggbAw3vx3SG/TGOJ5YtcWjXXWWH2uQRjelsWG\r\nzq4MXSigeUP7+I5WE73ASyxDNgvSnOGT4eXKWq+b/gausrcqJnWgVShdY43n\r\n6B7A6dUtv3eYigofKK44N8kpHeLLSTM4u9AkMqmo12EQt3eF4FpSwPiHNlYn\r\nOAmKE5Z0VbjT1rxn62CpgBH2V74tr6if2JiT5h3BHjWxfl/37cpK7rW3GjxJ\r\n6uXc3vsQzltV0cVasHO+CdrrburSP155GJ3j1AleQqvi4qZifolKR2dR+DMJ\r\nF8CRxyELwgZJBAdzDKJGXit+RE1qyPzaiQSY9yS1ICFt2fx2FCdXcAFhFDFA\r\nkUbBShxTDCo10ncq8yaZzV56+ROja+UsFS8=\r\n=+VmJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/density":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"15.0.0-canary.ecfee946f.0","@material/touch-target":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ecfee946f.0_1666815351033_0.46971616524598536","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/radio","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a03975b79e730b1450d344d4e6991071d339151","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":41,"integrity":"sha512-4Z9MCVmxpb0msnPUhmLh/Jg6H7d/vJQrJW8oCyVOmGwWckT1z0PEpqm46wK/c2qx8OsLFb25X9YtJxhpmQ8QRg==","signatures":[{"sig":"MEUCIE+Tswp1uUylcD+fSIJ0EnBqLjCuK6Zy3fmXlYMUPvlmAiEA9h2qGjgdGhBroV6X4yk3NgL3g4Yc3kfVNUmIwrKDXTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbrA/+NyDizNjDxTd7NCqyf1ChHT7iPvv8zK/hRXgY+p7HJGKeFyUL\r\n/iUweRbXFDXnPBFwJA7IcBWoBtrgdKuVMfgsVprx7ZEconx3XjkhPvjyHF9Y\r\n/KzQBQU9DH6sE9wg5Z32I5iBbZrMQg8yq/ARekrQNT9tTc2H1QTtU3ycuvc0\r\nNB2z6tuZZBOBUsPEme6ETYIk1kUlcMgLrzAa432su2qAYj0If5Wx4V8EwQJx\r\n60TcSk6+UYpDqaijKJFfb4LdLMkC6SET4HPbOHSYkKrE4W66IIa4EFS9P/5F\r\n25CoBZDJAXE60AWsizxgv250Yy4frC7e8DPtjmMiwkuPlweTlcI0YPZTrLHE\r\nsVCjGNN121tMNg8ZROkgykYY9tVSZQJVtIqy2NBGt4KsnHe6djXDNtfTep71\r\nhsObh9Iy0pHXWSi8kFT0uJVQTIwZ3/ypfJNxqELDQKh0jSOQ/tbUNNbmyyph\r\nUhfQ9tRU/VBigm7lYDxaQx3Mjj3G1nI55qhhSUxN91W1a6trCuYgQQvFshX2\r\n5AXh0hTNhvYQZrLjPOXYCbkvmt0zzuSouHmaH074kYzOf/uyrWFTicBFYDK+\r\nvgbgSf8hdw2D4n9r1RV1pCZm05fP6RzPWT4qknAiWLkGlJCju0U03uYsqXwc\r\n2z0k9983YGL9yBMeRld6mCV3Etxzmb8khQM=\r\n=yR+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/density":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.73ca9dbb0.0_1667237581341_0.8825783866598427","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/radio","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eb2bf976c764d3af20671f22cc19359e83a3cb3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.357f2e5f1.0.tgz","fileCount":41,"integrity":"sha512-+XSemLrLiT8kG2twjh/Ug5n2nPL6w7HI19ySV3oqWQ0kJsAwcTCYmNfineGqv610ooO/vCmBBPJdlK7u5yBQtg==","signatures":[{"sig":"MEUCIQDJnAn98A82lIcFkGeyMACF0Ph6AHuxW4FLbGv3OCCOggIgBetp8JwGEJ0eWbAueITSM3Xg7XQl3WTQWy0oa66cu5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF5w/+ImAqXSIJ0Ft7IBlF9mIb1/aRwAwpdUK7QTxvsFaW2wfEp/KW\r\nPQk8fz5y+FSjfMMo0tEI7Dzct/L/e1UUKDcpxATjBqVSUmTR9Mv3ZtiX8CPR\r\nkBcMqO9E1KONLg7S9P3Z2mj91rDQZGdQ9m4JwY/c3Vlv5W+thafjfhkVmh9+\r\nv5+OEI8lRDGNe4t18ApBNEdyCC9/kBY3AQMroo6XoYSZAFxcR3ln+1RKsro+\r\nId8AwTNPa+dam1fFYhQm2VOqMTeVtyC+g0lDjEzaRW+kFDd8wuEjCCUqjSE8\r\nuCjwPQELxZvGclMCi2+Plm4o8khv1SKg/5Hn62CKMTvO/IlvmDH5OkmAWqCT\r\nXTk8aq1c+meuK2OUpZSbQqKNV2FASre4IYX2dMFt3hToHBSKOkZE2o4ILvxB\r\nR/ZX3H+266w9yZqMTO+0tWmUb/DxUXB3Hn8wu+Ic7La3z9rfzHW8gC/49Cu5\r\nktlZseJp1yMPU7FBgiIdQd0s3vEAnXJAa7KUPWz3lh7VgdyRf5+/Y6sI7vl1\r\nkLozXrk2/9gHWp5vN8beTqYUhO8wUdXyNEp6HwrcsT9yh2VBTJxokD2XlnTu\r\nSmgg5GvC+lBeqlOET80UdTpUMKt424IAHb43bfcFEPcF54TfnsQYvMyFOCxm\r\n9W3melEyn+9N+hGHwisMoQYJX6BEJHMR5ms=\r\n=1Uco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/density":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.357f2e5f1.0_1667242204330_0.8445546858886381","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/radio","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41a2650afa5887f9854c43231c3fe65fa5823ddc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.eb103d4b5.0.tgz","fileCount":41,"integrity":"sha512-1CSINw0sHqNqGyZuymCdFYqGHaPmkPSKkowe+qQBZlymM1QW9lmo6UdhHTKHuqesgsvqiabzmbWNcsKN7V/OGg==","signatures":[{"sig":"MEQCIGVq+Xh1/kFW78FG/A8zoVf0eIh3WyY2vpKHJOUWHCbtAiA2jGHSuaPeGY852gtIy1fw8J4PGjdGcXg21cKSBSR+jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCiLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf5g/7B1wx6yW/JRW6z94SflSVZb8D8mmP9cb1X/urxbsJfUGEAa3P\r\nWEP/Tub+cfSTvtrYVtr3V0wtEeAJBL/R+1xHUsxWywgOXeXkoO4o1EwWVmzu\r\nsyHov9/r8s0w71dkv/LmI5ly1IMTFCAk7pkaupjGNEFfrqOlGzzQouRTloMu\r\nXH1cdzFIt9YD0DpsILS5Dk5U+y41PFHqpNetlpeuHcXEvJ0ugHf+bYgB0CKb\r\nAJnzDcQDxJZXZ+ycH2SaRg2Y0QlksT+Rw8Os3CRTrS8aIqqxqAdu+ATFyRnD\r\nSiepxQWFqKqwgmajt/FLxi5kCudGHyvt0isX348p9AqkV6ain0dNY2MD9JsY\r\nFyYyHie4uxFW2udlqBfOb698zGoUxZH/F9d7YOkH5ltLzejQzTmvmzzghBBQ\r\nQhkc5dL2faiGolgzibEQ76q/kcx7mtYdjqTZzVFPEIYiErryh7hXVynH669U\r\nMqd/LkKdtKfeycLrb4g/HUQky1DWFvBzgz7Tf56CYN3SqtFuTWipFIrNMz7x\r\n29d8+bwmfBgln0F3oALkKatk23ONK6o48lUC/0R2ePCWoaLtWplZ5Ozy/LGV\r\nNYI9mvwQm8wbwlai46iprA+Us2ilVDyyTnUsCMsV69yUj0OAKxQ3EyJmesUz\r\nQ1q4fOG5SAH5VY1Z4sSdX1oIGQW8tdGHgW0=\r\n=Na4k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/density":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.eb103d4b5.0_1667246218993_0.7036940543632764","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/radio","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de5983ceccbc4a43c5191978bc338f6dd92b7b0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.af5f01223.0.tgz","fileCount":41,"integrity":"sha512-uiycCV2VzSVSvdQ0J9XysXuTHBgyRsgnjdFU58Yzj+F2m2r4PgBfo74ZiBs+tZy1kN00DLDDxTywGIpYqU3U9w==","signatures":[{"sig":"MEUCIQCRPpvXVxPmFmzVwV+GQAfQAAVVo6gtPKsIwI19/L8uCwIgc8KW0uG2z4iybb+HofTzP/ZWdiTMsb8KTczzuHv45IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1iw//fFlRNRY8rlyhwrHGxDwqAFT0sLfd6lH9kWMqzNanxVjnGHon\r\nZTZ4RzqzPdBoxIyYjx9iDEiobZwk5rtgYMSNmwizQI2Oyt8X5AnjN8+lJ2XT\r\nd5sMQwQ6A8kFk04krxgdjMwZTmGQ7qMm/YRi+jqYxuKY6nVYkJWZzMC3yLmU\r\nOwtHDbl28GgfzvtfU0aJcPWXoEUL1pn+AHUy9Rb91s3mlxhEWy+Zgsk6Av6G\r\nkmjZUYWjJS61sMUrpsF1sRUOQGrFbKDTCQuW3iJ/b/KLMV2IftzWYhbPlanG\r\nld7mCtHbuf73Gz4/aL7BZ+VStJhKGioRPVIqUgPFFPNiXQFz5oFN0OidkSAC\r\n0/BNFNPJntejYU4vQ5QfhkwkY8AXD+UDnB6cCQwPrayWQ5eUyxvNpOMT5lIM\r\nnpp3HppI5gqHWYDcDcbcNAmQT25SgSUsjvZMV2n1iCFADmG3OdYCnvIovJAu\r\npJlqQUT/fqyzz62d9qvaFu0rEpHLv+65BATrtxC5iCdM3He9BGBe8Znd5u2l\r\n2XiGFJOnpaacW80rDfmLJPRWPrwTSiRpcPUg7DxiKOwx//iz7Ve0fwiQb0NG\r\nE9vqb2vmNmCNnxmirr5KULxZeK4WNCZFRw1FFpZMsHCI9Emlekuf0owWgfvU\r\nxZSpLSQvuJYT192VnrleJkRIgdrI8OZgZ5A=\r\n=Cs8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/density":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"15.0.0-canary.af5f01223.0","@material/touch-target":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.af5f01223.0_1667327845323_0.6381906682163296","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/radio","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7be74499544e9448ebd436663b8f51c728a7f234","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.58733ef41.0.tgz","fileCount":41,"integrity":"sha512-U++WCy5aNYHVk0CGjom4TD0tOuVN0t/7wwaP427WoNPrnWGAIhBgQTEJhOigT7bS9SxIxR2z7MzxNq+D+mYwtA==","signatures":[{"sig":"MEQCIE9bBSiHBI34ccydRs/iyzl9ZbRupNTxsQIFHCULjreCAiA1cXkFOvox/ARYwHSUVhDKI4RTPqoNSKh7Nkye5eOgDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrLFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+og//eRO1ea6LjS4vLO1krHYmtmjsk+oOogxZYblagkiiFU6ASh9i\r\nD1J5QjHRQZdYIhyqoWSP2we4P3cFY99N7MZNMu8/0yCOgORszkp/Ity3ErBB\r\nY42hutSLYfanZ0mlu2P2sD/QymcNY2tAX5pxsLaC9JMG2z8KjERC71Ae2nMV\r\nlQxGXfg9uaKD+QuujVUDSPGAXDphUgR2NQD9e1XEqPb8EjyuK3N2eswsSvrt\r\nmTirOWJjc/QvFKv9OTwMfm0fIXKqtRfLQYO8OZgIMDUq18Bs5qpaIBE4wg+M\r\n3Pqif7WH5wz5JUxgRPGDZTtmXdz87M3zzxyBlNcUyVGALQrKCzV7+LzS5aXF\r\nmHoxelFcbs088WIe857WYSvV6UaSy1fmfI80GEs99/Q9S+Xy2ZkvPthwEo6D\r\nxOO8rCfFSODfO7uXoYmSULkXFoYu2q8n0y5eangvUoBBdwIRhg09qQqGx+R2\r\nNdYFugVA2Pp5eOL+xPUFQJ/68YYxUURRP0HfCAkbo54+fZrxDQGA9zKWYzn6\r\n1Mz8XYAYka/SU1TbMd4A1r3Ds+Dc8c7CuYEhc/+5ul/fv3ms9nYqvTPAX5Cs\r\n4t/dH9mQ5syxH5qlZM6RtzOwjwLWhN/GgN84S/YK4oElQ9zxlzTJ5AEe6URI\r\nqgjv7OPcxfOmo2RiW2B+9oubiviKGeRRgHg=\r\n=oFg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/density":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"15.0.0-canary.58733ef41.0","@material/touch-target":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.58733ef41.0_1667412677474_0.3158707473751756","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/radio","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5faa2b6ff5c747fd12cf8bc0d0c1b5306ab89e8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.909b48215.0.tgz","fileCount":41,"integrity":"sha512-mnXDhQhkLqCx8NWG+GOowFZiHxmA/dnyVF7UZklCepTmiMu28NFIkeGLZhPpcgUt8dHKZIzNKZnxId5h1ioNAA==","signatures":[{"sig":"MEUCIF03ymxdo4cWCuSpdZQEdDj9i1bwViERip+UvNMha/4yAiEA+4W9uRc+PZPkXc++SAh8hsi+aEsDWRGwwpXN4vlEJvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz67ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Jw/7BVL0AWbnSBVQC1iikdEZu4dE2ZME3Cso5pbKZ1M5pt+IjAEd\r\n8JoXmwmcyNAtnAtdmyRzu6GEPuA0hu3Y94vL/v40Nz2QMhFNmIhsx5GpSqfA\r\nhzZ4EPyvpq3h+0L4a5b1uNOQeC1l3DYuhosA6M1Gj4zvyPdGrQKDFX3bzjEk\r\n5iBd0ctqT31/7ZDMaMuH3UWcslRWjn8yHceIJfwI7D29rNjI6Z4JP5czepGe\r\nkxxcMswKxxbBeb5Q3kDxCyWM6b3j7dUmNPzf/p/fbof2yQZHFyltzSMIDfm+\r\nBG9aNXulhOpB8Mwj3I1NfhELpU10/Vzv1eTV8LyEWI3fWR8KE/SWwB19+kAR\r\nCPeplTwZa7LWoKThI1grm84ojwj9IV6dpRdjPth4B8NRarIxTrRGPyA8vQX0\r\nEWPW6B8XNTNwaIU5+HrOFo32hdsfAphyf6a0ABBzvBhO0t9SDoEQeCtiytFS\r\nm+YOa06K0M0t94a6rdOLyUW7fQsaTLOsqhLumdAus7ZOIzfppjcXIKVWOu0A\r\nqkZu4yz0sKqxuCEFXE3ngbNEam6wmwxxZsK9BZwoNDSsydrEoY0MzcOVft31\r\nivFjDpRP5ZtXAo9KZfBhnu58aJxeWaGxU15PA6b+rL0jeKpyq6pjpyJrtB1/\r\n+ymxNG34UjtSonujs6KfXcQ0pGAyGtBgsgU=\r\n=Crul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/density":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/focus-ring":"15.0.0-canary.909b48215.0","@material/touch-target":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.909b48215.0_1667448507505_0.07644136759905029","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/radio","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6062a6ebfef6ae65d14cf552ecc20e6ce0ea74e3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7f17127d5.0.tgz","fileCount":41,"integrity":"sha512-4iDNHV7/CPDFnCr6yvI6or6rPjWniEXoHGGQdjyTOD9OR55ivZfor3Vxf8d3aknlIoiUFu9d9ieK1b+egErOGA==","signatures":[{"sig":"MEYCIQC/oQpiIQXSG5jP7PNGC8df7P+7zgLVt7+zAAJKcFRQlwIhAMfZQoZ9mXcLZTCVpW/RuK1B1Fe+eABg/h9w9RA8sTn3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJug/9Hye5Ckhf7yxH3+wtBBCIz499bQRANik2/IrltWilJvy3aNaF\r\nAuX7NO40hgHKmD7wcyBqqiW9scsqoqYLzxHX5hmawDJqt7mZ4tEFcb7qAIpw\r\nCvP3EbA/euCdtgdqR3GZw99/lXATtJQHALTMCrHdm3Gu+fPsO5i5w9o2nX4T\r\na/ObyQgc76UkorQrw+rwuQEnJakInE4j4pZXHLGI7r77drGkm9vph9u3/hIT\r\nZSbGu9PvU87SjSyipMkK6qaInfzVazAbwjQdnO4TvH/5IMyzKskh38V7CG6i\r\n5MjLjbjnzD7QTI8n/00sNaaG+pS7tNwPFc2ZsksqTSEGvTGX+Q3c5J3n+Otv\r\nLhFuPEARY6CsJz8Ake2I7HZ9O4XolWyu1SAtouP8NyOtKSYD8TPiZ2UsKOPZ\r\nYNAF2nZrKuvdcbTW1w0ziTmdThu7jWyRvUIG7vFNJxJDkSD1p0BMEFatTXkB\r\noePADD6TygVM3IdIuO8nFeUJSJgFEsuggEyvIG8gWjDqP9ux+9WaYZzkaCmW\r\nNj8FJSN0iJASvASKah8uNwJxk49DkS2FUnzZ5FMu6mvZN8orXvFKMWqXU4F3\r\ntSO2cJd/Ld08wNhzf0zjKpUF+R8RvaKWON6YADqjSblXt0Drgj7YXt8MPXEU\r\ncBSpHjfzb+yv2XHKoDkKPc95PX+/lkzTAIM=\r\n=wXCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/density":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"15.0.0-canary.7f17127d5.0","@material/touch-target":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7f17127d5.0_1667499584885_0.359922247027733","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/radio","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5307c89cdbf4ab4ed421ee116e077fc5bdf8fd6e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.da95e2a05.0.tgz","fileCount":41,"integrity":"sha512-bxUxDmwO2NnhRdzcIATMwdk52uzoR9/hxoU6wm0J5coRMnUZHNhgic3VngQwvdV3bx8VvDSEVgwLOe1LM0t9dw==","signatures":[{"sig":"MEQCIBNoolzS/cR1FGBouQLp04+tqAp1c6kOX1rVbIz8nr/jAiBIJkRk2eGF04KQ86iHJR1UcogeIfi0/2SMhO/xi6UcTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUT7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr18BAAgLKX3q7PtG83dKqFyH9Z6OsdTsi9GU1gqEr/7kilB+QThntI\r\nrq0aXWLjM6Edf/etOBJ12A4sp/zQga71eaTAqgyRFzjNjNtO2UxJoq2IwuDD\r\n9mgTIkK5OBqLO0VTDlshX1SfkDH52f6BeCGEHBZkxFy82r24DEL1jJym3T3z\r\nmp1AG5O1/piDBrqK6edj3HvrqXyUfbnN+rSQrDog3aAShfZLRYGm13RXQSOn\r\nucraN/UrxEKiEd23fpZkURTSry87dCI7FGdwNICeGEwl7F1JfNJrIGn+z2iE\r\nnHzI9thEx8RQI4+GifCTfUmulfoFX1QDFuEt+V/zxQdqQUsVHX4qWVGTVZmp\r\nHv2WfppqUm87fXX/OZ7u3CmDBO3tzrPNnvSSI4WBq7HdpCvD32hFCa7Lj2hJ\r\nmaHl3A0sNvKe4GoNCVftnbCxzMmEfSVl0DHUvaBB7hdfp4s9GlIZJvYbTxqH\r\nAbPPIOT0ie6hP/0ZurtW5htOjKt1fQoQ6G6xCalmhbjLKo4u7LKdCss3GsKd\r\ncPcz5UHRmB8Ol0+ahA2vj3bLY1+0B46BsTzjYYe+J63mUEjiaQYHJbghlj5h\r\neopQclTLCx2BSrOWeEFngKkQJOE0OSqO/PMMfWYQ7DpMjaUO01IahznhK9CJ\r\nc/B7cOpg2e1xRclW6AKyr2VbwtZuqrz8n+s=\r\n=YKOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/density":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"15.0.0-canary.da95e2a05.0","@material/touch-target":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.da95e2a05.0_1667581179482_0.6779525546428322","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/radio","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04de62ff50a8d69a80cd76a68a03525140669dd8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4832e2750.0.tgz","fileCount":41,"integrity":"sha512-JB04lB4k3l1K20hQ4u0Eb5cp3Ea0xFP6vjhCFYJJ3Qje2IHUpqb2LAk9mr42euUZnAYKqhmyppikemrFLz1MXA==","signatures":[{"sig":"MEQCIB335XOO9sZmdrSNKxRBZPJdzHmGhCIhmXKXz5BNIWHvAiAHuPliAH0dNAgxiZHIvYNFJ4/7ILsMF0vREjNNGZDcbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXzAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVjA//cZEzF9KHii+tuYri71/1u3fI/4TFWU4+jhwwod3wt4GYOkkn\r\niyiZYFvg958XBOpbE6g7LHfJbE6vHCUuq27DpSHmjYP83WABT226I/XXa0pJ\r\n9n6LbR5oT1nKkeDGAP0dyDqLRb4yXmICfdUxBiYWpjIYwVeSxlA+5/wN4bE7\r\neET/Xb5Mv9bGzFJZsGCadmY3V/DB5/nqHFgHHU6MLrC3ndHqKyjCUIR/Uxih\r\nVJdAN6ZXhG34gGZG/bv0ArxRqGF74f1sWuxoruU4lpV2rWg57pUzZdwXgyjS\r\nx2pDjb8dHhTj39WlridrEHp3YHkwhgJ+3ih9SofRamIPhWgf3iQuoTTI/EFn\r\nGRoBFCKcqg4NmpwidwbsDNG0n1QSmLfAst+yMcMLFKIzZW5EiGdsQB9W/K7P\r\nhc48Hmzxzn78nGlrsuPi02xVKsenBYY0aiAGpn9rtNO0P47euINFkt5kpoNB\r\nRLvRxPDbHlEjt62x2vEI+hEUwV0JmLUINk2lGBhlTmmMcPGQwDFDYPTTjwgJ\r\nawnQK9w/a+QzS/VC1QvdN5asFaZlUwaptSGQeefIZwsekW65UbHh8z7d/gYe\r\nnpP1/xhBZrSUCC5EGuoeEywDlPQXackhkx1bRzymkuPbI/VH21nS2xfJ7gDO\r\nzjPWtUTWA7uLwT5sEYsIFfvV4gc5rTBQeoE=\r\n=vkRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/density":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"15.0.0-canary.4832e2750.0","@material/touch-target":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4832e2750.0_1667595456520_0.07395926635727501","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/radio","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98e4cd3af3d55f28cd4dbbced2e779fe38462040","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.215506426.0.tgz","fileCount":41,"integrity":"sha512-PoiFebByy49myBT98/9vr+E+jTkIE7aDJG5uTf1fKjJp2Y2dJp+4kxy++BcM+wYWcYpkN4N9l7i4KGE093fE+g==","signatures":[{"sig":"MEYCIQD178Z6kj3Bv7jlhObv2iUN838iC2de67zDeoscnN6hgAIhAM0f4RaG/CJRuva7sw4tpi7SCQB72u9d+T6dZIb4p+zs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh6g//Xrwx1gsKL+rqRgk5QGieJFEFIfpr34f+Rd5P45yvBJGaD4A/\r\nW0Jvt1IiJPSeIjgiWfbTplhYGxbyI+XEAznPShK+GCfupPJsHOlUIwD+FIKd\r\njxvVBIo2+Yiba2SEkpq8/GFeo6/+1Pgu5glBixRDawAMMjo42bEgSrK2nYNc\r\nPbF61g1uPZSWaJ9SLKIFLLIYasEh3YTmCYGP6nnDYsOC6AsYEn10yfrJV4wD\r\nw/S5b9h8uqFvSPMvXV3LKoLLbvjAWMyYoMM4Ir3SxC6kdqphwfwZM7uGX6Pg\r\nYtPbMxoPfTFer+ZEQi4ABSNGKpJXTLOHqbcrsIrpejg6vz9MSpEz2I66PYY1\r\n+lFDdgxQUD54tW2F2BiIXM0Kkc8qah21ubl2mctHw75A6k58jzZzyUKllB4K\r\nRy4RbeRA4diRAhQMUSnFcowyaIDoRMKPbH1r9EDpJGNcbgpinBTWUKzNxiKQ\r\nb+lE3O1n6/PAhPMSjfNkqXs/UCCgoMXY4fLHfK0MDfOHYMZfY54Ue/znYEEJ\r\nKYU7OmM/zmqk0pKw+xIjX17BZc7t1c8eGi/OAOv+999Uwd+Z00lGO7eC5Dpw\r\nVfkmZIZcc+f5XFVlGSwgS9S5p1DfuQggM1QlwLJZyFWHwK9Jrsj1bbVgrobT\r\naOe4w8UorQe8QidBSsO4z0AkoSL19hhgQis=\r\n=ue97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/density":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/focus-ring":"15.0.0-canary.215506426.0","@material/touch-target":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.215506426.0_1667610392045_0.4632158384706968","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/radio","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b011ebc515ab381a0295e9febb41c18135176503","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4cf917476.0.tgz","fileCount":41,"integrity":"sha512-iOexBduqXd2ikCCq4meNf9MP8bmQqLYmBEYOsy3MA9TLN4/tDCVS854TrUmIdBDJdhau4UyvaId69BZh4LEA9A==","signatures":[{"sig":"MEYCIQCNI9YHAopWMqeFnYxgfKLDw0ggA1K/73l+1quBvSGragIhAPBFdnLgARb16bcsRa1ATkc6ukGe2zcZX3CnKSlUYuZg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqW1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG3hAAj6feWVpmd1JiY/9gEe+5H+82lLfmkYkHMN8YlKP6hKdSCc3G\r\n/so6DGy3jfgRQtigGT5/Y5ri7Erm2y0K5eEpajKKqDRU82davUXmtpxS+BAi\r\nT+d1Df0FovjOH0YQ2FXH0nRX/szieXN56iz4+2PXX8i1dYayJGGURx+M0Xyz\r\nd04DvzRjtApZN5qtmKHBETIuKxlurfKhtjxwIx0ZpiYkmx3UUXgXEAELtnu8\r\nI3E1G+pBhYPUyi7ChDlGF9omm6FcHh68AuE3K/rF8MuL+GYgT8FzML+b6lFw\r\n0gvKpyDCGMXmQ3xkpeWsH4lgkLtQ/rcAPJwNa+7ejm1jt+uqmKs0bezS2wSH\r\nDU6oyK9l/5BgIsr1urwe/16ob2LU5Wt6kZiAQGVt8L6/6mhHmMj2P/F/SNbP\r\ndX+qyz2Q3MZ5mnVFeIw5hfJmsyNKE51JSD5+QjfdYPX5pYPS/xHx5VHTCgkp\r\n4yUEBGDeZSxsgqgOXhLhCo41Dpz1dfaZkVHWD3ThYwXU1HrLhV7CIrm8kmH8\r\nGVyRozLSWyjkWBS1FVK5UuPa4PDXHwezwXD+nDvxaZkN7jhinlTNLquWbILI\r\ncKp0yGtm7O2oM+PzH2fQGlT/Hw3Maa674YAYglVyY1VVgH+BrGyCwUFdKrJ4\r\nbyiF9l098YPTYqE3kiisk/PUUA+yIOG4Pfw=\r\n=3uSQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/density":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"15.0.0-canary.4cf917476.0","@material/touch-target":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4cf917476.0_1667671477183_0.7389901624433857","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/radio","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab589f34a33c9c290bcc44e68bd65ec4f5a142d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.eef14bd32.0.tgz","fileCount":41,"integrity":"sha512-gQdAG1iLNbDSAUNPOuklF6+vXBpXZQpA24m/nSUzWK2nAG+04OzdVxGg2zbzoJ9Hzz7c4C9jHISST/6ngZNA6Q==","signatures":[{"sig":"MEQCIBL1u6CI+2xp0QVSB8vlJz9erBzpJykabAOtSTppSzJMAiACqTbRg259+VeZY7bPOODSmNnTwTUlBT5FErsvgI6lKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgkA/+JJ9cW1N86ZNHsE45k/Jj7Th6UETjoxD7vJhg25uDVtVWGM9A\r\nDivsvhyCAEKDz+7lbkUk55YB0PDq2ztg2MbxBtOIwY06G0Qyca9A9jtgnjE+\r\npgUmOIDy8EwwWjiBjlp2S7SnDA061SmF+tldvlWv2oszVcxb5j8s38SZ5bH6\r\n96aJbe5F8yyhwSrEz75JnXAH/63xtL7qQJFM2F2uTx66cLmdfCUcbiRaYYlJ\r\noz2at/29cYrPf5jTx+XFV+DFuIxS0JrTsgVXbfKgqyRZXlSd7iVyD209KN8F\r\n4KwczQUPr1pIoztRBJdT21FpjQV8PzGG5SezcBmxZNqE/AFvvJutWGJAljvc\r\nDIPjNKiRH+1bgVTI16i9OYtq8Bg6qSs6nJWVwbtnUzsGmGlMjDzw4Jg4TTnD\r\n+JlwcoQjDrGwBK5M7cmardkpUZW2ycR+1X60ewPm/fX8hqar8KeIkcgrk0w3\r\n8MR9ofIupxv8JBNy85iD4WyNxBh4pInRAsGfon7Sgd37E+J1GZLp9fUoaZgf\r\nRwhFWV1/cyjaV4dzuCJgSgG73Uib+PJ8SxkLNEVaccX24F/x4bVk55UqrMZx\r\nbl0Sa2/lYfYfc6ZnNr4MbVs3bzYwVHDgFfyIudrC1Gfhr42HJaj5euucneIo\r\njKUfde2/f5Ghsdk5bloGU5qxWGp4YRTWoq0=\r\n=No5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/density":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"15.0.0-canary.eef14bd32.0","@material/touch-target":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.eef14bd32.0_1667755507619_0.8132419262792081","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/radio","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e735c3f199283170bcfefaeacb26f56aa1631890","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6faa29fe9.0.tgz","fileCount":41,"integrity":"sha512-nYID96vmRB0ujy3NhTWNXZcSnNLYA4a5qIbT2Fw21ReoRMq1IIthfqh4OIows/kc/BAk17YmJYS0RzDunWSvyw==","signatures":[{"sig":"MEUCIQCTgj9wgW9Gb205jEIT2FO9V0OZLEa0+AZZP/6tjil1VAIga7TSB48w5g7ouNT2/0wOs2gzqmCHB4Bv3T7+fIHoE4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHf0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwdw//QiSeE4Tu7zpvuZSybPeTo2++NYq4j4b6jhZ0rAWoP4nuPGDj\r\njEc0C2D3zsshm9tb7uaU0GgYTzd4eaPmullLXFI5DGkXTFW3egVP6wGtFV4q\r\nsC8C0irgD3UW68Nk8jf3/+t31pvXatiFQ1AWHV1a3Kk/aRONl7ay4c3qe4cU\r\nneFZdg4QCsSSc2KZ/umjwbhwvTzzYzom1zdIIgfK+DOjNZcqfqDIkilASL6n\r\nAbPthyQaCGlKQO6Kodl1LOao9dPujdB8+YSvgwTnvFo6k+91HGhmzX+28/MV\r\n/rck+x60E35uqf88dLSeYzgO4eQZoT3s9eH7IsqtomIifM3ZaDslosWyoMYs\r\nUjoUWzC3GWzssVPxAueBsEBhNavOlJkGzWbBXgcpIZQQ/Ru87a1zH04Ocxye\r\nAYXZMTygoL3BUSmYoRw6Q9slLCmvo4CTPIQwWPeMHIWKJJJTK/6IxuTUsPa2\r\no8Fz5X4oQ7jSQtwBzGcDHzl1x4yXgaAvKpvnYFLU1SY6f5dUYZSbUajtzVnN\r\n9IZIendpt5BRnGJISAf5ySL2dt/FQAQMzNNs+y39CJPw4AnIlZ331ioPKaMT\r\nOM+ha5d6pJGWYTCh7ZrWnLsR/7is22wQ4jF8JbU2LX4byGzfw22VPqPMZVOO\r\nU1fglv7exhlDZfvH/YEKS9D6fuBcITodIZU=\r\n=TLCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/density":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6faa29fe9.0_1667790836605_0.08475717422070805","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/radio","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f800266e3225a599a32f827207043401a8d7847","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9af09b967.0.tgz","fileCount":41,"integrity":"sha512-M6Ke5GmK1qhWhYmaHpQJ8lmBDXPsVE3o1JhTfZExkN3CjBfoo3Q4wwiaaWgP0cgrDLDl1egT+Lgv2Q4foKkuvA==","signatures":[{"sig":"MEUCIQCHRnlpodU+NbAgCfyf/HsXYK5HreZUK8cnnfEWowrz0gIgVn0Iya2pkisIwQR1erfVHhsPjnyhL4Pgv7F5jMJtQX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU5MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIQw/7BmfcuYUCFLTLRI5xxOElINGiQQ2dCoPwL21xZY6ByT9UD9hr\r\nsBCuWBTxT/UmZrtZbBF9kcARkZLY8heGOuaxulJDv0DJsWhFRs4auC628F9j\r\nV7nYeflRMUu8GnZHyOl886QHrQZWRzw86BirR6vuPwq7ipylKZmPFivSFvOp\r\nG7LosaKji9KKyibYUeg3xE4NXaiKDBHHoSsWMO6tJMQIHRBUpit6doDdqPlq\r\n5OaYRAzyHTOPIqrFdWeCu0+/Jbt+t7e/Edgn1M1/2J2cVg/GOB2hKKDSxqCt\r\nCjv04dpqM+n4vVf+cYejEeY5NO9xDIxl/OMPpkMdMQSM8FpbjpCoGoP/5VlH\r\nj9rnjRGyzbsfZoEnk/cqWAb2lXvxvYN1+prJlJZQwBG8ALyRBKyAFGlv04KR\r\n488xm6Y8sp0QbYXMmRl9gmSphTuUywi31YSUW8chKgp3qL5EzdB/266B9L6+\r\n65VtQkKntP6lvrYjhGWT/+CIOI8XNKcZLOVEdvKokk/k4fCGl3MDMpkZcia3\r\nsG9qBvaEBeSODFlM6dZp1whVCkcHerpGNKwU+0vgIiNdEGnw7nLG95elFQZ/\r\nOx5L4j3zyBme3axzfrZqSRQRvNmXEUwyaSwXwL0GhB6aU/lU5qqhDdQ4sXSw\r\n7Hj84s6wDC4sZ0ig9gXyD1EbZO9PZUqqaC4=\r\n=KcBG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/density":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"15.0.0-canary.9af09b967.0","@material/touch-target":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9af09b967.0_1667845708739_0.6915677099026407","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/radio","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"429596264013da1c48e615b95f8d5eb21eb98229","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0f54fbb93.0.tgz","fileCount":41,"integrity":"sha512-uxAyKLBdxhvMFXbBNVnUo33Qt+DBqbi/tV0gsTCaYZPUX+TAzCHzQ5fOlOeW5cjNrtNGpkM3o5xscaxhhn/Y/A==","signatures":[{"sig":"MEQCIHQ27kaOOs9uRISURi/dv4kU/uA1Lu0iWjVG0+/7TMg/AiBYsDH79CYSZTeBRHlhNZFhfRqXB+wFdNrSs9KWz75++Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUIA/+NJnbHovqS3+OgkZgZsbTONIHjphYCtBV62VeWbnNFCjTvpDL\r\nWe/9ypF1Q3lOByKC5dfX0BqEwm1AbHOpzyCraMsSC2LSUGO8OtWImL0aW+i6\r\nNl6B2RvMjF9OolSXziwafRV8c7xp4P5r6KvTHXZl5QoPPdx9owe4XmDLI+DJ\r\nfqfFzhZXnu8vsRq0P8LZfygoY0JVDp0SruoFklgAopYb3A1kMz4OVouCChtH\r\nQs/1b24wZe9EjkEHWMIX4gLYbSYAtkLBUToJUTQW/GxFxBIApoMBeTRLZb2H\r\nl5XhrfIBC/OXSm2VRQ1ydSlh4VwPwhJNqlCquNh9+aW+He+2JlHeVkbcHDe7\r\n9Y40iQk1VlWYj2ORXXeGFCubk571kzhSRxQskis/j0ezUNrd+yTYy6p9TqOL\r\nbWthTZ45+EDNEvWGGpHYRHHsEbzUFr7th908G67k1qdvEG1OxPyhM03UFcHs\r\n/rjpSzOUdfxCJGaPeuvAstHuQj7nxSBWCSBltLCHkLbsLaUIYHk4GHkVDzH3\r\nxDJ8e2smQ6vTkAP8CVcvgKZv7pvCpwFvJuZPzxZMbZZwHriJgOpp3DzwkF1X\r\nWYYb73ROcOH0PSS1uVeeF6YJgLRCDmcZIE5L5sHQP/afCXoWqoB7qiWlKvSd\r\nzXxVu2/vEA+0S5kAVnLut+bTjpvRppSpQQI=\r\n=ccOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/density":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0f54fbb93.0_1667944627095_0.1521701139977738","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/radio","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9909b18a8f397da5d87919228a65c3bc4ed0a1ae","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":41,"integrity":"sha512-0CblrEhI3uovi54+AOe3mNhX6tqxJ3bZh9Bs7Sz2Me3IK7qk7VgQwwyCcjlBNJW8U8xU79ECbNA23Rv8IqdH7w==","signatures":[{"sig":"MEQCIHgbAfmWYNDadHnMhdqnlO+2CfbpKuiHaTKKXQaHCGxNAiATFBxxBxMWvEr1hwTJpqOxQqAgp/pIGt28+WwXmSaAew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayoZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqXhAAlULr35it481Rg/cQ6jTU/idAuPKNEWLUlctKHH9u9MrFpd9O\r\nKjZEchE+Oqv1rZxMVkr7Pxq1EXnslOdn1MZ/9K52Y5HyS9I7neo+tEozUDjL\r\nAwsb7BIvTIfMXEZiP4YLpof3uLbgo53PDSHn04024LOS9vbAMNJdnxxk1tTt\r\nwA6sGZZEOA7VGHu5yfmejC+/pB8ehwiFtSY3yu2CYUcKAv7JNt2PA01aP8CZ\r\nJryixYZ3pYNfEK2NYZsn4ITS1jrhFQskQ5rhnCiu8lHKdIhAZ8gNMzTN3nIX\r\n6AiUltNmySXWkuvi3YRh+xoBotvLOiioChUK3yFuUgU+9k+0LmcDARu8lkBy\r\nGTVkhIGajSzCTatjsDL00iqnvD8njE99Fi3ACDq1Hj5wEBiHex9Ix7iK6d05\r\nkO9Ys4SNtZjxlxRa/IwXMxyL/qTElVYkfILGHyVke5x7M6K9nYxJTmWojdkX\r\nH9odVSYWydMOZJuGOyeKL0eVLA5O0pcYL3WambFABujIFXwsOOlguFb9NTuo\r\nJDoLCzaQK08Nrpr9RejX57ggbUfvNbsNTttXDWgn9GeWvae8rgGqbPfkrPof\r\nVYTliYg/bhd7Hrxlgz7xPBkAKQim5rJoZDUMWoOI10Mf43iggGI64wWjPEoK\r\nKEcTqds2sTGOza9BVGhMVtNe1MAKxxUSow4=\r\n=WIi2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/density":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a8d47f9fe.0_1667967512993_0.06752062729520691","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/radio","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef3590c901e9867ca9406215d5abbc3e89cda198","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.66a1e75e6.0.tgz","fileCount":41,"integrity":"sha512-WEik1fLv3S2ccZg1Dc3HKZz6oX/0iEQ2mZ5dpfMhFbewIDudNoa/5z38HWoVTP+B6i2DaOPWrwQl7bl8+zQwkQ==","signatures":[{"sig":"MEUCIE1QMQZrH5L/kCWQpAEY3Cq6/oypSzObwEwiq4XfofE6AiEAn76gV2hRmAJS0LznW6mqQP4pocGlzRe8YaC6ds7+7Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXBBAAl44z/YUFb8VD8He8uuzUgA1KcwrE4PH+8Gd9xkkXjFYzmTZq\r\nS+04gXov6z3bGbfrG029vUvQNHIqif7YjSpHLhGcvZcccWx7rfJWc8foFAKj\r\nWNrHHzZ/ahNYgNx1eGy7d6CJo4TU9Y3wl2/kK+2tnQq8HsTQujlyG5jwnxBY\r\ns6Jvn3I4FICcGYCRSRJWfuiZmORVdp4t4sjVPL2fHF0YyuAhVl9GgNcbu0Jt\r\npSXNd/P27jq7PovWyjIlTBPRVHpNu35/hGjHFWawmN6Gj94XSF3NedgAegsE\r\nMFZY09Mh2mqPsznOtFEjs+eRO0JwrP/WpRSy/KWD5jmbmrPQ8ahgZ6ZLg+If\r\nB5C53zVvno8NEtYxT4s5hiBiTypEv1sLz1irwWGZn8nBSLO13nUfm94U56bW\r\n76gMc+3ssCzwUrFfad5prgxuRT9zD4F0YnQAqCoyyrAs3Y3hv9/BIQWP5RK1\r\nEBTB3TfXGNJTByQ5dayew9ac8slE5JYpaKEpGdncnHKlvP3B23HO6KbJBMOl\r\nx63okzS6klyhLTO93nleMQm2MNNA7ycQ5NSdaViv+mPET0aToGBN3k/4AxXx\r\ng2UqKxzKkj2oK4ClqgqYlCyBFOH7wXO4jzRdCg6jjtSQuMRsOyfDjBNfYOQM\r\nXjxlgJubsHPG+UjQldv1nml4DJjKOdE7Ymw=\r\n=wWaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/density":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.66a1e75e6.0_1667986566651_0.48089167952577117","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/radio","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f9f8e12d348cac049505f901fd06faa7a8e797a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":41,"integrity":"sha512-nSOKCNuWV9CsJ/aCJht1uMN2gJOuqQydrmKiiUCgfNX13zH1CNdIy+qxIUqe8cxK/nar41wm7EIRw9pQy8XQLg==","signatures":[{"sig":"MEUCIGlMgaOUVwll2+QnkN27rFYMWOWjslxIzgbiL0oeIgBpAiEAk+CEcdBXnAksj27I9wlZzdm2d7Ep05yEyapI8cTsTqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIKA/+LB39ylrC33pYNTy0lauJSTTIYMoLNh6OykDksQcHiLzoFlEt\r\nnMNA3GF/GUvUszgAZLevV5iL9jpN388mzd9xRIZT9NDxa8dRv2oJYz8EmII8\r\nIXAmModccFlZe1NUbMfgiAO8zW6y+Yq0fwS4H3jYZ5XibWHC2Oh5xIQvCR4L\r\nxbIqtf80qXTwzkkOuQj8CHUzNfuPc6DaqnA3uBQuu60gNIURoSVRkQmDL729\r\nd/CIJXAZfGl+mAMPhmY3gMB/ZxrZIxF5TArLwYw13lGN14Mf73NvetEbnsgo\r\nlG7VfZM9Rli7plREdASsgxkOAVG33FBka0eO3cWC6L6RiAx4Z9R4Mmaf/PSF\r\nc6ENMZaOFfYam+dZivcsHdyDNGwuR8djZmil1XEuCWrVoFoXraekdlFndl5E\r\nQMsCI8aIo3c7T4vSBXKXMuAwd7oYqK7ZtShpXL8a3BunYi7T0WnQSDmIDByu\r\nFMTO9cMFQVC78Lwo4M819wYw8tboa5cnFnV+u+Hv+R8YptUVsOx3WC9KgxNV\r\n+6FLYQ0Ej/zx/syQUZi303rclWEJnl3qvBzBgpnmVgFXF7uVfaGYrAyIUMzj\r\nYQ59ZAXked7/bb2vS+Li4NL/xsKxQ8t5Ssr4Z9txz0A0d8s2NEmEjmIZxXc8\r\n9fwAxp8faB31yfnObOM/lsrPvIqzargYd40=\r\n=083J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/density":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5e5c2afc0.0_1667994829300_0.7545975162269318","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/radio","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe39b7b4b50148b2e9636622ca4ee6ee518a7e91","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3e3f43359.0.tgz","fileCount":41,"integrity":"sha512-8OmzzeoOAas2MUvz7IsWBf0+BsBkMkDYAmHMaOeiDCe2p8TWqm9mm4PM+rbMoRDbzajEawoBUAF6J6Wx0HNKQw==","signatures":[{"sig":"MEUCIA3WJ4FC0YGwqfMERzrzlEMLji9WSnS49A2wzzCNdOywAiEA6I/sylTtIA2LL+x8902LdlrlSsF7+gxBVc+hYk4VTnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAeMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNzA//fnRHFohBAcPzmZUccqXy7v4VywaCveMqXZBqb1BOG6JMIAVB\r\nErTGo+PIoIlcgwIOQ3RnXNmgvEmCRDnjA8cbFAPP/0regXCrSfhxZjcBJKKq\r\nTafJGxJ+dLX7DsuTN5P0j11BSfnLwRCNOy0K1oPB7pEPHr4WZfaGgIVI93Tk\r\nQ2cYbqmOJw9kciPcuq4jrvgVyrZHZaUcwYwEesbAWpU6iFgOwvYmKXu5bw5y\r\nZ3qx1p2sMklK8EHcHxnQzpm9x8I6wlw5dfLrL40M1s/7zhBdCeodBI3V+PsN\r\n08dVW9+SUlIrAcSNggBua/TbInbcHiJelNzk/n4EJ3KXNs9qu9gWPSRxvT1j\r\nrmZevgnd/MgI3biorC8xz00u8D6xrlRfoFXi2+1pDJSS5HJQNmygMCl/2VJT\r\nKiyRAmnxxib63lVeRc1HgvjlAhVumjgOHpsqPSZRQ4Ju+9SgHMv1M6otSuZ6\r\n8ojClTkGuNHpv/JxA/jqnq1cUoWvtk2D5whJcm+t+kIjo8hHZM9/yoWqiDa4\r\nEI8ymJhln2keJRQ0Xd4+1t7rGbPnjMFVzXR7TfvSvR31Sd+jpa5x1NIJEwzg\r\nm7/inMKEuRi/LgJzjqYsk/09No2BQiltKliekgCsZ+npUxlnhv27vc3v2nrn\r\nsQ5aSf4T8Ggmmf7Fn5gqZaTLOAfgoORMKMU=\r\n=QGmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/density":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"15.0.0-canary.3e3f43359.0","@material/touch-target":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3e3f43359.0_1668024204378_0.6215012641557953","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/radio","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bff6765b790a75292bc56303d1ffaec34f14ae3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3f667fac6.0.tgz","fileCount":41,"integrity":"sha512-71nGjeSyakX1J401NlF1SFKeXxJyqhTYMtIz3v/FR22bn5tGl9nocJGubw4XgWKwrUb28LEZbSaa9aZXR6o4qg==","signatures":[{"sig":"MEUCIAu4KRLNXw/J1DfDbxXUxoQPlPOT/6RzOFp7toVjbWi6AiEAnNAejCiMwPhQEgiWUtZQpvz1Kif1gYLsvYVrcVoQEbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP1Q//YAz9AI4KmNExwztJ991LtvHJbs+Qjpr9PbED5kPXuPhR5IT5\r\n1B+GD+WJ5K/PCkd9mZJpG0Ub/RTW5GXuyDOcanpzIGBw5Pse7qbgQidKJgKe\r\nTC8/6Xk2eqfTDCGokp1TS2uDZy86ZpLPVuRR6sBXt76ee8vxYbNmithSmoC7\r\nbpt6pFdrqUnP18lstYYIvt6Xp8ir0g05+29uWqNCDj9z9K8OIIBX9XhrHAqU\r\n67QkHyzJuoYWBuObg4gXsRJFHzcvUWQ0LI7SwJB08WCh6Ezzi2IMGl5kyf/w\r\nszo+BOQ9DkRY8D8B6HeYE7Prvhb2ZJT50v07N5g6IGOMAdaHmb9MAMzhhnGc\r\nENODkaKaaGHfrlzphuxRq+RgRa7ydB9/8zepdwOkEkaq94Csq6hM0moQJXHX\r\nSl3FofMzxQAhSlaAjA4uGkgiTXxnjeEVS8B+2DaHUGDdaZuK1yfz+sc66hcO\r\nnwv9jMH6Qu+lcnCkQgX3nZ68EGsVVjdqVCmCuse/AuC10SN4IQZ4T78eNiEp\r\n/QZgRHEflvQTdvtEjTnb294fAW56aAc6zXUmV3AYzabj18LJooWrc7A38FCW\r\nIk0uR0rjXkTKAzpDYq41mNWG0c56ZOdTQxAJuRiMGvnOjML69293IWxExeFD\r\nWC3xh6mUssfAeICrFMo7cwN4QFVaDI+mPww=\r\n=UWrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/density":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"15.0.0-canary.3f667fac6.0","@material/touch-target":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3f667fac6.0_1668031600282_0.7852937479773756","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/radio","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e6099f6e4253da147f9aae03f26c8473840e9c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.faa28c1c5.0.tgz","fileCount":41,"integrity":"sha512-lGNPh4VfUgkn2S+UuGxcZdHQuirGE2GzQ0D1yGE+eoh5hcWXuIhPapic2qXbM95UZDU87xe+GxRdNG9gXZ1/vg==","signatures":[{"sig":"MEYCIQCelGcdtaT3hWwH/kRcwT/HuFaAC7Enhdek9im36C2vwAIhAKpMc4Iz6kfiGJj+TNu7vyWnx8tC2ag5MSChB1m3cAW8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrovA/+M+24GkQ2gds11AiLmR7zvy5zzjVg5PRFJeE6UDCb+rs+W4Kh\r\noz3Q8fFs57E1CtTWvjlUK5l4gYrOThBZwf1oW19ybFlRnIanAjwz2RxjsoyA\r\nc1E/eAKpmAPTLdS/HI4GmRFD3oUAI10ixSFDSRpqRaUawhDBED9HU/52PZfy\r\nFKTkJgXRyleVdQ6nTs/A6KDE8U2nh/M1pkPkW86yvAtBraMtbLbDE33RIY2a\r\nh8RvJSgWm2ExCl6Nxm0mDhIAzSlRYXUlinsjur2B+9W7N3i5bBUDcIqrXZGI\r\n5+RYjGBAnnnuZUEbFUEMx1ykeeGOUhcszAPLCjnlagrDBC+/67GitmXekLwq\r\nXeNLN+a8RIVzJXbO4tRkXpYgrVtpXK2OuK1ND2LbAEElnqUo60JXcWr3KU0I\r\nxxHxA3ejyL/gchL3Blmm4GOsRwBb3GpD5Eae3g0nxBAG9XgRToPhmscGO3L8\r\n4cvCnz3l/oSFpI9+ztY4DaXYYAEkIcswEM71G4neGS/hn6oGAG3Gdn7gNz16\r\nbyHJQs4B7t2eVPGlwtQs5hyJvo3XF7jkEWnBUSH8N46RqyIxkH3AX2cRnW/f\r\nVLuJ98CVuf917zhUtVEba+ef1SroERUnYUMuDfr3d2/R+C7oKNSeAydd5+CW\r\n7vDjSVohzPTp9McVlS1m1qCl2KaygXEz9Zo=\r\n=H+oP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/density":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.faa28c1c5.0_1668184584146_0.2101566068030396","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/radio","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd82aae99f4adb033f5eb6fb6a243bc0ecb4109a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a868c7866.0.tgz","fileCount":41,"integrity":"sha512-zffZrcaBSD2l0ijol5jNnqocvTdpfIV22wxW/2S0qMSZO3iwvcB+x8RCFPjddxiZMGMoRUVHZ0eoVzMAUApXUA==","signatures":[{"sig":"MEYCIQCBbSdsViXW6ebgK5wVUuN8k2tu0lWN1J5CweILLxGHtwIhALPuvSpdGzIOAXjcK0lQEn/01kpybM2Wh6040/P+fINs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYEBAAhBi0IJj6K0JPbmBVZgxe/Uz1T0VWCTeZ8C3TzBtGl1pGJQMR\r\nFLrRyAg7Zzk2mb0gVAxwE5Lfg0kFamfz9cA5XeB/p7fwZubTdIB+MEfwtPgi\r\nFxYfiMh6Mmyc5wZpmR6NKCi/yKgjANRbCJuHujxVHxflPo1h4qeRGU5xdbAB\r\ntyfXSJA/MskBmDZzV0atr7IFIWmQz9JVbiLEEIoj6VBjNdvenkZAyB+XLVLd\r\nbR3oBQ0lzhX8MCJ8wteGu+oMwIeS5/a2fLL7cmRyAnBE1eH9yRb0RrwQ/kUR\r\nk70M9U7S+6ZuKJDGa2n/ezQ/F8ng7bPsXkLUfS6AiBlL0VlB8GWC/UhSHq/x\r\nFPBZ2CQRbYe3ebJi874IGm+xH4M9YmxWC7g8dNTr+KcZHUPGrvcSoPNJ+cJA\r\nzEIoA4cAlMb130JDmBWpRth+u7LDIFuw0xTGeoDFVPGvDzE2VEakRdwGmC0o\r\n6bf5rxSqzS3dsrudSjh76rJMHce1s2fbVM6DraMbCYhVWO9Es81Bb+B6Xpt4\r\nwhyYZJX21X8/u+2U1Qau+WcYgqdxEqIX65FR77btdeOpkLlk8qczrNyjbw8C\r\nlbm7tRvP1W3uT2uEomct+wETiM9B0ICPxcPnXUDynOqSRCBYWKGVQqUpOLfI\r\nc7grhd4OroZM1Kf3fnX4xDttqVo/V9ACduc=\r\n=NNiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/density":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"15.0.0-canary.a868c7866.0","@material/touch-target":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a868c7866.0_1668184624368_0.20152274847275042","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/radio","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6d2e38e16519ee0d6a708da40c6fc8229404b18","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.602fe8efa.0.tgz","fileCount":41,"integrity":"sha512-AFeCb6zNET1Lg2qeeuK0EJYNP5terJF/G70mv+zv0Djp0E+jort7nbFkuj348Ll2l2eN2cNpFjU6RtE86auAMg==","signatures":[{"sig":"MEYCIQDfqBE5Un+srxO1lkVbvv8dQw043e+qWJzugCf6P3I29QIhAN05SXP4AYRdtgFIC8XFngidhGIRR1FRxgWOrXMBm9m9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprxg//eplbGVbJkocGDHrkH6zqB6CtuofDbbFkk461+DRRctD+AT/y\r\nYQ8naFZk1dFCjEEhncICaPWSIXdS7OirCDOJeh5m8MfRgnbePhDrWB9+vaMX\r\nRIjM/2klCo8NkptyqrfjOmpqOSuS52OIFbexRUXK7B+kaDVCGWi3JFZMhuDf\r\nEeV/sm+AMl7Dj6bdLo7rvVbXOgyBjmLQv6mXUmjzrOmWCocHtQf11P9osLSO\r\nDBNFE+TPgzUpCsXcEhXdEBBn/K3SNjbxj8A76sUjz5oMKDKBiKF/m6FoOhT7\r\nIFlo2VH26OyhxCpLBaLAQjXqZ2q9t004OzXpHPrJiltq88z5/H5Broefu37g\r\n4WgCYryUnoX4gbXvQHRui/l0uOE3cHnFzAaNoZDv46aTQ+aZOs5vxQsH2nFK\r\nOrlwfNtZSES7iFm7gS5TWsNohAJWcUfzKUjqnuH63mjJSBqh8OD16xNj1RSR\r\nJSbu0cT4YuGPgu2IQxuw7CL0SkkoOl1pu8o/oEKuWSAsh6fTl03UG7znBck9\r\nn4vDX0BBABwcrhHpNKm62J1rslgoCIeIPKYFBcfln6WM614x1Ub1kl5GXJ3q\r\nD0pa5hl1FIMDmKk7ORe2ffZxOuX5j8PuftqAkKgzQw4AntsPyyoOGM5kFAGj\r\nW2Tq3s4ZYgUyjInvb51DeGThX1bI6lPzJpg=\r\n=KGS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/density":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"15.0.0-canary.602fe8efa.0","@material/touch-target":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.602fe8efa.0_1668186745466_0.529349022876846","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/radio","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98332c49919329e7f5c6aa9325af5425ebc8f7d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.558c2be62.0.tgz","fileCount":41,"integrity":"sha512-7/hQU/FMSbq9R9ULvuvQDYXVg9w5fpeJGStFqdoR03Lz8duScQfU5GpjscBo63XJq9FXUP7rvK6Tby3METFj7A==","signatures":[{"sig":"MEYCIQCA+RE15nDSya8rOzrPNKikPzC2BS9pz5xk0EOWkQk2UgIhAPOXtCjz0HWlJXOw6aL8lzMzvBNNZC7Iv9pEUk0bFoBB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbQA/7B5b+B2BddI/7Ak1QdtGc3RR9pV0Z/eJwMWSCwuAZX2uxI1OH\r\nUnHCjs1QaT4XMbO/+soJ0SQTykj5lZiNGzHAFsmDDtm9nRgYQw5v3WDljSMv\r\nEAedpoDEmrpE7X8U7RVHgTtYv7Lf9gu2t6vu61j6ZInfOSNS5/IrlCNuX/3n\r\nk3BAO/2KchFacBwlwTHBaq94fukzPFpY831sN2tjpe7cQQP6lkkaQpc+Sh4w\r\ntlhMuf55AIfX6wrJY2ZnQnYGivnBLVRqcoG8DSz0EHAMLGo2qs/grWfP/dea\r\nUtdcNERJwFZrLC8B6dxv/wh1lAmFGZBm1OuB5SL5gO7eQOxNTBCVhsaQLllJ\r\nxfNLyUkSwC/x17cMLsRVlReWSXw9gmua2Ief/HwjJeOiLZEVipuDkLuYaHXL\r\ncmUnFgcMlGeGbLsnWpcWJEh5imq4PNVfzYS1Jc5ijlvBZ+Qoi+i/U3LchrFK\r\neBYd3wY/SbdkPdc44x9y4N+Kh+Sf1z+zGkkJblaWNAWXdMZvnE4TbT/Ny4Cf\r\nwyTS5NDVWPCJFxXxYQq0Ofy9Z4MynNx5Leax4Q8zxGtWvyWcYCoE+7DzPN52\r\ncVuS4611FLEGeTM2YYCmAeiYn/doRBH3t77OkPgXsyzJgnknFFv/1cDzTzAw\r\n2m8oC+JsvUi8FRRY62ge5YmpdjQsCQpTupI=\r\n=3/2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/density":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"15.0.0-canary.558c2be62.0","@material/touch-target":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.558c2be62.0_1668206748845_0.30583204606700987","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/radio","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67eab5ec77c219af6d043e20d1bf0f20b8045944","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":41,"integrity":"sha512-db9Z3t86kCkUaRlutSQton417p175LdgPefftfA6ANCUBw6gzfxj7vuuKdlhnMMHH73UK6JtViygGEHkzOMR0Q==","signatures":[{"sig":"MEUCIQCJtNLUUqBhvBYiuCRJUSNO/lmmbX3NTxyKjhJzYJTcoAIgF/iPfxEACaxsK6LkT21CqghFK+EU1qfCpHaLEmsPJI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ3xAAgpfr6kYr8cOUUL9sFn5HQB230l9OPuwiqynYfd9BowbBuCbr\r\n/70JEB1UK3I/npNHEtHlK2qRFdiVH9332Q3/BbmKC5EsjjZXAF3dwC98PmqO\r\nsZA1bRqhkrMMANPRt7ptr/M7581Vc1R4K1GJmxEuh9d7lQ47H50GT1wZelQg\r\nvNZFnVrCuxAQbsE6P5laM/E8uzEl6lpE5COWb9rwBZO37IkEMR2YovgfTx0V\r\nZETCQk6b/QSTLtEkHFLHqfUkM13mmBuAr2UT7TZRwYV1XP/XRZG3b8jgHcPd\r\ng6Zg5nTQcB6p9VvMdvVscLf8ShuORSkh6htTneyyqiCDyv7hs6QfLquhyKfe\r\npyE+dxCi04aL2DZ6nfJI844DClP7qdNW1YWS6lMwgJKSwIegsgXor4jhLVQg\r\nKPp7ANcKDL0CCl9Ow4QR+ngMfX4us5sunmMQiss8gD5IxiT4uzh5OJhkdS8T\r\n1JDzCZhHvDWX2k0irhPwxIeR+nkhAvbPYIZqeriX80KXb+RxTzQ6kPUw7Bgd\r\n7mcudtKMmAe7r8Kmay/7uWDYo4sB2y2/OXwDVPVWLCufpcMnLp0QCEh77giT\r\nSm7sqfy+th3vKb4P2brnjwPVJ9o560TD7iAuO6YIv0TyylVrFCZ7+a3QrJUg\r\ntVt9pXc0dgSdv0wOsHZg9CBep+WV02p0FhI=\r\n=NKwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/density":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b5c13a7a8.0_1668441547410_0.31420539645624235","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/radio","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b0bef2b2d9688e69d2d9cf8e0192f5756599ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a6e1c0702.0.tgz","fileCount":41,"integrity":"sha512-dUozxrh8NTDMy5WA2nYRSr8ITRIVxFwD1nT69v4cLnaAtOtiJY1vNb46sXQRcbRa2OCRM/gb+SRF/+w+1tidyQ==","signatures":[{"sig":"MEUCIBQD1Us+cYG4UsQ/ZF9zbqv3nJHb7tkkSk5G6aWo6L2yAiEAx+FUUMlwOd9BkbvbeSEtZZvbNVtdrIdBBlGaNncNMHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlDg/8CnSx2tlVCJ2qVsNfMum0LaLi8AzvznjIkpOczapjbpSnH0in\r\n0rvjvH0MG6IL0A7uCmjbRd+4g96ojq3974cB784M3t57juf+otjPy/UsVwVs\r\nITO54HY2eQO0oSbtcDuu9KT+VAUroMbXNmJNFWreLlOu2gqTwlM1FGo7H3mb\r\n7U6eL5NCdofAHuDshTG0KDhBF9/Kt7UgqgGXGptkbertakX7kmdBrKVscCgR\r\nPJ8m59zdRm//weSAkgTYe9gol7wuGuxjAe21JDSJJOBmndvAXufyR5Wq7AtI\r\ncMIL+jlQ9vLhRbcbmnZd8dECLI3PfAH8NtlIr7ysHiskQFMp9YCdX6FSdwnz\r\nZT3c9EcKNSBdKpX8Ctw7ycF6TWgj7H7SbhWNgG8nPi34JFTDPrQ5ETaeb6sN\r\nENPy/RQitwG4+3kJijQR8fs1cv7kxtIXeiEEAPnVbSOxcA9/mRFSa+sGXjUT\r\nYadJp0qarqd7LWAbC5zaJ9MFoXf03EovagwzH0OiQTYhAW8foHFjXQ1pHEUn\r\nqzODUUkQMPkcsWfgDO9cvcq4rKL9DbNS4TWX7EifmJnvYLEqexCozq0r8klx\r\nl4hGRwUkMrvApCCj/BA92mMX1D4/EYX+RksnXb3H7i+SR0qvr3LtAIw5uJCJ\r\nq6peZC/elBnFTcfC4Q7F1iKtCexEnEGPfPo=\r\n=jj17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/density":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a6e1c0702.0_1668446855541_0.5407077056204677","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/radio","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdde2a256f49e2146fe6d20149ae97761d1f59a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b6f8a06de.0.tgz","fileCount":41,"integrity":"sha512-EKiiqeo2yyV1G4Ia/RhufYJpDAF0acZMLYRpZLcvKm+vneyLKyFimfvpCY1czY8DvJh913/KwcuC608xBXqQUw==","signatures":[{"sig":"MEYCIQDFEgXjHUyh6PILQAazDWgJUt17OKQk8gMInaUM8wTxOQIhANrMdcDBMBbCG4HaeaPwjWXp98QRaj9Ax85HELQEzILH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqXQ/+JVBLr7Se5l7Bn7y3YPqunxAxXbZIqa4M82vANPFn+X9KzZ7y\r\njUUBg8r1FOxTH9o0OMF0GK/Yb65yKO4l1r6ao7ue2XCEYUaDOA7dEo0QND5u\r\n0lJBo/2nbmDlZmZLJGS1WR9r+rKUCFcAEOuLxnaJJSNqj8TWCJvrKHzz+Y/m\r\n3slz3vgoGhh6FgAsUo/WPd7Pq0yLvtvBwybfN314G3/cklwO4+uO39u19fWp\r\nvfqh6PTyVRUGTN03iipKS5HLMF/J2NrkCcodENuXKEt2oWOxiD3H18hIphw2\r\no7m2psr1HHFEgPdQJ6cLqrGmrfjyKJyfH5rfCS3dwd92l82j6n3pfOQzpy1k\r\nBjs8yIibjnxyi1nHkzqLiNomBWgtmcDQPKlnX1fwEPjjhJQlUZBIh0awOaNa\r\nT6PIxzLXH69bmg5Pru+ioXzGrckGuLMVYx6PEjotOKTkL7v/LZxRt0fZpiIG\r\nwiKNchJo5rtoFQ8wyAF8J1KJbxlwHGJIBR9t5h8L/EuNm9kM95wWRtClhnZ6\r\n4RaMKxJFgZHSTP8R6/1tON8FqL8u6TOwQgAlgg9unybR4eIWjMF+ug0jpdJc\r\n0VZtybxRW4/cxzoZq5XYR+ExRltLztmkrpyPyojhXhOD9EOw4cGIDsnbI0tj\r\nKcaRKc+6ngPnD3UiQ+hNSIYV/Ul4ymP23Wc=\r\n=Ll0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/density":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b6f8a06de.0_1668504540088_0.4327039965918795","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/radio","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdba56333c699596583072ace3643d2e933f6451","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0163f3ba5.0.tgz","fileCount":41,"integrity":"sha512-R+mN0088OlMr6cHvcujWgLhiEk2cNusdQKluw/Fimn/ki1ooT0NcvR8OjslMuYJZxlQ/rZGz3o81r78W8aDBHw==","signatures":[{"sig":"MEUCIGfXoK3Fx+4VKxL15gPRZadFzEhZdmDjXFPspVtcmz5gAiEAglf6cYw4xPWWYOGv71j69XgQBIx0vqEtke/vB+CANCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9RDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvUg//Tn2C8/NP0youypLfIVPHl35FGxOYfGgfteAh3qNf8tvoHhek\r\nZ9+RljZ3pBlAGDVRDuRK6J9TV4S1lKbZeETqNlYw403KoF7jibGsU28XHZdT\r\nbt8I4NFB2Gu67hqUUrErG4K132KQl9SsBr/Gg9V0k97ppC/NoPoMywUDWnD+\r\nWUOXRU0teljApTYftKLTXxNTiP5eZCcwi7j34w6kTONPwrTZPiDAjKFlk2Pg\r\nnhxoPVOiuutN3zRHW8SPUwLvs9HLrlNcJ7qzBtrK+kiDDN5pYiyosovzi6tp\r\nPSkD1eOhH7xXcPeBIF5WT/tZoIysqeqvK4INf4znWS+FuY99ZqIkNSkag6zJ\r\nlRQb/GomF/+3rm3Umv/kYDXhcmVuJ4qMHfmxWeRQiD8GIaLi1Bb1VIkQnE92\r\n8D9CpeW04GaIedAdHQl52zo2y2NXo1Q7ndMSiLxvhD6HFsbPMTEIToeHUgRk\r\n7U0GN6gRCaxsPP6g7av9zer8eOHRmqWirNOrLvHqDZ9xIBp524+kPDkOxc8E\r\nOtgwdGLt0xtJBz7isaR7WUiq1YFgCxU34/tzs+U/yxiu/uo2E4RIVh4JBILb\r\nzSA6iG1npIRmey8OFKdu/W10oJMb9+yjIUxkk4wSNwS6SMPg9VUzHu3LfvCP\r\n8h46EtLbDLiu1jgxFyBE+kJH/XI3c5spJIc=\r\n=1ZVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/density":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0163f3ba5.0_1668535362926_0.5070413335229145","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/radio","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56584d9dea3498d4aceb07a172ddb67f0d074a28","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.66c5cbb94.0.tgz","fileCount":41,"integrity":"sha512-dbcKMb+PGtN8HfeiaJf8h7Vp/ghD+BoK1cmd1p0V++KPfGgw2K6OR50Ps4xEpI/0H9O66KD8kcRxnELu5wOzZg==","signatures":[{"sig":"MEYCIQD5rFvVgB//H1y7FwXlHfs5SbvTLKmx1z9RDkCbudDJpAIhAKmYRS8MCb/7xuOKdhmlDBiRPjnyEvc27ZNSD0bXnzW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohaBAAh1Qx/G2iI66VigYxTKaDvZ4XmYlUJmUrfTxddqXAHrzlS0oe\r\nuUuq967eGMZiBJ7CqavtJzAbPMy2fj3vKW8Kc00enSBkQmm5LNWj4WfYEIB8\r\n/uLt3n/oVdKtC/SoP1jrHoedlgr5i0LIFxYodAHmdwm45J2nBJq4k1mNlNrT\r\nZtvdVnzwelFMxtsQqcVa7mm38fCD6QqKDl3Bj6BRxE9TrwDYNUiiLdWrl6Hx\r\nhmSGQunlOhXeJP+PP8dbyThrKDhicFnWUdnlv0I+HzOpSRxn0xVkMnrWnU2E\r\nRIdwREiM/pSPAwp6/9Q7LiUhpNQu9ePPpk6Ry7i1OOvk+hE89aBZf6lN20ch\r\nGb8rySHJ2I+mQGOdlkzQlF32BJPnmL7zbb+cjihGMAxxkGMmzqTpaqRN9m57\r\narYYZbjTNDV4gHvrFlTUA1JESb/+SVdf7WWSAp7QfgR7ok6ZWh1upCeg8rrZ\r\ny96nmDqjOPeudBwan9TKOXWjA15CUd3NH0Nq3q1X7U/0ohutGPJCy0AqDyX+\r\nI+t0Ec6+5s+CiqYReqde6G2H9iqZd02Nouo3h2Rs9WLDiW3nr3wY1AhT8FK3\r\n/b8Xpz3Eb2HcATb1pQRdz6cwv9mAZMVKR8/c+7wjhP3bdnyR0/g2RV4pIy1b\r\n2rBRc5uMvfTi8nNNz34ctSpE0YUasPrg89Q=\r\n=W1yR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/density":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.66c5cbb94.0_1668540644889_0.5633310768496309","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/radio","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31b5f33c52e4f17bc568ce014b7071e5b04f270","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b01136063.0.tgz","fileCount":41,"integrity":"sha512-NhlTj3ij6+VXKmEgEvmJpqY1/xmfRcy4ntQKm2Obtj0DnVvLtuNHm+QWAjUHM2ZEl8mrtqnbpWAQKqKg0xBxww==","signatures":[{"sig":"MEQCIHSIY0suJX6Ur7rQ+mrA5uhNJZZMtwFKV5In8ESSwcmAAiAtlLCYBPsr2AcdZctgmqqw6GC0NTGkyFqNEulPk0oYGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/PhAAiP3jnJtRv6z5Sk+gTqvsNr8X3wIvH0fgo7OwL0t5gcIfJZOU\r\ncs09afojVViIk/YyV/G3yHHJFTG419KVZQLkCfCng2H0NXIaVvHbISuS5ujh\r\nGDQiV04VAXqJvTwT7xVtZbb3SKR8Ugj7Iv1yRs8rtLU8A/18jiokRaHXOaCa\r\nTnqyZz4SmzZ9BRxTmTI444OAIVHVzxDb8UAVV0Pgd8l11XhCWaDzR/HAN6/M\r\n7dGHayzRsusKqr6HHf5aSYvbd066H3f5Tw1MV/kcOEIpyNrtEB3MP8M4TpPV\r\n+10HuBwepp/7e/wZxpqxBWup9M4edDUtK4eM+VBiKHRPiO8gZNCj7SgVY47x\r\nGeQTJmQhDhUj1yeOQDX92KPltexrXJF27+C/KWQsMBJ9kMpVX3PDnuj0/Y9O\r\nkcBB88hVU0EzFCa9JrlWkof5nn/UJM1n8Y8fYmCKjeRB0qdfp9RxpKnXwa8+\r\nafhaRDaSjlGvQspjscbA1Qml0TnuC1xQ+/70m/RyduotA+YObTXzYMi9jPMj\r\nMoZa3MjX5aE3vFSPiguLezIo7P9VB9HWsuJ/PMm/NdmpAE4bjbkRZH/ihwTN\r\nFvnb9cVoIjcXsfQgKfZHdablhW/MFd3x2KDkNBkfUEeyrQOqcksKow83xWbP\r\nkP4vhYnjEv7gGbvTYvBKOLRPwgywDwwmLDs=\r\n=KgQn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/density":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/focus-ring":"15.0.0-canary.b01136063.0","@material/touch-target":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b01136063.0_1668557786494_0.017077349785018292","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/radio","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f885db9d316b6fcfe33aad28cfbe8620356d52","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.01da0cabb.0.tgz","fileCount":41,"integrity":"sha512-Mu83AaAFec7/kNnxFmkrTuvcyvsL9rWQAH78TGA0QC9UtDUnxpOzJGkTC1WxH8UDOg2S+f73mrHRjYNHz71p1g==","signatures":[{"sig":"MEUCIQCiVIBAtKX445+ciJJZeLHFaBjCdknpDM3GsaXdXOEvCwIgP9SbZDttymg8EUI9X7DGPZBXM4fHvzyhXOuwyUeB5fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLzw/+Or9X63jTXu511VwF/OaIlzBiKGIFcunwJs8dxwRyYYpMLEyv\r\nPrxNIm2O7GCNvmzuaN2IsA3ZRHz4mZsUKEHVLZ6mH2ktVGRg/ghXDyVno01R\r\nJyu/b1pOqiEh4jqZxThxwu7HMcv77QTq/5sr9g2/lErsvUU3nbmBCbpu8nKQ\r\nJ7QxMsnK5XnVEw9/3bws7db87xEcdPnC1sSBvsB1zO7J/Img8HF6bf3hf+f0\r\nziPZ2nKzQ2QOlw0NhimMCv66NJ4OWPIuioSyH7MvhKsDSz7QQ0JsMye/XIwE\r\nx3a82kqFmOtxHkfr1F1Ox6pPBgphmatEoK87uz6ViOw0pnfcvvRIBVTHULvT\r\n3XiAv/YaXpgEMA/ez3aNlR3oRRxoKbJ/1B3NN1o1SliSXgSr8AkL9eHhS8YC\r\neFEa4RMEOUqdhpUgnnA37E9HOrLq/LVs67O1k1OleFHn27GEhHYjfc5YbtH8\r\ngJVXBna5x3CujLw1vTfX837KcbArdpwqeyVzrTJ7inLn7zaQaHhMm+EDamoX\r\nQWBE9uiPr1YiE5sizqXjZ9XU72WHzg1XVwXvDZyMEDfNRPVphBobOPJMh4WM\r\n4SNA78qLJjheSetgpVfAByvrQ9Tt+Atb1c3sQMcOpVOkQZnuZRanCs5jIiYY\r\nugAyl2jNNRmq1M/eUTX2beqH4Hp0OXURtwE=\r\n=5pHH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/density":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"15.0.0-canary.01da0cabb.0","@material/touch-target":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.01da0cabb.0_1668590033762_0.859965770644036","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/radio","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36d3e6b3448dcd7916fe8af411ec2f4bfb955d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4ac393164.0.tgz","fileCount":41,"integrity":"sha512-wv/Aodfc9m8wn3FvVjW7JErHn5NxmcGtVTVU3NHZJ/GIZGgNjmI9J6BIDzaiTbgL+K4IAhUYFNiSVcL+HhM9xA==","signatures":[{"sig":"MEUCIQDByaYFFi6bAI7aXf79kazueghoMzlcmgUgWnelQdlIKAIgfhMJevhSZWQTxcsJz+wzkno6/POhXC96XCsUlQ+9N6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphIg/7BiGAKnLvI8B0kY5Hf8n2Sw1wC07BrHm07HL3DvvPL9v/XfGz\r\ncjHPdtfHlFLgQ3cHjxYvY2yN26ZwSqySnTEdAyWO09xQgQYItLQl2a/SIYlU\r\nTv0Dg/OmHkUjk3HEkTVsUn4Qtk6L95RyGYnIkObaxvqF7xzbEbbmRQxkMi0Y\r\neAx/gyZhoSinOLpeucX9c5D/rCNjjQGLLOjzq82ITshSnjQr+nFP6yd3cNNf\r\nvjrJrVdKGkB4ME+XovoMzKYXUMORlX+yL8wc40bCkpV++O7JDLVrInWv/kwn\r\njBtkinEsJZCNt90GGYXh+tMtnIiLZzRuonU+cYKekR0rXw5jWeEc/t4VO0JV\r\nWM2nVHdEBX3zskNUDkNxlQ45/6e7s+VlKcOlBUwM+ZIdG8/HKXB2PPdeBqPX\r\nZzToXyotj/sgzSJ3wbVUh52a83lcd9oFiKSvy4nJud93z2lAzFf5x6yy0lly\r\n9dbe960m/UbZZuFsSnIRm1XY40TNtktJwh3Gtc1uJAfW8MAx0f+lVHqKqWAL\r\ngCNyLCB+mli+HqZe1cvv1SImKIWNqm7Sujf7v+bT07Mq8RGntHn75BzqWtph\r\nnMscefmg8KCl+NOdQdW2/2EvpYudM33u8fqo6uOALtJtdwUNH3Zm63KWwBcz\r\n9LX/kWfq6EeL6jwXftyCNIqlOqe4TKWz968=\r\n=JI/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/density":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"15.0.0-canary.4ac393164.0","@material/touch-target":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4ac393164.0_1668615368528_0.13147543627720704","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/radio","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1426b0bcb13fb271b1a869693991ffb05659075","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6048fb563.0.tgz","fileCount":41,"integrity":"sha512-Nolctl+HlkLipppdAk+E9FqoYM6HA9lNwugHPjKGvdJ/HozOWaGmoasD8GsMsusEE4qYAlS6tpoIq7HY3cBuSQ==","signatures":[{"sig":"MEYCIQCNmPN1Ad+aQ+Bps8Z+eolmTVpsMFneA7Gy0jvob19WwQIhAO6A3LLMWef27Y3Tzq6GKV0Kuy2xeTflofFwNleFspKj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ1BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpapBAAl7dMDtAi0BL1KtVUvm3R502Af7yh75MLLtZTY4SbrzApfMfS\r\nrtntFq/jLcdSjNNNT7k8LZK4cDSzgYG8N0yXrFzCvLXnMPY7VlG87ZBcrUZL\r\nBCYsFIc1hJbbW14HsQ+W2x0fE8s85WyDYLpoklt/uQJC6cBCwOszWwUEQKnd\r\nb8ika7K7L5uhXFzb63jvBvR1NtVQZDW/5PNI1l6xMBNQXCVJk0L0/4xHz047\r\nQWFf7dzBKU5HgmsgR37D12GiKzd9GWmom9zoJpUB0sAx3oIQaqWVefT7DYz0\r\nlzyX3y8JFLuVR7SKJo2Mt1rk39iqbt0NVFqSOYUfl/1SPoUmGiAPv2/vP8ZA\r\nIruggN4VQyIPWPw1+DcdqhsiwyRYeLFSwFqC2nXsSAGPLrOHmD+MhE2rUv7p\r\nT+qbN1sXvGm4l1QJBrvezi3mbDjyanWqYXgt1Vk1AkNjBWhy9KHJQqUlPF2+\r\nkz+jdPctgkL0nvyMTPVkbXHEwQeMBqPW88Eyl/tN9XbfcBTV6N2X9m2lRbJk\r\naW4tMmHh8aVrggoU8NgF1U+wKvO52zOaHnNXASEGJbXb7QAR9VDLOLoLMCEk\r\nAmKhjw47cncLRX6mKCUmOOCbw136bUpExHGiqV6OSVcx8XSiNZpzIVyDXMA2\r\nX/vWcSTqivp4pjsAsSGeE/YMsAqwZ5j01h4=\r\n=Y0vZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/density":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"15.0.0-canary.6048fb563.0","@material/touch-target":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6048fb563.0_1668615489422_0.08476075025856877","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/radio","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"372a9ac3db40d9244d8b65e77119e790bcbdae7f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f7f56fff7.0.tgz","fileCount":41,"integrity":"sha512-tAgTG5+jPUd+MhAOrnogTaI+eEZ1qpVL0a7fcUVQmQZ9jJ5PxhcRj/pGXn/E696uW1Gq9KanEGBKN4TQ6/b4SQ==","signatures":[{"sig":"MEUCIHGCdRG8scXJwn64/zAhLRqYso9WgeHaaX/vkUt0w4KgAiEAt5vgtga+8+PKGBrO/S7B3dsMZeWbaEpQVl8FNdlEuTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd+A/8DYtmpkNqEP6w/Ss8j/Hj5+eC++8bGWmpNTxCzoPvWceCSdvN\r\n1tVIfKK0bIeBgGOJK16Krq8myJS/8OKpDNZVx78XXFqoudh03K4Ijs+Zfcsj\r\nS+pv+gP98y/lVpgvNLZo+kO49MvxDi/z7CtuJ4hjRv9Iwp0dyBAFKXNtvnVc\r\ngWLOp3QK0N+cy6AFC8u37EK0oxvZ3u9SN1Q4mw/k3AuHTnJHERNeZ/oxXyaL\r\nRh9X6O2UT7TNVWCoX44qVdq3HybgFgNAOgGlTVmDoqZKJS8lc0za5I9Uw+Ts\r\nIHbx0YSu+EoGOZ/EWTNguGegXxN4L5bC44P0/4IPi+zz7GMJzALbOuOQql17\r\ngeUpIJBDS9Aad2eGVbBweeKda9frnUeUvmc4LTZyfvSIJVwL4M8ijWTEd85D\r\nQqWoYawzt7+28yOMERordVFRz+ybTRaupOsxpQHfFb6LoUL1i7+2RwMXraVe\r\nx5FIWihlR/QCBJ83SDVfWNF+dlLP8gYrWl6kCEgpIb95Qt6ZpBmJuCpK4Nxn\r\njECX73SVtj5pU3YfpaqALW1auqwbves86hsMXYc5Zz7/D+r6A3Hx4ai09rP0\r\nvrzdFV4P5lzoSY6piYbQZ7c2kYCFAwKSaD8v9yi1DfKCSv4R7jt0b5Lt96MW\r\nOXsXaXMcsji8ur0GUb++etAq2oXL1ClfGa4=\r\n=Xjo1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/density":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f7f56fff7.0_1668628595705_0.9838063768254193","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/radio","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b2656004bf168eb2ec5236f8cffec5f942cf2b4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7c73f6134.0.tgz","fileCount":41,"integrity":"sha512-VhI0BKz0NdH7EXOqNvv5loVDU9QdFucWcXwqxb6hkBBztBEX8e32/we1a1vhZJrw/OEJieIQG0kwW858zGtecg==","signatures":[{"sig":"MEYCIQCxlViqy1sLyApw/ZEWHsolp79g5MKcoQ4bfo/zbwd8bAIhAOyT34yWGqcLPwG6xgulY71YpnYRIwaR8mqXUng9cxhW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUFGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Uw/9FS7Hof9d8oAsQPFdYWuAozLkFHIXzGyMPJndLIJXddG0QcTT\r\n9NzWDzvJ/M+8P1Jeh92adyBtWkm/XB+53FD+V6rCJIlEjqjGmgr1ndZZkVWj\r\nd+aKTwKpM+AvsLbB2rFsEZuwtbUoa91VQMPbD7e38SeFw+t+GBnL2Uz/jc0b\r\nYl34yLva/qiMtnJNKLQEgFbzj3pqLacfOA96ze8EWNgHB0ALSMIX/pJGfes7\r\n6L0WXka/pN1fTUoLQs9fT/WTMxxHTaqcs2WYJ30wSPBpS+ldzr7u05PceRju\r\nFbs1W0GD5hKsiZ5Q6q+B4SBObYF3XIodeNbDYGPzuEtSQDAGlSsMJmFhTtsG\r\nnViOuDHAdemoaThIKfONebrSmdJvvAPI5z32STZ94BTgdY3IB0KCO2mF+lTB\r\nXgfJdAzpVkuqIJOjhVN2CbS9i/NEJ3Cfn9oq1orelAEYmPpPTh6uThPNBzhs\r\ncJikCW2Gx/WZi/ybQSUrLSuqNCEi7FyjSYHVxxeaytlmDmAhIclPKunx9SpP\r\np3v/8fKrE/AkMKylzjGuRgzI8Oqez6ALZV7oyjqq/0DGOJVpH1AURYfzPdVM\r\nKyTZMxYQ7nh11+iOGtvR5bYbRItCr7LYEp7BvvNQ/jAAxuur85cb23/gWcPE\r\ntxtGxH7REpQpyybzy5y4iRVQ/euhOOgtbZc=\r\n=LWT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/density":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"15.0.0-canary.7c73f6134.0","@material/touch-target":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7c73f6134.0_1668628805982_0.2368942500465665","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/radio","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e927ca8754c3ac8064c6d8cc699fff0f62194cdd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f1e037150.0.tgz","fileCount":41,"integrity":"sha512-tJqv1COyNwsu7kLqgLh3Nfgnv2o4kINgIpOT+G0WkA2VHHHn09KUhIB7RqbbZx0kKRfNPQNaMRg6HQMIhstfFA==","signatures":[{"sig":"MEUCIQCl+R3UJGU/LW25sK8UOHPcULahUizKaX6HLHf1VYd9gwIgImV5R4n4abpeuU656d4Dds5ZJ9N04eKBLw8fSR6DG8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNoxAAoXqYZ+Ep/YshGq1ch29RVX1FaiSqN40+uOE9ugqq08S4tlxu\r\nm5uJbAkpRhIYod08DsBeM2jQLWLX/hdrjBn5iNT8iczurc2StxocmLGjm5A1\r\nJ1KKpsjgY5ppQcbKUGvwK71z2T4NmGXkyLyB9mPXeO6YDYYJj5Nlp4PWBeaT\r\nytfXKnaLDC8vNUu6LGQDC61ssUBLdnaiiPzTpv3mLcytCeyybJpszWBXuEfm\r\nkf1iMJkPifK5hl4GYmY26JlcAT97KAVtP6moc9BOvqCAcaoMcZd8xTMcZW8g\r\n51+ItPcVyHcWhgQwpLmLVZ3pTSLN235VHJpMIaucyyK1AJUOpPST5+DNiYZ1\r\ne+QXK0T09Y67FZsly5n24ycoCkdr6pc4lBJe0Mn8V7g9oXoMJS6ryQTx43oL\r\nyIfHUfy88ddyX8EwMhmrpCCIeGkftepLs/YTzy4auSH8G58MngNJ+JUYwDHg\r\noWaMKU4d/iCGrfh/LoWjsBDgg4Ug4j8AhvqdnX/9lWGe5aV0a0z592nqTJPL\r\nGvPs1RMIquKJxhhbSDzot0hQGyLY+3aiJ70/P71141woO19AcxSJz1GU5dgz\r\nqWi80U/SFijLjpOOxR9ps4yxzNnz9k2iZJJTJYymQ5Q5MxzkO3JalhqNfKNv\r\nBfHusEZ0C+bHDyBFobKmRgbvllpw1/GHLCA=\r\n=+GL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/density":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"15.0.0-canary.f1e037150.0","@material/touch-target":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f1e037150.0_1668629152020_0.3860681717206822","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/radio","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95bf63bfbb2f79bea61d319120f865b5032296e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.40b18d043.0.tgz","fileCount":41,"integrity":"sha512-sqT0Q3yPorJeGaAQPdInZUtQm5YqhXONVMpF9y4FN4G0kl066E6Im4ukGopUx09wU05fp6btAv77w4Qvs8em3w==","signatures":[{"sig":"MEUCIQDhn1M+sGMyY8mS0edKj8L4F6UjfwpICGrO9aaGVvNw5gIgIhLJuqM5spc9cU1dLuqRCzyurrcLoErJzNnTci5iHKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWtKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqgw//fwWoMh6sKxBhfVDxW3CFLjRxu/Y+q33rj8fG3aHM3AZm4WNB\r\n2y/RyCB6SLQrpzWsWpyMODLLsBvo6DyE0FOuBS96fW+rnJqKrGf+FKxrCYf3\r\nyxSa3U9ti0Bm1sBjRDRFmWVHwe+M0iyLVa+xJEAC3e+6NPvWob5SVkjFjXl5\r\ntR0zWjwlkfie3kmb/ZpAdNIXDpib/KErgO1fUMxHgIHk4TXKVYtxiJY7rK7T\r\nJSO9TcWV0lK2w64ahztLeKKgs3Mfc6bnCUNK/2TmfvrZ2f83fXTR4XHw5F5X\r\npJZxbNiyY5+a3c3F8AkBU1cVWws4k8KRnkbAXwUkvXzquKUarIQlU6QYXJBw\r\nbY+tsfxKb27X0oE5qhECNf2t1EQeP9oYvr8VIbADhnHEdktGBMcIFXpW8h5u\r\nHSZ8Wc124XJOJOWJ+84mCL6oeQEp+VKNP7isX1BltEBsk4nR03lwa8SfOVU7\r\nFXcpab12cImWuhacVVdcJZq/eZQKpUy1ICsZvMNTWS7OadWZRY1d+zPX48D4\r\ntyhn80P99q6jtFJjeokvqnQezOit70TcnQBDXt99t20WapOSJ8b+RP7hioGs\r\nLBZMTNN+Qr0jH7zNdeP6pFuwc/iQCW0q7tS0gv0pPzrOOtD86gYDkgmN7t70\r\ngmCCWIpjz0WNGgG9xKzTS0wbEZxt2kRBsyI=\r\n=SVcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/density":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"15.0.0-canary.40b18d043.0","@material/touch-target":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.40b18d043.0_1668639561891_0.008027096402991374","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/radio","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfcbab7a9f4a9b959f9360597d2f73166f2a8632","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.86bde5c06.0.tgz","fileCount":41,"integrity":"sha512-uc34fFeou3gVxML4xr8PFX3xxJ6FdntytEEat7hJVLDZao/ezJmEJeOZ4AqW6iV6RNcJNCINo3RMdqc+Y/HWPA==","signatures":[{"sig":"MEUCIQDXhjBJAB+CxOXvPrreY12Cxl+rLwuG7oMQxmc+1mSYSAIgEHJaBhj3CESbnmDiVh0PzMnxr2aVeKO56XkDpIq/a9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR7g//RHkhhEY3UvFC4yYyyTaM4jP8bw1DuQbL2ExfKsyijm30maqs\r\n7LRP+p7tokcVQ+n1ZEHghvVLwKhfUaY8zVgGaiTLmworV3FdaYCycLI+5ZHm\r\nmuhqFloMqVO1GiHkQk4Tk/7B6XRRa0OEZ4KTe0LvHgU7SZz2mbjTrLJGLgKv\r\nc+cGbxuUB7GUPGy0/+tWlxo2axpAzixUtFuHRzk2oIBTWU6PeXP/lw/C34Eb\r\nWUvfkMS1dJv4kTQu6PEc/eatlKldN6Qw5Hj8hCR4tHCLvQ925nh3zkeVcqXu\r\nY6SuFaZpszES2iSZRBXQSSnkuZsP+/EvCaTtrwmtMr43EEL3p4wfqGADwHTw\r\nqIFIYNndSGXxdkW+EVZuws1K/HXbn/I48SoyC+Y3k8K1kVpp7OeUltRQxOj0\r\n1htPJzMgaZHyXGOMZf15SNtRYkqpRZ69K7WA6UVx7XgUov7CsEGxUeiE/6xW\r\n7KWFP2cDshByzcZcSEaCpTCkQ/Hrs/I/H9/yVsP7VmFc4FdF6MypLOPkMeKv\r\ndpTUKISmi6rZYHiMqyVxHFln8r/AcP0ZwZ9tC4ANSpi8/MSSyddeYRw/OhQr\r\nLiYtVbYMqLvl20RcWoePhl1ILAMtT2CThhgXfDrw+puzR7DJGyLfCf8ysqJv\r\nWq+wz+LfJHxQsSaFTbmNni9kXdS9+AQ4GtA=\r\n=8D7O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/density":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"15.0.0-canary.86bde5c06.0","@material/touch-target":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.86bde5c06.0_1668640170353_0.30211888584312296","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/radio","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"251320e27ac8773d0f05561551d7502912a795cc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bb7751002.0.tgz","fileCount":41,"integrity":"sha512-4WPvYWhC8GrVDN4xV/tQHcADr+C28gRSwX4ozpVvmOantWlkxfliamIOqTQKi1Fykiad6t5v8E3IKsLKNeHWnA==","signatures":[{"sig":"MEUCIB5PFxGUDNtk/JhIXib2nG44hyx8M4qxgkZidSGD0Ve/AiEAmj9Kn5MDjwpOPA0jvdegLvXnWXHGbF3judD+Csq3GEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzcw/+I8KKqvDwAovXkHBS2MIBstIkk8KSX4QTdlxKZ2vkDmlizZm7\r\ntjk/SxkkbLSMhI2NntbWKbbW4XxLv4umJOg1fluVivxgyaTNkR4YP8pm/d1E\r\n4aFT5gI4wkB/4D5fbUP7TvWVqnmF/qUChEHNKj18wRKamfgd6gdP4q8bKYga\r\nxmj13YuY3eo7ljRJm2EQ9VLtBe/dFvbHoBLb1aIZ3fkFu3SgUg8Jczvsk89u\r\nSlmiiYpfPmlGV9AHpTcQB4nlgmHEB6wuf6owSzJLnkjGVMOurP5ra0bErt0u\r\nrXuYz2aNTsC3e+W3zjkuIJgzuFDxGjksuyoJPwNNwHr/k+/ZU8Win5W9gRtI\r\nhJo4BraoG8jVOK5R5lEsevZvFbsOoQHPIRbNZTcJ9VhFqmwa05ZUuOcoD4pU\r\n5IffGYl9X2ASgwJvk+wb/+SwG1zJyuhNzXvRl96kC89lNg6YkgP5fqVTb5jO\r\n4quHFr5NU4mpCwxIvYNEGWgunJOnBi3xdtaM9/wvuPJTb1adVi1+r6kYIxY0\r\nNKLEl3nIRR5xOpRLgPHZAez3gwSdIsaHqoT7DCJtHcepkXwOgCXCcX2tN4nl\r\nKiBGF8rXlF7Awb1ok6vHDZSAxmYMkfTo2vzGQOZ492tgQooI44oO/5qsVAiH\r\nfCA1WR6TsEWa+3YpWumE8TC+5EbFHajKYmw=\r\n=V0pU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/density":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"15.0.0-canary.bb7751002.0","@material/touch-target":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bb7751002.0_1668643242969_0.3241923337005146","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/radio","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f129f0e907c279b3bac1e0f5c632bcdc9ca976e5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.63aca9af6.0.tgz","fileCount":41,"integrity":"sha512-2VQzgcrg3TOZs1zJsyhJJ3T62IhRdrJcR3Pkv2qpznAwhkltrzuQjrbg2fXaPkv0EekLuaDyICIyZz4N/gmojA==","signatures":[{"sig":"MEUCIQCGa5BdIGy/md1TqNQSD2ol/rG9I/GUX+vURKwPH9ME1QIgYk9Z1dRjXRIDDHEFI8cN7sSCHx269xLwj5dQ0xlE3Fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosqBAAjdX+XWKa3fw+d4Ei/PgluqacSdixGNy4PSWhbm8iTLHpnDrV\r\nlZM2piRSGWpFJ5/16387ABJ6iC5TLv4JAVlbf400RYiEjQKokv0v18MUxLu5\r\nEnoCIIokX1FwAu6A0lOVFeVTb0TFwjKFa9tpXlh6NTjCjX/C1xbC//IlmVu3\r\nIq07KDwcbm4oeVYzyTNVMxRrkmUM8tJx4WZCLbJy4K4O66P9JHjD+NlqBGyg\r\nDeFoJB8iRBchfisIaqSG+XLQ6C1JfWcnn2kitWYTqY/yKLQeW2fYfWNxgqV0\r\nZwJmalN1lr2MWslTR8P4cSLyYEFAX63TLpLhzeN/a248Ra6LAzp5sLuJbkJ0\r\nOtNp0OKg9NB9SYqltu6cec3NJ0CY9MbObQj0b1YEIZ44dAQZ1jSHTbPCgBjO\r\nxUVdpOpLVc4tdANHD1lhEd1RNmZogFKef26gVMEnNsUw//q1J6x1LwUYVt33\r\n1dpCskoUMmVvRROUgcu7zyQM71gpJl1ti79IPNgGfPJPyYOGsNmhvu+6N77F\r\nGV0hfhxBJZeSXrf/YhqYlIgbvkHKuo6lUliWjesfyaq39fmihisXgP880H5I\r\n6XCLXV7LmpYdkKg9G7DSUYZWb3Xb7doSDKGuuNOOF2HXK00JziZHrpEbcDCo\r\nO7pfSJrZ7hjpMs5jTkYfTU/bHTiFoX96kzg=\r\n=mDW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/density":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"15.0.0-canary.63aca9af6.0","@material/touch-target":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.63aca9af6.0_1668711691948_0.5900195133783235","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/radio","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26ed0ecc0ae9f31a8426d88f9319395f66ae38b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.56482dc2e.0.tgz","fileCount":41,"integrity":"sha512-ceN7YIK5nQRsNVW589mEEPhXC1f4wIj/GmZhyR1atE5w8fTJRXWgPP2AuKQ4D626X49EjtlVOpmgQc4jeNQIrw==","signatures":[{"sig":"MEUCIQD/10SJVNHvvg/bzhJXd7vgu6MXJ12H+R0GZdalOoXGNwIgBhMxkFv32JlEWAvlOPxCWA2O6FivVJfJIRz0wlIH7+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyjA//SuxS1bD8HxEBUCKiexBpFVb271LW86GBk6tg27qZ9qDFgaaQ\r\nXrfYjDqF7UKMTl37kEm4Zh/NDEdyB4Jgk35jaX05tNVxLGp3vXwNN+DiXTUl\r\nIyYzJpskwYkuPqIYzzJgiHalIB2bfsAswy11G/Cbrur/Wl0GYVIF0uSv3Rzp\r\nhQsJTtdUqH5HE0PA9D21qGXFNtSHDE0Hs7iYE8Nw/LOfBYXObT0gU9VBX93W\r\nvV2ayWXpeHZFbU3T1h4iO//MAog8e4lkH29efXJ3YWZP50WusT2U6OXbL/qF\r\np08tGuQfF0fEkGxtM6Q/2+nWv1hVmxz2PrG4oKy8B1VidkY3oLHPv0wv7WFz\r\npErYtJRvJ7JqFnSvcILWtnpojvRrN1nMm0JgELBMJtuWhdzgItHOptNToSKk\r\nH6+b8HDaEeoSJQI04YNP25awAq8A+BeiHj2nxJYErG1OIFECERWbdRIvH9p5\r\nL1pVm4JxyHP299bd7Jw6GDVfLJKfvAJJ6bse97btzKCfbtOxLSh5vSYqHrZU\r\noY0O0/J4MvQOnlVakgARy8TkiQ5yHqv7CIAa3izFNmMq+KZTaDMdq0nz81RF\r\nUM2+zUvSnEP/hlYMC71S11SRowUqV6ZauZRBVyIdcYf8sAXFHul56bDTGCt4\r\nMy6M/1nvWbQsbkoU7HlhQWEFLD21uq5KVgg=\r\n=PLan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/density":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"15.0.0-canary.56482dc2e.0","@material/touch-target":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.56482dc2e.0_1668722131984_0.6848138268231405","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/radio","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d3a6b8d6a91265784b5593dd663f0b5f33f3c47","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.953e689f3.0.tgz","fileCount":41,"integrity":"sha512-eDajcAuss4oqVXI553TDqyiAhJz4AOFVvjoIjfHjuiNRiYjvhvZukNhS9zX1BL1xn5sHUA8RUji+uY6L5eAiJA==","signatures":[{"sig":"MEUCIDaPfiPWnRw+JwnKSjaOvcZk4FRU0g++soNScdRzFZTtAiEA+gBxoOSZuwLh5h0GCJTEGisKEVP0hO0r37RNlG6MGRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrAfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDAA//ZNIjBDPLnaoB0h5CeEH637rlUaydf1ey79iV9oEmQF3k8ebz\r\nmg3LSrf1/mOdrTu0mseNi6tdiZFwqyXTmzHyNAI4C/zciHA1ZTOIDbkXDQZQ\r\ntDjEEaaBPkpvPOhV75kEZQkyMniLkZBObv3RINMHlOjNjFbc7eSjwWsuE3SJ\r\nYMCXpcFLNeVBYIda616gz8rL2aRD53/ZB6LpQUzvHprUYaDJxtXskN4I6+25\r\namqBD1ZAP1SUda5R2efIihZbtRDKTeN+BPW1iIoAJeu4pB2JJ0J+JzT0o3OD\r\n3xbUF5ZlIBpVPphjNEMioUHLnYcU6fTrtL6Pz9Jp4XtNh/Z8UNHhQy+ORQlR\r\nHAV61fDEle/61dpxDDEKD3dnKdlMe2lQSiaPENBb92tkBBJyoEJE7nfz7AUt\r\ngL0D+cfZzvlZA3gcJcOQd5yEeoIn2pJ6zZVdgv3E0SI6MhUKuEM4Rqbl7Nur\r\ns5IAayDWSQywHLAyYNb0s7f2TbIEQQJi5lwCpV4k6HkpDTI1yFfJo6xOBACs\r\nYgXn6q1BtelpEQTTRH5LLwxkP2cRnEvUXmBEF0H6jIGKkZd1BkY5++8jbyrZ\r\nQd7n6amuO/GDkxpJo673m9MpQvH5ivzdrQpwK6kNrJK+o406yI0lnTiK6NxR\r\nvfoY58Y1/2EOMhI3Y2H7QK01NXlX0mpvpzE=\r\n=BBaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/density":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"15.0.0-canary.953e689f3.0","@material/touch-target":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.953e689f3.0_1668722719158_0.9681838605908901","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/radio","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c653bc31dcf651c594fe1e3aa8ca54a41f2040a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b5606a793.0.tgz","fileCount":41,"integrity":"sha512-vkNAA2RhT6UF6lgmAUOBOtCj90A7ufkbrw2icSHAyeYhAFX9IXBNupZ0/jhRBwQHYP7IALDoTVZtd6EUKAzsyA==","signatures":[{"sig":"MEUCIGZyAyBfZCy2PY5kXNZVQBoWwdJm9z+FZerVZweGEmorAiEAg1WTmXE7Q/gUet88DD+6YeNaiWOpmXM4NMDzHuPVq1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1y3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCjg/9EHMna02gAlLD11uh/Tzref/Bqa63kCDQ8rw+7KroHFagk/5N\r\ntAGLaW0g9dK5gTChwqcicrtbypy681fYFPjhUeqT1HOtW2JrXkglpnN5qxVs\r\nfV/IrC4mhCQtZgAIIGqYgxL9UNefGk15yvtnIc88Kr4ZQM7iWYs7Obp8qZQa\r\nZncLzKt8Ry8pjky4quQzzyuhSBRTRNc0KWI77onxmIMYbfFrbHwcUOtef37y\r\n+jNrZChGeVKKD5d4BI7m4FMM2l/R8AuhmneBEkGWb2/WSNjBEBIDWcGMqyfM\r\nvl07/XueoE3eidHBisTGiQZldqusY3BB/vislRPcQLNZUTJVaHJo+Xjwn4Bk\r\n96bHf+B62A6jsgv9dco5WDgln2ur2+5MdrZ9e0STrsZk6MiN/M61SRYmHmGW\r\nmSSk3J5d/qviJbOfcRknKhFbDiXy+IXlWUHfKy8S5A2WMoSBnNXd7dlqghyX\r\nWx7rRzaLuJyaj45sjYGf/XyJi7kvyVbhqyai78uIMq4sV8rEjRzYrhup7jQZ\r\nbu3EiHwuBAHy7RpeLAtZv5aOxAqwqEQh3O5h0GcA5wt9jGdDyA7BHC8l3NgZ\r\nhJRotKIm9TZtsiDg+1nLIcBLMkCyU9+Tv512Wcem2bZPNQ/AUjo22Oovda02\r\nS7GLtPEE535nUpmVLpfyGUtFkwhDeEP+jLw=\r\n=YeDv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/density":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"15.0.0-canary.b5606a793.0","@material/touch-target":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b5606a793.0_1668766903795_0.8587645529796231","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/radio","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f5e61b7a99e3c28a93bf713bd08501bdcd95837","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8c5675942.0.tgz","fileCount":41,"integrity":"sha512-U91qHMJzf2mfMFKomGD0/1XV1xJWW9fnm5V1NwNYw/SMZCsnmfTopype6KIWQSONyq5nsGpByfeU4xkTFc7c6w==","signatures":[{"sig":"MEYCIQC/f0u99PfVHAUBAmsXWhNNzm47ahoq0PIxDygNcdk8uQIhAPMDzZWlwaH84BZRhPls54wbjfoaEIhKWdN3fmuND/pz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Jw//V5hKaOA80Y5E9xWspQKYsD3s3k93hNCn+kfTjm3KyJHdzHr6\r\nHK4QF8eejGmc6pHdE9w3TfONqahF7QiH+CGbgAowiRZ3a+x2WgELXVVpfM7A\r\nD5R1L1N2qG6i9gtq/1DPHJVV0+NUMjqh0DaL/uX9h8ngUqPEZXQZBlEP7Xih\r\nYjDYd2UQAZpdhW3iNiCeqIgh+QFtTuauBAI8658d0qFPf+kjrIMb18DC8ibB\r\npYhAO1cAHzBgAtpvZUVEfrdLHKpyKxiR4g+q9BK5RxbWn4eTg5p+qhBRT4q+\r\nBU1/v3OBCYA2EI28EGADU6+XC+pJUX8AG3NXm6BeUSAJefHhtFv7HO8c7zS5\r\n0BxNkresJF4eLmvBIF0w0neQCAmEL0ZJS9KOBBONC1CVRU9BF7psm9CPWBx/\r\nvggbaXCZ4b5C30n/E8kPUncI8+5Ia4DNtfZtckqjEY4tBQ32Hahn2kecJSGZ\r\ng5UZ8yoz0ZcuSIMaSoP84CRrtwqRZF2v2VWmwKu+KF7dpAHknGYcXDvvFr8t\r\nP56g4r8pFW7rE65bJotdD9rdV7ngEfsjqqeGGSDDqZpCH5jiqsL9rR8WQbUi\r\npeiDsMMAlmQKoJV/RiSYc/FtgOvJeQw1j0Mu/N8M6cua+pieV5T2/9H358CX\r\n/wu/opYnSa37SaAtdXI6RCy71SIIeo+SpmY=\r\n=LTI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/density":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"15.0.0-canary.8c5675942.0","@material/touch-target":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8c5675942.0_1668784614468_0.9415466204036245","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/radio","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1dffe0c0919f896dcf6973881a762de89d142bc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.697fbdebd.0.tgz","fileCount":41,"integrity":"sha512-5Eve8CZmrFr+bK1T6zDOYx68OoRkGeG70ukoqzR5tLK6ORof+E9AMcVh0jUCgQ+/bhh4z4nZ2Jh6SHVZCPejCA==","signatures":[{"sig":"MEYCIQDdhVbzjJ3kUGVBANFE61OMCYZjBULbLsjsfaJQ6c8dMAIhAPAw7Whqfjeda69lklxn9itIrKttXscD8akDAfsLEYnz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7plACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogqxAAoh0Hjt+8TZEN/p+zBEcn72SQz5OMZ/8sEXvt3enA76Dz9UkD\r\nQyVtNwbRJVhxlyjnG3kNu8qmapwud3/WVe5TFeoVi8PTZXvvFH1phTszV/rB\r\nVoE46Ij0HZP/a+20Q760SY194iGANjO4SYv29FP3Qi4JnoU2nDhZ+bHvuSZ6\r\nGRJEkK3rGP0m/KzS9TvEhq81/uWhK41q/mlP/nCmUmLoimNJrqu7NIhjpOIe\r\neN/BIcQQy8SzwH8kXEB9fzVLUW5vyRx7coP3y+jcEIgbJjM37quzPcK6vn48\r\nkzICDxp5in98Kcnds+DUzRD9SuvN36bo3SpEt2c5CiLV/PMBE02Xcet6AmRm\r\nN6wA9/gqH45+eu8x9rlGrfL06fS/aPY+vjnGnQHsA3KPvteLFuXIpSBUxLjO\r\nIxXaPxCr+aMpbn9tM+IAsUJg65taojHr2D2zmHqeff5EMfu732Flha5xbUgZ\r\nBENk6dQN1hUd3aKC31aOI0yeR71rjLWa6Q5z/Z1ywPxmAOrNBYCUzct6RKeA\r\noWAqFJtFJTlrTXAMdBRm7WbTEBBjR8W9pNZckVSj/hAfWcr9KbauXx5oU1CX\r\nHrHWLc4C0p1lYAK7xVXX1OeXrfabZogmOVbKcMXfcjucmxQ3TYXtrBQX5Llz\r\nurFr0ZgcMWUQl876tX3A2V3KUHhB40ebMvE=\r\n=H6uY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/density":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"15.0.0-canary.697fbdebd.0","@material/touch-target":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.697fbdebd.0_1668790884817_0.7031902137600168","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/radio","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e7650ade18114a12a46bc6fe3ac400ba49f155b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d58410453.0.tgz","fileCount":41,"integrity":"sha512-70XfMc0FB90OHOSJX62rsCazOdx3cAerw3Im6wB35mIfPkts9p1cfG9QLGDHTIK1t0/vVC/ImDFs8pMU2iEZ7g==","signatures":[{"sig":"MEUCIQCsNyBfBNW8bolVCYbt/irUAZ3Ja45QFKq+aX0HPhmitAIgbqR0Ah6fshF0BiG0CS2UOf017hc7t+IgmLwwS8dZxMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9w3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdwQ//VkAZjM6qchGdXwo9NiPMKRx9b4CdjpBpKfNu0LMVoA+0c/Xh\r\nlPOUVahrS1vGnRa5nQbVcj54rUX405zS2SOaTh2M7uctQdqtdtkom2I6MNCX\r\ncCMHTBGNDS2JvZqoMqxyKx5h5k4AISOFdFopTZLeI6uNeBij+cIB4MO46G0p\r\nb2UzlW0kkUBsmkNxCDEeNjywZkciyFHRo55G90BhU6aw0KP7iyXaRzDFE7Ru\r\nDtlGfjnyjwcZYO1z8foRdlUvWVutNSoH7Asq7QaQQpZOzhGDghrBVOb3d7t5\r\ncmErASKAQzNJVeX6yB685wLGXTS6Ub2Xw4oWOTFwHX4n2tZJnHniAMV7LdRt\r\n3BmENb71D+FLXRdNfYmfeWUdOTX+aIibUJ21YxR0dhPvWsOo/L0GAlCnTNqZ\r\natt9BwMb3rFvmtg8TgV87dcnNeJpL7q+jng50kjZ6+cufooV//6vQ/HtXhG6\r\nfoWJumW6GAeAtbtQ6Rp3HxIFTaVFCoac6yqa3H+L9pimv0mwELStaU63uRKM\r\nmFtgYTX+J9WREz65/L4Qib8C0OaFMQJ46n50AKaKyHS6vkF017Whsxy2OfAO\r\nyrPUmZKdNZINMtbBVikTkTCcvPux4j+xx3ueEe/3ALGKe4FO+6FMiCsSONta\r\nlVctERjua21LUa7ptT0oH9JQeXuRGt+KIx8=\r\n=G8Nb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/density":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/focus-ring":"15.0.0-canary.d58410453.0","@material/touch-target":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d58410453.0_1668799542802_0.43832447393943386","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/radio","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca1c65484e8cf113a919e26c332accfa2fdd30a2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7971d6ad5.0.tgz","fileCount":41,"integrity":"sha512-wpiLuHQtpMb846SSYvG2NQJl/wUi1NbVlCV+uGHSv5LFnbe10e537KFpjtjaDi/Y6e42bUxj8njN5cEZ3NfBUg==","signatures":[{"sig":"MEUCIDTJqj9UPz+UwgZCJP2cyCNS8JnN1Iqf6e+pZZHjbCGGAiEA68J58CKr5BikH46e640a6fY90Z2l8+2q7zWJGqDiUX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJe8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLhA//VewANJPAtOxqNE+MJHS2JQxv3yPQC93UsgfUuYpoQaLrnMCx\r\nrIpnKPFMTRcuOqDijFnYThO8UdNCNo/onDUP+dqhK+gXbl62ow/VF2i0OuST\r\nmB6CyN0Wwq0sUB1Ef7SI5fZ+F8S/y7BnaiRSsTfEEa193AtPV95rUzu92xtb\r\nqbDWEgUF1n3CWnc9s3VmhZp2daVyyzko7VwVEM04/ecP2JbIwAyeuhrO+xUZ\r\n+tBWJxzygXDvfCpkpPewqlp1irVWnQh64xK5kHIveDnM6tFz1M88dflkmNCE\r\ni+25iUNVoE1YrXWknBXI8GajYQPgbfamOp6OGLPJdKNxpGfNfjrHphuOA46w\r\nQajwEGC9m2/LSbaVyz6ONw4ZAAuUG3F/txtnh+ETJJ2APdgOElnDoJ27yI1f\r\nSD4nVpuLuyQ/DakpwPGC0nd2J1iGfg++WMwGkgk96Nkvi/Mq6ai7j0R3oWWm\r\nBCwWzomIIpdsX7Ei7IsOvbpFonCMGcIXOcz+EDNw9g5f2UpKlCchJTN9J+Yz\r\n8mLVO3Nr1q1GRex+5sXQ0znTsBtOwdVOnXW/G5v714IIZuJOygpOkuhvxCbR\r\nnPytwE7TIhETZvF3Azd2DYRgN9+3YyjXyJRTvbRXR0n2lseXnO1lVSsfCdK8\r\nAQ8Yzb3tKVfagmb+DZM1RxjRXtIFR4snDLk=\r\n=eR1T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/density":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7971d6ad5.0_1668847547987_0.9664475247179638","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/radio","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21418ba9e0a5b30c968944ae829d570047c28e41","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":41,"integrity":"sha512-lu8RoDQ81g+0xmHoCtgoG1dX2F1c3lUvmjm0JctSPSpV4UdLDCYRtaj6bWb73sCXrSnbo6Y7vL80QV2ixDHHjw==","signatures":[{"sig":"MEYCIQCc4XVfhCtF9vJa7uTWRTvIS2r8wF9iuznkz0eztPScxAIhAOxQhrDLGDBQ546W66EbmjUxo4/BP15drj36VYRMmcwJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6FxAAlyEre+Q3xSdnV1ObLSzVNwhxynmrGopojRDZMhj5k78JLip5\r\nq9jOVp7VyCkeECQ6jJTzeQt5QHWrkfDNeIF00/Vl7kPwLWxcPejH2Jji8NlR\r\nwsrZu2kj/9T8FOB+IV02j+dJjomZgWmOmP9pVOL9AZk2wdU0ZUpDWJJksbCd\r\n9tei4qZ0+sN/xJ8X2KsKhBdZw6SRb1W8BPg4yHGdgL1MdoY+LymWCbpY4Bof\r\n748gDVPe/yKbxBwb05ImOJCRtstUYZn3H968TosSB6BE9ZCk1MgJWcxp7KWs\r\n71X+GlIduSS2/6Jmz9YjIMSrgX6UIxnw/P2m6NlIXEXk/h9bY7nMM5K5w2hN\r\nwEugGMyANPfrOmCj3kW6WSfKA4h66jgG6nWXPySK0YtOuhTi6PjK9jqW+2jC\r\nRSikMfXcsd1Gma0k43VfqE09260Fu3bU32asXLUw4jwQCeYbcWDQvmaPDAhf\r\nOW9KPMA/GqqiZNuKGxph95Yw11j3/BMKIKStOLcieQ7MTsOQuDxK25ZSgGQD\r\nmekH+UDqApsPcBt+R+YXoKGcZNqWUWpYSN9auLqWr+tTuhdg8b6siVSgq5CL\r\niwygr3M4VxobPiP7+CIBa8XuGpnJvOkr2Twv7kJIN7BZlY0H04TelDOBivol\r\nkHT3LaqyC8KnYoHcKo4w3XufTLexwk2hGNw=\r\n=Jq02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/density":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a0ae73b0e.0_1669028071054_0.9608169946195066","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/radio","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"185f978bb8131a86150c70df4332b3de871f9f10","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.96f472604.0.tgz","fileCount":41,"integrity":"sha512-xsb4GIseWU6WQEFSToBGSaFi44dHPEvH1XpQjUCkDWb5xgSFDQiXYeDRYf7V224In9YGjp33OzX00pJYJhiQSg==","signatures":[{"sig":"MEUCIArnwiQtYzytnapU8xWZvOWdZe0/OiQLFRiR2oKj5LNLAiEA6/EA7bLoWgH0cb01z8fMHm1k0RgNZ/HfVKfniG0We/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3TDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJfQ/6Aq4xSiJp3f0BS0UomR09tsmlvwi94TD4seB7nWR1STzp979X\r\n75hfJX7f0WOfWcfG2XS5uquDzF4mR5T05ZLi7d81kXsWttVm8UI65fmZsaCH\r\nBQbw1u52aq0DZ3Cz075txhH7OMohdbcrf/Hcrlt0qUU8hgvUCFVPo7fv6L6V\r\nzCTCDOyiq6yLuuZfUEAsKwST17rorz6KVYmxqCjCZdW4d7MrJQv46bIc4iHJ\r\nZixdp87keOYWMfAe4eCDE4nY14Ca37ptsQARd2m0sQ8Fg5it8RL1z3DnAyh3\r\n7pjGFjQfQtnHB0rM05XMa9eYF9AhDM2H+9Y+owGvZzubrh6NAseWAKw4+8No\r\nvkB7JZp+XnV3tebWtrlIhmIwSuY0Fh1NS16v2OhQCBWf6u1NIw05FfBO2OTl\r\ndqIp1rCqtJIMpspO7WyWrXVPeHANAPsr2k0YLIviG0U2L0bO4lAGdrUm9SpQ\r\nxkyqWJT4RmFOPdqovWEwjCdpC0fdr0ySk94SJKxKhYtiZD0kZUtcHsrKPtQ1\r\nc7Uu+gi6PgYaMP9ZEUFxG6OSzaccHdCgYKwZzE3PI/j50Pvcgwz5GVyEVQIz\r\nPBCPYWxQ6XjxXPBSxrp2Da0vSQpcaNDrXUwwirT/NLo5ITXnqbPb+unLi/WK\r\n5XNCoPRObARmOkptDN/kZdMOtWeevoCL660=\r\n=lpUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/density":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/focus-ring":"15.0.0-canary.96f472604.0","@material/touch-target":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.96f472604.0_1669035203359_0.9356232571281058","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/radio","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e214a3200d0fb04a2ec16057807fd64b958839c8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.18b8f31e1.0.tgz","fileCount":41,"integrity":"sha512-I+IqpTEmX/U8VyCAh2OXPJqwjSHpRHwdESTdbNsubLDJMCfSBCbt+RYdCQhM/4Mt7R6RWTGlOzCKBdad991Cxg==","signatures":[{"sig":"MEUCIQCSxbeFd2ZQwffhLAnZ8d6HRQBZJh4RizE+ccy/BT58ugIgNk7mEPLcQKQDdF4ivlBTHWvOw79BJoC9YMVGhj//Svg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6E3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFpQ//UIyIgQ8VTsnDQkJQbCewchc7O6XhWFhwOC87wiswrOiZspxs\r\nfk9dpzauvqTiyxfu5NBCzmuAus/VAyD3+9EWmVC3q8dQgUuekv1kxPkWFOgf\r\nS4RLixnwAINDmcZkBXoTIah/gW4/77OJygcmrdf6fQs/SqeIqv5wzHZ3ivjd\r\nZrKzQ9kNvtBLXKEKivX+vUbcPEWgaCVdMVR9Y15nF0bVXzqej7rFIGwQKsPl\r\n6eYp8Alq53Dt86zJHkvSKdIbVUYO/4bMYNSOcp+rPS2br2tPhPyZXgt1/UMG\r\nPrOJY9O9fgI7Gp3veNCTFdoq4zX0113FaD9wBA4rrlbIhcIJ6JcRL+FJuz+z\r\nhU1G6I+0ZWpA5oup7C/XvnKcNsGc1NJIBnmLbA3wZO0kyJGjwgdg6IPFLM77\r\ndXLQt24002PNf+OAmKP5GcHJ4f777mErKM5WL70QubkCEdoeC7LHU/Y6iRYO\r\nFKOoaDNnSuHDB+8Pb+JxMIZV92YWU8kV2hV7v+Cl8nhXhZwZ1O/mV1g595ha\r\nDFZgrJ/D2rJGZBgDv2C6/PmAkQNyl/BuFo6fZNIdrYMT7XSHh+mZ1pHnmr3g\r\n5BBQQNw7fBljmzLT1V3W5WF6VHhXbMjPV+bhLqh8ee3x9vjxkBG258YFYrRR\r\nUwHdaCZ9K4vPEPqZOEZhJrU1PK40vsveL90=\r\n=1P3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/density":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.18b8f31e1.0_1669046583037_0.10732415153079078","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/radio","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8a327f30f7911653f046a0f60c564fd0119018","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.912f33ce4.0.tgz","fileCount":41,"integrity":"sha512-4PTYnNfNlJo3GCVOe1xWemKyYSl/87ToHbJfqn1Vamtzq1D80lvALwLHckVkm97C/WIQXb3HWlbumlUPN8CgZw==","signatures":[{"sig":"MEYCIQCwh+xM1wP3BZJ5Tz4XfREuoGR3FFTm5q1KflFpOplD7gIhALP4NgLv+E3Czj/jYiVm3KwyO1zhhA/lPUCjZvpxsGjk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoYQ/+OdztG1ODNby5mC8JfkSsoCroS1t7YMM7n7Td1yiUGWW6sXMw\r\nMW+FcfK/AjbI/BJUy0tNLqE+RTGgBXvMFmP5NA9+vagZ5WdJW4uAFtqOdb84\r\ndfAwXHggKMKvtrwqLmOH6meTH9cn5rKdtUFO8MehC5y03MGfJ42SWbdfQ/Jt\r\na+cXWiPksr9yfgHfwQYR95Vkn0+jyHBMQlWaYKk2Y23D5yxCV0NqSX/cpIWk\r\nIi6XG2d6DDbh0e4XL46uqeid4T133VXa9oDKU6+uK4KCz5tzipKEhSDCho5F\r\ntHkpCd76KwBqZxAJyh0qbmPcnsko6BXSZcFnD8rPVFr5ko6mZMIWHhFQk+cT\r\n9At2zQjq5M0udrP/N9oJFM12+IMstSBae79iVXdNQGVeO+c99CFH78zi7TXQ\r\nxcleorph3/XhC3KeczbyjNgTWCoGwB2t+4oYOiar3gK+Pq9ydWnBeLCVVu9m\r\nzgGCbdNFTQRiALzFNVTe0c2ypol3yZKF+3a/8paaUghZ83c+edEyxPF6JFoM\r\nP/t+eYvCmf6Xqy+Mh54+GPXhmO5Zozcj/pLYaN9jR3G9ZEISnXTjgp0AZ8L6\r\nYYkVMMxYm9XqSjPvs3Nwz1fSCaNbZTGq5pz4d2ehRfWRABRfS7/nj8jF5iYO\r\nO4dFgJ8O56K0Pl4L0lvXQt1e8r3ASNt4ATo=\r\n=4y2S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/density":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"15.0.0-canary.912f33ce4.0","@material/touch-target":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.912f33ce4.0_1669053279474_0.08109276506934981","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/radio","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"478329dbeed89eb69666c9d14b3226c77cf22b06","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1e1b1c369.0.tgz","fileCount":41,"integrity":"sha512-Z6Mp8JqsdTUjvO6CeJP1CQjwUXpfpkO6MHboXTdV+tvsbCSdpl23aQOx4ytXoax369wfuU8eHiEmEMoDzowKAg==","signatures":[{"sig":"MEQCIGumXbewowqVEY0YrVIogw39l4HgQJnEZlkeaB3IomGwAiBhCigsBKQe073mnk32cbEx8Orrdy4wMwArqCZcfWGATA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb9g//cktYAAGFaMi9XfbzRN/LHsQovt5p/mt0lvmhvZRA1I8kakA2\r\nseUqcDH0IimozG2wLtdhm/mLrih8/UiyOQ7GwBi453s9K1EP2k+QL5aKULN4\r\nhFZV+jHDvalINLQweESXZyQMhyiWXYimeJLQiVoIkM/Q+kEbU9Y3oHAoNct6\r\nC3hYb08qgGD10065l+OccW/E3cDCoYaZY6V87uvf6HM+KMnknp7Dxr+GDZxN\r\nxU37MLWO1A94CaoWu0ra6vc//nNmvv70y88FaKcb1IXH4Gs/uOvj4SFQnDBJ\r\nZmqm55kTw+cUUcBfWjDwX+7O+qMb9lDwQKF6sZFZEqbmsYzG55Xo19sXcDuw\r\nTczGM/HzOiBKaNTbzHme8qzFUW8qZAlzGq4RA4TKmOZsaOlCm53P3zvqZ/AD\r\n1qVMpK5BiaCOnPc5grMUOclx/1W2KE54vocJFWhlo/Xy59hqAXr76X+B6cDo\r\n+jvMcmity046TwPU2I6YmGTGeTzSw2JYeBQy2dyqCQfbSAzNvpglgIXvzDYM\r\npzh/3P6zlbwn5EeppCxI7VH0mww3e5tZFJ2Az6FMI8tZ5aUhevDyO+1/b+9K\r\nxAMFRoUQ4o3yzlTkLf3DTvuT3us/gVr+dqs82c9pDWbPvdoQdLB41ia4IuSm\r\n0+IxoLvldTMf4v0X0e8GL6mFynUF2K96s4Y=\r\n=xN5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/density":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1e1b1c369.0_1669230081093_0.007519862509376196","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/radio","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14bfa58c2e16573b915c586b3ee538b06c53f6e8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a2ec49244.0.tgz","fileCount":41,"integrity":"sha512-fsHr3INgyMnQ6F6pU/bQtsPouzY+HvMvSz0b7I/70/7n8VdSR9vDM6osAKMu1hRfYHJ8rbckx671m+s4GV9rNQ==","signatures":[{"sig":"MEUCIQCsvlurO7DPEiGZXY4c92kDpPz2wsIplWQKadUKJQYKtwIgS/39jE5fwiPjbnJcOVjPEhu5CCjYNuh2wMzGTb7BoZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMeQ/+M3p3CHBiAg+eIl9I4XnwVhl7ncR08+yXS1ovOqacqO/5zPsL\r\ngGsMbhL22NxFnU4MWuZ/wY+JY9ug4So52+Zg7wR+J2PcKitEgGZV45lDvPr2\r\nInfYDucK3hPbsj0rNkRw1PeiY2xMBFggU6nOiV7D6VvyTKlrq6nFFT0lLWgD\r\na2XcErXMrzZuM5YhiTnQODvi9R6N/WqzbaWTD1uwJNskC4LBkoUp2pcSg9bn\r\ngfMJ28PuK+LSDvPzNbZLum6pgQ9mPyAwUwsD8Ln9adBe3744Mc07+GCofZyf\r\n6k7Z8A2E8nNhLPXL4j1YZ65BaE4qBFO2FHDYGSNQBeq+M0jTmIFmvYxf98dt\r\n4cY15SV6QbL9zTvZye9BKezjn3eXfoR+QuyI8m/6zSnRVENAh0idMztYwCEj\r\n6bdValewEr6L4b0aqj2WoPls/584gM9LcpY4kyNBNQ5es+Y/qXLsl2YgMdco\r\nhHGw3OXVCaoSghx3VrbDaEbO8t0kih7HI1ySbx5oWwFDnyjYk0i+kYutl4wd\r\nO9qejR3qexvOh7E5ydzMXTEUr1cbOEtzW6EBKbrTZYCO2tSZj8jbrYQGoG4s\r\n5FOhh2i1lqOLBb9ylxw4+LVkRLyyvXs1yRR0cZq8Y34H5rTohEtJZTzQy0c/\r\nuAhHcf6UVhvJkD29ZEoUN0DouCyf3GSdOY4=\r\n=Afvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/density":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"15.0.0-canary.a2ec49244.0","@material/touch-target":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a2ec49244.0_1669231895392_0.34924256792180364","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/radio","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e63c5e8362f9017bf9e07ba1dde8f4e70d4f749f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a7458ba0b.0.tgz","fileCount":41,"integrity":"sha512-2NS5Uwrws7NaVQYuiUeDaUFsGzv6/T9v6p6pjx3xE/CXFmOg6jdhArP/+BripLosplwNpWYdJhwjhkY/CuG9FQ==","signatures":[{"sig":"MEQCIDeAVhoW3E6Q3j5K0NqbuP5d/BOeGyVmsEIMxRJoCMi8AiArS2rtuRbbWmBtGL7f7s+YkkQknw1fHcigqFG6Vx344g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn++ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGqg/+MkLVhnn7FrR2BSBQtMmrJWGKciIAGBTlLQ/aeTetK2ENL79X\r\nyebDARWoyPH558ldZ5PYL00AQQxatrotESsrqh3X0RSf4eN7wwv2D67y2Z/I\r\n8sjPrJgXKwT/PjROmm6rsj0TVMCpkBMRGP7e1CJ/AT3a36vjmfpmKae4aWrh\r\nQlY4CQ8o9oyBSOMYK1jYvIMxqyNf9pjmV7K9WKHOKHEDeHZb8gVdFraKIdFW\r\n409YQxpXK4/vCMq7lb2O17SunsNF5Ob3IjippipytcDawNKPiz4+qJG3MY99\r\nDDYKQ/AMtZlL3x1q4vW4Fkxzt17iaV9uqS+HNx+GH71cerndabzdMUm5lAdO\r\nFZyI95gN2sUSuy38r5/b3M7dDeWgUnQgzmIKXvBUUa+998wuu8ZOpmG3wkx2\r\n/rRFNxJH9Ou4EfnLUONzpKARa78+QrwwvJX7E6aooRO/89pIRM8P6HpkAa8s\r\niViGa+4Bz+i9NPP5JPNESgeRykMy5EEcoMLsQxNny4exWXw7lea0fcbLq4zW\r\nefp5KAAHTnSUpdfFl/GztN9MP6+AxX0JrZgpZySuted3fsYaTB/GpWdPXHrK\r\nD/PmFKv8EvrywHBh736PAgB6nbV685pnDr0wvAJncV2Ag/z95t+P0ZQPJWfU\r\nX8a6qkuX6YX4+UwzfvyPPXHdgpeW3pO9jWs=\r\n=VSSR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/density":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a7458ba0b.0_1669234621799_0.8578814320562713","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/radio","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"630925c9b26fb48708dd874ec01d3fc3601c61ef","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7c35e5036.0.tgz","fileCount":41,"integrity":"sha512-4Z10bfggqj853EEWjorp8P81/9bIwkJ27vtU6XKhqPhHdXkKVpDElUgCsb7Eg2P2joAsUfrFG8VjgnV7nrW0rg==","signatures":[{"sig":"MEUCIQDgtAN7r+IeP5dMFxROodvrFG1DV7/FZAmx+JUrNHMzYgIgCQ7liN8LkaTd3N9ENkvAXvUe2ZPUBj2LZK4hNjrI3Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Nw/+MPMSYzglmVg071hl6LO724ad1NtwKKVWWfJoU816+gKz0oYW\r\n7r1Cx33B30eWffe/XDsqL0uO5r/rL/jCZZ3uubff44LrO5TSQ8ME50aE6Mlq\r\n+GHWZzS6B/h7mHGqNuLS5fkObh+ZPIoHuwZkxRmJKzkB3XwCLfwsibC8Mn2W\r\nvIOwvXAVk2QxV09qbgidOdy8/8MOPTtxPL8097gvL6zVgZBqi2z/MbHJfHJx\r\n+afRrTDUZTVwAuMWs8/6XKvSILjXVu7A7wkdfNLpvMrupufeJpGIaWyuFnh4\r\n0/T/XlHZbIWdYyH4ZMJGnhyLe/kFK3i0VLj2uC6S3LmQSkSI/qWY4DqdK06R\r\nzouTQMb26c0tZY8AGrAREMAXl+ZGQiMx/aLcl/JjmWK9tWXEnp20E8LVmWYq\r\nVzcYfU8VQxjNnG7sVTktogaApJ387LSvurX8c2Gi4EqRKRafAbs9e6F8mG5x\r\nLpo0vAXyVrrMewea6nfaUTZW3yr2TNUPmuTZMOKk+DxawTtmckm+C+VlDjqL\r\ngIyqj0rCeS1uA9xUlpag4DHCbLokhUXGTEO1TCEz2ywBIEN1zt74UzfIsmRk\r\n1v/48RHJ6mpHKC5olGliqFDfdNc3N4F2e9OYAff+0DLoYTtcvjW/EPdhoF1E\r\nxll5XS2P9O4zX5sgVD2jAnATYRvuiPkIok4=\r\n=eP02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/density":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"15.0.0-canary.7c35e5036.0","@material/touch-target":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7c35e5036.0_1669279202239_0.100690050968121","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/radio","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f7f6a5254b7f78f615cb52deb9cc3a35f7fa439","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4356e05c5.0.tgz","fileCount":41,"integrity":"sha512-yOO8pmSXWfUK48Tf5408h+NzfWdvyJj7wGANrx7219w+4pLADcx89iv27dQm9lSkGVXOEMh6UcMDdKa6Q/0TCA==","signatures":[{"sig":"MEUCIHuX3pTOCeiQiIBYJYyUtrSwddT0s2QxC0Xf2lcUpTvIAiEAoOWtjlyaIZMHYexfY8Ib44t0cxq7/XdEbbT/gN3ukfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0AEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Tg//QN972KzdndgXpoSNLXJllG3MhlZDJqvUYMvk5k5je+J4wDB+\r\n1i8+9RwDDBGexsMAxSahnVsSH/d+FWirbFMmvCdpT5FkgvsZF3CykR9WOfIQ\r\n4JgMeliPvMiIHBjUcsy1XA/y0tXwxgthNED9kgxu/RGkgPQhcgWN7HK8GIk1\r\nVhH5MvalVYR1rBFhyX5WeR/C41E+duj7q1uex8Ab3LUdkjhP+Dy071D3+fjx\r\niK2xULpFXNeUMcRL2BUkXY5ymV40j8tXM1DECGIFihhGyFcBT21yCXYIfQi+\r\nMZKmoFMeq0VS3DMrPewgs+Ffb/Fonhd42xGEU08VyRVcfKUaRlW9hI+kXjDw\r\nN7E7pLmwy6ohRbmPzGtwE0Tm3H7Y0ggkAxXAQxgeub1ZOiclLzs6q5oKuqcr\r\n4j7n+K7+5YvZbuNi+hCtF+6A8bezT5Ua/ysam1BbxzEoP9GgvYwNfvYEYDpQ\r\nMPPsbG1qOJBcdeiie7AIEq21vHnAnlJospqbGuEqVg/zvxNFoGQ7FMBVIxdD\r\nYta/O0QI74mNwd2N4msCcOQy+4ZeTnF6k+OZBb0DTuG4cpXPGutAjq6nwaw7\r\nDdZ/CE7yjpaPYxu5sRgVIITpLrFP6DWwX1N4VOeG6NneN/PSi2ZNnACoL7SZ\r\n3oRk9BIjTRrkhM/JewQJHN5QIhRWg8qWU24=\r\n=wcHt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/density":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"15.0.0-canary.4356e05c5.0","@material/touch-target":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4356e05c5.0_1669283843932_0.39610668551416417","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/radio","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"599307cbb91a4419f0d9d09054b5c4ec673d4c9b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cb605f8af.0.tgz","fileCount":41,"integrity":"sha512-fXVQKhZgQzxYHhbyjy8CNeIwR9+xOFXGxMDvY0mxewWR2Bc6fOaz9hKrEuxF8XrnVV0Wj1pVGuUuLOnte0XAzw==","signatures":[{"sig":"MEYCIQDXtAYtqWvd4btoRXxlxo6Y+mXQQzbzAEyjCsywcwQtZQIhAOTP+b20GnU4qYfMuwPQvGuSgXQO88YBdnPvhhWmlXdw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0R+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk0Q/9G1xy9fK3rAQYLCHXhAGyg8TmE8L4OwLuJGs40JgO15MBgB0a\r\nU+MpEBpc/cTder1+6g4wKawxUBiIQLwW3TK8Rlw/KP1rX6hhIzq6swH2KCNh\r\nPCBK3/vM0MQRMUehctp/qkZLoNeRo0Fepn4nlEmSeHICOm10YStsjpteEmCj\r\nnXuV0G19ZgdhdBrTwievs/RFY1/JxS2iCBR3McaYye+EhxQL5jZRgBGj/RVs\r\nU9wcLRgHm3PKZyNGP1HmLfRvL4wiZUZHruKLB55P9MErUvvmk32QccTjN5QE\r\n/I3y3TJAE3yRqEq48q3B/tQ9QaL4YtgC1bgoPSLaiirDTsCutlUiFa3pzj+5\r\nNT7HUUvEeGvqBFk3264W6vY4FezcgrGi0NYiSnFdpdl5Pritv6jbSnauajSh\r\njWJfDcVejWnuXsFrjk+vyzJ6P47kE8/JqR24xKL/a61A0CaYZXUG1sJpnj2D\r\ntykGUgW1Ht3T4oCTVZTeFeZf9hc2hBKMNrXQPPlV34YNaBL2InjIq/+DtH55\r\n5ZoisdwSixk4JNzDcY36s7+3ZSWs0XiFq0amX+W4ibbcWa9/0GSvgDwRNZxm\r\nWJ1I2VipzKgP3xp78TUPVE21DNYn6uSopmCVSUJKJt3oghoTAW062eByficv\r\nYaYz5A/ST3sFoRjRpMNSD96oc3Hiq7w1EDQ=\r\n=UTa3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/density":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"15.0.0-canary.cb605f8af.0","@material/touch-target":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cb605f8af.0_1669284990578_0.48260828411948387","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/radio","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3a280823eb3d27de4bc59e8540f7686616faaa1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.05fb07f9f.0.tgz","fileCount":41,"integrity":"sha512-1Mwl3ZmFtI8f1AMFWdSfe02jErpBAJbxH4dOQchJMZbDtnLBZ8Qir7PvxyL5KyqNLEyF0vae/4a3F6vd1tw9iw==","signatures":[{"sig":"MEUCIQCLSTq9UBaoeowSHrQSyk9nv1V+bohhsQwQcwSGhAcPAgIgYPRTboKy6VgetvfP+DeMgdxhfK5+RRco/A7uRUFUnS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxhA//ToKhHjbZjk23vmSSuvLOUJ0udjhvKyZcA9DiUUsF8myo/oA1\r\nfs/Mvddbv933Qd5zlUneeUfFov2KiWSKeQu+P0J6eCUwSlY7v0uBuUeoLBnm\r\nlCTk3B9DXVOuFKvkIwIR2etbmsU4TyGetIA3Th97VpEMXQeVWs6KnOMzfUpb\r\nxONXciFHVCV92c6E1xCjVmh4FrbEh0cp5IowLAdPVypNFTDGq8g2Bw+8U2Bh\r\nI/6AMK0Kq+TCntYkDk1LSZASu9cFSlpah9XBh32mwlcJyYKr4AJiN456fAIV\r\nKt8mSp5ioiNLYt6dl/plA0EWhoGzIoPuP1FAQlVPbVZKrzBO9B0Wz/1iOHFB\r\nqnL8JMWp6wdXnZpFi03zKxsSQw5gSh1Bi4I8Mo25PwnFyve+q/8c+f8hLikE\r\n9wBLy6Kp4ufw5zmCTpJ4cLTM0qzE2nkUMXzNE1FbAWgRLx0uaTQYhA6mGMXd\r\nlnKDr2T1cE13q00bDCZFo3nfKAuM/Te4j5ZgxuPzE47B8jv29IdVCeWWEG/6\r\nX+4bMRbkUdThXKaIfa2ID7lIVMD275Sj16mjgAGOhpL99QPB4+sIqtOIXLEi\r\ngt9SSYhp4X+g89Y1GgMzyEEpjDyqOnrsz0fZ8n/g5RoNeGflF7I68W4ex91U\r\nyNaSpyPAavOkf7NErFWZ7RnO+qpJcHY1Ink=\r\n=JVWO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/density":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.05fb07f9f.0_1669310061907_0.5249980367966067","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/radio","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c4c00ac6c3c6ab2f7509e727c11047c23faaf35","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a911b386b.0.tgz","fileCount":41,"integrity":"sha512-FIguNjjM6HKA2zLJfzX8Pv4O5EX3CyOeZMb6QRPbzbm7amqF+UFNw1hxMyKT7LKrqInQcgYmi6SomRPZ8277EQ==","signatures":[{"sig":"MEUCIDpC2tl9A0V3RrMMR0qrX2/tD8APt9IqdDfs+3eml0j2AiEA/JXxQXeQ+vPx2hWfn6uAFKVoly6UaHwecPD+exAa7LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRcA//Zcz+lAiGNSRhGp7YJrrl1BIQijtbvf6BChd4ueqTv4De8ER1\r\nRA0g8a7zDqY0iJDrkcxiMqnQvH3fAVzGxM9QnCzSkFAL8UWJ4k8PDIiZ28Dm\r\n7asD5f+caUVqoc+ToJiS1T5WmQ9m08kg2lPS+cvzS2MLxpja2ZStFxFqtG5W\r\nzbU2YFuoaXRu37RoGSf1pUDw9eN7Ggbjyhcc5BVLcy6rFKxU6TIMQ20YR632\r\n0tQ4O3KKos48VDla1vy8TFk4yjdiBPFtcO8MIoDZkZ3haclYJ8nbe5VHzIZ6\r\nXTamTEjuzrBDfm1i66Fx1iPJNtw9Cm/83S84jlIcEVS2lhTV25HJB9RqpCLY\r\n027jOK20aZSHpo9jqMgV6SYPYN9/rmDl5ioRTeV7UowjhVQ+0IBwL83+/el6\r\nlX7rR03aoUPW9VZXpTF0Eoyx0/HX6lcrPe7R84SHivp4l+3EKezxkm4ZBwgV\r\nMbineXMUXwId87Q76hU66ekX5ejqy8lhv3SOQlELMPM5bQqv0QNfTMkj0HZl\r\nBTUfJf65iuxPjIDzKJiOvoYIdwmKCd4ogYJpbTom26ocNJ1RsXINnAAmh4pJ\r\n0xwgl2MOlUyNFCxtx5GqwYs/MwPc1W0UoQjX7q4Prl+fjOOXpiBGv06d29kM\r\npf5/ingUzTJoFMhkb4qTGEZ/1XsCa1QQY5s=\r\n=N/lu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/density":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"15.0.0-canary.a911b386b.0","@material/touch-target":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a911b386b.0_1669654079697_0.3566597748314002","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/radio","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf008dd17a098349b4b190db2266b7fe40575290","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2aa8050b4.0.tgz","fileCount":41,"integrity":"sha512-eiqevLG129c+G/vzpSZFTZhHP6TpmLfU31RYl5md3aKJmgaadlT05LgquGuBDphXrf2h/qxUHdrKTkb9aDb8CQ==","signatures":[{"sig":"MEUCIF8Lc0jNcLu5yTWy721tyftN/CFmQ4Oi4gbn6DST1UDUAiEAlxe28CGoOHd4rKhOEk/1cDzrWk48fcoW14Ps0vVARJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQgQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotKQ/+OKEhTjJIwwjnMNQwMrpuAZYK5H5dHpHXRY5BKJ88/EbLJdxE\r\nAq/ulLc/e24IegQrZHPfDAI4AwrlydaumE5kjIaseY1tBrpmT7SqxrQF5o7n\r\n1ka5L11VOo1m08gke0yRXtp6aO11xb6BAgCl6mRKMSuSv+jMtPco6wNZduaP\r\nHXy6L9T+9Xuwsx5HtWdV4cLw1XBkmGYvhygheRndX6kV1QTEnYCsckLC++7h\r\n5YnQjxnZxjSPaOBA+h4im+O1zsV5gS47KtkPenKX7OFc5KfMwwH11Sj3cpLl\r\nghCRdg8Sl/GEU5IYunNajFb+tf/sdgFYeiJo41irEI5+bU2M87VKQIGkowKa\r\nOg2LRHS9yOjJPqO0N3hy+S3uKWqhQiLVc0cuZ8KQFApjQ07PxEvXN+qZFVcj\r\nH6JfK0D1Mh1GmNCeZp0BLPHQd1gbtDcryK2UUDL9Wx9lACN4cOVdi1rMl3Lu\r\ngSx2FfNigiNfp2DfLJjdbDy7WyN7TM6vr1N1EiXROyg/mjXHhYqqnf8lFS62\r\nFnqCqlTdd7h5U1V2iMj+x3r5zyux6kfoXnqrzjvphCzEtgBmv0vCocGqqgEn\r\nPwbQ4VOoiNT6G9Xatuq7bBrT/ExBLwFBo6QWivzzNNBJKx/sEnO3R75BYEms\r\naXkJbGTKMZMgMW6sN60Hej1IRRIHlBkYzP0=\r\n=XszF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/density":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2aa8050b4.0_1669662736011_0.31500065959183","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/radio","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4aed84c5a3a58ab9d02a3a8b2d1aeef5fd9aca1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.323904a9f.0.tgz","fileCount":41,"integrity":"sha512-aonO6mrbPtc99mZVFVDYOyZb3eGLVsn1hhPoshTv7zM6YafXzfa2BH7Rwh7jT1FYGaudAES0knbIpnlE01OriQ==","signatures":[{"sig":"MEQCIGv0ddlCNNzZSqTLU6ncm5NWLh4V53i1VRmwJb9Ywe5FAiBpXND+jg4LmfDF2o6ZJT/W7fhaW2zqSBklt5uTdmKkeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGZRAAn6SUgBpDKntl5oHaHJqTxp7RxGQDemncsk4HG+ed1DTfmTAr\r\nA42VQ8lirndMIP1ch1WJuIMe2Y6sNI9Dly2VX3BqH5GkpC3BwXcxNW4rF9/2\r\nIad1vO9bg2NoU90CcYcxliWYeKC+cFARWHHl/a+i27uz1+mhMYcwdU74KVLv\r\nYnXxK+uCa//NnzJiKdIl92Xuy0BagQ1kfPfmUfCpoKiDugHH5hoMxDYv/Ll1\r\nTI261T+thIlf7YjdVJ+lJCsznlOXLdXTIZJFc7bTwmAVmopbqvCJNwyVdGl5\r\nNyZ3PCZ4soZ0W1Cv/3s0z5TV8zRE64+HRXa8zCUBVYg5W7KRGhD2EEvmCWyH\r\ntOvqd883kRVicDwnn72nCiS/srkvJWVp9q6eNRrL4B9PZEJl0587IgayemP3\r\nNqHX5NeHI1I7g+UiGPGNjEkL3U3kAA8SqUPliaf8lva7BI1wZBkeiyLr9mo/\r\nxA+wc/hVFiH1Ph31STz8hb+qE7Q1eB+OwH89sr/J4WHFkFxG4j9SdC0/28jR\r\nZN43oIDNu7aT4nSMG8wnwtUFMy0GLnxIZjwNBEa6jqtrNYTj+Rzl+1fUlyQM\r\nlIMQDL9SFdIFUzgYXJpMqrEqvCfmlsaYFvadot/tzlg+QVo0Y0kSQULB5M9g\r\n1ecxgAHrqLB4ch76e4p/bFE/5iGnHUxn8LA=\r\n=IT6L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/density":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"15.0.0-canary.323904a9f.0","@material/touch-target":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.323904a9f.0_1669736056457_0.2083630381333068","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/radio","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c0fe32e96a638e0c46337903f8da3c41a3d3650","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.168a629a4.0.tgz","fileCount":41,"integrity":"sha512-hgJIPuoJ6Z0wKertfunxlTScJjMZiFYnyaTi5A/mxSN7aLsdmZ6+/HGAOe6Obyan/neH8BdL1jR8ecdxTXKecA==","signatures":[{"sig":"MEYCIQD6dmhastiykx5c86YgWALJy8TraKprsFDFkTg4hq0NpgIhAN7lSQIhVGrFBdoCLqeT/+AbEda4qiXeNpbrWbg1rXkP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWJg//RBTBogIcXctHCnKHVhg0+ud3D+chPUf2soNu2yAAv5Ws5lTR\r\ncI8EupSrsl0/LERhzy2JXyXGOyAxqidzEmvlnuhSxLP6YibL886ZomepWhEQ\r\nRYJV+wDkYhvMaFiwh6/NK+eV86BmTRZGfQkJZQC04CfaaiTcpknNrmGfWR8H\r\n6Rwcf72PSCvEQEr4lfLiPmpqJZX4WGwmyzKNNIfhsykggbNbf12C/IUMizH5\r\n/8LVBOSGrwmJixHzSfXyaVbXBUCNZrbSSLVgwEb4gtdovCJilPqfNON30uXQ\r\nFTgOkP2dV0VXzlN6dM05PKcbxnu/hwvly0HxXcxzJT2cPcc5z52gyFlplOhl\r\n4EUuZIKkMh90vdWcZiemk8sAU9oVIdNabhF7lhXq37jBYLc+9aOdY/11kmDR\r\n5dnnawBj//Mx9SUF0nATU8HUaBY82RbpMIOXWPX420kctGYItyTtU2/dBfMX\r\nZQjf790pDJSdUWJVIvzPnzQXBx9G6/yf8rt+GifTbQvpqbpDQRC/46sBhbWR\r\nwMRWcHe1pwggHVj7sTwCgD0i95LSJTlfH4STKOsrN7/DwhODISHCjb4Z2+IG\r\n0HNhVuhwysBWuqi3Y0dN1ArKgyd/9dLTl7p5cUt1/rLMSjjasoIkpCRP4DP9\r\nDztMT1bxVsoPaGggEp1fiy5kOvxZfZJBIlY=\r\n=2K3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/density":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"15.0.0-canary.168a629a4.0","@material/touch-target":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.168a629a4.0_1669740559726_0.03083739690508347","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/radio","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4fee569e1075c074eb8b14b24ff16c297a31ee1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.65c411674.0.tgz","fileCount":41,"integrity":"sha512-z3WBMUS+I3mbMfVHS8sp/SPlscbhKGy4k3nPRTnK9MAG/+8T9lLX6nRAgdheRc4b9WZcCvfpB7rGxjnoV0yF/A==","signatures":[{"sig":"MEQCIHlTpsqvBEuH1ZX9dAeN0lxF+ZGYhMdR9JUXBixKSJCsAiB8ehbsvJuoBRof8Vn2qQiIHL5aWhWsXd+Tp7ubDShMwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkPAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4QQ//YshBlZn9TlvV33Fk0tv5hmHaZk/UFEM+CHjv9GX0aFRZESvM\r\nKZx1ohqTaymMZ2Dtn7poOph+TsazFMp7buXLTCzIdoXtO2G3IY56rxPQNuOO\r\n52QM1haprCwQ2MhTCHf3FQSDwvjVOQ/tgHZL5hwwxRCr8W/rusATF5+bzNV9\r\njaJ0L1OCR8t/u4530yVk64FTj9Bwew3+2nLoZJQ1wqOr4rV89ABwgRwo4Krq\r\nA2oYfHbhrGExPwqGcUpu32f8VOOQ70pdHjNObZ+bB5uF38lkfIkkaRY0xPLD\r\n8izwHjDXxxn5okslOKao1CR82A21FMnmsFj0mAxOl0lfl5wMFe5ZiVpSOyx+\r\ntv6Naw+7S0xfyRJe3Mso27e06zGm0VQDiAlvqrIUcEVBdqKJ4hne31e/ts3t\r\nXMMv4rx7qh4xYCzHVRB08UhvFqKrA1I25StYwZb9vMC2NbuMtF2RrAp6q/mh\r\ngkhvI+oMtBI6c3dO+j4TuqClgiCstDRYT4nPCCRlM2SfAItrNGAay1hbm/DN\r\nVQRu9QFh+z5TiFdcHJDZv9Pgo6KjQPoY6NF2IW6rkgEaCS+QDeTPXQc134Kd\r\nlwpQle7ymgXNAceL/JyT/sKfj73tMxNh2Y1azUPQWwdoLZ07HBMuSM5uOEI8\r\nMQ1oYEWiqubFxmMzp5PoEj7tVi70ISZ2Qvc=\r\n=EB7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/density":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/focus-ring":"15.0.0-canary.65c411674.0","@material/touch-target":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.65c411674.0_1669743552703_0.7690269664721465","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/radio","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233dcc636fc25fdcd647679a8686798c2102bedd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a86d36fd2.0.tgz","fileCount":41,"integrity":"sha512-zofOHyxuM9IU4mn/a0TTVtomskGDtTBcPGP/JLHPqdLV/z2HNDc5Nc8GnSeQqoc1nmxLH5mjWERc5TogqEn3Qg==","signatures":[{"sig":"MEYCIQDIOLg3imeMmUiEqvLNReAL7gorMjZ+FeUJpqxWseD5cwIhAN4iH31SyBp7UaDY0UmLLk++LdCC4f20aigbt0OO1kif","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrydACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWOA/7BhqzkhpH0mMjYbJlff1XXj+9aqWt7cL6ZBjhSU/vhxT+QYtD\r\n/IVVPP0noEywAG448fTBSZnrLZ+i3dHvjFTSFjY03HvT/1ASl2mnjQeffus9\r\nm7EzOwD/Z9Nd8ta5O5WEpuc9nlBzdRSg7Wf+Tu7fxzUJcUbClot4FNhuHkCz\r\nWlWHMGo0Ab5blBT4dneCmQfqCyaOhftNMPS6bFxsn6stq3xrQzZDDmPmEzay\r\nmAKEqPR/SvMqtETKrRXmMG6tT14Ky4Ix687vbC1SnoBBeZSuramkfrZqdfHy\r\nMQE0GqAscoP4Jmba4Sc5N6vYGb5eClnn7dW4u0H2g6HxgRZihSacjllQuPVk\r\netdjr/1nSh0xIF4iFjwTDzIRm1lZj8J6Ew6wELApGvE9jzz0W9S0R1zwXw6y\r\n0XnFcWztuUnMtBUm6slv29Bykencjukv50QTC0b1cmG0nFL9IlJ7Mq9eRK00\r\nTqIncGJ2pUl8te+vtFC5n5CQ7msZw4/6PTDvQbW8o6plBRgSkAuL1T31xrJb\r\ncNxTmjI2/CQ6vDpyuBoyCe4bd2PkC/vWvsJC1eiv8GWCmqbOxtnPo6cUOjyZ\r\ngRHGJJTwOxPt8w1TkAyGu0JVczi2pF7czc2UZQ8c5MAhtUlbgMxmScPfLRQy\r\nHV8+Jck5g1RT5wKq7mawl0rhvy/1iBw6u6I=\r\n=0PCL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/density":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a86d36fd2.0_1669774493643_0.6140505064731494","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/radio","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fab8662d19497617afc0d020b506ddfe85773bd6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3a1f46c66.0.tgz","fileCount":41,"integrity":"sha512-W7OJbiCr8Y5fu2PC1xptUdCHpohiEb6BsKCEKfKYaq8tm8a4gSybo4CsKdGwgN/CIHl6usURoaH3lsLbE5Y0tw==","signatures":[{"sig":"MEUCIFkdrsyPgS46rwbRVFe52Zm/JQEHg1HKmxlfepFPPzy0AiEA8HSJFzReNLhJL9z/TCIWC6LFveVxKZaZQcC75ND1Xa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0etACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIag/+JUYY60d2i+yADMxew6lN9yB5CTxLQb0M3dlDVdyVV9mRyMnm\r\n9PdpJnY6oLpiO9HJtWKbBPYd+kq7yPuTHh829eaY+o7M3K/3jgLy9dXDKr2y\r\nExTAegNL6A9Zg1kLGl2RD60wXUr5An+hy3btBhGr6MbZluXkL297eWabIJ9H\r\nR5FbyiHZqB7ifsGRhwYc6o9lx+oah81NMx9WP0lguyqtuXZAxD1GDXYbWNA3\r\nsQvos8yc/phDXfOfIxo+kZgDaRL4DnrgcZgEczj3g12Yaxxd+XRwSoqJ6KBx\r\nGPk/eK/KhBJa109JCJ7MqDYFwN+0N3xrWM4wTY1kPmuqseZE4ZJB6t7Q2aEx\r\nGcmAFmprNkrhUxkdV0+I4NIyXw7hTJb1oLxM/IjYi8I+VRvjBnt1w4G5v7cb\r\nlrWPFulMn8zhPuHXtQG8E7zagYv8BY1QFWYfqbuq8vf9WE675jFEpXMyzEHc\r\nRkRzsZwrvov8C9Tvu2EaeUJXHaTq9fRZrSeXB7GUoGhSz/m7mYmm6YhlyQTu\r\nFcWIeLDqlgoDNKMUi/ROEpNQB6UV2S0Q3/fZte1/8oMD8VUCGys7PVLF55oy\r\nmGydvdFNdrtJGACWfmCG/T7+VGwynKw+l9MzBvCz5NW1m+lYV0ljRoaKblGo\r\nkOQqyuqQfM/yp6mIC0VYgH6fk3Wzaju3Be8=\r\n=dGI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/density":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3a1f46c66.0_1669810093353_0.7792796769221801","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/radio","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"111b7bf327db981243a43fac9e5178f38ef0a82d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.32d8a9648.0.tgz","fileCount":41,"integrity":"sha512-Y0SAoZNVAgETP5nEu6va3Ung8+KMLVOm7x3dn9oCn4BN6MdmDJL8ApZLJtMLSEIRsiMN4uPu2Bvk9Qz/9saaNg==","signatures":[{"sig":"MEQCIF0HrUNrqytdsr8XnAwVBHCJfGhQzaZqcOqD5SJs6LPQAiB7CKNrp0Xw3Rj0ya1b+uBb4ycc8aYmoaZaiK3aR//PtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOSSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqhw/9HSGllrNn0Urw6kNmMnkcAcKBkqxwUN2efdj/IZGKSzdTQ6ZH\r\n9+M0xb1YzCW5JU4R7a0ndsWDyV164r1GSkBX0n3l/24BdI/r5cIzaci/fq8i\r\niEBuqZbXSYeFylIBS+xZ1CVc8eDEIGjwtI5SN/5ceZSsx9d3HOV78JCi0F+/\r\nMq2zsVBnYKBMiJtIZ+dIukwyxLI4DRXN1kUIcl4DTx1MoLjqitGNhXXhMOGI\r\n8ZPJty/0ClBtLrsUuYwtAQ6WHhEXz4PL/92hk0j9ZgrN4YWBkbqN6EpBkdmt\r\nGEN1HK4/KYks/dyNnrKKU/9RsX0D/pHOMDgObMGYEOd+vGzTfdmzTmUiwNzD\r\n08Gf4cZZ2X5c1CH8ftQ2ZlrlASADr1VyATpjwG6jWFumrYEeY/kLuIzH6ThL\r\nvVz8A6KOtA5yge9TgPur0MXuiS0qWkJ6R16LIqAK5rE4cUnqwo4OmwZNlJcK\r\njMQ6xYAx88mFxFKE9WfZ5Bqc/Er59D0sv5zk0tg5m/1wLBnKmeP2BsydOTRe\r\nQPpHWj7lwTHitugmZ9D7o/h2hyq6wP7gdoCbTNsRoPgimo/jRn0VUlfEI7O2\r\n80FWp9AHhQrqlOy5eyj5XuXKE0tBD2OFxUWnyqVBktAj2eNJFG2IJgkjNP/g\r\nzcmjNqsPgkwLShHhE+/cTWjMtqICUT1UVz0=\r\n=y39X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/density":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"15.0.0-canary.32d8a9648.0","@material/touch-target":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.32d8a9648.0_1669915794492_0.4808728734851395","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/radio","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39a26da476d99430062972fed69837745e02ea07","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.03618ab70.0.tgz","fileCount":41,"integrity":"sha512-Hx2OCMIypRnWvZNcysk/n3ddyFhXVpZQ4ykGTvlozR7ednKui+bqVQaKYM0zw8+f4wMACDUZUR4NX+CZ3GWj2w==","signatures":[{"sig":"MEQCIHa/F2+L8Z8j0QFlJg8vaeGZtySGCRlqlBFToERkDBLTAiABAqybYeW91O+9GbNPpKF6HnUT5bJPu+8pZYAVmIcyBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnGxAAmSqvgd+IlMcrIU593mGW24Q3iZ9Jaa6gPEKd/U0t/Qj4rKcI\r\nhDkyn4k+BFrQRocA3RTQnxt5PwUiUUTJiezPeYjoVv8j+9vHDtISGswtTaF1\r\ni/aa8fnW+6vz6TES9Xiwcs7gkiqVBcrjqnvxeWbOeaf/fM5bP3tzoXt7PnJw\r\njJKPN6O2pKlLgP6fUeH7+HOwhKR7jnZr7hBop/CSOIvAcxOSPW9PF1fCRF5I\r\nWOyaWRhWhnxA/7WO1GR1YHJ8M/lCv1heWtNudWNxfDD+/0Z1hZWi+t+nmpCS\r\nm352O8EMl25onjYOw0Aj1LGc+TbVv4fAMCYk2Q2c9vLH1Xf8IPaO/POTJeYo\r\n0t4qtYsd3862+CRrMKgDseNU2cpNqw/6UR3fZ59XM+ODEqKfeyVBWq2FRPrv\r\nNJvdITdaDh7B1lGeT6XDl56rOXLp0P5cOE9v19swo1rmN8wuEz4Qgi3l1PZJ\r\n6SQaYdrmiuSKHoP5A4auVU+s/i8YF1u7wcEMwPwQbcQpdyCMV1R8ygYxZC8v\r\nvrTgwjlavO+St7Vgm5Chf+YKI0hhAMfugsgNIot+IcILRigPqQg6NjoAxVRV\r\nmAfrO5hpmtc33drg7bYZnRku/Q1cS8OdXI1HdLnNThZ+8xhqss0eoyxn/DVh\r\nLx47ucEwoJLO95/qM6V9ilpsfflGLnNMJEk=\r\n=n+Ou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/density":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"15.0.0-canary.03618ab70.0","@material/touch-target":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.03618ab70.0_1669928107276_0.9985596159657848","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/radio","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d4f9c08cbfbdfbfd78ee6766ae19db8205794b7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.68aaed940.0.tgz","fileCount":41,"integrity":"sha512-mrfUVg8+Rz1dSzFQicWWY6FvMzIHi3pzg5MpFFdcsRx18ztdyQt3eriDWIyEg1NslYudkyRkdkCq6amWZLywZA==","signatures":[{"sig":"MEUCIBsd9xFwXS8LVuvh+tgDHQXEVZ6/smxECg4P/gCDAg91AiEA8jKyLaDsFxxfHVh6SgiGmoiFnnwgJ8jom2pEBw/sCPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzQg/8DLlHIllYLlYY+eKOx3z8Qkn5eT5Esa2oDS+Kcf8Qm5gQs31i\r\n2JEf9jyTbIK0U3OENVQtUWqte8JO1gP61+zTmMk9dK5tS/gkRLaXw+Yi7qBP\r\nqMHnQmlXj3mGqEKj/7vd9nTncQwzVA7Fo75Q3x+UyEMUEy/anwRJvpAaLP0v\r\nNb/w35mN7VpdC6ZY4QqLWCzJMuBnR/34FCTUWh57h6SCiBNWrKr0WU8Rt40+\r\nNXtD+7HPOd/jaaBMGNY9PAjVJN2zPCIPWsMf98mk/kddOnW5eMdPyq2QZWYp\r\nE7Q0kcJbcWn44YmH0DSPQbiNflxowPx0jBf92Wb+syokFhGkkm/E6OFH9bKE\r\n8FvpBqaNzfkcJ8drTxq/5dZ381P5R4Q4j0wFiDh9O6oKpHGL1PGWreRLYBGs\r\nFZ+kx6oDitl9YjPYOvm1B/J8tytMhKUJKG7sJb/jBZG8fOR1Qirmyoz2XRGW\r\nWRdSnIN9uA1GFJ/uwz5Ug95wmlNuszj87aEAOiDXL2YqZFuLzmsL6D/1xAMy\r\nCmXjkyGHwT5IDVBu4FA9fGakS9OrQbor+GzFZxoMLQrl4xRcum34mzIF68Um\r\nfu9JuCf0PDoVYwxcbrpfY+CG1zoY/e8Lgde0FcGUmSHSjPiXTG4ooEs8hWyK\r\nzuYxjmute9zrp0UZAJfwyZQqYpRLIvyqVps=\r\n=44Dx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/density":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"15.0.0-canary.68aaed940.0","@material/touch-target":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.68aaed940.0_1669929893495_0.05419363824922141","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/radio","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d981eda15cac3ce596faa35d1576a775cbdd5977","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":41,"integrity":"sha512-Ut18GZUU1TSIdtVFNSYy+gOypD1hJr4ETMsWZVZgXiPN2ns24SGZPgu0RUCQcg4n9KfbmsrUuqC25TYAdJNWAA==","signatures":[{"sig":"MEUCIQCzeHyKVtMKpz4uI4G7NObshGk6Hr3FYXDDXuO2SAeKVQIgJCltrlKio+vQIXKF3eoGjYXFnVNmQq+msxal9c1MPnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6ohAAgZAg4tR0R2AAk2vAd5Rzov4Wz5SGUQlOBMnuPdDVFqJ5+OV7\r\nlR6VWnXVFCtfWyDfSVGqcMIWdmHzxZAjeamC3VV53kAMcsy/lokXxC4C7j57\r\nQIpUqZsF4NDiIMPabT8iuiLSR2ckVwHz0OpBYPh6Th9G5s9KVU7Ycoq+TOAt\r\nXAyYW5jUfyrcaKQO4b4lEjnObzl1PV3XMQ63mgZJGYNe/z0GjN44hKy1QPVm\r\nN5dM664C1qWm+RiJmph77VSfJwkK2OlkHnDUh+OnCFxy1e3hymJCQfMANQQ+\r\n2fAa2+dic+Kc+X2u1rrrHADqyZ1ytQVlc2O69PbNTnUUMcAlnkbe0aZ2Qkib\r\nV6yQtrzPO2MYFbW/4l8VigH4HUo4iPpchkD/EDtretwE1PlZrD8eMm5RFSNb\r\n06+w5NIVtnnF9I6gGKChpZIqOhor1GvvU9lyiBS78reWuhp0ps88uF8qbaBR\r\nJ42NH7iyxFD0j0OEZumyOHBjtG6/6kC96d+xJtyZUOaCuBsaKaPZMVNBwLl6\r\ngbDj8QQOU0+oWc9s3v8ZVlaPl2z8JfJmaalCW1Xxq/z1aZXZG0HmcFQ7FHYk\r\ny+zxFJDhckTUnhSgCWeAIDCFzzpre5RJesBpBMiJwYLxGNSfQpouQJ/JD2zK\r\n9Qk4aIIQ8QMFwHbyqhwhvO2TFdyOBbke/7g=\r\n=Ma2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/density":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f0a0bbc75.0_1669971732260_0.16450736992271264","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/radio","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf29c012108e3bef97113ab98da35d2ff7830ef7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.dd99c8764.0.tgz","fileCount":41,"integrity":"sha512-3v6gMoIe1U2LUxOXh4Nwnwtk6ReaqxcYgEoBruCfEpPwNcPdShGHPdzruLVzatuIA4Hnr+WZDEikqXggJ7pvDA==","signatures":[{"sig":"MEYCIQDS1LNSeK0A7lISoG/CXXw8fX2RFWxPXJMsBmmHEETgTAIhAJMgMLl5DFEOY3oMztaRm1tzH0eGQxDGB/9g/dmhivd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigVGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcjw//TWaJ+FnsbKu866y4z9CYxh4Lz5jJC2PGLwrYtmd1+t+lGWag\r\nLUzqghcAdg/dvGpIuefyWQypnzEhdknWeboExRolTEW/LDuXCxYr5FTDGs3/\r\n9L7Fbfwt8Kep/ggMxrUKr1g+4y5VdS4RWPDnhtPybE9MzinE7cZD1r8WMaLP\r\npCc1Q0Z2fLqDGeDmLqKf6u/hLlZBfh3hoJTnIV4EmJPaDTTEdmc10nhVuDBL\r\nhfzg+wv/A/lKwrbIbcWotEJwcKtVp9CfXsiRUgScOqp18E9XljcCgmuXtCEh\r\ntSTYXVhbpvgGE+SLGcTiLWghjyW6h4pvKzWjL7nYIIVJLa0ApLFQfJsUCL1Z\r\nwETv4SqW13vjCUQMBZv25RlLiI+PL3xe6EYx3yiDGADrvIxqTDWUMq5pTBAG\r\nYUImepfb1F33j7/r/EsFiSEoNiQmCfBNXv87Dw/AkcoMI+k2o3EB+royAKh9\r\nd4F33v4Gnlvll29avkrSrfCRWai7S95MHdlS+ZB1lYCddRp3V7kG7Rm4VPoj\r\nOLT5AQGWXhjYhPPoXVMWGzWzYiE3G2sdJt24wB5c4hIAk2rnNCqJOqKezTye\r\nW2TdiTFBsc0I62g66p+VejHtRxazRBYa+ntcbn/JVcdeYNtq4wplOSpcWqQt\r\n+YcFdrpdXypr5+aCLXMHa2STy1uC2unDy78=\r\n=x1Vh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/density":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"15.0.0-canary.dd99c8764.0","@material/touch-target":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.dd99c8764.0_1669989701682_0.5823457512749608","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/radio","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a42cee78abe0b2bbd68c7f75f90fdd1180892d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fabdcca3a.0.tgz","fileCount":41,"integrity":"sha512-29UNPWq2IfL7+aecWiXLgyDnRQ6lBDt0XvLttiYHn2GvnuRqcGgBbwW9mAoCHy9J+T4gUehg+Xf5mXL4DxuPzA==","signatures":[{"sig":"MEUCICT/BLmT4AwjsUuzd9UJW5N/uFWQlk3HACnxwO/NUTStAiEAx9CmXBtvvAvBo06MuoKPEx9SjZIsDrFQveSnn/lYHT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihS1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTFg/+I+s5nzNi6McWW64EQRlKyrMi2MHqYDDy121iVMlWMmvrqwer\r\n26Em/cY9BsNj7z1jZsrNnPZdS2IgLLXBWkNZwhxQ//IiYwKgL2IBM85F3rEd\r\nC6dR4VeD2kVaazN+ptg2KUmWNdiG6Eaz6ErHNF6WhL1L9IZP69ANCOtqatRq\r\nWO6gUWrS9C0PZFHYWHL4rpwxVMK/jp3Hngq0K3D8w6wDT36ezKBAHq3l3PYx\r\n7CfFMV2HuzlnRRl1jy7nZ2PeLlBTOx7yga5MYJAwcoaF8wwZyikVEN/+17p2\r\nqrGbSTo8HMvWM1nx/jeNvSDxjMD+PKLYahHo8N+ydZJRaPUD/+/6xgnuwDxS\r\nLMp3IeA1HLrVGkS3zghMfpNjQ2IK8hAub47fJDW2rRAj+HnFpDOA9PxU4HzE\r\nUS1CAhyAsQEV1Ry2Plqk4ukmav1AAwyYkNhq0+8QQcybvrd/zy5G9fhVBz7a\r\ncMJR2I9z1FIEfpP9r9c5dpPHIR18DKVKGwiwpvduR09gPBUvIMwJkWrfk1Cy\r\ntcYPQuE5RJrqztm5rBgsTHuD81vrR1Eo560H9Q6LdTU+3HD0qKLaTXi7pNDv\r\npNMVapVkI8jq5rGg84ydrLBnMXMkjMcN5L2VvWvHyr7GbC8IqCxvdm4X/Au1\r\nhSngH1/yvrqeT8OSdMLPKLAu03S174v7lkQ=\r\n=4kiZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/density":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fabdcca3a.0_1669993653264_0.23621035247542044","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/radio","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0876cdcb5db987b072c5ed3f97b5d5b32a30539","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2d26722d2.0.tgz","fileCount":41,"integrity":"sha512-HrbloKtBwjHRsEtknW06blnQ0SWu/ihiOZgsB6Fv2qA/WnN7wsZW2xZepDXuaiHWrN1cZ6bOBTTfdS7zTadvvQ==","signatures":[{"sig":"MEUCIQCqqV5J9Gh4fYOulGYN3nteSHGTHQeV39GyatQrS+JfwQIgUyzYmks4wcpKsB7hst4YGoK9tMBFLTJ/CAipE7hvHCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7iA//ecB0s9R/dEZ6wGb5Ew3jbDspjp0cpmxT+4SlBPFtnlHJvFy7\r\nXTtWTx5JBcZ4nd9QIKpMAVklj7oM/ffaX/DUb2OPEQQBp32B2lQOe7h1xS3a\r\n+zB7rgimSlAg+dB5E6U9rIDytr9F3lGUTSS0yvRgwBAq7zpGauOj3f/URfYB\r\n1qNUQiiMJHvAeA9eejUI/YhF0+l3xR7rBl+cgoip0UGE6f3tg5nv1qraBlUg\r\nz9Ujpqd8/1riE1MoW4hvBtDRbyAU1eXTKcCqRumIKJmkMh1Qi4+5lATRhyOA\r\nb+9XXLDIqW4FMrFe2JPSGQIyAbpjwVqOhQ6e6mGw6z9d3c66PRjhHJNB3yDd\r\nR88vLkqrja0WQyghecn9LICRuvWue4BziKGigz8edSwD5BF4gVqyWzelIJRa\r\nsdW8mspqv63A+EGk6mQxo7ddm2enbNJI6ypQ0UiYBfghdGCbIg1H5ZsqwuFZ\r\nSETwqnHIeltOSJ/ePm2Sut6GbjcSkdSj05OPPeUbYupvVj0Wtd1lNCuwaYDI\r\nHveNTaASh4KYpcqU/p/nxB9XQUaG3Xj0kH4neD/h10bmxHTlOzkN7ACDzVQz\r\nHlI20ZSK9ZW+9w4Vlc9NfIiJ7QMOPIis+wKp6Zdzjvwq8NZRo/9PMNF0PQxD\r\nwcEfDE5U8JUYvIOCn7wxgsum5E/fACW5Qdw=\r\n=uTbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/density":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"15.0.0-canary.2d26722d2.0","@material/touch-target":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2d26722d2.0_1669998437742_0.21367715500296125","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/radio","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55423ba3f7c85a13c2540702a41c9ac395833ebb","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":41,"integrity":"sha512-vgrGZfhNpvwa1llvnLzmfeJ/H1OE0oeaYpDse+q8zfB6pBqQb0OfUZPi37wb1tgYmn2iTIDpwMup7fQzmZXoaw==","signatures":[{"sig":"MEQCIEkH3bOfhAMizqczQtgoZgm19ahclRZGgKSF1nXaaTN2AiBHjIOUglXfyg8jwUy2UH/l+bBcRMpWtDX1f8byfEhmaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijk7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjHw/9Ed3O/g0MReqbvBB/1nIRPd8tKyvdZu4KaumSBfZ5PwwWtVmw\r\n9SCW3ozT1TCRVXk90YK2sJWjwDD1Ivj2Ykuwbc7tQ5A/rQFKO9WSJmxZqWPe\r\nZk9bKrFRF4Nxz2hoOXubTFMg24rSf9xZ+ido+6xAMDdJpmj+Z9Dt3HWp7f6W\r\nwz1RUUuzsCy6bFkH6/asmzl5w/AyfRpVXbbwfLturHujPbMDhoSH0U50KgmM\r\nDe4HEANqDR08YhBz1Ytt/WCgecTHYozjUz7w6GA99AJke6CWnLC2TPU5m6sk\r\n5Gb0O6rDYXv3y/cMtaa+TtIdDnppI00RW+UvwXAMMhKvT3H0jVJ3cH6J2tm3\r\nN7y0DIMLtF+UFhjsQ4GdC/aQROgsKGFIJEMtK9cvqu6VbCKMw3Y+vvczwOdp\r\n9AZADRlu9IrK6uQMI3JbY1zCV7Nuumyufkr063t1QLzHfjKIgZ78RdKRAxZv\r\nfmqSr9amGZ9Tv30Bdu9fQ32jfWlIWe/LFWueB1qTubpFbhWU6s1ZQxkNnvQB\r\nzD+PTu05YFaadZdxAm1eyU5HBJJW84WdLnwKPDhpLdqtxzeOTa3CD3UhB0bs\r\nro69yateKx2Vw63rNQCsz/zHKfbi7+7z0FiAG5L3LWRfFVFiBxM3LJyTIp/j\r\nkvHJid3Zm2kKZcNvJxV3G//YnSOacnZ0Sq8=\r\n=QlyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/density":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.eaa0c3a86.0_1670003003006_0.8341756526695778","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/radio","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f7221758ad69b10997605830ed317441224e97","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.79a613bbd.0.tgz","fileCount":41,"integrity":"sha512-h5hNhG7W2jrAIocqcOiPEGxF6i8Nk972p/ko+24JI6qOHI2Pfg1p8d5VD4Na7PJPweLi8wKhzEyzjInB5u+A1A==","signatures":[{"sig":"MEUCIC6o4qfT37W4TCHVvmJr4Z+gADuQzbQFyeGq5B9GsQBDAiEA0EINpH7gi0ah9S6HtuPUZF3kT3KSIBFsBtKznF2WeaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1D7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozaQ/+NhwPKs6lUDzsQhS1KyaumAfRKm0Ul6Dzq8RWlyJcudMUP6WL\r\nF2R55bNuhk9ccAgKjgofZ5fR68gw63o9b3qPtIuG1HY8WlX2mrS3vCZx/EXC\r\n1bKRKzX6nYEIBnAKeI0L2CZdFLpdX3ONRIO/z44Wh3VBDqu2Gwj4l3/ZMESk\r\nF4OVXT4UP0X4NYhfaowgy01bUiToNVu12Memqtgrv69gdlZ7i/LsMd2/crL+\r\nY113qXz5eaKSbRnqMVuqoWo0KyRuuW0lPPp19Hp/rPBJRwDkfi9SdEFhPS4R\r\nMuJLVuGHaaKCbE3z9oEssty+YgQELdTyLZWnzmMIheqpRv1+8X5XW8yOQ6r8\r\nl0KVJlmuiLbNoNyMjj5+WmzEBVkJYoCxZjXzUAH26Lp3/9+rx4i3kUWlNK8V\r\n8mC21n5pKziuOeyCMNaVLr9QgmV1bDW94oPp9tNRhNJPM2INTl0ewjP0QTwY\r\n+7gkV7rwDrS9E2qwyjaJ4NzjuhEKXOsAZEkmLYqiIphc/VCFFJh6HJyfAjkt\r\nIb6S1YZiTYHNKUe6iq9x+fwTQ5tjxQLxb1yY0hiMyPZT723cvOeCEa6lTL97\r\nTsgau1OEpSo/H9YgGgJZ7yq2/xH2psqJ9LMAk+QTlDLO79EAzfUWfU1giW3K\r\n1Fzc9PIT5ubFZcvff/xEIgaixmU7CsNm7WM=\r\n=fA8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/density":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"15.0.0-canary.79a613bbd.0","@material/touch-target":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.79a613bbd.0_1670336763498_0.3954148099760211","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/radio","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07f3c531bdde2282c61a8965a0402c47ad2efa63","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c871fe61e.0.tgz","fileCount":41,"integrity":"sha512-XpbIzNVKe2AqlqPtyEEZtljp0S+vnEKj3vHlrD5M0iLecvgPwurPoxyV6OFq/fTri6my0gL4+nKtPFcxIav7Qg==","signatures":[{"sig":"MEYCIQDT6WiT51QdEo/kV20zK2C5nSuvJpiRhtf3kzXa0CwTRwIhAOWGfRp4UDpsPVCSAqkifmSpqQjVWh7Wa+dj3VeK8xoF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryXg//fU1oaiYIPRockTqWkimDbgvMLdMQ4Rqu5Vppa+K6vjexDQRm\r\n1Ke/4AvSY0scXyMFnSajR8Z5sXSbi0j6qxaeZUFFenVT1iNrw7aG2MpQRLN+\r\nsu4FOlRTiYnDcsD4fWPyHpq2MPko2Zq5qYSlQQIJC3ntcJzUVTYQe7bzl3ei\r\nRZw2c7wYINLTcFm+sQKnc5gW1KCnHHAy/5veZyhIWWLK0np4bHf1V5MJ3OYq\r\n8qfh7wOnC2rxiYnjOi6q6GstQ9tgtRD1/IBqtkHth0zb0B80ep07HhThTTtT\r\n9nZhEJYKRpPFD0ZdmAUfoXl3x/H/xfpadV6gEIOu+P520wdkqyCjBPgfbASq\r\nYR3+b+Xy1rhZ2Hk6AQZgx4fQsLZYy7h2xBPmIM4BZNQJXQmydXDcRafY5VWl\r\nODAFxCDiB+y6hf9bhqGfpD4IQiYGHTRu5sR6iF8HuiA+5UPElO8OxJ+zu5Y/\r\n8RQ2TDMFB2Wb00B7e4I1ZamfyPwMRZCZS2lo6u754wHZkJCvePSzUu9YhTRu\r\nlVYTzmwxLmLJYmxqurjt3yZsRmtpI595zEGgNoyRDD4LQa5VUdysJIRqgRnG\r\nYNfjXWeltTIhleEv28b0xp2TnGrUNMNnuW+/sBjWq6MPGaIb/cgyHJAgeg4+\r\nqxUwE2742lO24TdN5rk0wNfRYZ6cgrlkvBI=\r\n=Jt9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/density":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"15.0.0-canary.c871fe61e.0","@material/touch-target":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c871fe61e.0_1670399554219_0.1337007436172728","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/radio","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c07967a31655318dcd111ad2bb46171182a9ee9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9eaee7936.0.tgz","fileCount":41,"integrity":"sha512-GHo0bCjYk7SWASNR9QVj6SGcUCJ8+ihQmMVDjzQUp3df2VRPpX7Jp0faISHbCdtAZAsFo6gAQkQ3julq1ijLnw==","signatures":[{"sig":"MEUCIQCwzoBRGXpNS1p5Y+mGduKJlQvMxcI4r/8EqmgLwvWjFgIgRZajCbqSLKZL4C3Y6GYwT93A/5JejLlYk1ayDIZ6BsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/ig/+Io3fmRcZCbpcmTbw0pPwXQksHpuK4+uVaEilyJ1VPIz53zrI\r\nazBqmTcbcwUfgtoL4oyKkwKmaxJ8/3Sjoiu6V0b4dh6CO4rTdLdxl1hQkV13\r\nMpModPMqWI3qNQbZvPVwwXBNIBa9YjwDkdYTiTB99+n7gv/EHtThIJypSYiP\r\nDV3chzs8Di1Cc28kz68c6Ab9ov5pBlwqlB4erbMFNia70ThT1Mr9XxlAwQxN\r\nNjlVjuA+UCYIri7rLH+6k+uuGagkmwVgk0pqSbtALMKbTxhn5bbE4Q37jWLq\r\nSP6emtsGnHmqeQcSEOi2rKSpnikLzvdyzr1cl4XFVPJ0F7sH73pY2SS95+W9\r\npu07o3n33ow3p67o9W6rbYPIHgItjLLr6Gop6D2bZIfx1JOh0vmzTEgZ6hzz\r\n6i154rnYSzydkGEMwhlReHL0NOWVmn8dPrvlPfewcEINyM0oHcROBek4QYOh\r\nZWCKuMFreNAFGiumhi5L3iiNkBgeGso4Lkqz7FuOftmmtOKX1ytLzDMSuYsg\r\nKKLE2UcRDK3FfFOGIAg0C+GwgkDbeVxbkBByQAJqiI/zzzdRBQ+jZ9TY4iU0\r\npQM9LGrdAih5U/o9NHP16bVxzD0s0cPmPRq6sffzf/k+REvsEIeu/WyooWtc\r\nnuahpKWZ6EE8VB8Q3zUhZ91ugxomh+msq6Y=\r\n=22IW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/density":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"15.0.0-canary.9eaee7936.0","@material/touch-target":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9eaee7936.0_1670443421007_0.4834497941611804","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/radio","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8303f7f7335afe83ea115ff36f172c7a32551bc6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1d37bf601.0.tgz","fileCount":41,"integrity":"sha512-voFF34AfeJOTauth3AMEG5A7hVNfMqIzvOEcgP+Wz5k6CTCbL5/TFG4RU28apKq8jNUOwOmLSp+fhojG3omGwA==","signatures":[{"sig":"MEQCIE6KQCf2d3BFhw+72rfb/uWmOMpqgTcfxI/NNLdWnF8bAiAzn+qOOTPvIaJftCVf8WI0ahUFJSPAKdYGC3MkpiRitw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjyA/+Lc0/q9Pk1olSgyVNvCTtx+HBpF/zzwCMn1gGyWBtFjs4UWSx\r\nsTZI4X+9qoMGTKTjNmhw31M9y4tkvSl7o+LAAmhG47TcKGzVU7AARunE0uGh\r\n38GNBLb7Zc9p8Ol8F0SqaLNkXfdF6+N+DMXMie7YdxJV8Z7H/SPLAh2H8TUH\r\n1pooimSRt/vx+r6wh1fI2HVkTP7xmY9L5BN6HEB+pmTsp3ECP/da98eHdkPC\r\nZpEJ6ci/IclhaoOjxkgCQM3YHjdRRD25o73PbJhTwOluG09MIABnV0c+TVc6\r\nz3b8Wsmsvb0kutwceeAjQR9NKj++C597ftv7SJ0ju8m7v8fM5zw066CIVMke\r\nJADQngSk7ginjddFkxYA2LUeS99I9iChrOvk5odb8JnNHsQ43L/mY9vqT/BF\r\nIUXy1tvyqLE5KIIC5ViwOULj1EjEhPbObIfSFMMTuViKhAkZiE+1IvgKfeEn\r\nuPu+SKW3sWyMxdzE8X5H8+DwW+1HMlzhUjmdn/NPBVBDCc79EgxPCQ1W4uop\r\n8zWHee56q5RvND7LO8CLDjqjz26LznL3q/fz5KiQtrpsbCe2Dc3P67VUJwpC\r\nXOqMWvXv45uJlwGAvJCxVyQe+b2epirdA4mhLfAxWTFRA76w8n40Y4mxsa81\r\nK48DuBsBPgmahTc+k1OA3UwX99/I3YiBvzc=\r\n=mOWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/density":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"15.0.0-canary.1d37bf601.0","@material/touch-target":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1d37bf601.0_1670445720890_0.33416503316263646","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/radio","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d7852b3d907e38ad2b5514ab442f439eb1314ed","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a5fe069d5.0.tgz","fileCount":41,"integrity":"sha512-EMHBBDZD07FYLRvqaXzcXNrxx9BGtMn0dyw8G370x5j4Sn8oYBmAq+4fNJ4hGt8i3SX83hC3zkL/ZiZyXg4wYQ==","signatures":[{"sig":"MEYCIQCtXd1lcFxJV52XbfF64YM2F9rXsw5GKMXb2HbzNCj5lAIhAJ3eOiHHOFYy/vEL0quuWBprJZMeXJvzghyp8Ag0SjwF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4I0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUlA//afgYGlnUiJs5eN1XBd/+Kamhwmgu5gV/BoEpUlAYfkU7dDe6\r\nZ3wjF/NCNfVVvDJYGmY74NirMfMCiTYVPfXeQrHK+nua6oTIZ3xOP0F3LROI\r\nQIasPKyjYE0Cun7b9+FF7JHrpJpvFRxXwVvYkVcX4BQpzI1rrvK9W8PjUJBm\r\nOxDep1ghUECsb7Tg4N6GuDR6z+A6/MQM34iPAAhruqxhnkl7n9OmhRQ4pwZ/\r\n01FkDG2WHa6AAjxJrI/sa96JSiax4yD1bCQGHSGN/W2Lbq1lk55kR5EaT+X8\r\npBNeAK/vSvlt1PCbLfN6LjObfxfrVZExuEZyukVjLeaB8zJFeGe32cLYezJ4\r\nbrGAtZfLTOvlPkUAHxuoSk5RezZhXuZ9EC1fqKV3ClxlVVWtv7WcNGxcFkP4\r\nhdUblnC9zecluRCJNhdWnXa4VQ14mWKiLK4RDcOXjw77NJcX9CI3TQuQE5/E\r\n1y6sBSWbMWE5HSQzAAyRewzf2uflFXb5edylv+HJlOARMzWm1PBIVWqH2DgN\r\ngcLbmpDSJJlac+wyAgHKr543Ygo7jj4a4yPkAWNnPp0k7kgEkHkamlH1A+ww\r\nCkMSbUzx+2vplcE5Ud6d0PLNsBYsd2clbylkwIDfaR85dQpDpH7FP8iqxlB4\r\nnDRDLcHPX3AmFCfZbIlFy+mcti/giC94cME=\r\n=lDgF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/density":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a5fe069d5.0_1670611507767_0.4803113733524429","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/radio","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90a29b217e82bc0d9cb8d104037a8f90f2f9158a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ce8b5326f.0.tgz","fileCount":41,"integrity":"sha512-Vjtwav1MEn+nvQAoB5jyISwacBTGzhmjI4/ghVo3RHbF27s3Jz7m3Dw0gBzsNkwdoZeUGmfDvSIHZ30DSYOwLg==","signatures":[{"sig":"MEYCIQCBSubYXaTbeyfE/dSPKu0bDW2aqNx2yVo7qLO/54cz8gIhAJ8+gZbGoTUpeL1odOk+zRdv1bq2ievcvfvfjmfVcutn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNoBAAmFCmBhxfeQZvLRPMgJjYNfirRydxRrTc4RRXelvAijnPKb4s\r\n2UN2RpDQFEPsuLdgQAa+WoVIHN6Nv0lNotqhhw/J1/Hyk16U7jK3IMOkUBpw\r\ngzs7lc05i0xpsV5bzeZdLsNRCOk1NIV7T6c9kNMZK98rIgbl/d5qv+b7fbmu\r\narb6FcyR2v5draV2mtNHqsE5iRUoMiZ86c0RFqoNZjZCUEiBR1EE7K3weHWq\r\n/abnNNFtg6Sx/H21TEgJ5/k67kzV/c4DhrJPbatma1mMfITcl/d14KbgPLHW\r\nF3iwuxP32+5BmzwAE+4+tzuWTqv7b7nVNRwJ7W8x17iEEeh2BvVG1HibgUS3\r\nxyYv+0aesMQRGu2/0d6IPq7UKFwxr/3wK99WHaTibw8r8Zq6yvnA+mPLPEAz\r\n0c2H7k3p12JkfEK4F92JWdVpOXDfHcAj2ycc1EplgvLLenO8PPvimwL6xiAA\r\nq1ol56mpswEEXkOQreMImt7tSB9JGBMfiObeU9d/iplvyPIWeVvMw19UUthy\r\nWFCzUB2uQj5HlhqTJa9kdSW1O9/kovBbNwKBJgp5tU/i4KvYGFZ7vgKIbZVM\r\nAGHK7dDDVEfb1dDm1fqvnZNxBVPI3hIlMBzKwZFg595OXNgvzC4qX+h0dmPf\r\nsQVFIJJbx7NZFWDCw2a67Va8IC3iFR1l9bM=\r\n=LqGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/density":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ce8b5326f.0_1670628692465_0.7365903766176267","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/radio","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbb23bc47a06e32aaee824faa771461826628709","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.43f5323bc.0.tgz","fileCount":41,"integrity":"sha512-eTvoe2m1lsARMt7mTQCX4v0+1F6Qu6sYSbLdR/YtjtdePaxyFCBqc/L1DS3yhkKzZ7myvOOvrWZPYv0Q8xwoLA==","signatures":[{"sig":"MEQCICipipjBBG1il+8iVo7pqOCx3yTVDcQvl5gxv4YbWPUVAiBH52hz6U4yQlx9rkx9tuOZnOhP/OvOuJArTRbsfQCqoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1ryACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZqQ//SSRfjBC7k8YyHS0+KCXVEpgIoyUjTWSl4xMEiy5pNsTKQn8e\r\npNEMjn0s4Yf/WVnYohPopnNL7u0Lq+VnO0/H/Qay3KTrvsruXw7J95A4k+g2\r\nbJDdal6U2P+k9jdOSCwqoAeh04+kbKQ2gWbNJHMEhvw7OpCGyvXyG0bgyAD4\r\nMCwftUOPNF8B1DKO5zijRL521HAzE1UTtTVOGC8PZVkuMDoASipt/ZkePsCX\r\nyFcAYUk2I89JWWprQTEl5nmwuAXmAEaJC5OPsQsGljxQoD9xOe/Z0nqxj3TQ\r\ngmnNV4+1PxkWUH70pIhRewaZzqthEYSVQ/uaUPf0S4aXclXE3Pq9GUz9DvRX\r\nJto9kquM1Tma5SWlhNpJDdjj18PnYEBJXFb0Lwc6ZmV4YmrhTLnB2FKWmils\r\naQE3oFTEeO3c3kL+UEmc/kKgWVGUVicp8YINkHwtQxGstSKbFMLz0d9a7yR4\r\nGrRdtz8hkyu834oeHvBMaEf88Qh3o8to7TIKzjdlzZ6+e0+vyZEyW8a6Ijtt\r\nYi0z1XDT8MjtOJUCpo7Jo0Fuf2Ux9h2iHTHNcFGkIh5okWiQW7XHLUgA9KQV\r\nqJR2aioywz9bkiHXoclro4CAAEICi+M1Sr4xZIVr/ZGaB0ILFsMqu7HsPYRJ\r\nFTJYNd1E6LA0T2IJRkX6O4CaPYIJuhnEM20=\r\n=8OBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/density":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"15.0.0-canary.43f5323bc.0","@material/touch-target":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.43f5323bc.0_1670863602140_0.39179461478710254","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/radio","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90f146149d8636c5375df3c40af786f1400f9ade","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5490e32e7.0.tgz","fileCount":41,"integrity":"sha512-pU8tFortYn6q6p9m8dzhJy51MqYkP3HJ3vo2xnFHR0KKcygdOmOs5EDmuYgxFMX1xw/P0aIpqiHf2w4LttwQXg==","signatures":[{"sig":"MEQCIFb6hUUwmNkFbGhj73eHwX1N8N8Blqu9G+NnZSANscGPAiAGW1174skH+CZceIJaOPVNbNcQAVvcTlBW2lVWBShBzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl17AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraHA/+M728hj/wmE80o6aXpZ7/85VINIq9OwUeQQEX7Rvs8/N3g/jo\r\nbTDAb5tySFUX0UosmGG/TsETljP0Q0LMViuW0BEzp4MSFTOMehBgPRIJvzX1\r\nsz1aCxEpoyCMmCE+55pMmkdxw+L40Iwq3sm7i/JCh8m4aakaM/syqK1UBuhy\r\nGVaRr+VD8yzYCzEmEW23Sf1fzWzewQe+2KPTmaLd+cmLvhHhYSN2JAxlc7Cg\r\npGR/jvUlH8aptHI4glQiNwxsu2G3YRWz0DwrdGjkQoMkF0oyN1lZ40ST6pkC\r\nMFc3heneDfgtXxTEOUU2PgN5t5iNIQtiTcoOAvmlYL5IUc6wnRaPmqKmwTuk\r\nrg3HNqIk2+yi+52r0QbSp1D7SbO+vxwoHM8XZRE9s0pb97S5TMLZ2rHiaCev\r\nDB5NCrDqCiOL7ejeDyg074tEtxyK5oPIkeiS7SgLP1WTAmOJ/Ou3YIWpGC8l\r\nqK2zYybf/AX7YHB55ZlQDg9N+HeOqFLrYBIKZkNxDCbsd92tmTBtYX1q8Kxj\r\nRrbhyStQoZDSiBB3Hll6M77JTsBy1dgsqN50sEvCE9nzVAJ5D0lxF1x7MgdU\r\nsvi3rnwXUldgHL6PIF2nLhjDswcA2BuMyi9zkMqA0ABhBky6GdrunGkKhSY/\r\nOwioqkOBnOQyvciFZZY6kyWXycTG+BJ5oH4=\r\n=3nMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/density":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"15.0.0-canary.5490e32e7.0","@material/touch-target":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5490e32e7.0_1670864576740_0.28329058007879193","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/radio","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cba24efbf9dc2f7adeda63d2d8a33c6f629e92b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.817002c29.0.tgz","fileCount":41,"integrity":"sha512-ns4B4egqZodbuneEfXD7fBl3nfu2MG+BeqXWqF5NKSoFoBzPFltP9/KAznvO7ODMMd0tOlDZ78piMClpCZJUcQ==","signatures":[{"sig":"MEUCIQCffaboS1iEB0JZ3X6V3WvsbtiB/IbIP4xrPJDGBCyKwQIgIWCOIXqG3nbfJkPstrxD17ieZqm/pXLQxcxtHfMQsgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSAQ//QDj6maFVrHTjlx8INgOW+ArQINrHjxCFRiI+YsITSUqSvzyz\r\npCpqu0+fS+xDTEu6dDVByTnTIlED4WM9UveW7jVy2cgjpGKQJ61w15H8R3ob\r\nmQRMFE5CKWjKwADM+VwFpzioHrrGMqGKsaNPCXyq3frSOobK+Pj0tVVA4YmJ\r\n3SY7URy1VWFbpgrAWsrjclePNmGpkwqGFnzpythTOArVZ/Pvx90xk09/ee4i\r\n1+oFcKFFlyeEBKTrHJ89jFnY5b2PgOe7DGMNHc5p84kMbEbmhZp8AMMYL5sK\r\nwTwpxRJzPCtIDOHmI3bCBPWbjIRAiE5PG29rRYAgHtUB4oiXd5GX25huCbM9\r\n4ZujDSvUIKFt41x658vW6kkcY0hVtdaDZYsOuZ5fsO1vrY4nKuPis3UV3j7H\r\nmxOX0orK58lj4Hc65EyhOQkK0u+A49HAwdONpPPROWnGFSmEZIcnvcK0BLKA\r\nQqCgr3gbgM1Jj8f5QJpb6zKxAW22YG837lm0BAD57rckJRYZoxAvl7zTIz+K\r\n/uOTFXJo1fpM+8Oe9R78Rj0L8j6mlj6eDbp2N4eBITzVES3rK9nluQTpAv0n\r\n8FsXrwXxfpRz5xefknmXkAfmudyMreEZMIoQJvfpm9C+/68HQBdGbVk97xVw\r\n6yYoVl9qJJ3psMAxfNiUYnsFvrm+8i2cu/o=\r\n=yL0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/density":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/focus-ring":"15.0.0-canary.817002c29.0","@material/touch-target":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.817002c29.0_1670968488561_0.1251283971923156","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/radio","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9c79f9d0ad22139e099ed498810461932550f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.313a1326a.0.tgz","fileCount":41,"integrity":"sha512-hkVwFpJdLNHJJQopL0pMC6qWS5BCvjNLQUBvKFq7CGFmzS1x0OMmxsMDxsJSd/ER/xXfli7/MnwBzIWClXBN9w==","signatures":[{"sig":"MEUCIQDQk5+pQ2we2891WkdUfdamX2+03Ing7mxSmRjrLN9UVgIgWaBAw5GVd9JxWoncVN2TLBcUIh8arS3sUo668iNvitk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7LxAAidXg4/qh+qJMjljvR3/HB34w8Uczm0Pl2fShRHGDhYvBBTHJ\r\nHHTn/qUVnRaAW8T4XEhOOuwf7HPDaxsxKfKRVSIK8h6q64JPdUJBUjXiaSMK\r\nffnQ3kTDULgkPoK2YVbgFzXGBOCD2SUXEo2iXXZ8dQxgrKkSOcdLGzK05BtA\r\nFkk8bHMIihuAyKFVok0xpEUO5Biov6wpzlhU0FedNP3oUMzyh3xBjRwxhSDX\r\nBbHBgDM0f4260jBBQWjcIiSwVjgyU+1nrzx7Vg5SDh/3K9wF5/Xvk9X3C5qz\r\n5le9dPCw9RWfCel8/y03+QRrQq6kgwVp0gnr+mmIF4B+3qnZS366KKf7cZMX\r\n/bRe7skmMr6OYnQBFTeiq2QY+tWD7uGxgRv/S71hO+aHzniHgZsh1eMuDFVP\r\nI1ptFOJV0u2QowPBG8kgXXyzTPUIp5BI2YzAlzT5jJIhLhTVPF93eApa97NN\r\n6isw8APcKf938OXHzSmhyNPtt0nrNaJvi7wwDxbOZRiEUJpzrQGH5X7KMoSN\r\n072XpKm3QCHgsxtero7BLXmp8cPsRMtflOAAUMF6JU94MGTP/5TMU9LwWZ0J\r\ndIuyomiZi9BGTJqFgw5JtN/XMCegQ3KrWpI/1jAm4gA847Y6I0NOcBgEgI+u\r\nSPvn0M1EH9+ziYrbEmHK00Yu18InIX8i5b4=\r\n=AYci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/density":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"15.0.0-canary.313a1326a.0","@material/touch-target":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.313a1326a.0_1671013775884_0.9468032049221695","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/radio","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4634362ee0957d1a9c92e5100463c7b628dab7d0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a69c14e10.0.tgz","fileCount":41,"integrity":"sha512-7b5+OigBjqpSJl6LHSNmoyXw3bFxfBiHAf/LEJPd8Rl7sLhi+lhX+gTJGN8X5bmvBpEeiefX1Qa+MztYncdcEg==","signatures":[{"sig":"MEYCIQC4c600D3G34ak49IlISweci/x8YhPsZPEqEJVznXEs4wIhALY3bfvEE3TDxknLWqW7qOqipRgcn4RZZHKlQSQCXD3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvMw/+PU+dwAn1g2Kh59As3crA8KavFWTT5OzznZgEwkTOCBaHwrYv\r\n3muNtLDBg8/TfaBaif0cmed21GOdnSVv3pxerK4pbHDX82tjk+KwNkrc7gdv\r\n39amh7RuHC8RU6uLmTT0PrGGQ1diIclxHJafCNTrxJATxHw9eJ1Q8sD9h4Ue\r\nEMFUTQ+xtf+4AQBv0WHfXStZ66Sf9D65NcXETSz7+sh+QXX7YtO7KFlEnxyC\r\nuJbzwmackNXwMkGUhtYWzRC7c9VBCrL5Z16Nlhz8exucigzZ+jwf5KtUBAXw\r\nnefwutKcPtzFNBRjPYl8X0l5yVZkxr1N2/yDFv5pDaHSOVavZkxRDpWlbfqB\r\nyZj5jJB1oveD66vdr+8baCVdWxn/i1dWXJVs2dKMSCnYGEjXGZEISwQgmHDj\r\nzJYhZUzLjlrcxeW9+28uAT99jV8OSDawNedSZPMElNkB9SXctjlv3Nb8lFF4\r\n806LEUSktaQ9intsvvJSkEWD9Gx9hbVDV6QxZWfHfMU9QzJU2yQuGh96mWfD\r\nHtrqqiz88YkO55fudtMCLLdfbDdxRWeNMnjmQiaqgDdBOHGyhcnuq+FmlekB\r\nQ1Jrnl4wdMOmvlxWFBBRxLSFSCR4uOkGOKK2IwYRlGsDwzt8s9l5wJVHJ6pl\r\n5UVIuThrVMRq1ojmoLLccZ8Tu9SaEDClIqA=\r\n=zzCb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/density":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"15.0.0-canary.a69c14e10.0","@material/touch-target":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a69c14e10.0_1671016767550_0.10914634149370483","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/radio","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc1a448d04327f33e1c78bac5df59ef546fe24f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":41,"integrity":"sha512-enck68JOJEUWnHN5nGUv/615X312m6wPjV6D1aETZoKCtvkoH9WoHHhdzQOF01/XbxHmHGv6zUVKvXVBVT8UTA==","signatures":[{"sig":"MEUCICvJNxhAZ2s0Upw5JjGrdgFAT8bmYOzwa0h0jR+bX6GdAiEAwSSSaqYWuz4DN+skjrVCIrTYT0GUq3pRaYfuHnv5Kz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqyqg/9HRnJftuTO8zZV5+9ZhKTnfaGxg0eltN6QzhQzng4aj6GO6pL\r\nSD5Fe0dClRoG+ZgF9GG5vROlaFEPtbzPl16MMSnvrARNTfqdmYVzQ6lmA1Nw\r\n7JJVH90elE9tF8ufjUQDjt/ulgaJhdLLRvYfeOnUpj0WBA7ZWImx/dtNvdDl\r\nKkl887zEI87O0/EDM7Og/Tk6Ap1hyPi0Y/KkMGIWt6+/2dzBsFAFyYmvnj5+\r\noSYYakX/sygGpgsySJc6MYk+wXpa3jn7/I8WyIabz4GSmrBdelJ5YNJJXh5f\r\nNvJouGw99e9NOtODN+G505H2UPhkLDPf/fQ4IJJAuAdenA5jF/s4yQc+EaEK\r\nZVKIWWbbi+mfalDK0wYTgz/s1C/fXMdkLH57dE68/7WaY97Wt8i9j7X6FRts\r\n98yTBjsKhRXJKExBkXKCrXbrEiFRKm0XPGTQU0FFqeOW2EqOKeOGIge6qOJG\r\nXkLOqRCKFEiozGR0GZR1vtHtYeOnyCJHeQ1IlFdxYcqo6OYmJ2ErjsTv7Ei5\r\niW25CVJ8cCPYCHFLAw2CcAANtGrxoiIQGGuES99LHI94NbgEjIezV9Y9IHts\r\nY8MGnNyv70O5lE0GhR4PjsDb4qL6WnU77zhFjILIOgt9NUdfQofLrx+skcnb\r\n6xmHqgw/3mzWLeBgBzVYzFz077/sVu3TVw4=\r\n=eHMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/density":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f43e0ceb5.0_1671036336490_0.9543498016331649","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/radio","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c97e6c8065d6253b66d01c38994158f62f75c19","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.34767110.0.tgz","fileCount":41,"integrity":"sha512-omGV3nWOM5Sh/Fm/xgBY4nH30aKbTVywx0IFRsapq0CJvLhGjMDCcjiNupAR6GhVu4e8duMsbuQE8SUDNmvNOw==","signatures":[{"sig":"MEYCIQC27Zi1ePDcLiEHV5zJNlIavRK2DvZXrAbHBdfOnRUIAQIhAKIDN4hUQFRE2RyiOCPklaOl6hsMOzmllFyoCE5TENOc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgYrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUyw//Qs7ceYg1EQ0XUjEJa5Mha77S87F+sEw+Ig3dHotMGAeldSqu\r\nEoNqIjUPviseuwMR0IBjVLCeGTnHeq2OwwUNN1hlBWQxorXfioGAEivEsJkY\r\ncsAKtFoXKcUNGFWB/aOaN67pW1iLS3dhirszd2GQl43oNZupPo6qq8AZGA9a\r\nGGLfxaX8wLxdwNNuKEOcM0yT6WcUoZbOJaoIfgNMamIl/k5NtSmRZ0qiuUOj\r\nEU0muVah4p9IAsofQVOd9A/JBQw8kn7x+v63MMP8ztIyapvMz/AXPKY4wbfr\r\n+xbCLUEwCevVUedu+5XBxkUSpJwbDW6pZ/Pkq+R4AT4k6MPTIyzTOJojctCt\r\nSN/LiapggLB/ggFq45Wvjoo5QlPLpzkh2hLlgCIj6USjvlkgUaEenArEatBB\r\nUoBFybpJ8MX5My03dPAt1KkEYkMxsRNcZBtR7y6bF3ImV+i644zBs18IrVmj\r\n/U/ry+b3FvBzAvFh5rlQeLkUhTzmo8NvJteN2nLVC72cmeM9362zho+vPzjB\r\ncm6x/qZ3I2KAu5tnbDURSwfhI02uN+g+lPcmVW+MKmwSxpWhSC/KfU9lb4Pi\r\nA2PLsdZMGP5AlnczAoj79ZYT7CzHUTbqkzYBKaQSlV9KDLXCq41aUGzqD8YG\r\npNQh51ThZx0gJTXt0vVJQHIPoy1q1smVd+0=\r\n=QB1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/density":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/focus-ring":"15.0.0-canary.034767110.0","@material/touch-target":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.34767110.0_1671038507068_0.3926343062317872","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/radio","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71fb1e8707a21b2c22fa9fa255d8f28276ef2f12","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1f99f3c50.0.tgz","fileCount":41,"integrity":"sha512-GjSwPUbYS1RvWYq3eq7aiu2AFecd7YYhv4uPGnC/LobBuyC8WzoWa+8XBJR63BwK9KU1i1uAQKlwzmZskz3nvg==","signatures":[{"sig":"MEQCIEoJtmyj8/l+4wnZ1F6gNlHMMiamna4ksoSqAj9hMxGkAiBMhOF/CpcyiqGJq8AlxAhA+RUJrBJFtjCsRmM+imwRkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjpRAAnexAeT39L5qUVni3k1InvMk4nkCb/PagwlUOuN8wMvr8TJA7\r\nkvc1ymbvEcgfnxITTKAYKIPTc20Va9mX/pVvyiVDf1bmzmIje4wjd69Xp18l\r\nRC2/6zxDTpboXgOI6Yn5pS59nBpP5ZcZpjKA11D2tuJiS0Lkb5VU46tR9RCS\r\n4/aksvn7eLmcXSnyrYkeD1bsh9vfx+4bDcZamD7q8ggrZdJ6X6jwRxfhhCQ7\r\n3PjBBFXIcTN48V2ZBKkQsBtBXS+Mp7MUkZBO7SLil0aHwXV5fSg5obiDClIR\r\nX3pv5jmpZHLgljpu5mnqqJmpNZzSBi4U73JJJYFWfqEtExfjJ7pv+s5lTuE4\r\nZwIJJEbVTvw9AXLLDivSMC/6bJwaxZjvBBVkaAhgK4zItxtWtKxdDz883ly8\r\nInaeEX9AGZw2H3RGRjj3bVm8VIfJEkH+QnJCqEveyWs5IHHV3ILToop+BPPH\r\nZsiLfECLUYwGVVY8SuPlV7c9Wi9kOV6+HKW7u/KujMrcpjXcueljUkq/i46b\r\nqycqYrRXu0ocMxaHLc4LO36n/tNH4yHveEzMmgo5KK5H4FM0Ovn9708WLpWD\r\nrfoM+8FWBee/2UNYq2QA4ry/VwRUHNNlauLlz1AsjYNBHE0XExOdC43hLtXo\r\nXerkN+QZKpBhKvstXJZMb8uLX8C5RACk9LM=\r\n=RgZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/density":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1f99f3c50.0_1671114376473_0.618994195715487","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/radio","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63c5fd0d7760ed1e6af7522051ccaff90b4a251f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cfd69490f.0.tgz","fileCount":41,"integrity":"sha512-UMr+XzIpowj4Mf58G/prtmPYArn1OZ95lZZoMoOFIYtdMvYGfqOj8zIgZAVNA+ZIOgG0OYQK5Ng8NTpn6jgymQ==","signatures":[{"sig":"MEUCIQC/wSA7HYo14s/d/cnBIFuJVe2xLT3TJzlPprC8fGsJ2AIgb9VJ2mIvkYQU9s3eVIsRGsOhtwJm04ZME08AuMh9ax4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO3BAAhpKRQL0Qb5LBs3VHSKGk8HLnu91lWQzXL8VaKnb1C3hLcdWo\r\nv1w/N9PDkJZUW2JSXuIQKNyOrNoL1JzPvACHLJ1uwxNk72hP1VKuc7TNtXOx\r\nEMmFP3sGkDnf+KV03oEb5IApF2eY4B1yTjDIkoKj95iVHo+WaE5TEOVTljY9\r\nzhHegjwx3QSUEHufCgmMYtLfmyz2aryCGstC4qptYLhKtXNdIsB20jR7naZ1\r\n5D30Ljb/htdQl+ckkQzP8eM26soiZyyrJfsWwdrp6GdN0GXw2kkKqlN5dLWu\r\nCz0qGavRHinXDRRPuKA+LDbK9jcjZicLif7FWM5D+bummW2+VTGvqNEYDYaT\r\n53LYgNyAeP5C0JRaz5n01MUfrzOAXgPaKOB8uBnqhzqiM4UD4Zb3jbigcR4s\r\nDbor9BSNrJNUBtbHetA8S92W7+ldirkvjjr/GAJWeBYtsnZd8dWNo6MIodhI\r\n+ZWqVmxW1xmPYcLnIAmELAscr+GpS1CDKba4mXNy/ixxQMKaYsf4mS+G5UDK\r\nm7jtERndsRi7o0iWkQw4U3/xq2CUw5q/5LdNCYYlSn4EAtdKFqptl4klGItR\r\nMhOMMfZvwff+d2jhV2skc3R56jwbht1vPyG6A/+lKddbwGSlIU2F8kRuCy2r\r\n5ktd/hd69Ru/m9vhfMYqy0gUeI7uc84WzL0=\r\n=RpzA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/density":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"15.0.0-canary.cfd69490f.0","@material/touch-target":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cfd69490f.0_1671221357703_0.26429863145236543","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/radio","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab87d100dc9001558a731937becb9157047649d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.94ad8d986.0.tgz","fileCount":41,"integrity":"sha512-GxFZ9T15nkkQ6kuCrLIhx2wSG25/M1erz6Dcu9JzWnxttiIfouTQJCPj0Nsax3kDzP2XN6QD6SqJ69l0+edKVg==","signatures":[{"sig":"MEYCIQDllHVxohTIeW0KOmleaW2Jb5CMUJyGok3GhRZnrnlZ+wIhANtJ1kV5ngY1fzJXfmJi4BDHsIjflFMDb+Zmpvj88IFi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLs2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopvBAAlIDNkIc3yLEHFHtRRy9hGYpg3YeOH91oYGJm86aA+xUueJOn\r\n+cg0YOJWDCnAtB9s2jP4Bh36Xiku42SnjgU9HRNGns+kAIuReN0HLlx/8kS3\r\ncaLyTp8gUnc7mvUWLc/oz1Vh2Y5Pc7LGJnubzVWsZQ6LFAqM9tzvOZim8bEM\r\ntQj3vsVlBjcm41iIXT5lC3Y+eZmfUXvjlIuaE4K9ZwCnBDCxYQsSEI835QBm\r\nijDTWjDJNn2SR++FIfcUMvcU6Qwx2rFhKh2UPyyMaMnrs3xdCwnbB/1aGpCx\r\n5kdjDm92p1ymiqdm22o4v/FwAQeCc8qaro9FQ8QELWI2hcPsbb92Kw+vyn03\r\n9yKnd9KbGa1Kxm3jO9f+EIupHlR31VefNaJa2sS5DSzQpZTuY9uq4HUhxTqB\r\nRNTDUKm43DdLve7jX5fYejiOop2/V1C5E3XGK34m9kIEa/lFQNvHS3dmSJhH\r\nSggKRTChZorgJITqiSSbskhOV9HumNTO4jEHz3Ndc61D4P1T9VyJARR/3PsJ\r\nGwGIsj66aDavvXFY6Ems5VmfWL2eyAKHCLAmOR8c4AFx/AP++x4XqjS2jwVo\r\nNKtR/ZmHSZSS/F0Gg52ZAMSuKZPErRYm1bp4qCVltqUToh+llilwmhMSQRIn\r\nSZEa92VgEV0O9m/O6cwief1wAeR8I5jRti4=\r\n=O32c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/density":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"15.0.0-canary.94ad8d986.0","@material/touch-target":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.94ad8d986.0_1671478070516_0.8344761026107592","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/radio","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35cc5bc2ecc13c91e128bc082eb78cf2c392f5d1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.604264203.0.tgz","fileCount":41,"integrity":"sha512-1q9uxWx0bdvovqzybdEjJ3Plie9A0bldmAQyzIZyrGbwWsGjq627bQpfzX8Oi7nVeZBe6X7PzzimitneJXTfOw==","signatures":[{"sig":"MEQCIBWwh32Yf9+dCdRBA94FlZOhdKG4eCdItjBbv1j+OGc1AiBZ3jghKlMnj0Mv9ox+EIVRGS01TNOvQryOHMjXPj557Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPohAAj4IngfcgVNmXX/jZTA0+VyZWfBMsWpqC77Ah8OwEj4j9KiQA\r\ntSCGCkOr5r9K3sh0kmHY3ovzXyqwJGmdMhkm+uDfd4RIRzf7oTyJpZ8ToMwE\r\nvEFn/2L7dgCN6ZBFuxa1h+QKwZ3CZ4wu5vQ76Q4GjOTDIGfyBF6CVL32x6q4\r\n3I9/ZLevhoc6lxruXu1gaVTLVY8zjfLsc+WxfDhRYK5/YcFuT3BQYt9WyPO3\r\nslesEWcNEWHeu80rpgSEfQ8HKmwWPh3QciYsgoKfSgsEPLcTxDgav4/DrUIg\r\nXGFthZM7FmsWqSNGfMG7K67SgKHUAOENVAC32Za8Yct+o2FKUuqPH00SxQV2\r\nBN9QYXlkuy71TyiWbNAGrRVaG+e2Kjnwep+qHQ9xRagxiwJDZEr7Q0RnZSDB\r\nh3fdJ61CEs6leGgx/SCtX5rj2Q1+q97og0JkjF/llM23DmXMXnW3ToWCt/RQ\r\nv2ta3h3AxcdsUkbrLhjrTYKDESQUSv3GY0I3gKg4UKdWzPdexPC/RqyOMk1x\r\nawIlzHzmSsMnCAtZyvg7jLKSK9NTNrszmVlxKALBizTVXm5lyUNN4JX7hcTW\r\nSVigobidg/wLvMHxbcT8FLPOM8IMk4kCYJ1ixo9nOHEe3KNzHt9ETg0jj38L\r\ndQc0p1Kv3SGAVoE2mp/y+kUkoOS9jhZYePg=\r\n=vip9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/density":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/focus-ring":"15.0.0-canary.604264203.0","@material/touch-target":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.604264203.0_1671658890745_0.8534147316061886","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/radio","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c6365300009690cd8afe4080eb380628e8ae02","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.85bcff6af.0.tgz","fileCount":41,"integrity":"sha512-xn7+Zl519xNvU6q+uih+ElZnwMt1RM+OYa+8DBEl+pE9f4LEtBVSlSwcjSiamIuCb3fi2aV6DO0+pxjiRhdsSw==","signatures":[{"sig":"MEUCIEiKNmgJ8QFXtHtJXd2ZjhH1WYQbc4/lkCEscJPKv9j/AiEArqIWm7olu+C8cjf4LHGGYS9dae0PvtsqleQqoR6AU68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB6Q/+LPmnue+lQUnUxvunlWLR2bxsYPxfoGZo+6cM80/YDn6v+/1j\r\nqq1fQXQoLxVsC9q7DvJk011bgeGBYV4wGzIkLK3uzIPtlvzcPF660uCICSnO\r\n1fVBpnvqmUIsH7EtBDv70PcXHYtAjRgQAG9uY2OGyCgvgOvnXLTUHGWQZYQB\r\nF18ZAX7xZCrb0fRzscAu/IEhpJiK17q7fVnri46LTOzudOcRuDBj+gQnmLDX\r\nljMeFGK22yVL4y4d38Z2erJAbwKD3jIU3uGYa9XtxXlGQopJFoWgGid0DSmK\r\nqIMPDSwSzQgpg+R8HBbTNVxkUbW76slK/piZf3iG74+q2CDYEQEAI+Ut/YIg\r\n2oTilUo4Mxe/l2eHdU9BpFjsW+JqrCkWV5EXhaM/rGBcp+t0IEraDJMRzoYQ\r\nDHfSc/IJnyL8h9Gi0R7WAaS/jj0OOf69lepa7MV5Xge31P8x/UE7//D0/FZ1\r\nmWEeCgAlRuahTB/kER6wavm08fk6eFqCEyIGkFQMg5ofSFdxw7JNZqsEy9v7\r\nwXp4O/V4fR+44DUx3BVvwjpgrlmxZ1LOpPWk7FKKHAIL/jYP7uJCp7j5l11X\r\nvwkcVpQ5ZWs5dLr8KHAA4dPZKBZc41UPgvMTgcOIvpSgJ4Sq+EzOBMlUJbiq\r\nuplGrlQkNr2KnNYmLCWWEw59mgdz0Sfr3MI=\r\n=vdZM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/density":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"15.0.0-canary.85bcff6af.0","@material/touch-target":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.85bcff6af.0_1671704748858_0.3890172339213145","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/radio","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d29a506fd07822f74d94199465df891615d5a4b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ece3e8d21.0.tgz","fileCount":41,"integrity":"sha512-wror/hnZlDaq54R/zZMFG0gi7recj45buKWA88v+mRv1O3qFCTVTxSiSpvj4PxPUd1L+qqhTwksMfum+ry4n8A==","signatures":[{"sig":"MEYCIQDgSPl3CxcE8K7bpQgizNOEqzB+X1AkpJHYfaLxZ2TrHwIhAIjD23hZ8WihArBvnkYQU4XoMdcsGrAzxApVbwFskLmU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJAYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAYw/+I2PzZTftuH2dyNT5c7K/H6xHcLU5fyAoP6hyYQ6I6sHQAIDH\r\n1qgDE66q/DEkAQkwJApohi6v6ew1h3AmgVSwjzwiV8aYUF/WlK/9q6ZgO16p\r\nPFg+0clrowo/JK3Xq4oh6BKB8dBS3JJln+HMUTwhLuHrG/8vERKSjh53/o3h\r\neDJpWJ+684Rht7Uq3hB9c8mQoGaNgYFFj/xkgo0itv6hAEe1m9UMCzCiiilg\r\nQ3Cm2/D2IDfMRgHm4xNsUuMajCUky0JbrgIogTpoMGDr8Z1oHP1Kqo/25plm\r\nzD7eJfFE4k/7chXGoLkLvy3Mejx6wZUTS8SPqTyb9f35JWFzSGUzkLlvSmXH\r\njQ005adYMSxaZMWNdBOl9t9FbRFKMrZdBg4fH3g083zIcMbC1ZbeVu6aXZVO\r\n4DeWF135gMPsQeD2x5xVEpacSWd2J+IbzpnoQoqHCdh4ROSPVS+xkCMTJlKG\r\nDWXz+o11+WySKJj+rNdecSii6KTnSvM70PxxyZtY4VTaYfhc/O3Jyw9BP+Ur\r\nu8YNcGvVex0lo9KxnwXcJnBQ/6S9bLVU7nd+BQr2bOz2itztVcidLiLlzkq/\r\n5MmOEJjYRchAoOczvWW6DPT88NOikoGC6RW/lSJWYqTox3iRkzyfdZo6dIFV\r\n42coYyDkAD/QtEwdqn/8OJ8kq/o+ct7UMVw=\r\n=l6za\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/density":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ece3e8d21.0_1671729176459_0.10446949345603151","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/radio","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a74492acd7c71df7f3e720bad622fe31874bdc9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.278ad53d1.0.tgz","fileCount":41,"integrity":"sha512-K07WQP7fqa7RnglFW5PtVnWMiThWtHwmeHW4zf+GyZNiB/YZinkNswRrmD32dKHIozr7mHBCG2kNTZAIHYZ4zw==","signatures":[{"sig":"MEYCIQCxFHoorOUFEPyM/1A599pd8JWyU00lmuwMuhdWVZKR+AIhAOvFCap26dDSv0SGMp/XdBVKx8xuEuw71vTdFMRujpz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA0xAAmrhrNtpByiCqf606tT3vKWcQGCgNvNnQAD8g7q7/Q1f8Zj+c\r\nuX0liaCfXglyRZh6oqNGHXF7YU5j1cqafyD4VXwL2Sdo4lTVY6GCyCTyum+g\r\nGvEg0UVs85HXvcDfAu24QSFJhG5ttx/Oe4Xl26QY3GeYyE1M9eh0UOPKjOQ8\r\nn+FCtMu05kyk1U4Y5rAoPJA5sxWRCtdZ6RD6QHdPRFuSOZpXEPkUC/XzF8NM\r\nd3IqyZePxUnxuaiXIUS2tBuFWXS8kUZO8ToGF5DsvSolVhiaG4R2sRkd4eOc\r\nov8XcUHXxb9sgObllgraxCqj48bDGP/iKyf0KEBsriODDqsLv/ii1dgZDgDY\r\nf0Kcenn3bP6qGDu25TZVXWCv2rCeXewnfrP9Reg/EO8rxYbXo5bnIT5mSbFS\r\nssQBsbTLISPwi79YCdZ22n4JKliOE2SJK1GSOTELmXScYZp5k+RUZcbDUC8J\r\nXyv8ENWMZaHVzw5W3hHVV5OV5ibWNiJNAQSfVgDQXAiph7PouK/2EDLSbqLg\r\n1rRFtmMBPnZJiyHHFyjNJQvBdTI0Ixrm7klwK/HptFyxy+4eqYWLybSY1ChQ\r\nqbOucV14y9p/mk07Ndqq5A/3V+UjdCG1znZ2puVrdxecNbHWS+FIKKfO1t6k\r\nEiurTA9qaTdbrNYG/V5DQD60MaHwgPe3e4E=\r\n=jslQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/density":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"15.0.0-canary.278ad53d1.0","@material/touch-target":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.278ad53d1.0_1672160752521_0.4935720148158187","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/radio","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1674b93d508448a64cb4a7eb57c70017941c7174","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a7d8389e1.0.tgz","fileCount":41,"integrity":"sha512-qfYH7YlQHYg3VNCWlZhZLW4Ou3kH3LfSN6PiuiW3/mAAuh7okRWMuKgHTmC5rBwrHpyhdkVeIhFVtOgJ8zMMZA==","signatures":[{"sig":"MEUCIQCKKmg3bof9P1bORqms7xAsj1W2Z1IOJi4O4FK56IEPKQIgfoK1eKnZaJ8TvN/vpVwX3EQhXMDcFoHCTfAFrI/kZMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0HGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKYQ/+P8p5MtSZxxbiyGPZMw2NJBrqwMaj0dpXQsEm2BIsdJcwaa/M\r\ntN/0P7uUhr8lEJSqBHJ61oFoldBGc3twECrMRpvfbWiWOXqGmnMbjbGSKMnu\r\nZGnaKRHwHweU8cd9FTD93NnFmQ1gJTzDBpHxHpWTWW2+UkMQQW3pUFAYI2dN\r\nm/Ot/ee63AGk4LwrG2GW/zLOguROvsRCxD7Nplg78gqTyZ/4AtkCf5LRfzrU\r\nU1tmUv6zIeDPm6MNh+74zwZhFRwYeTU2ITgpHN2AUYpAu/1YO/Pl/N7y/YLq\r\nCI/nDo4l5fhieWMBzJhFw1u6WyyD6DU6cU9g6waTTIZUjCPSk8IU0L/S/58W\r\nXSPYs64Kgh7zvilVFbvxdkfeuEpY9VM7s9luHxMQT4f4ehA0pka8ruVMysKR\r\nLvGNTEFOWYbF+twgkUp+xV4j+kujr0HW2rum+fQc8fkh9Y81utwVdKuzTTJd\r\nFWmr56nw5U5xOzeUGWoRO6w5lk28nut6gxf4GFWooM1/Cc0w3o14RngVXkYR\r\n20qIFD5A+kxApn01qRoys+oVPegqHJm73bS5lSqEOh5o8gGhvjMEDspSknuV\r\nGMXHWO3R1ZJWESUZL0A5Qsx2gTB1Q3uqUSL22ANtf4cnv7qBPdZDzPbM5x3I\r\na3br6Cml2PSCADKFEu8hVvAAzJLVL/7ZYqc=\r\n=PSj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/density":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a7d8389e1.0_1672167878019_0.37777959567913566","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/radio","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120850f7f690fab2664c7e372616d3440833311f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8175d5eff.0.tgz","fileCount":41,"integrity":"sha512-c4Cg2ikAHhg+jqyfwBEd4nl9zQVvM3ruJ8KPSLjYaIRuAsTWWwzwlgHI7EkAkVoliwZWDOodmge0KC2IUd9plQ==","signatures":[{"sig":"MEYCIQCI7ax7MO1C82EswgLZbRavOuaeKWjS3zWhwzbmBKs0rQIhAM7MMMwC6ij1cppB7OQsbIhejniHxYJ79IYi8I1nDYWU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8qQ/+K6t0b+Pb3/Mj0d0HQIfQehf8aZmC7ZLYbgpsIqzfO2a+JhPW\r\ncAcUJJn1ludib3ZO0f0HAxdW3AoItUVNFE99vn3pROTsUZZh3mXVpVJel2Xi\r\n7B+CIjOV9AW7gLjZXWk2Ifiq8+AOVf+ThlEqgOnFGCtngCcG8tm6Con8FhQk\r\nBA65UT1c52mmsWoICyUiTjZgm3b7V3dhmOGYDzExggBwTuudJLmea569pz5Z\r\nRY/HrFDQekzbfgtA0puXGSule7zlDopMkEHOWurD0nv0FSjgGYNcWDLH9FKJ\r\nEfWr9J1FaZD6ynij3uoWlaIERtttMsJuFwGwj5ZnhZDaaz/9wUZlrMVvQidK\r\nTZe5ZoiJb68hLU0kfkLlG+fxUKiIKp15mRUfldtz8PyefeYIktP3RtCU8T2h\r\nsjfEUVZx4G6UUFPidfHHqGq7CySZSR91+hZ3Qi6UUOL+X9lavusM70a5Yze7\r\nMIobHF+NHoRCt9AGTQgjXAHWbkOZTp5ptzHT93VKda2RzLnGnR2USrg/nYsV\r\nSwgi7GLuA87ywVMtMXJYobsrzAwu4lWfhpaRfv/+3Dca7IprTYQwBe/YH4G5\r\nB7zcZwF2nx4rZkN7HiNkYrr7Aqzyd66rI0V7NVdweH2t2TO2Inoj+xCzLXA3\r\n2iC4PwuJ7a9IdLmLm3o37oEtECmamAYOBzU=\r\n=pxNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/density":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"15.0.0-canary.8175d5eff.0","@material/touch-target":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8175d5eff.0_1672192345378_0.5143606099161959","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/radio","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c2b2fbc75c04fa119826a30d2f61891349a0127","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e21dcb86d.0.tgz","fileCount":41,"integrity":"sha512-4cojeY3t7hFXnha5lhonfFD4vXZ3z0h7nhn+N2UX9aXkJKVnEvuV0biPK6/rPG88VTBpLmpTQmUHgV+bGHzJgQ==","signatures":[{"sig":"MEUCIGiHqOINuzD4oebCm+yn4jH3fjrj4tUYl14AaTy/e2tRAiEAtvLmwWvQv5HEmkIKVKC2Rm/wjDWwSv6CKYNMNnAOoX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX8g/+J6YOmmOb1wnCEeaRVkC6w6/NbIWp0RtZMdb2UDxymn+uwoC8\r\n6IvubTDAzM/XSB/c83ahPRpgjLziGuxwncY9vniCXufj3ve5CzZey2DVFnuu\r\nSWfL+zUu50tMaPgohZGOwqOG2S43uXmlt/4Y4Z6/XuLUtXNpC09f7TFULFmA\r\nf/9MwZlcm9pRFC7Br3L1TgGFAH1AWRZwLLhgG0Dpa2QAGgfrm7JpEq/+2OON\r\nX2Gmz5eJSxlNfNugnKf48o+YF1t8TRYQHdiOM/eNfmNi5RTG5dbNkfrfWyuJ\r\nL3PuqHAPjbpwa4iXK7wiy/ORJPmxX6vo6nQwC4TOkNogN6P2V3F1tnCUDmtJ\r\nzFHecJYDSON/5X5RPoUbkKldA6vhhYppa5EEUDLroZaamLhqzKSdZu1XpO0H\r\nnJWrCspzbACuDOh/T1dQRP1IdcYpCvM3P+ydtPajJGMH/GMZSfqRm0ofyUoQ\r\nds/zP79r5B+FdI61dMewkdRokBmLr2lxIctE6ap9c/RSc7WwpfOba+qyYfDP\r\nBFrgqy+/UWU6gEiGY8kqFEPkX33+tbkCVD5jPhdac+Z7vN7tLksHZp6bYbjf\r\ngIUK/wgwAxvFeB7oiZxvcKZOFglJ1HnDYBzPCA1FogVsoszYHTQ1v7izd4ET\r\nL4SAsw9804Bx9AxkmERwLFlVVFIZ+dUIwo8=\r\n=0qHd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/density":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e21dcb86d.0_1672322577210_0.9630980867314116","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/radio","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f384682153567d9c40a7e5ed074082ac60829b30","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":41,"integrity":"sha512-GxPxwPp/jPwZwUJqFOF5h+8KeoBnHUQkLnqiTulq54T8zEWlfli9Xh7DDOeu19RA112xHlUwHGsOi1mFnCNBYg==","signatures":[{"sig":"MEYCIQCFjUy6h3L0k3G8zucLxnrNY1lB0x+yfwOqSDqKi0fCXgIhAOvl48JLAvvMgSf+MhqicNt41j4wBla4CKBWnFt2uO8j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre10ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTVA//b4HS6/S/GTtpzdk6CdTDTuv3rAyOmcaf2zeSk+oVX0QBGIFP\r\nqhDb/THMbK+L9s9/LiZR9Az8CyMvveWmw2ZmPfymdVu9/TDsvN4JgO1nXUEe\r\nGmakFaGZdK7HS93BkYja1cOa9v4TKuCfNF9aDsuG8e247klLMG+KUcoGbaLC\r\nfYMPjsVWEpMrJWDTPNbjcHO+JAcfbVADxkfIP7+Uc5TjPAdmIZ252jbmOPVp\r\nMf7G1x04aAUXGft/wmCi5xmLjawphQO++pnxTodYTIA+/N6blDIZmnuNwciz\r\n1uFrnvi9G33Cginh4bz9hNZnqzECient42gdpejrfAPKqtYI6BnlNwZtwhFy\r\nqJmPaz83WBJ3P/yz7ayRuRRHFrZbmGauS6AHgL2djDl8MrWOfVBqNSGlNIAq\r\ns/HQxrwR6zAeJK5l3mh/e2yiTh3iWgiwacWhmyO/sK2q4unKZSJPDMIjdC1K\r\noeNU5XztK0xXKBRh/NFpKvdUXHTITEd1n99tsXm+vRmCNDr5y0LcrgdhQ3q/\r\naXsx7ku2rNgrLWtmZTzJplv98m3qyps1teArpjGije2pYkk1VJGQyyk41i8v\r\nusTSXdb6k1OwqQ6mOHvecymE05MbQUWnVX7CqUoDvr2sy67w7S+/oTHVlC4o\r\nltbuMaj3hawUB1AnuXV+O1cEJkBSxG6/ziM=\r\n=ndhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/density":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.20ab6f5a8.0_1672342900246_0.5578783878949092","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/radio","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c9196aecaec9bfbfde4104063d1504f849cddf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b9806f623.0.tgz","fileCount":41,"integrity":"sha512-UAl30ovAm0ZHMdT7ZNdxEqkZ7QNZ+eEwkw7L4t8xU1yIXIBxQ1kcmQKCpfbVXhHtARZCmdKNJPg0n2OWxskfzQ==","signatures":[{"sig":"MEUCIBsUcYGRMKjDytL1EczDO1ZHHym4ImNsP4fGRaTZJxPKAiEA2ijnz2/dPi7C7Xq3hkSLaFCEhW2pXW4TO/dDtVXOZLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh2CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/hw//Ykk3FcumcAnBnAsuPC83lHxCW+TXN5S5l8M+Z7k4MKvJ/Qie\r\nMB9bMumHTGN0JrHze3xdCM0enj3LNeEv02t8l00wEAvLKu08UxVG0PEU8YIv\r\nRoaPHTyV7iAFlI2nDlpuukgBhRHLe0V/S+NBsIRAC/5GpjH/jE+9SsT/UfQf\r\nviPCDMJ1ksG9m1G66my1PalGqtuTmMbvgip9ttRMAmpu84ZBIWE7rZjKhbvN\r\nOt/fNFekM1vvPuwCeEn2b2swfzePPwBQMn7zwkM3CBm90LOw8q6Iz6fp9jWn\r\n/jp/g28UW7mLzxzFzmg3suCGX8x4idAwfa0OQeu+6A56I+PFZA0RVs85+3xx\r\nafxKHe4sGr3kwvxirZvvHxsQIGxnNCR1kgbdyXEUw1kQ2d846sLK6LEuzRgL\r\nM6f2HTeA231pU2ve/iLQf+7JDfAcPb5WEQlyd+gCwSXzNlB7cKpNo2+rDj/z\r\nGVtb86bxrcx3ZxV+oZp1PWcuAn267xX/WqX25JwWgS0Mylaa4PaEN2kf3IB8\r\n44ZdBGystgw+1nNKzDFN8IQyOe2JfXZv0zDPERcDy9l6/QsqepcUFhl0idgw\r\n7GGvg+vhkQ+clHzDNsG6oeJMnP14NsB6R0kDSpiDRyv+N8qGsQncXuIjSOit\r\np3O/eC0xS5cnrwHM0yc9jW3QXnmdW2MQAkE=\r\n=MU9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/density":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"15.0.0-canary.b9806f623.0","@material/touch-target":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b9806f623.0_1672355202482_0.13193614004150822","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/radio","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb423e3feffdee4a0b164ab3fe1609dafe8c6b2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.50c9f550e.0.tgz","fileCount":41,"integrity":"sha512-9R+IsxByxPvYHPxppZBmuUk70CcPIlc0ISq9/tqfeT0Wc6F63Jfj8ULVrJiLhXg80p7pf2e1jIm+XH6DJA8MbA==","signatures":[{"sig":"MEYCIQDUH9W6lBBmppRdPZAF24IPW+/JSJhmzehpKNaTV+73BAIhALJ0J93ByxYJIRFTuyuG5FHPl505nDVe35vIXt/2stIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3AA//T3tb3M0dATDPKrEjpVhZpqHaFBbJO0qrCWCHn/Om03q+7WZ2\r\nOuVZLbt6K/T12Y8lthgf4C4BJCntCE5FhQ740H+5RoE1PGZjdpQZJHMSTSlW\r\nd738rBe7hLc4HlgXdnzYR4I0QN0GAR3hOGV1r2erxzyJQA00WNZm2IVEavZy\r\nVYS5soJzw50SmIwulqDDob4tJLDWllqTNarL8COSCc66tG/mfo3XzCWGkS7T\r\nRqCIaDZ+YSmTrEmUA/4MHZjgtQJMye8QVMR5s7XyvAAgrup7LrXhtvrfVa7f\r\n/g+M80cj6q94vK5wYgdN9LZF0jW7/0TctyCG3fyPyEq6HJwuTB0/Cu1qQWpB\r\ntNy+CQfXenCJCc5yEUdT5QqCPqj3gYhvw4eLef2HRjb/40fNf4xRIcp1Hcaa\r\nifcZBi5uYBJ2mS3fVamKEDbkDSnfN4ZJz/3wU7UMJ1/KWZYmv8sxf3xEKbFM\r\n++PafKz/NWbnuDhK9nikAb3RRWiH4BmEElUIrSq1XagPZPKonQukh4mzyEIy\r\nFfRx55tanMiLoh1S0w7aChhR6ziZvgO6celQHUL1IuYAnPgOgbgKzaNV1UQp\r\nwKCM+MauCwFADmTlaEb8lzNlsMCbS58/hooXAoCKmr/7HA/x5yyfVVxiLv1A\r\nUdgBUnBF1lZjPdR5NlRv4KSbCA6sfPcIiSA=\r\n=cdpQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/density":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"15.0.0-canary.50c9f550e.0","@material/touch-target":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.50c9f550e.0_1672760903689_0.43815849302521936","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/radio","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d39448d7ae7710ff80e0189bda184b3e811f848","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.af490a848.0.tgz","fileCount":41,"integrity":"sha512-/Q+UEc+Z1bsuWWqX9T4i92gGlXe5rtnU21xhBJVlQ8KwbM4PSsE8OJcMpHcxpOZ46Ae0cfufe7McqEWbMiUGag==","signatures":[{"sig":"MEYCIQCvBfwWCE41N01sgwUC+C27HXBJM68muRxn42ywa7uElAIhAKT2oyQTV8EwU7UpBTYg/+EuFhYM44UvVINgt2Hb/6Br","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqOQ//Xr1cut1KQdcvG0FS3j6SzxpoKJ9+qNiK56iVg/QkQx8bzDRt\r\nt8cLTFwAJlBNnkVCGo8AOvrMfRuFK3DdAVh8DEo3sRNXZ1buGUoihqW+l5Iq\r\ndxc+NsKmatFZz/sZ9JFTyaAFzQYKbETYHcEDJLCIpdfG0Ph7hUJ7gaNYpk1O\r\npd6YXjNIPy1flH5I9OWQwpiq1mhav5YYGp1Yd01HjYyGkgipyRg29tLWJ+mg\r\nWtaLiqbnkVSuFDjiqXw5Wil2+kT9kEkLbDdWXxiHUWxs4JcIVxBL1Clt9GRD\r\n2mdVMQZdc/aZ24gRQHzVv6XXJOn+b2jZVcUer3AIQ4B1/voSt51hBAbH8Jqa\r\na0SzZf2QMx+07UJeWRl67tp9F2fBhaFRANNsl83ueaU6qojsK1iPVOKhUJyb\r\nHbJqd+Z79EBn8OqPjcFirIx7cPoKFz3vVaaUVFHfu6Pz5mlGetZfAiAnLbzu\r\nCLcX9ccRnm5zmrPMzdZUtf2UrHacRT3DGK/0OJ7m0EGFsficdzNtvHMAtKBp\r\nzP5n54/kxwWIZIHbEy29q8yztL6liUy3HTLh7pwFSbkOYldbE+2BUFrMHziW\r\nl/hoKIlZaVFWPur4uNiZV1yDavna/5G1OH49Fj+YEnHdahtSXcN0x1AUP95b\r\n0c4H3JyrI0aG22rFoNWum7dZFy1osloVzuI=\r\n=G59s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/density":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/focus-ring":"15.0.0-canary.af490a848.0","@material/touch-target":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.af490a848.0_1672761496504_0.8774472308199726","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/radio","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bf2df5673f40526e70c3ee32567100247fc4baa","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7cf487c98.0.tgz","fileCount":41,"integrity":"sha512-rJ1HE0iDN3lh+6lIPDAybAcFMaMVKmh8quDfI+JXqkscIx6zbMoUnR/8aomS89gm5MsaSp0pusJK0cxefkXjfQ==","signatures":[{"sig":"MEUCIQCdswAigaaRlMIXb1wOUONNv/bEJMj4YBKmQQx78XSWdQIgao4lINaZbj7joLtALzMKdg2bUglIzNxGpTs/H/wV6jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeSBAAiyGr8pn9xQPxHEON0ZbMqkmlMA7PIhoLOhUtaN/+Od0HFHA0\r\n3kO9ueH5tvqSMISiT6RF9dPqsfUzbqRcYpfz77mxJ0llyNHqNYE0kD/opG2R\r\nxddrKD4XqSLt0COyRIPnMO6lyNOFpRcUwW+wkt+gxJ7tegM3CHbQlurkBCHg\r\n97uGEUOcyG5N+AoortKPGgLBx2ZvHQJayh9ln7MSk9djmVWmkOM42FhN7g6A\r\nYsa9U8vG6XWgze7qk1IqOfeS6yfO+wNE9NGG8+01AB8u9OpKhyX1fRbcWyhp\r\nCevgEhOH3/cHMsbTpppioLwEzQNLyDoHe/tI8tV32839X2R5k0zroizKZkPh\r\nchFnmIBWAV+0sUyc+TMNqN/6/Q+oUetnVawE4oHfORCAOyv4W3brmtGRWElH\r\nCO3TevhxTLrUuwpGXNyuOFN8ea1bc4/RqYIgmPuFkjznLBwa03Xj2d1+5LHm\r\nlWqTwfOnKwJS/SlnbuXs/E4BL+8zbpbe+wB7TD1XVLWZ8rsD4id2qtUBmGSP\r\nWAhQouImNqJnwHtqLSXbuT8pls8w02RVZTR02d2R+06d7HyKTdsx/1ZdTcOl\r\ngN/jxYGNuna/2YXY6fq5lyFvasSVbxVQ6QXae3tdFqQwVZUynAy9VqYBsut8\r\nqgEGowCBqTx+GXDSHRTgApGOVP1MQk5X2JA=\r\n=76j8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/density":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"15.0.0-canary.7cf487c98.0","@material/touch-target":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7cf487c98.0_1672767571069_0.6392643873733477","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/radio","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62111ba8826bb93f2c9a05f649fcbec21e16a0d3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a52be2d5e.0.tgz","fileCount":41,"integrity":"sha512-aRP5vt8cbRCFp3cCt3M8YkKrC1NKZfwpHVPjMZcR5NVITuidTmeaP1hxgwozTGpv12vDFugs53xHv8jkm15Q4w==","signatures":[{"sig":"MEYCIQCNMn9jkp/+iUCbhykeToQ9jUGBTQAmiHetiFUkGYnQ9wIhALXfRLW718TQBqUPPnrif4LxXcPjkFHWNED4E9SkxIW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu3xAAlflWienGKndDYLtE2cODgGtbNTgxxrTgXh2Qj5PQfs0wKRzH\r\nHMOtt3/CcnKRgAu9vINAqklYpWrC3RyNKrDHq9SoCF0JB/d8x1nm71Qjk46h\r\nWKicMoXJAO2XeNup4hVrEzP7PtmUFiIQGLN17a76uj8ZFYZ9ipe3tsbvpupQ\r\nxlBEeX2sUFz7JVq999NJc6MUZecO3nLE+CAHKoFXc+s6Z6LarSpUK6y5gM2j\r\nsgAR98XO+O8KHViSLvOHPjHODz9LXjjaa9gfuF60/Dghup0bdBjG6909UdNt\r\nb0c7O8knwtrm2fIt1K2IVvxmJLzKdvlz/SYJDlCPR18uWZ1og01kljgjqaWQ\r\nyrIdXIH7vhRZuO1mCo9HCLzmXuPwNtc7xKnRRpjtsaZhDHDKBPGWTxMWnuYi\r\ne2oA7SDImifZdZYeh95U4wj4UHW7ArNldsGjBk4OY0SDpvplZlTCyJxJe9Iy\r\nQ5ERnuk3Q7yFsi+QTIu+jRCPAQrRJBltmnxDnqZzz//00DVIBASD5dp56Sez\r\nWK3MEpVm8BBQCXbp52rZ7VDiosNL3YC6MyWYYrQkwxmWO2BOgM7As/OUOqlo\r\niDlrMNDHiDZlaDCra9LwaPR7qhulCjlkSoZC8je+Lye9DDsONj81D+nMUOdE\r\nbBJ+lgH756C6oqvVvhxe267o7iM2BmGIz/4=\r\n=mONi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/density":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a52be2d5e.0_1672773233211_0.9946468169279934","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/radio","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5793cb1fcda2e8bced0a5b247c37384cbfe4cba0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e38ba17c5.0.tgz","fileCount":41,"integrity":"sha512-FtHlzG5p0d62FPhn5WzE6vce9pxER9lFPYE0ppS626gxu5DFV4qEj7IMBCohNi4H0yMAS8191vvCERJsZ3geDg==","signatures":[{"sig":"MEYCIQDbjkr9ZVDaw+suBpb7/j/xUKMl7Rkz/OnCixGWPQC6kgIhANKspvqSwjDebKzfZUYp1KNuE9u9L01ciRzVJIf3GZ3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6uw/+PTd9BC9If2VeJ+QqGqfIwWL8BDQYfWd2wsT5Ue3gNpt1zgp2\r\nZgjpZcHZIFq3rvHnyakQLhx20naAxpK4bAQZ+lUIqp6z02BOTyEzxtmUzq5O\r\nomMwdUx9No8e2MjTX0HbTHRguPZooljs1ZdMpmPbN1koYhX3Svus0bePghIh\r\nGhGRzv9hmLl/8m+Zk3FdwBj/rYSvVyZu8cjA1PJodXeLH20QT3z130IcXyoY\r\nVOUz283ksOMA6Kbi5Y3LQHP2kKQ5WRdw1IwD8C2stekbYcJCwFhJCYa5Vx/D\r\nuQR//euBvjzYRTqw5x2WpH+f282jwIM9fWsng/Nj/TY6CYbWwHZntfAHbO7k\r\nct+4fNljk2H4S/V43YDfCcdV8IY+nfJ3pMjeAXNjhBWzzJYtHiaHAtf9x4Nq\r\nJGU+eOdOiU5us3gSvQ9zu9CnaoTa8VfFIss3eJpbUda542IIpxBTmfw773wH\r\nEi4fmafWtUDg/pjdIrnOYUhzdsHxlOYgddk/u2DRnsuSded29f9eWnuAkC2m\r\nJMPNiEQd+10TZSomzmhnvX6uCYLORRPzDjvloVvu5XcMb228VxBQesGZhU5q\r\nA1PdZiFqJArv4fdsrimeXTEj9ttu6w+RCnDgpgoV705seBJj8q9OjMSa1FAZ\r\n39xBdDMX9fZRkXf01c6BgKGNduOIY7dY410=\r\n=2eLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/density":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e38ba17c5.0_1672785179087_0.6623502101856609","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/radio","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"858991a3bb4bff0ed376729c67f1bfcaf15e7cb4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.49041a6c3.0.tgz","fileCount":41,"integrity":"sha512-ranzxPjR+C9S8UEwIDi0E3kdKKY4t/m1MfB99A2TAucV2H+JcOJB/EGQG/3Np/wRBgHD0xM0wpGL2L+olvguyQ==","signatures":[{"sig":"MEYCIQCazqZBrnlltFo8sMVLc6Zoc+LbNy9hxFEaWFWWeTX6TAIhALmcdBFaetW3iKrnQ7klvg1OqVqmg6lhX+KWfeNcmA0J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7thAAmPNF68YX5OiZHz4OSggx1KYK0+olRfUAF0nX3woa3I6T6GQW\r\nlzXvbCZoTPaiCHR2wghPPFv2u5jIHoIRM0J6LY6GhG3HvGcqfRQcYqzwlnrh\r\nossXgRlAy4dpD7jBrM5gslZZUmny2550r4/3UXmcp8RKbuWHfXrWVKezWaqb\r\n3LTDSqKIKAnb9N034hnI6KSJKBfu6PDSvKjKdcOwXFvURNPlsHHs9x+JVCjH\r\ncvh5oHG1VUlXX6LTbMlgtDKgPN2HIhBQszKH1h2yOUKkvuKcLa+167impQWX\r\nK9uSqHPIGx9lXw1i7im+314Ay3Nn8Hi97iHMZvvAlVQfvbYd1qH8LX+bPxs3\r\nobgH/zU3aSZGbElRAGal5R0Zz0fAeCSGrffSYwkV02sx1hs4bQGJp3d6r0/V\r\nm5ahcxGagzlDKRDlpWpNlFW8DjFrNALPfDXzpFNv/qayYEyKQ5UeX0Y8hxg5\r\nSl+cuvkjBoCY0JT/Eg+PDmq/CMtvU4As3d2SyLtQ0QhI4O/V/sFu+JeD9aV1\r\nRddqlyf0x8Hz5b2MNpxUXKvzScrA/Egtx8Dl5Te/GeaqZ9S93U9mew7j26YF\r\niIwOElNnpbgyps3X2Yvg8dmwH4SydUjiSXATjpLTS3tCBjF6lITbIMc1fUDc\r\ntr4wUDMAOecSjLdYWCT1tbavBLz23bpCSzE=\r\n=mmgu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/density":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"15.0.0-canary.49041a6c3.0","@material/touch-target":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.49041a6c3.0_1672845507650_0.2140797603156519","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/radio","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06d3fd50cee7d3f273498bae63853d5fad290417","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c492898c2.0.tgz","fileCount":41,"integrity":"sha512-gzeZ2WqUkdonuI38ef/xlTyMQFvhLELAQwDejjRilVwDzd5Um4SmCi5TsHvgWuDMKJCRyyXsZamNor6HwkzbJQ==","signatures":[{"sig":"MEQCICe4hvzmS8hdoAcFAGVqVbhbl1yhYyzDCYTVVgbA3RENAiB4z/Sh5Cm/MX/NjWUKI8PDdM2nmg0a78/tyUlBJYtWpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLgg//dxvKCm9F9TGNbK5Yje4AeaYQYLtGkprZbQUGyjkmQmy4yEDE\r\ndgfNO36MHZbNwrQa/wGpv16bG3VhwuKomZTpGcJgszNxvmhVMXeZ1aZTb5IZ\r\nDnje3LZDqYVY5hRTotKgQdEfjGywcQpImhiWC1oDeCNXVsafyN58hbgvhKV4\r\nQCg+X/hMXjtmHIdMapaolYegAcp9dpioVYVdaE+ibzH2RrAzDURSK/GZJRbR\r\nnBr12kZsXCXaMCSEW9zN3xK128E5FA8QvoKIcNS83mbeI4U/CN/KhJ5BPGp7\r\n1wWr7ZRQNiXqBSXWF2NfXahOm5FM3PduejGe2Z+N5uXB90V4QrFUn1xRdhyR\r\nP2XtSrlqigVTYpoOYHYSUo6si1RE+/zs43m4eAk6w/0MVHYXZNb+97PpFZdL\r\nO4bKDjvflsf6PSNESKtgQWaVeHYOHBAU6enyMUf0NtJ3wRxUKpV3yZmG3veZ\r\nuMWUuTCgiEZphlxVYVpw8lY4/xltmu3KZNBQhTyeU/x3DYYQs3W6hIuu9sH4\r\nmAr+6vuBjaCXx+qUq13g/LRYi1zuMlcz0nfyuK/ri/qAKCRMaStrrBKh18Kp\r\nNXea6h1M810ghqt/DJOQTUagEVneJnwtBpNJwRj7vtV+MJ2AmR9hafEl1Wpx\r\nGkyvTNdvNe+YIG0gBJDyBPZkoTSdhrl0AyA=\r\n=hrX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/density":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"15.0.0-canary.c492898c2.0","@material/touch-target":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c492898c2.0_1672853866691_0.6693250448185104","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/radio","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f201affd93256a1a613031e9b48c79d3e0dc9ae7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d7a2277de.0.tgz","fileCount":41,"integrity":"sha512-PQ17Yo3RHL4RkGAr0c2Ek7RboutAK65g15AOwGhhQPHmClXsqfzi+aSe9OkU6/vDIhnYabCm9jrr96YkX0HVww==","signatures":[{"sig":"MEQCIHbJE7tEJzU9BAGfO+sacREVKOeGwccDkG66YzZYns5bAiABd6YSGNjWxzdBENI1JXq8sAoFvIJYIn660rjsDV/oSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ug//UKWZMYWb9/8xUDcM4RfX8NQp8aPdpERjb9UPuCLqpjj6zmBi\r\nKxl1I13z6dbus+S5aHbHrUQbs8EUrA7g/sZ7O7YUbYfRIXJLCJjdXimffMO+\r\ndoGzYTzDwdnzDoFHyUkaScjCLMriJ4rX9ZcLSFabS8tveNaoObKLJlkgGzWm\r\nufVX4UxGxLcV10RypW7S2yPCCNw7K/GZrSUH7I/BHlzuRHQAtinftGBiVUQn\r\nkF0nupbKu4hz1DUzuyOjs45l+uweVn63Tg/mCDL1KZg7SgT6u46I4AzznO/g\r\nfr+cQHxYMbcWFKsn0x41TjwKG1I3ThRAlZzAw2y+0vCTLXYdHwK2oe0J8JqL\r\nDAZpvR1cTH0XDjWhS+a092w7YdvjKRPKVhzlUCsvZgOrlV/xo5maWi1txcJi\r\nLpICSRi8x5/V/GTdd+48l7cnHFUj/2EXoJ9yFldeiwmUM/ZSJAlqtQaZYC+C\r\nImmcPX6CAspYvC+ddDBUck/Z33WxOP8v1UUolXxSDnwCF3TAgiHwvxXpcgKy\r\nKsa7qdJhwFq1SJY8hFRWrcdQ3r4FsQUN8Kt1RcBhTPPqdioCquHywo9TrS2e\r\nEuJ8E+VmlXuSxof35gx7GpIHutcVdpkgmiwDYet0ryyBvvbQGiZbbVEjPu5+\r\nE+5QImIquyi5PhIH67qnVQ0bmigpTagEXAM=\r\n=hvR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/density":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"15.0.0-canary.d7a2277de.0","@material/touch-target":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d7a2277de.0_1672868187757_0.871413621832003","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/radio","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac54c044a07c1bca1ab4974d53f86bd46b154e7f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":41,"integrity":"sha512-DY0ypAxKpCBtZ2C79iPOvnXZc25OdRtc8qEHHydvNnzm1OJv56vPUvOBVhxFZj5xr4OWcAMwLZF+HiGGwZ1HgA==","signatures":[{"sig":"MEQCIBr66MmW0xDxrGeEm11MM8iuSJOBSHRNkOyxfEG+kckAAiB9L0OZgfv23GRSAwrX/X0o/EKe7MJQgxufCSrGrS8KEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqKA//WBIaAwrr5+JXpYKx+Ho0w9fOcbVO5om0Z9vKCNlJ8atrZu8L\r\ngEZ9C0gi1X9VUa444+Fl4cgEE6rwb7AttV7h1vcUznc8ie0zi1XNk1In0x7I\r\nuvSRcK8inFMwzmYlG73PehEdm6m5f2rHr1mrjIF4Sc8Gmhmz+QC+8vknsEya\r\nBtabzEK4SWoidmEtb40V84Zkoe142OBPw06YcOKZw5TnqycrgPeL1yJu6eSn\r\njhRYvEUfGo0MVndKZ03YborAX4WsIrxiSFvsoZWCHoY1HRil02wajYPUX2Jt\r\nTIxW4GtdAP7h3z7YMJ0jKppd0lFN8kyFMPDOYMHJjDnHpfMNquphPf0hywRD\r\nJbrBL9tdcEpWoRxkj0exBxeKOlFSsNX9Tg4QOR+gxVVTmaNNGaF5TYR9f8R/\r\nMlBjPNdFILWysnYcQiUMqgTAIQVFzpJARGiYyo+NdY72aB5GIt0M1oGfO1YU\r\nhwNW4JEum3tEp4jQW6spfUTFwJNh5/y28nJBUU8HZoXQj2o5pMWNduVYJ8+g\r\n5hrj99rCa3s6PWtXnRyHvcm3455A5yjQWTAAlW1Px2wsCNUqsRQKZXL6zhYY\r\nUDeYKG0pJrptf5CaSEJGWZ+1t2gr0bbBpKEadVcbkP/WkW+z8+N6A/1b9FMa\r\nuWCkfgc8i2Gt8woWe5T5xud12M0wJ7ZroRg=\r\n=WmQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/density":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fd95ca7ef.0_1672880615091_0.22920223171253307","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/radio","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22bfd642533c75662a6dda614d681a303382a0d4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1eb44faf9.0.tgz","fileCount":41,"integrity":"sha512-YcrRDuObtc3rUev4L1zAHganlbOA2vUEWkSBEQ6H+NsxXCEh3PBcv2jxEfJ2EmkPl8MqZQZQk7LRGJ6/v+DTsg==","signatures":[{"sig":"MEYCIQDOsi9ns8i5CfN0/GSC9zZbpsQrWlKfhioPgUoauScyQgIhAPYnAp95QRqJHtcpu8NUVLkn7vQdxGv8DipCcSSCKkmT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOgg/+IkeORmbWKei3DwYqK5MDrQDVC7Ga6QU/3+SW2Gj4Tkq3MB2R\r\nptLCErOqkvRC8Bgqp+Z/OB7VLo28bSoaHGaVekV0ZV1GzQYi5VcNV3+2uLbb\r\nZYRT51BG7alQnjVGv16YpIBOWeMXRAshlNvu7vgmeBM/cNRpOmq/9VBcJDoc\r\nMeox6iCg1VhQswO2TaPj8fMdl05Z9P9vuYNMTy5BvpyAb+bzYjz2WikiDHm7\r\n501eI1kEak5hx+tpuESE6xdjy0He1uox5+s0JSD8SydU2BjEm3k1JPtfPeIT\r\ncXJQ2X1gZAkdqxtECGvg/lTHj5OsJ1iZ3TO+QnI56R6Bb+2l6AAkWv2Lh0kJ\r\nZkC2LnREoICYjR1Nc3LOVSDgj4DGD2SgRez3MJCLm/ALU+dQ4FnlFzNHdfzk\r\nSNJi4QMRNDU9G6iwMlPZ8Hp0wizXxMm+/rjKrP0WjJRjLeu1/Opxu8d9LZar\r\nD9PPlbwlbQiF5n8gvBRSrWz/qMTdItqpC+dL6zSSXdekc9xECbLdgZnYMwbF\r\nUezayrNyTMMipwRH0sFhHu34iPGSbCZBZQ9TEU/uW8BzdptlltbL5Oe42+ZP\r\nxRFMquW/bVC+cbbYvhFOZw5S5BmX8rsGvVusoD9v1UKv0qHICpPzldJ51SMb\r\ndTs41+MN06Rd5XnT6u54dPVUurp2fA2uHSc=\r\n=wlei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/density":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1eb44faf9.0_1672909805172_0.3821388861876647","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/radio","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ea6107fce44c69632e81cf74e6cd24fe63b5059","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.adcdb7db9.0.tgz","fileCount":41,"integrity":"sha512-m23SoqmOO1H/syX5orMqy0DCUvtOwKba+EjqnxNpG4ECbm4qEFie3I1FEa943WTfZ5ZHT7q3hpk1cv1XjhL9yg==","signatures":[{"sig":"MEQCIDqF7pjuQk8ScEO/FsaEEN5/X2o7JHPw3YfcZQe/imKAAiBDB3FuqzhpO61hjyWKZY6kKe7ENH8u/H2Rw3rhD/RL1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvkzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Zw/8DC9GIsPl/OS6/b7IygeHBt0/ZsPr0MKxpIFQx/YU41Uo250d\r\nQHcr9UaBJlumRHObk2uCP0ojBHysfI0bSGvPyVJeo4kyXnFQHR2dGuNxjhTM\r\nQAuMMyU7suI4ktShDGxDAz0r3+izP6+C7T+SYKMDGallOIJLMXoLinVdFRs2\r\n1tFwnlKhx6jYWkMqGuWmPSL7gpPoHa1zuIIhVl99ukvAklIZKbvSzckGE7pt\r\nw52txXwOJsUNjBdEDiOuGK2khVA8EvkQvje/QVXqHfNV+jTaH0qApmvG8ly4\r\nEX2CKRME46owO9oZBIyjzg6yk29l48ZACRHprxJasoc8ocg+wwNm+6IiVT89\r\nIVP7QLzbYVoPJ4f5J/qNhyn7tGdBoyn7w/wiQEBT5lZ6PYC4pRmL52Z/Mu7d\r\nCTt4S/mTV52lTVxnA/SCUO07qSCJyessZYD1Rzkbpx3zqQZFDG+JAi0gglPp\r\nRAJGK20sGdMSG4ymbS294VzfDPAHPvYBCABVObNBzV+fFjI3x61oJWN2fvfS\r\ncVaZt4nBLO/C8SlTkkE5/eiNqPC1gGBHhrPsaoBWXiQQH+OBvM8lJs/xGjQ6\r\nw+KOkZUIuxBF3wlw13bXxfRpzobNrclwsUB5j2TbUm9M+OsyY271q2OoOpXY\r\nHgqpT3FJMWSnEeeuM86hPJ5vene4GgCORkI=\r\n=myTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/density":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.adcdb7db9.0_1672935731211_0.8644685910169416","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/radio","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2159a7a582cddfd5f790d4b504107f22a4127ca1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.067af7eff.0.tgz","fileCount":41,"integrity":"sha512-fFM1iibPiXNH6bMtEIoGyWqPjq9XbCgqDxwSpgh4tT/dFu0pgnkxgMQWA2ticekOfZLDf6iHlpK7ftp5sCT6GA==","signatures":[{"sig":"MEQCIDpxA+Fy4y8FSax8vDyoHQXsuKwvcLYuQQ1psvEI51GrAiBs3MdSC0iYJPqXuRiMiq9rMvArEoWhaUXwjrVzv8rvJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxZA/+JqVgv/6jK2tshwbTczcjlPJgAIUmhkl3ianXXD+qu++zokJx\r\nyeDLXuoMcGQH513dU9HZVhBCrhNRrOWHc77IJs6fpgV2RH6A4/9SrAHUhWJv\r\niUbzz0IAMDP52WpJlBM9whP8Cdqs04VPfM5dqaEy/BuXbqFoR3WwLgS6gHNj\r\n9Hl9jjXVlQugOOAGXDWyDQ33Rh7iQEdtbT7AcNsWug+jkWOg8+Fwmz2kNVVQ\r\nmYJcLXcUuVY0uwIT1Xj57zniTt97dVNUcbveo0aADqY4P0+P0gu1uF6t9ynh\r\nQh5iogZzZrCV938eMlFVjRcRxmSe7EaKDOV1AZjkbQrOV7VWuiQ3ASsce8nS\r\nYC3y/ehe7s7N2pQrzGDsPWDNF7wVY5rkyrs13PdDeRjLLJxfu40NInyVtA+i\r\nmfCoVq2JKv9sci1riTW6LGHxOukYF1J01C/kB9k9fFPeZ1zLbZpeo0+dTPJs\r\nBv8EhPMtQB/TyqrCsp4GVCt0nkp5V6ON0Jgycra6YAsvdMoIwUgN4Cre0DUz\r\n4LiFpyNrYxUGse2ZcSZ2VB76c2sip1CE5DMluQyf4XKYYWqv0thCGn8YrYX7\r\nn4XYxpPlJm3lp+aGcKOM11awvEGglLLJ74+dU+Vsj9UYOIySeznB6rDPXwG5\r\nhaMz1aeOl45EXfMidFnL8rkTyDt0JoghEjs=\r\n=rcy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/density":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"15.0.0-canary.067af7eff.0","@material/touch-target":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.067af7eff.0_1673047008365_0.9696981854066087","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/radio","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea141a11c3cd25e6e0ffc3323f077a907e31d8a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.21d1196a7.0.tgz","fileCount":41,"integrity":"sha512-UYeqnPxRgfvKQdPSFYxvn2Pv6cewfULthN+QaJXiLTw88qRQn6oKf6oc9As2UbDeHG3OnORnUaDUkg993Ta1bg==","signatures":[{"sig":"MEQCIBLhfmiEYJakMO8MlTby/FPghIhrAdspzeERz5IxbgRSAiBUehmhbFVJDuvWKLbvgZdLY1Fa2v7hsCULkrTEOeA11g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqACA//aLS0lvASGf1vCPw7dCiAIwLjnKPqM/tSBwkr2v0IVsJAny0+\r\nF2ThVqeIYn4VtVjHgu/3mtd41YyKcp84n99Uge0dOlTISOpn37+qvamZul/8\r\nD5VMBU53IwCGSTYZkgw1w30Xm7eShD6eJYjOCC9sR8WhF13Lv/hRxEcRaUQF\r\njqjnHcxBegrfL1dc6x+h/DeoZ3Fjjy89rXiErGjFkd9+DNdEyDBBR0+V8nzu\r\nyB7Co15njcSd5+MjGx16ZJOSj87suYuBFag2WUX67n98xyWHs8kPgwl32z8Z\r\nLtmqIIdYrlyy3aRxqGVN8kRJ98hBlPZZyN+Swbz/mSYC7opOCGrIZ6MEnjS2\r\nd4jRPn+ct5OzYuht3KSxN9c+L4rgAGu7xSs67D1lZwqucA/rEZjndyASGzR5\r\nWuP5kFToykJxdBrZNEBy9NEhFBKemx/9p2Ug5X/W7S2Ngi6C3aRMlYl9w4FK\r\nz94XnCgjE3Y4TC+385mCGG6d+67Aucwgwvlqvzt+5VuS7kwKGy9YBlnmd4ba\r\nPZ82FKwM+e6a/ugJPJfsqf1HFQ2O3Ml9NokK/Vh1Y1xdPixPnhrDVTJ17au2\r\nDggr8R6OdTR8XOy3xyrfcjwWHh9vEvMwgGyXVV6p+/aPZ32yJb1cPAm0l93K\r\nG33A1RappruzxZQpn1jaECdqX65JbwZRetw=\r\n=g3Gg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/density":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"15.0.0-canary.21d1196a7.0","@material/touch-target":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.21d1196a7.0_1673261020733_0.40376945694323685","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/radio","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1876788192f0fdde3b46094082d49b82554369a9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":41,"integrity":"sha512-vEwWpm/8YP0PamYOjceuhCz/AbLoK4qDZqusyiS90Ft2Niv9rClanUuAS9nALPQG8eKlZ8xEU4b2cZwBGiEREw==","signatures":[{"sig":"MEUCIGHvwwjxB644gLVvT5mTjWQQ/o0wcVan37Gy4gNWbwq7AiEA/Mczl/dZMCQm5P6bKPSqgyT4lLQJwRCW+lEvs2TZAzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRbw/9FiXF/MNrkPy9QltouGKWENnbhrvvoYTI7+FB8fQFw3cjMmbQ\r\nb6CYLdXt2bE+CnUTXJfaqDTWGg0Ez5O8mkmMiLmkzvYiDNo+TZMpBPHeJvxL\r\n48dvYuYnmZtobumselIDBaM0n93cjHZC/CdR29pzbvI7rvtXiqS6pHHH4trt\r\nOItEB4WBm2w/lATRpDs8rOYp8VHIup62whiPTjCOG3DoczuOgILBctipZ7iq\r\nuQLaJmTiRz9eSJc0K6u1Es1a7OGlKTZQ+u7F07sR0MZaHxEJmMN9OkEjmrZc\r\nPd81y3jfQ54yEavNNLbu2eBz9LmwspmkZ6xf6EvJc5o2Ot4EVRxqiAVaJpx+\r\nNThuGNvuSVUpOd0woEsum777HX2ky0MPu/m62EyCKz2OxtFGF+IYlr962sOl\r\nn3byqKeWHg4dm5+S2urYQdA+oooVtIMzMhZ1gvqywuGMxJaLltq98Kd1AeBe\r\n0wNn19BjPi4SQ+tSv1kYChH/qnr+JlvR32C/9wmEv2Zc7MZ86auG1lmIRKXP\r\nNfP2eD4u4KxM/4gy/s4b1UA9rsVwcKUPtAGPwtS+Y1Jpf3V7R3x0rete/GB6\r\n8bVqBj5BgccAlqcDC3ceHxhizbu6RcsF156WGFuESEPdB010WnH4mUmPshxn\r\ncsiBrsJtErxg9guT5weyjc5v7jNRSoLS8zw=\r\n=QyZq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/density":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8d2d8d3c4.0_1673303081388_0.6189288016236905","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/radio","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0160f1ed435d5efba6c7821d6672d79962c14e7a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":41,"integrity":"sha512-DWO0XGhaa3B5aazurrKJYYixzLS4TZYJwo0R1Mmrfi9/14jU2a6suAJQvDDJUoyISECJXxdvPTEDpPTRGRrAIg==","signatures":[{"sig":"MEUCIQChfkGZt6vx2Irx96M35+xDrUCW7KWGWjTDcAEy07wNLgIgZFfHJgFvM0kGPdwLjkSJ6ZUD+t2ERuFOHpyWy7KghD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZJGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFzg/9HEQUWYDbq5wjYtC2NoFqTZebMxeUXrs3KgR2WqRqlShsFUrI\r\nI9a+RizFa+PVAYNBGbeZuV87yMmG/0QsVpJDrc6NGtzkmmxwrhpRNZ3peITD\r\nOMuR47QzQE4vrD0NgdIrS3zPVvZbU+bsfZ4axvHlhPyNEi0QaMX/63UMI1E8\r\nL/tgqAJqcu3Opzf9l+Ceb9YWETwIugFL6kDvWOB4+KQdc81Ai67fcz6EC4UN\r\nX3L+rajsVy1yXjw1L9tBSnPtK2XS+410fnPFC1ElY0kiSuAI93XjCOk3z7Eo\r\n0QRKRjYEN3pCXwoWa38Er7WdWfz12ZeK36n8S1xT+nI3GM9WCaTUBXe5jlwM\r\n+Ptu2yALL12HILF+Ypw5Or9E/78BNacrL1j1CR+oE59q/w3KhkgEBYjIF/jB\r\n9dM9C5tuXvGXQ4jhBFZ5F0dt4Va7Ody+FjlwPM/UTMejD+bx/GWeNY2NJ8S7\r\n3UxEEWjS0ZeBECjahxI9dwGD9rjj329b13HV1HXjjD9yxsqKQFX7rXzuus+X\r\nFahjti2KY75MdkRU9vQhe9kii3rqJvQjRmK3tHJYme6FIhGAa13Xnzw5DobP\r\nEYaOhm9jTJa+LKe9SS72BMJnolheIOt1e5PyOGyc76BzhWpLc/a6tOoeIAQD\r\nF/KIMinfHOabeenisClG1NRL5H8WDwXRAjY=\r\n=LWL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/density":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fc6ee6c32.0_1673368133948_0.7260007408368792","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/radio","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"616acb965ded77dd5ffd4a419d44f0e9fa34c39c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.73537ab0f.0.tgz","fileCount":41,"integrity":"sha512-yH91Ph+6bBofZAfdFpfJhf2AgP20hhH0gc8c/0atASVYes7EhtxXmb3IQLz8WGYaNJGobpdNLO+mFZ9dxVMf7g==","signatures":[{"sig":"MEYCIQCL6Kd5t3l8k8J8swdsPqQTjhX2B8wPuJaTyRQEZZt4uwIhANpQLuW72NIq4sLfM2szANwDJCwdPmVmWdqSyOhLikkJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaqCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1tQ/+NGbpwdXppHOqs1oi0OsG1J0DJxL3P75qFE3e9gMH4xrbh5ou\r\nytLIaL/6mA66vH54X6txwp3tAXhSdIPPdHznKKi4A/EjB2AI6Kzirupsf76j\r\nEANYaZocM9+yUO4n/J5XYJZbBYgg+bqo9VW4X0lOG1ecWIVQowQAe5nMm4vX\r\nI8t2k1HMj0eYno7X6XTaPjfarBOFi2u1YBrEqd4o084oXlvCzdEhQG3tQK0a\r\nDySYwMCiO7l30okspSJ9RIKshVbi244ueYHrWiN+XDz85oyMuDGiGSCwoJ0l\r\n7IrKSXBFMLnKsKSm1zdk8yMWBMS+9rdfLDDFAxENjMX5wLkWy2rl52S1W1uL\r\nPtqLSJDnRSvZlBfmU8Z8XIfZ4bEjfNP4My4fwPKa92OajuA6SKMf3S0bnywf\r\nHMGzdOPtGWefb1cckAY4r7Vt/xkF2qLiqP/N25+4CHdo6NyGXUoVR3IlHZJe\r\nBLeVOZn+TahizoG7SyE4DaQY+vALq6OCqQi5wSERh7GjjrrvWV2SXw10K9oB\r\nAm8gjdXbu4M7oQ5/XpJyNSoCjNkTB1KxjOFHRyTFvLTYR7/W+j23d2DL3PAJ\r\nsU6mohXOpXnwTRidUcbEpWXFN1ZRLZ54L5vgY2C4IkZggywGwI2XM+Aat1O8\r\nGNihZDr2dZRLIQOTPpJ1ZPEhze5W/ubbeQQ=\r\n=FICf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/density":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"15.0.0-canary.73537ab0f.0","@material/touch-target":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.73537ab0f.0_1673374337920_0.20960300688131417","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/radio","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2846124c1e78d6a513aee8ca3bafbe3ffcf1a9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.684e33d25.0.tgz","fileCount":41,"integrity":"sha512-U3Eh8sNUA8trDla1Bq8Bo02foxYvtoewaKeF8A8tAju81XZ4jRiftfOsOWZDZEHCVbbCB2QwvutvFlnay5n+Aw==","signatures":[{"sig":"MEQCICkLl9U4U0YnJIP7gIv85aRJgzTX1cA/RBcJqr9F/1xhAiAzuEFWNzSUM8pZQJai/NBVk0nODPfMkz7jLKuBBC+s4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbo1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/oA//V7NucImTGsa40A6ljtR+EsA9F7H2cS0zhjF0Hlm1GH7VBbfA\r\nQGkYIySHZ8sEB0+KcWmzxgez4Jk9ujF+Wc6Np89/qbvd+WWxVKAzcvgTlD5n\r\nMFFSlaUmHvj3XmMtscxvfRQTxg43F0NtScDAK9hh6ddTOyETSX+3A7BKUCGH\r\nvFK0RjEHFC+XbbnSD0tIyncbD3TFm8EaPN4hqY6KKCL9l11Ok/yQSOlUNR+2\r\nskJ5F/27aEm0EGEW6Hc+HEe0ezZtgR2Et+E1ODmoY0w0FBe19YX3CDPA91Xt\r\nEA9WJ7FMipN1BcRNOoRjIUxB/0LpSPj9mnj+TyYpO3JjdWU7fLBq2SLVXVb7\r\nTL1iUffve9zNMPI/Cj3215O5w33eZaeb4X7ShIW+dfoQRv/KPPpXO02DYH53\r\nLk+HWCV0kldGMnkdEKW+YYLaKckbbA17+uLvqsmHtWrEtN5LxPHuxyLhaufI\r\nnXzH0ItnclcsApdKZJPjkylQUnUe9bEY7LHq2jjE0ojVft65xariiTeFeE+2\r\nggphPDtwMtPTvTmb+HFHuMBymT86xayYM7anC0Nqbhw1csc1Ze9M3Xt0DXK3\r\neTR7cJsPl8Q+3JJ0kPxk6DAyEFQwzgK+mLfK432qxayXyTgLQdu6xgD5OsWj\r\nYuaSz7vLIysHijMNeSgiYuzyEGxuFlKAmVk=\r\n=Zv6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/density":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"15.0.0-canary.684e33d25.0","@material/touch-target":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.684e33d25.0_1673378357553_0.629692152220005","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/radio","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be8ec42f425c61fcf965d0a422b1dc173213426c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0e89aab6b.0.tgz","fileCount":41,"integrity":"sha512-Yc8Qup/qn7WBUqauFO5uNhSP7obK9TMb2gT3vVXr3vCfGhulf6l2EV9nBQrq3Zq7xrPASwmMkLfQ5I87+gEhvg==","signatures":[{"sig":"MEUCIQCr7wtyvxC06jEsODGetTukzUVVtMAgl1xyhnZIixBT6QIgQ85ii6N2yK2+kWqEwos29cDjuAaPBdjvcEfqIM0eLBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphQQ//RXTKj6EAjQBEuNLFZLvmV2tdrDyTFjCpMKox+WaTm9l8a6QU\r\nnSuPAto8+uKYl9TH9syp7o4qVJUmqSiLnroTtWKyaG8YqP0S1LD53qfxvF3+\r\nxILY4Fg7XEVEjY2gNlJiHZi6HpfBFbwcTaK0JvXi5TFsjD80LAPkRVv3CG+d\r\nwiEnIWJMGTDvosltXXO/rQ8sBEjcTHE0HhRWAGQ4nKBwofTBD7am3WEsl8W6\r\n6w6NVpm39qjNJ8iMsTav0LIcBKYXJIRds2YUnxzqSgyFf6nqeNF/gxCmRb6m\r\nuChtROjYsAA82hrcrc3ptJCYaOa7TGW19vIxhOZFdsHzB1dEG4c50aSaOaxd\r\n2Fae18TSC3RF0nTqqJyTWBUIlJFFm5Eg+NGdaVPwZQfHzGMcjFT8QXaNr93r\r\nlFTqT/yRZnYP53dQOIP+jygdq+puIbYjJtZZHao2k00BZfQvl3sZCq3RJzD6\r\nSXxXuzlacqLfsbxVCskigahN0rs3FCjh8tCCET4ofJzwPFLpk8JrwcNt6S0S\r\nC4Hc5vjvkbtW27dvtPkD1EwIWzQ3BjB4xkR5yemn44UgcAjULqkSarj624ia\r\nAu3CrUcH9DOckFBUcMKhnf49XqjcA1sX336/2U24k7PyyM+z3Ll2wNOsSjKs\r\n0LuQdbZWrxk9buYQeeNZODtRE7sGYBZ1p9Y=\r\n=NS6s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/density":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0e89aab6b.0_1673453889218_0.19460568762164066","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/radio","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336827016b3328b47783cdf23239f195cf6e548d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b0103d10a.0.tgz","fileCount":41,"integrity":"sha512-agvQ/GC4Oa5YPdHW/RisCT2DsIv24EyDwjFcvkjHR3yvssXDCUtLSALqDt4QCRx1N9wgHFLN0OkacXUy4zjqcA==","signatures":[{"sig":"MEYCIQCaKMOFrVbk3TKMYgtGLf5Gc+5rE9XpFh5O8Awvu7TLGAIhAPW5gGZAJ3ij61C03wzJq+Fmd3TEb76gZC+Rn3dPiZqY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwo4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZDg//UkmQG5hTIcuI92L02ctEc4S8RGVcWOUXObkg9Wd/ZrZ14N5Z\r\nD1VtMR3rGkYLXlAmJ1NHTR12qhD5v+tBZ7Zz8sPjzybx2+G/4msJY5+pAX1L\r\ngnSo5hoQXKUCOqVt5gPBi1ecJa1gd/dKh2MnGo8aDmcTU/V5nLTXJ8kF1yfO\r\nxDE5uteruVuuCrHpetUTKDckp8TwH7TyB3BdQDMbcUeHId/u9YsHvSikhnTR\r\nk0bB8EwQbd6MzqVEVFXbT1dUHlBRVDqIyRyvQpGGFvT3BjHNA9c+MrMbCOWO\r\ngBxdZWuAFCnZew5o/svsz/BqDBLQxnGVTu60xPFQpVJQBEY5CCVgF7wOVSbe\r\nflmrzZ3ZcYyaZyNwceozCCBB2ddJcZn0wCPXLcDfT6rqVIVqtec6HP5J3EOL\r\nIyoSplkfpGWRKscsiKUgmtZb/+G8WYBeFccklJ1KdDWexnkXR0i5Zj8HRnQ+\r\nSDrb8Dg5p6uGP1noLxLpq+S4ik9dVNW+AAyzAzgJjhTAmzHpLNSmnvGqKZTe\r\nDJ35hQXabs1QuaBCW4WR/Ka2SLV42mRYb8bMY95Dp8hMF/b5TGO/20JyuC9w\r\nlFWM/rpA3z10jYZeV+wj9FeWP8YhmHExtfcNWV4KFY4quTudq1mWifpQ34A3\r\nGUg4aFkl4jY3NUyhDYPHQd8hmu6x3IoFaqQ=\r\n=6kHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/density":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"15.0.0-canary.b0103d10a.0","@material/touch-target":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b0103d10a.0_1673464375928_0.013360787095406224","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/radio","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfa43225dd1050fd4c0aa4e297f8380b13afee69","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.50e7a5312.0.tgz","fileCount":41,"integrity":"sha512-x/xBtYSZJcW+QTTqNGGumxTwk/ozou27gNM6u4A+StAwDn4Tz8REjEC0jE0Rgt1lkkZGuwlodUvcRwenSMj8HQ==","signatures":[{"sig":"MEUCIEXR9ckZNqJXuOqSLRFDroGy5Lp6uovlTtYtyc0IvmfAAiEA/6prbgfN7L0y//93THXRhFZ467qM3Mqff2jdWr2MMg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlgw//Yv6uU29atuHNnh2sTo44rak5hsZOceSqmPh8t+Z3wTD+W2Ft\r\nXgroVs3bACcfaDJfnMlBKFnwCPicL0e85CIzRpimYjsUehFJ1RjWl4twTZEd\r\nGXog7c+otz2dGViexrfxfeyjeVV/lY0dEK96qracN9eG18+lvB4NyWhNtzbo\r\numKODNu5ABAl1LL4Nz3IvDqH+p6kocmvud01qMWgdNhj68NZFdSoLWz9cLN9\r\nyPTqzdi2bM0yNIysuShwnp2/YKFpl2v2TxLY+QHVkVOuMQd9EbhB4vydvfdQ\r\nVbkvElJPoj+x2pBGh5QInObsbCOK0gKtG0admyOEn27fVj02IheZKAwpaQry\r\na2qiD4xNlGUfGk67W0lY9X37qV9lFukXrbkYSMI6zT3XpIFTgvanccpb5fKw\r\nefzogMHLY0QYDqEF2pSgrVTrKzt4cCS778821yjdoi/I3OkLdPzGTj5OGOhm\r\nYpsrl59jlnIYyipwhXvNSscCEkh0abEoWrE9+A2g3kCIvWcLkQLfbxGYvk5n\r\nzaDUnlf/ZTEz/P+FawCpWtGzCb5I8j823fvImbb737RL48ym0s/uG2vu5MmH\r\nBn7PjqwIUSKlLBsrNGi8rv3fAC4HvOTo77Ust0f2JkY9z4YvWpc1quwlHmvk\r\nm/ceIg88whezpQO0UpjaYiXXjA/Q5Kza4HA=\r\n=+tjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/density":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"15.0.0-canary.50e7a5312.0","@material/touch-target":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.50e7a5312.0_1673470497502_0.423800145925495","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/radio","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c39497c2734253e222561dd2baefaa8da9d6628","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.202823f54.0.tgz","fileCount":41,"integrity":"sha512-u1/zxq16R+8FkQSrcEVhGCNjP3pxczTfu6TDsTFmbs+gpYv0lQFPFsGOkAHiRGZHM6R349FS2WSSgImG+rQWDQ==","signatures":[{"sig":"MEQCID6c04A0qFqWv9JHQCBitJwIcojUjfXSYzZ2eQ3isvsZAiBOH6XxB1ysC2+5oqg2ggaLxxZ+mukxIMdFPaw4SZlmtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp28Q//S2OpfS+QJyvbFptxkkwZYXxX7e2scGLVYASwoaovzFQKKlo2\r\n2C/S9IqvFujsmFJ/DYXZD0vzXnwCVKPZL9O5q8oJA26o2mn4AGGo7n07pliU\r\nn8CQUrqKturHXW4HmWa7yflVNk9s2Yj6iWt/0J5vgY6/CiKbtLjYbBNZTnow\r\nAyoZzCWdRJT/5MvZ5DU7NQ6/mC/LcyviDClvwQFcmz7fgAAjl2bH9vZzCmGr\r\nRGrzHKxOaDAjaOJNzbTSx6nGBczDDQRwK1d+Popg+28KpLtkKcp4kJy1Sj0z\r\nFT+maz8NsFUHuLFZ8WdtaFd/4mdXGk8BnNLohFr0kOaEsB0W7OLGDdPvXjFx\r\nNWdauNuajEirVow+Ll4jlca2mp6zRfOEIdpp4dQL9TPdWj65iRo/za7C7hjK\r\nSdJQjdXheBNE1NtxCtgKQUHrW1L8GIz9+7jPHLQtw6d/ACFSSLeV4fy0Kw49\r\ne1i6WpU2XqwEaCyXdvveOSYauG82slLjtyWHYrpFFvZOQ0RDBqR+6BRkY5Wb\r\nTti4SiqdfrL8E6edthKcmpekys9iNJGft8nGGiWugikal6BO4UJFSNTMjxcX\r\nHQOlb4e5dfAfs6Spi5XCs2b6yNGD79AEeLavC0tWs6M4AYF5CaPSvEY629vg\r\nNRibC5WSRHXzraN1ZiXLsAaYqeCY4m/DvF8=\r\n=TotN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/density":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/focus-ring":"15.0.0-canary.202823f54.0","@material/touch-target":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.202823f54.0_1673472989302_0.4551610200120817","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/radio","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6426a64d3df6ee01221f04cc7eb168051008f754","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.199fe2a2a.0.tgz","fileCount":41,"integrity":"sha512-vrLujvkMHEW8epCabhwzpW0gekOEGXj9MJxLsvTljdt8/QdhcvWHS2BEJy25rpXKZGdE9fK8qrla6sTG5tKN8Q==","signatures":[{"sig":"MEYCIQDX3HB7nh/S9RUGIXpJAQwMKiVo9ZP5mkWiIK370XLmagIhAIQyxjdG9jpUBy1thhtFUEWJrgrcqRnNxBPnOViU9AQ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol9RAAgugmT738vrh/f/kRprfXrBwZHCIGvKjvYErXNXqaGUQO1JWu\r\n1sjjZYchbUeHvBuzpSW29UgQ3zbXvaTN3mOQF67TgRx5tptLJLiP6SUvTyz7\r\n7Za+/h3aT21w3Z+77idIsaWrBJz/iP1GyyuwCoMDgCN696tECg+vQ+GFU6Iq\r\nolDwPtTwEg3jFixctdCmb8cXzUaa33vzGP2uIgbnTM9sFwYGx79RzjtH/k8D\r\nb6viTyPeSmwMLHbmo1qXY6Ukz8380xOreaOa38OScLWVTF9vwBM1zmb4G7VO\r\nVCtCrSInXlb7UWzRMsbdsi/uSen8c7Xbzw2OfCYpxbsDq1Pazv7GurNQ56Im\r\nsurKPlJqz5DtEIUk7QcHU+fVVZoQ2dos1Ci1P/D3GY5NRZID5w4oSwyPFHMV\r\nLmvzKxL3DhCQleHBOwf0ovx4tBaHeIUavc0MSzE5mxJRK+hgdXOLQR4s1IS1\r\ng3qskQhakUGyEYjz2+YXX02q6LF0R7y6CFUjlPhTS+vtVrEfGvBIKpaP23sZ\r\napvIseoNDi6b0//vI1WXyGGBDCtuQ6v4GI50XkRAnw8Wo6NGQTPBtBvNBuhC\r\n7DAP70NVoReCAbCwaPSF+oiEzDWG7wXk6cSxpOo6HAES4wiZpygrSMzAA2l1\r\nMDnt5pjwgbNFP791JOmoyxcrFujLto5Jujw=\r\n=9InL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/density":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.199fe2a2a.0_1673474185612_0.6330882477595496","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/radio","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"343df824676d77b7c63bcfd4a3995d861dc75148","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8c0786d6f.0.tgz","fileCount":41,"integrity":"sha512-WRZHcg1Xfx169+c9IZ4IF2Y+0UJW2YjrUV4U2tF9bKEWfZSp+Y/4RR49v1+2TRei/kPdwZBrd7iHGmNgaFGcsg==","signatures":[{"sig":"MEUCIBvsmdOAB1YmEAyAsruGreB4vbVimIMrnHbU43plPslPAiEAz/81XejqYVtOqcVUAMFhQvUUnvQa93oOcjC9Qf+cTIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquQQ/9HGNVppm8nnY/M4MaH5ow2U9q2nnpwCgO5nMnA9EV7n+nMpZm\r\nVdJkMw0gtEzL0rQK1fTW0SBWhm2H29KTizR8ILCNWqsp3cB2FCa7PM2VnE0M\r\n29V8vuVSBz0LdPRxPneyko2B9lWpPdGfpqOu5Sr3cV/qeO+VyoSTQtATM+51\r\nmzYstTrFTfUouGnB0YfYsav7geVqYZ6zqIf9ELF9tfVZyq9MLMvl8quSKhhp\r\n4aKvV1XOzws2ccmT77Wb+fllT2PKCTuX9/dSmULtMji5ECKxwRx94G9AHiYN\r\nJp8q/bDIsqLnnVtWDeCbFA9p78ejLDR5JUq8f068ML1ouwiTyoQ4LhI3XYmB\r\no07JtLobw5SKj/BdlC4GBtGiChpIVrI/Ig3QKDsxjI+pVdczona9nKXQq3Ef\r\nsRQe3ExhZkM1bv4vMR45heAatO2Mbc5nOOkWk4AuwRgX94Eu7lKnyuV3D3nF\r\nXTcbEhCVVbpv2qdv8zyRFya66S5b36kJc3tpZUICAX1amns5YvaQEkaQ/jjK\r\nN2zB5jEKiTMipwCxnlJIcLwi0afzeTqCffvtkUhBjY64sl3J4ZWY2HT3skh5\r\n6aUaNUlUMyxyW4bNHdpAAHChNuJvnR74BpI/4zlMBfTC7nc4Dil2TZ8IIoVc\r\nStAYZG4yjaVFl+nEJjQahJefS6mKkMM45pU=\r\n=iiV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/density":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8c0786d6f.0_1673534222685_0.9186072984959794","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/radio","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a1d0ac22cf13858adaae908a146f4e680abdff9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":41,"integrity":"sha512-1mu45bMpv/fNbMalTB7e3TsuUiYqehpZ8y44hWP4NDcZvihMmdOj74yargBBG4+nM8+7YzSyCeuQybbJCjuCEg==","signatures":[{"sig":"MEUCIERf3mmLbmjD9jNDMyaMcgL210QblQuQcbeoeX4BdbTJAiEAudPA2HPYwzAdSkfbp3RKtzE99aLveubDEGaeFUbq6pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Lw//btmHIiKlZM8d/5b5gBPbne6cIIoPKiipo254/M1FgG4yvXHW\r\nETk7eSlEmEBubz7IKnYI9IAGLcMcJAMa1g6zstJmYi6kSIDzfA/DU0Bzt8UH\r\nS8F0e0RptmQ0+B7n6A05SgTvRi4b7yl0RPpDawKjmAjUHtOuQjRwu3/B7yoU\r\nA4eogFER1TRfCR0MpaQc/4CramKHPd+yjOua1+AjYHlhd21hImgqVWddWMwU\r\nGZsgmmVOHYOlN9cceaG0N9z30J0fSTPoB5p8a5IcmBpnrMp44sptddER1jJi\r\nasAN5ED52OO89BZiiLVLN5tLmKEMPbfevBj0AufXry+VrVtkZY4MN/8+etKd\r\nhZunLtrQKEhKrLX4A5Y50F4qhrGLq4s+bPVGq7uGk1fYbKFuzOo6Tn5POVmU\r\n0+f6vlploi9aA57csbJR5ksycA8FhBOwKNC5uZ2oVNdIKJFVg5Fhjl6hYEdv\r\nlnI5BX7XWE4+pmpfxQLC/IFEnewnDkun0qv5uzoshqUbTnsDkH+KSpJba4ER\r\nvwEo8p0ME+26Hv9Vu0YP4doR1qdDI0N+tT62ZAvfg5dd7X2F1LZeKpsag+EZ\r\nl9wdcrDVIlaXe6exHKOSVLWX2xlhi086ia605oiUJeP6jvmiaimXBKQP6L/P\r\njE7L6WSQyHa2rU2VDs2jkDPBwbV0LM55mEA=\r\n=2/dA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/density":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8a74f7c6d.0_1673983520858_0.35032859118721227","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/radio","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a073a3939b7d53fe16934bc4926658eb4b68f7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b4687fdc1.0.tgz","fileCount":41,"integrity":"sha512-aQ8be+idWB/TxA4qP4tNY3VmWQK/W5z42avTZ7YavxtCBZpD7HujreLYeR2ZmkO05BprS2tpvegPw7Q4E5Mp9A==","signatures":[{"sig":"MEYCIQDn6fAmGlDpAVXtnW2EmihFquXi3u/VaXonddJpY0HhWAIhAIn3d+7NIdgE/4Pu2WMAN9KSvrT+74zB3xaiHmaqC8KI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ76ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofTQ//ZgWREZh/yV86tJ1l0hxg6RuURiaW0wiQvU/G+4WFd8kA0lyI\r\nLgvnhTDzWBsYXeeii0udSsm94A/FqwDk30FLNgC98QLK4LAhM9iEQAsMjoC3\r\n769W7sW0ZrLm4Vc1z1AJEKXTcIzXsk9g85aqIx23z8t06E/4NtWpkJeDtDJ+\r\nIlP6tX2MKx5sKvPLgo+BS4PdLWaeyjoFw2GYuLWxRQoVSJ7UCa5E5xwKcf8C\r\nAe9mAdHa3cj8J8ULcO6NZ7udNE2uwuxWCQrf3wr2PitAdhIVt7ezQXiBtBDo\r\nkx5GqixA8WgmmVnTzjqyIlrDoOeCjk9bBE1W12x69zubqaGYkArdiemuN5ZW\r\nlmSoyqo7kgTErnAZd6bmEfO5eOhle5xC44kuFlZ5YbgiRJF6i2DdF6LX3iW1\r\nQSjV8Dbga2xshnY6bZSjtxxi8Q5FFtb51CbHwX25q+rH7+vnFNDVFDWK9nbd\r\neYBtjl2wEgguvvy1Aul35Nq5Z4OjPQRwndx47PdUBExETMit5fBGcGzoLtQf\r\n3GbQrkX5L4jEV8rclDd8FBTcjvhJUrTkCJJv2NsgFgxOQtLy6hdlt07pKJnd\r\n6O1OrGWAWto6AJ+iMLZE2qONS/Xpknvl7Rki5795cw45WQ+LFTXYsIRitxUG\r\n6OKy2yGZXpayTGYhdK5cnYPgXFa54S2zUC4=\r\n=229F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/density":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b4687fdc1.0_1674157818286_0.42030920825794205","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/radio","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79599e65f6c487ecbab07084e8379d045c0a86b8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b836b9892.0.tgz","fileCount":41,"integrity":"sha512-QoN7SONc98CdZuPelteI/6hnIDfsHn0ceA8vZmcLIVBsOHa1PN4B6I9OVBBxra1ey1oixeT8BpbR4F1xvA0OyA==","signatures":[{"sig":"MEQCIF37/fn0ifJocUMWy/aU2j1n8CxygeJU/3PDAtbS6yzNAiAFHNKDUWXeUKQU25Y2pzzEhQ//DRzWkvjVoRSvlnSpNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYwg//ZGfoidPlmH7ZARmVlfFfssBVEr/+TSYHMtdremZjruaDp79y\r\n3uDqXDgNyhCZSur5krtl6ufCdyKYkg6EA+C0ItkCsBjueB7G9cKa8t5iFU6V\r\nLjv8Z1bulCtvsoNerLPZBIAQ7ju7M6hyHNZFZziNcvU8KS77CPsCjRqp3ne+\r\nx55G0q6IgflxJluag/Bntfjwd4aX33DmfqEJuzL42x52aizxi020Oz01cMqV\r\n9jD9rqdQTUedp2yOhI9ehKse2Dll8NmM8bxZ3p0VSnkCUCeFWlGE12pLLqaF\r\nma035hyNq++yO01TMFu41psZ+JQSmJpYEkWClqFlHYWkugxXQ4sNdEU6izN3\r\nuU8gFVwzYThb7+UPx/CMorKf5vyWKDqDXCXSEExy4+duCAyoBduHOAi/T+hi\r\nQxdMz734oHsqnArRSgHFr/9a+l9wGSZZ3fLZlURm4gBuNyV2c0/IoBdjN+tZ\r\nZ4t7DNdJ+NQlQLZPv5SUXy/Xixd7lEPCb8zYYSfJNuDUvpJ/jGH47kjrabEj\r\nFox7pqDKAg6y/rDV+aJePx1Moz2kvVFxoicCOJ85ZSQkgrhLyzN1mytdwqIE\r\nPht1/C/DwjbLhNgCOyGpbJbmaoBlzHoN9wZq/GzTrhsHjG8Bx1n8Jc9FDOa3\r\nGJ2S4VpU6g/rYWMRreqrpvcgbWxqNBAnNtc=\r\n=ufY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/density":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"15.0.0-canary.b836b9892.0","@material/touch-target":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b836b9892.0_1674599994095_0.7561654107383344","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/radio","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f3c3dfedb6d75a1cca258628f2e274e656db235","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e8912fd37.0.tgz","fileCount":41,"integrity":"sha512-yspAHyUsmVCmoh1RyB8LK8atcT1BMr3O+xIhCUHstAxnvn9gzYaeNxSU4YjHV1q5MNRoc9fL+TGNv85+eGFp7w==","signatures":[{"sig":"MEYCIQDhsS5gruWRnmZsfSDYDXu5J6ibbuHvgyOx25+1Hz+tlwIhAPvpa3gIrhW0Avqde+RDDHCWcnrjKYW/TNTsS7XXGYmM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sbFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZRg/+OJHIF7lXYmFtz4FN0VMArLqJ4FnaHa66ANJpx8YwryXh+ry2\r\nK/EpVDyBgyp1tB+zHt89jstSYagwEpHhfV8g2vVZtKQ57Zon4DqMXN80bMEx\r\nuaz2fQyYqW3c0Vzec+rJalRuaXw1d+8ULoZbmjfn9wlTZ0OG5t4ZaIECMy5C\r\nIIKEByOQSKzOGxfSGvc7IzdAUT4hxN454I9VymwepgHORwQdC0Fmt3wf/G/9\r\nb+47z5S97j3lZMjCbpDgr1u3NU9Ah7tPs0o6/MBTy5OL3Lue1XM4pSVxZj0+\r\nDmR4cMxYxGQzpnATsY6OQSQcUo06d4TMyy0biDyiKOpplzVX+nj/uQ7Qbh7P\r\n/EIzfGKyj9oFxfSrl2NedpiRLML51swsLh5tLrw7LjaQwBXPnW/G1kremIg5\r\nSZ9E5L5w81dbjCmSOnFpZ2QQDyBLcysVNOcLib6v3RJZMoL+McvyU3OPJYJS\r\ndwlFouQ7yLYq1kS98mH0UnDAKHyKFCFQHkdonOOIZFm5f1bvMDRR0q4PLBKJ\r\nu2iHUWbUprxL8GD7bZ5DcwCIom/GZh4lGcBRjSoes5qgNoMe/SuVH1ODRc8/\r\nx/zwGsQjVvwgSzIc8WyadtNQ30OUnaDYCVOGaWxasobpCWPM578UK7eM+m3o\r\nfet5IoS90KLz+Cv0zc3AOVojwf6GBmXseUU=\r\n=P6o9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/density":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"15.0.0-canary.e8912fd37.0","@material/touch-target":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e8912fd37.0_1674757829295_0.20729220075563592","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/radio","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68df95c698048fc2ea87304550f4506b4c64c39c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.16fbd30ff.0.tgz","fileCount":41,"integrity":"sha512-KG6V/Ysd7fi8HBJmZuSoCL/z6CVC6/XJiYIL9UZTZ5lts06QN8y1YRSVsUmqcbecpP2Y3qJYIrWKAHfX6PnZww==","signatures":[{"sig":"MEUCIQC7G/v09kymzFZs8xt2qfwWMoE/p3tFC+vlEwWosvZCvAIgZhZLhRK/7BXk6/30Xoge+TgmI3coYy8wPnPpVlxFJ1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVkRAAk7JYx6kqjbRRBYOzdG71Eg5n4G2NyetgFxvPdrLp4g41DSrZ\r\ngC3DWlVzYnZnc9shQYAN3sWcNnWkdxlfdVfX7giodcvU2i4MIxjYOYvdW/il\r\nKGVZEbanWFLzX89W6MvCmwneycOt+BE6Ihy7FW6cwBn8JrupMJB+IwTjfK5g\r\npPJ9gc4JIhO2SZZbZQyhBUUW02rzab3wEDCdXMJviNIE855q39IEpMVXOamp\r\n4T4prpJVno94o0bw4rshWmx+CDA+FtKfrGCJMNKtQWpzLnuFmp+9ZYz3bZ54\r\nLEl726UooqHAq9h2uJKmZtZygtXiQGOTC9QIQsXGaWG/ewQE10lVUcCyjMhy\r\nHoD9WolUvc+sRSyLXtqIzrHtdOC8PdUL1t29OS6geimAjylPyUxcoyXdllTD\r\nWLF8nYJ39Few9Ezi0L1j1oblZ/IM/+x6J9NtARBRjZInGzUidLr1uS7B5jkO\r\nJqgbJHWAjWA8hGrIt5jed/oQuNkLJNyTQgowOEIAxYLAzuetz8pSm6S7XktE\r\n1yiv58jBlY8k1GJTAam6tjHmoESSKbVti5N7oIvlJRgK2XNVJcxXH9+2ZH5R\r\nhzNURyhi7Zk9zAevPcmolD+MX0s5qSJZXhzA9AFhwzpYyYMRj820rdydvuoq\r\noR4DDmYyAsQ7wQqucKlxB1cb+3y1kZQ+crU=\r\n=HPfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/density":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.16fbd30ff.0_1674758119799_0.7630360024493064","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/radio","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c06130a3b03c1b0e1aa8bd51395f79416eb39c43","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.033ae083a.0.tgz","fileCount":41,"integrity":"sha512-o86k/c1IhrOnwIqjU+EF2x4ajkEqf0DkEW5vF0UsuT9M7PvC71Veu1xYXc3vRDHtUqbvuz9e3paewJUeruy8OQ==","signatures":[{"sig":"MEYCIQC7C1WwgdHUQG5F0/ZgIFY9dSKkz+Utb/BMXz/bMTnX1QIhAJqaMgJIZKlbU1QA/2c4loiaToMS1Kx5hHtTNA1sVT2s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaKw//U6AFyq4LdyO1p8+W+yg/SuE+bka/JkXsrIfvwGatKvfwZhYT\r\nomqV/NxNqYzYH4fGpJEl07Bqh1uUiUBh4LK8f2ZeO4T5QVecXKqoJGrKMCqt\r\nKrKi05+LiTdt+lOfYmj8jT9hInBf8Kei37rgAlhMk3hnCOEyYWb9BJqmAINT\r\nGJ3xbOvU/x3gcbi1fBVQvZKTohyCwBvuizFdR3Op+fBEtWWkihhBmjM1Fg7g\r\nlvRwnV6itKCd4E3XmemCpNpfqAJdorkjqq6ep+qertydBUN6mWbAfXqo9PRC\r\ntSf0uYoNy7OL22QwWHNuWwe71TFRbPMjkARwDk6TmpQfAtLebG3ga4kCkDZo\r\nbWKDLoRfhMk6t8QlXfhRuk2au4pqKQifQzSBIe2qKCbsgkKu+AbG/z9OHZs8\r\nEh7NZ3P/oETmZRs0sv+cswfA3VoMx6QzIA4seXs+U69r1fY2ZIWfgMC0YuM4\r\nWOsAuFwsBmn/n6+N+qDjcb/sXwWqjdRq2qOBsoJJ3ntnl0d6oJJQ/DAwm+0r\r\ncCp63Eq5qhk7qesXiWQxPoKv3UD/cVlh3NdHwuek/HMcmESH9ODNr0TlQXZL\r\n5/UPCJvOMeYLvzvX+ERZgaKGyLbYoKPzaJSWm6zqFpgTQmr6IKZnhFsPh8th\r\nDJgXhKe3ytP105xkgak9+t5V8uUKg2toojA=\r\n=3Sch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/density":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"15.0.0-canary.033ae083a.0","@material/touch-target":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.033ae083a.0_1674761258575_0.05882966141415946","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/radio","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef35a5c2a2d239a5e219fb0adaa53ad04edc85c5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3a705fa1d.0.tgz","fileCount":41,"integrity":"sha512-pn59fXHGn6vULzqPKHBjBJuydXNCE8n4Nv9qg3lPVLoTJ9e2iraxM0Zi+EFE7+ocDfm1yVLn9WrCgiMirjcN3A==","signatures":[{"sig":"MEUCIBrhBEwAsyHC3P0/qWsaOyn0cU8xnT0KsMaZIv7URW2zAiEA45nFZc7T6nmoSJxa03C58O416KrPJcVTsGz/VxsRXkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FPAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7iQ//XnIdGcWMatO0JH6/bw9zOv6OFuk051X45SiGf8gc10nZFKt4\r\newifvsPWznasGll16sh4ivpIS7WtQRZXIEWY4dBiYKE2Shc6rbSVcjyJVaG/\r\nwlEOYYjaGFbM5sJOdDb9OUcHVlv2S85pBYJ004jSWjhamwyOYcXTWURAZtUF\r\n6ii1B2Y4Ue1YK8mseiu38vdnAv7d636hyzE+1cDNjPaFkdPjqgJQXRx+ra7I\r\njqUD4jv9/z8ZM+tL5oxXUgj6ZVhVSquavqzZhKt4Yj2sJawYtVcjDYqmWMJ/\r\n+4mWs9AJ7IrGENwZd5rYBiZFDQBobnEMGglVKGHEO+j+T8mHStGpKXpMVlCw\r\ntFkojDDE7NLk7zNXssiuxjWeBfPdg2oce2TKFJwqeDMM0oo6rtzQds8RE/Au\r\nz7O+/E4k4ZwK+kgiRe1xUrzxW0B/NLoVXutZYmFJ7EiAQpUCI0Gunc443BNM\r\njw4knpyJw8UBtWeAaO1ZtyXa6mQ2Ih/t/8exmDKNsh5zPT5437g/gEcBJPTP\r\nj53+OpjatGnmwknic928L9TBGd9CjJmG0dfVlkxH0jKAqzwF2mrtIshzgQx5\r\njpz7wV68FcasRLuQ7C+OdFttQNGPGtATYrsL+iQAF/zk/fAdnPXSD+IudFeJ\r\nEmu1X640qUO5iSjE1yA0Ewp7xGwrDKpcy/I=\r\n=T7lR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/density":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3a705fa1d.0_1674859456411_0.4088084981106628","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/radio","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"625d68c9eae8a1b3cbcaace6e2e047821cb6b8ea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":41,"integrity":"sha512-mLirqJcsEou4n+vCgIrHNq58o7rrIj0Z6D/CgfKyyRh68OuFWo0pMShwxbM99/sbREj16lYUvodQ6wyzm+VEeA==","signatures":[{"sig":"MEUCIDS5AH1f1BXMrY0VPrBgMLYnS5T5ek55fF76L+zUyLXyAiEAmLvyW+0Mz5KrY4o6MHVgi75RWfZ5Yr2GcDMSiCAWaa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXUA/+OHpavSvXHYO9XLvyNx1oY6WrEOLi5ZLlmG7yQywMPlxwZfjI\r\nCICVm0toT9WmVvbeT8uNCCyqTixGwyi0fsbNPs0k2CQBsbSdpP+1OZ1A/Eyy\r\npAXqtX3h4frlGxJ0+Wgz0VJvPf3q7bh7qUepPlbI5wLPhwIdxENxsD6Gl9lv\r\nrwFGNqQHg4uYbAvzP3l2Lh1DeVGjCnW5T7lUWhxYf1KYSyf0AdoFS7+DX2e2\r\nznSuQuL2sZ32JQjR1eh3bRFQbXNprnflFhaCyqFw+4UCVG3gXgh/YlGEHeuY\r\nNnjXwiwg9SddSka3jhQA5k2H8g/NDShi/Rk6JSEVDZpBa6oMxZ9Rk8yoIAs5\r\nPglLDAmhsBv6r/MvWCTlwsXfAo0lJOkt/31aEDfP8NtKRiXf+U6WVbLbH9Af\r\nNYwJ9JeE5hAQ8VMhTNv19KyFEJLblvK+G0vX4Ovv0UXf0jpMSi5JkwT19/0/\r\nrd0EZLhIo8bEvVKusfKryPcHAwtucIZzNtllGbIRt4JNmahrPYt3K1IL1O3M\r\nm3dbwTpd1Oav6bqsRNWxJJBvyUem8MJBkiXkKbGSHrb5VcKMzTCD3QMkyIHq\r\nd4+7Pw0FjoxR8G2B6AK3Ih3loogb7rzOxgo+6mwWMperrZv2v2P/5PnxTBck\r\nsHRa/B3sKLOrki1aRNkNZcWLN9gmk3MgbII=\r\n=nlNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/density":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d6bea2ff2.0_1675179047170_0.9804974139539238","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/radio","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f66cd36ccdec8e888d8fe289a9e095e42228a275","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0c94182c8.0.tgz","fileCount":41,"integrity":"sha512-qu79nATiNUSnPrHU3Bzw+jcMQQe141vh7aVobI16tUVBhM4L6AI3eswNW9HfhBIN3GHCfo/qjbHzYpiSpoPZAQ==","signatures":[{"sig":"MEQCIDKbgH324Gdd1in8j4hodeHD66NdCawVSm+e91NZJiQaAiBNNEwmxBBOjfxjdQOINgokWhUyYgl6hnZBkJNH+Db6Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprYg//U/KG6+jng2V4OIHhllBId9VzIoOqzYkibg2rQRTJS0Oustuo\r\nLrefzPld/ZJJ+bl939+h1RFKQBJq7h+TRO5eToLU0QsyzFJAtvdx3tmMqfFQ\r\n1fqCec+2MT3fFcRWp3OlrT5Jxz/KEdHAgAGJsv9n9HEf5doMzn5guHNMQrss\r\n/op1jgnHn7QJEHxmZMeODJpzeO5+adM6gHGkRZAHt7mtPljUngTrazVgqb0X\r\nmBDnuhAA6C7XHYSDgV1LplUGcGR7u0uFiCKu1yRwHiu2mQuXL+NfZxIZhqMf\r\nQezIjho07CqQ+5Lflvn/+OQuZOHnaUV0H32wDziuVWVZxVvNc87//HyWYOrK\r\niJkBG4HmhBHJpPO/GW24P6KfkzqBtFkdO6S/H1taV8C0u5xbuyNCeVJ268Rt\r\ni4bhRln1PaL5iYooQfQwasou7wQhjz8EC7L76BHkqOxv7Um0LteROgSx9CtG\r\n0Fc2ugsANMneCatPcjb4O8tI8yUBDKj4nf2c25GtQSGU7F6COdZjPXp9vhMq\r\nkxV+WXVwYZ0aYYVjHHCOxtfSx/tzD3NDih07FSz6gIe9e5CvDVo5d9bSm7Yn\r\naRL9Ur4DEAjnQ7cNOuW6OlzPoIw5dNzeH8TKnbaa0uQA4zMYEHe9HyAYEMqd\r\ns5qeqf0tk1JKdEgsdi/v1Eb2TNW3vDTaEdU=\r\n=Zpqd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/density":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"15.0.0-canary.0c94182c8.0","@material/touch-target":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0c94182c8.0_1675273494559_0.995120628767816","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/radio","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"195dbe82bc34eec64c5252f565f2248fa709ae4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.15b221540.0.tgz","fileCount":41,"integrity":"sha512-GeICGvGNZ8eHcSLs/5TYQ6xrPLWShG1E344uKSrFZXtbVwpAtExlHyiyBdfsPBEAUtISalBcraYCgLZ/FKB+Bw==","signatures":[{"sig":"MEQCIErTHe2oLQ1bduAf1BNxe0alvRcnbj2pHjPHkHAN+LPBAiA1Kyd5xj+JMvfeDrF7h4VFAxMxbqS4w/2VGn/mb+OMQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qcMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvVQ//crO5vF78KJc+1wsSeZk2f48pCRJzjId041FltsKYQhOJwlt2\r\njhzz6AEJxD5B5NQ8Rz/MpKVGiX165cWBjqCn9QPtYaeWrzSn5oHa72s3Smz9\r\nAy6B4ZQlhccTblueri+jPeOCElq1KLkvUX7nN1l+rcvpbeYAu/5ps83I+Jtl\r\n+OkvO4gmbgesvxQ3xMOS+GZ6U9NXWfeFCn57M8P45HclDdRq5l7ga2A1qbjX\r\ng5Z2icsD3GgyovkAgGqBIv3XTsVd29otfuEctPRm/k5W5TYwmVRPchx6d1ly\r\nRdFsp5tkovB876CGpYzq+EWQfIS6IinJQig9QPMUYJ/SrzghC1TaRZfEZlCI\r\nJ35u9b/M+Oz1uCGuZtOEFT4l7KVp2jlfeDtRUn2a6p13RdWR8s0SZGZ1/cMO\r\nZj9HOdryJYx3vHXvMYIrZebxw/oqLpawMFwdStoe4ABf86e3+7HgJZX39pNJ\r\n0wiieSFmf/0EeZDUt5YqFFW7pklo8F5F6yBfKZbyGfronHlcQ0mwTHZ6qjKh\r\ny7bJLEkQ4fPIOsylpwIuTUQt19q6H5JJs0dRGj7XSYh2HedmHdPa0zKmRaPU\r\nCjzE7g+Wu8Y5Zs/53Pd61fIn+5jvu0sXza72Uv20DfXUKuT0Lkl+AmAJLr+O\r\niPyAqvoOrZ71tlD8/RH0EFs6mXOLYAZydKk=\r\n=IP2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/density":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/focus-ring":"15.0.0-canary.15b221540.0","@material/touch-target":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.15b221540.0_1675273996287_0.7689655933970028","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/radio","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b2f77406ed2befb3705cc22f1525c5a7dbeb123","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6a4b3f834.0.tgz","fileCount":41,"integrity":"sha512-pupCZdQF4Sz9SmmsItIGmfAA0oGKbpig9eqEMLsuU5uw2Or/YNaNGx/+jtjS9wPvgdSIQ1HAbaL3X60JHsnh5w==","signatures":[{"sig":"MEUCIEdfPZfZcn9zMSzmasIHfs8+Qq77/Km/PAiSXR4ucx/6AiEAtyn/oPBxjIQjAyR3Rf0A47i/RcCPy2n0DVATtkZdHSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcfw//XAfYt8c5AeGmSWduLDAXIoeycBBJMwEjXKo5i/3Y+UHaOXjo\r\n2uKmDKZrk2yVsVDE7YIm//zi3F9e3OlQdhDn6LgT5K9xr1lGMuK/tO+0gFj7\r\nc8htuWtuVDj3fU75BJRoo8AKi6MLCG56sAY+6jCUqxfTjprX3cwzuCLoZOyc\r\n7F+t5OVoXYM+V3K2mQssxkUKAfTsOs/jODxhuYIpqP69aoWPYZxjw+mG8a39\r\n97FWNojVTwHvYPp0N+riW3D1U1epELeR+mfx4c00QjSC8huuWhGIlW3pv7D0\r\nyGyJ3gmG/g+5+02IXs8fMeRlFEEIL3vPGauOYkNAEZLNk2dQBhJG54+ybXPB\r\nEZCGzqgRGAB3CSII47u3F5SYQQzuSf5o1PQx8HokVTKGU1ti3O/gR/xOo0Jm\r\nyLs2eUP4PENRPmHY9JYqnJHSgjjgY4Jv0XVs/RkMR7gnLAVOLAx29c/G0ZjG\r\nfCZijE3/p6bI4Byyde3lEzON8LntHZoaJiKaNBZtfZ7Z5TRa7l/ch27H4INf\r\nwopTXMSvaoKKILCmEIDtP9XuMJnQhvGPZCfwwLv1C8oBTOEzUL+KaS+s3Vd3\r\nYBocmDqhPe1FbJspA8raodSNXhDRw+xZMa5gKs1rG7NU94ePhDys7pB9T1BB\r\nRELDC4tJ2UAJOL2RvPBcKr7+DnNY2WJ1khA=\r\n=ijv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/density":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6a4b3f834.0_1675277947411_0.3801177676617804","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/radio","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c004c59898112dd68de629fa00dc3b67096c4de9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b177b40e2.0.tgz","fileCount":41,"integrity":"sha512-5gdjQKz0FHE01Vk/3K4mOTHTdAPysybWJpPzN877mmWWLJNjqeSQmU3EkiC9dXoClgb82Bk9tOjgGC8RMmsg5Q==","signatures":[{"sig":"MEUCIG8zf1w852CUIBhDIXgeXXKGrAaNlD59DFzCB9HUGRuNAiEA+DeQ68Z1/rxlOpyfQ84R9nZ/V1JeQFdolKg0I+JYsyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO8A//Rn274yMfPIbwfhv1+1f17151vtK8N9DDWqR9qn9gl6LlBugf\r\nzewmtrfJAtEq+SlClgPla8ivZk06Y2IjBN21qGQs7jYz/Rp0pEhfV06Dj85O\r\nv8c9icr2pU/GsFhMFHPUWMVgTFe1Hdmf8yqvgb2f7oAFW2x79ZND4Zd3iClJ\r\nkBrtJWL0417XQOd4C6A9dNGJIx5/6CxaUcqj7pB4elFolEh7Nz6F9eA/cTUg\r\ngHlFVQZ8CMNj0KJhDFLliXM5gL3/3KuEqqrYjLvy6BDR3TqWKSMYcCCAjM1D\r\nnHVFKnzOqB0QtEzFHGJcbQnY88IzhuffR97uLi53VQyOoaILFi74n6rqzDQJ\r\n549DbA7dg+C5Nfa8rQTUmgV/L8w9UQ2bU/UbWDzWbmVS5r85Lofs0NH19UoK\r\nnwX6O5AsZU4Akp/itt7sqXXuAI8GYK+w1T7t72u/Lrvf1a1UlFbgaZ+W5pZQ\r\n0Ipxh892f7b3kAGI5VUod2zlqNlBckt0CpX9krTxIhWs1LA9ka3oFPYFwbky\r\noLLTuzifp/369ptTFxqPKoa8IZQXdOE8fdNFJwYQrU5a35ThRqUMLFf93SjO\r\nDuR8t34GY2qCeSJ1RQAqjVXGZF08cLcetOjTrlm8+X7AFvnyUXm8e+ywogZi\r\nTanUjUcZs/FersMnfkqn3eCJC014EZq3Bdo=\r\n=Nkb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/density":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"15.0.0-canary.b177b40e2.0","@material/touch-target":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b177b40e2.0_1675308894379_0.5356326561684532","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/radio","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7f9c321b9f38272aa32351ad9e994141961bc06","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d9f821042.0.tgz","fileCount":41,"integrity":"sha512-CfbtPyGe5Odxc605kwv77rlz5Qki1qB5m3FibgaGSjWvpLD9mP2kEML2IYnj6OeunmX/DTjyZeT5KQ4LnjW1Ow==","signatures":[{"sig":"MEYCIQD2tboPEIxhaqme2QZH6P2YY+BblKad8PBztZvQ7oGdggIhALefaslnCoGR/u/BRgNu3W8tCyg/T3d74C1rSfhmMhLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/U2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3HA//dIOJHUUckK23w8uINU1Ztot4D1Bk0DzS+ZlIHvxGDbMVLXb9\r\nfK6d1qeWtrHtlhLW/NVJ8RONdbihnE/vCH50IPPBoOurjyF06CgP3/G/dmr8\r\n9emFpq7S1nqbiU6DY420SOGiaQVEoOzpALZ9fnfaRRrf6BfVNxEIw97q9Dnt\r\nZwOU5EMlWQ8Vu0P/azCZ40OdBRRw2n+3RNMQ/n2D28SUUHx57Q+Gw74ilGcs\r\nNvJU8q6qBDfrTcfPXu2RsSFwmvGL6O97YPPQyfitLqTJyglZqbBM0SBqP1J5\r\nXIljwPl+cH3TcrBUGICMICdZHSDopSpNCc1JvZ8deN66i8jFQmMQ0z8n2S3o\r\nTRs3qoe/72Dw+qhI5yMA6Vq9+RpiWS4hdl7scLEgd9Kk6sWTX0SuiKDwOkLR\r\ntEjZF7vWMx5xt0AGThsYAdEkSvkgyea0WW1foeuWoD5QOBAyn4981Z1SYYkc\r\nmp1qXoUGiWsNQm+1N+wnzmwmMdVNlbgOV1dhzvaOFMmUCN/IFyeJykLPg87X\r\n0FJ/llSY3pwEXmyorvFLpe/seb1RRcxLKQNkLVR5bOcOljEVECi+11bxVZ/O\r\nM2rtSLpm3F73tSK2Dpz8XJGSwAbmeUXn3DKA5/CNGA52NPkE1aeqphhiw+5s\r\nPzk0goYISCODkmigNTQv9xQem0UhaOmvOac=\r\n=+I+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/density":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"15.0.0-canary.d9f821042.0","@material/touch-target":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d9f821042.0_1675359541889_0.5283642665932278","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/radio","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1116c4fac5debbd605a425b7c48d9808f2066d94","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.47c7deb19.0.tgz","fileCount":41,"integrity":"sha512-pXejef168zHGyxzCwMtDw14v/htEuK7T2koer5UqYhFnTAF9n8bT6MhbecN3TFYULQPlYlrs4bjujoCU13JmcA==","signatures":[{"sig":"MEQCIFAmzXQMx4+1etAw45ZuPQPdkSfkTIllxgc1OJGVZwdAAiBo3u390QLgGJWdSuHj8262dKYVXsN5tcpu1p6Lu2dpQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFMA/8Cwy4gR5BXsTJMZQ/yf141NV8/qQlzPvS1cC3ANzQUxZhRPIP\r\nHlokyu4CsJ/bt7I0DV/yxoG+VPm3/fXvEa4XpdfXqFpx7vI5XbqoFSUmgPh+\r\nfj888ngnVLGDW04VPA5qC084fTBGO5pB2soD0EuD7HQJi/P5H+Lx0nfVrumo\r\nMsBv526HIw7axwTrn8L16KXPLidUofiTxFQQTkH9JrTCj6dOpYHkAzRnUCdT\r\neyFKyAZ2QCZUoDZlLa3yOgQ/Zfj3k1zYuxv7pNSMEvBq6FeaiKEvNEysgl1n\r\nht28Zu07aOU/trRmQ8DmTzV1/BOo2DTRy440rCXid4RXs8bBc4SUSvEvr+5g\r\nkvg/wvFxi/NK81jsuhRGE1npnsC7QJOYAW32+o0YJJIslIeJ4eo4SUFlwDOA\r\n/gH4gXeiyS50j8NOq/Cr7NCLzyPx3RPT5Caq3JER2RrYMQwCqu5qj6KEBwbE\r\nk83habqHhC0EasFRdSaMPGK1E+SAliVcYAj2g5HsH6OhnEtglVfgJmV1wwCu\r\n9VhuUywWqd+whUd7z3Bw9Nev0qxg1MQwDEQ7KTUcMFL04RXeHlICMHBJgq7U\r\n95joepj8NU3CqqQUPAI/wB/f0uTyG7rJMG+QC/OfgFGCCkbJ9Rue5p9899fV\r\nGuI+Jxhcv1oVxt9zpvZJeu6hO0UEw91FjE0=\r\n=eqnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/density":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"15.0.0-canary.47c7deb19.0","@material/touch-target":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.47c7deb19.0_1675415376552_0.5790214932850002","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/radio","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e733a7d6a1f7fe7dff6d64e57ff6d0c08fe2cdb5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":41,"integrity":"sha512-YbNj9W2CkFvVuvjyZW5t7UjNZc+Eo1H6fwo/RoMztsqpJXwe1UEvOyxDEEVeU1ztZ3g3sDKw7/ZKB6UkhJmTLA==","signatures":[{"sig":"MEYCIQDWw3Cwig6QY6zP9D/M3mXXY0ebrxhoggoDZyccDjXomAIhAMrKOwIUIfvdyUjhQcnvsO/8/Mes9Y8YB+1va6+tyyZg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBoRAAjZ7kEa9KQ20JDzviuk0RUs9shBg/pJPz/JODzLIdDk7BNpKU\r\nikc5eBtx2VLumlACsYbCHaZc2AGYxz8coHnIb+uI99XryZZ5szCXNLbzF9cN\r\nlbe4S0+Neger1SPiWfVo1KEIyW+gU9q13atk47Vl8Rk/NOQr6YMaKbA/wFtT\r\nKxPKJTqdLbvOSvU9MdiUzv7ED9sw7X33mcAWfv1W44ZEfxdKHlCYQ8K3mTIo\r\nKAk2vpPw2MHwNiMroNIMwbjUfS/bc68aPzxm+KuKdiLnpBNvKzOowRpyHwI4\r\n4uzmKQnzt24qyV9RPyjjjhs1+UB8hCaN7BqGi0T8g8fcPbUV6grsvm1u5De7\r\nI5/cewXJLR9vpqHapffqyzXKuTZDx49sUZkDac96zfINbDagRRaP3q9PtNKN\r\ncvfGzkU0gutVwCKciq7Q8ebc5WPIR/9OY+bUDnZJVW/bG64WIYUDtTz5YHu6\r\nDh2fKNxvrUgwA3RweRgWxNz3b02tBQBHlGW7GRKI8+eam8hE0nM7PFQzN9Hu\r\nVbNG59XHjo6Kge2wiJFhx17ntqiBKLnU9y3her+NkPQqcPkJdfNATN6rwRIQ\r\nDA3XrrXfYUB8mYeRY2M/HBb3JWeS5byp82/VzoJUIaXKhJ04yQRXIecW5pEP\r\nZE8vzOs/aj+j1nYiOB4Lh/FdORf1snlyXmo=\r\n=4dkK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/density":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a16dbd1a6.0_1675491311426_0.39976439366504657","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/radio","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5bcfe3dd12d4e7bb328af097831285744e27c45","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.93416f87a.0.tgz","fileCount":41,"integrity":"sha512-RffAlaAqHujTJIFutAfz1uQcIsqNUCbJFvSdf7Xe1AFDJV1udznvee+ito4NPgUFeYNjo1MGB+RPN0o2BNDQOg==","signatures":[{"sig":"MEQCIFFpws11HLhZeX/EUN0+QHGkatfT/bA/c8LgR2/3b3ECAiAY+sy1LDHF4hHi8tYLQR4EnhqfdQ3iruvmPFLtOKBiig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqgcw/9EP/xAiMWJmCrhsxLOWfGZE0/QHoSvcehnO1cTcm3rjWEkYBm\r\niH1ZYih4m5fYQ50rZXyrnZHXn8/9C1BRr/HQw0jWvkPa0VNSpO3WdN7NKanu\r\neKfpyv0jhMz9weNUSjy5xJ3Qz+TDuENAH2KdiGeqjgNj7TWpN8OfhBuHPsmI\r\nebmngDh1jUhCSnufZZriW0Y+tjT6+SXO4gaOctOdJwxlwoxgHaFfBEz3ImJx\r\nQYaDL/7Nu/gPZvprYUVS+gud791USUVUb5i9LKBAsRDph5DU47+9Ms0mpocM\r\nxKPIG5GrpcgPaIO5x4zuBha984wsjHHV2YzdAjOBWu7xYjnn13cnnU72h5SB\r\noOm56XuHH79wqqihQHPQdlU6PDvLvbdOa0W5na6xlkacbZE4YFljCGePVw9U\r\nqDsALuu057tM+b8bth4xk3ABiZ/AwlRAXLvYLtTfin4GQg+pI5RJRmX+os40\r\nWxqCbABipbZEsG7B8EGpZlfkJG9RpRx/blFHuqemc3FVMN3Uqr+7yLEQAc/X\r\n3OmBrD6w6aP5jTofgJvWsUnxjC/doTjdlYO9vQ69a62vkY7Wm9WESJiSgxlq\r\nZ9E2nRCzaGe3xuQw3cmTJxMhpK+aH070Nv/xE5mJwxx4vdczKYbxZt2TG+m7\r\n73iQgnTZoxbRORkRMKjxBwq7mcWUEP2m3EM=\r\n=ixLu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/density":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"15.0.0-canary.93416f87a.0","@material/touch-target":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.93416f87a.0_1675776262865_0.8865877177758685","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/radio","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24ffde877cd372b8cefe520233eed87826894d9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.49b8e7442.0.tgz","fileCount":41,"integrity":"sha512-SzZBmLfAk1Bpn2WTFS6uEY508geFeu/eyUagsp45T9Cl5IzJOQ+dZRjYnWRTOyI3o/ePTh19OZlai1Tvos7V3g==","signatures":[{"sig":"MEUCIDYoFQ4ggOT4iVp8XnlLVv7DBSM2dr+uRKMJMxE7pw3SAiEA+LrQ43kMASMMqHf8o6OM+L7kPuAulVMENgsbmoKHVw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEWw//S5bq4he+iKbWxHOsAlqPuRzWBD4WQ33m+UvtaGYw9K8wIoij\r\nK4z9Kh0PIQOH3r9qMnCw4YVTpFaMQ/itRNXxq8wTLMi+fsFCWQGRS4VG4MT/\r\nX2RNc/dmQXDC5u6yaOm3dbEfvUEjjBT/9liVFA6Hsy8KaxFX9uaNvQZWqz3s\r\nna5rhcrMV9NQFpcL8e4RwELHjM1tesQHbEVe2OTWuvugzCSI53wDGnY8KHrh\r\nUn6UZOSeiOc79zWOrmHVL/6xomayDYFIPV09k4c22Uk1IPFzriQVGlph7VJB\r\nffhdfwzerpjNXFUCjxayFpoJaHQCB/6ZeK95I7Dw+utodlvse19uCGA/pIWv\r\nR3EUnCctrEIgRg897GQ9G/1H/k9AdB4HQ3DnMJuynj5EnQ+IUobibG37Q/9F\r\n5atEa6T4jFdpRbnsgrLxMeoDP5R8xS3XIgdoTuLlbqobBqngLAiXO6mj8EZN\r\nx4Z1WY2IDYLOncaFwUXP16foue/HQl75HqtCq2SKoV+bisJwo5QPoXJYgqMm\r\nSbyFPoyjpNzlSUZv/Kl9Thkvy5PiaYmB0VoFptCbbGQp4T7YgDHFi6qNNbNl\r\nYt3vBFNHHfRUnQXRsd7BpJVvnwl36jbaKzT3eMxjqG/N1qTW89CrJytAn6lZ\r\n9yVr/fGC2137CI03L4pd78fDcsLrCBE2IJ0=\r\n=8hsB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/density":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"15.0.0-canary.49b8e7442.0","@material/touch-target":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.49b8e7442.0_1675811416214_0.3704901166262322","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/radio","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65703f72cea0648184be3cc274a4be8ca3bc9072","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.de38de758.0.tgz","fileCount":41,"integrity":"sha512-04rZ9Rx7eHhhE7nOx9wt7/doGdWnIr29Ex+c9gA5GjErJwcFBNgTLVSkZyutkOlRQpe9HzNMina40ITM7mijig==","signatures":[{"sig":"MEUCIGrKXY5u27hauqrkpJKfhFkrMuxKeXTMul//rtf+VfavAiEA+spVHewRhTXrNMIsPaxnZQxAYa657JbrBninzHvk7DY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RSMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocKw/+MxyS2GfbVbuq0ZpMOBUYEV6yUoXcSxg8SBtgWvSVaCQOXsyN\r\n0n8tXWkVVxi4eMqEieUmLeDLOKMF4kgAYK1vZjjjZu9z8JkZ5Qez1V3AFYkt\r\nvyS/YJcK+x1hu8SNpzj98f2qJVLFLZytjQ8fbmn1b1fAcy6agltClWbn+Nh9\r\ns2MB56mxqbxRfUDOt82PMFYBFB4NDPGdtrTg41bjacVmKdksGbouv42dV699\r\n2IPKhLmW0Q+Rt41c0cQnI+etyK+06dRjtVhuTBEiDV9qOTsKOLiQ5LWgh3M7\r\nme0AJ4bxOfM0nQ5Cr0edC7bKmhMYFOVy5+qGKcxYfG9jG/00CMtc3dfRoWfD\r\npgIwqylgISX0JefuEjiAj6Eay+lAZiZZrTjRVhJv+LOaR5qWsMEujon1V0+W\r\n73xLWZAmm+ek+WuTgZOd21v4NOqvMBN+56TWUaTXnV8u/YPetVCFbtBvhYnn\r\nU5pJHfFQYCcxwbCcTfHmpiQszvPv153/kyUJPBTeOZDaixznb0vyI/s2AHkV\r\nZ0epT9EmaFI/3JdWAT4masCIABKU6NrraBm/+YayER0ru6h2Pwugsw+XAbOB\r\n6dkwgsY7O+naO224C7vUhlzx51BbI7bQeozEIzQqV9yPquiW8P5e7u+gMTx0\r\nG75QvMR4N15xhBm02rYJeZ+mhjw/5NCDxl0=\r\n=xBWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/density":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/focus-ring":"15.0.0-canary.de38de758.0","@material/touch-target":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.de38de758.0_1675957388054_0.7314850285475907","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/radio","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0f3433d939673b8737c42ccd92b53a80ad94ddf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4d62de70c.0.tgz","fileCount":41,"integrity":"sha512-G4Yje6mn266MzfdgfwhvRj9d7sSICajYDtgGYqxsmxbdrujf6Kg/R3sWFSyMEfwJs34KAY0s+3sgT8Z8A3OESw==","signatures":[{"sig":"MEYCIQCe7zmrPFPbtJcckHf89Mp+S7+Oatn3FnkZTMs494Yo6wIhALgEWiuoej3dFaWGUB5STIH9lIPLWAs60ugk9r6mUMAL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W3BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/fBAAmjOv4OA10c+JzVKwv3V0jD6BbieJWXS/BVoSOXY7nyQiSVmW\r\nePa+8Dv2hUWBpGUcWLyP9wYMF3m1iqg65Xt0t6LisIIVfGmpUx/NUVpRRVO0\r\nbrohcyBU2YB7ij/yO8rGvoMoaMvbPhn752HYJDYb6eJmCZLVfghtNZj8pWwO\r\nidwb5bG3lTaPtRwNDVzDKTmO/Oaf8TRK7DAzYLnNTQWGw3DqV4Fb5V3KiNBl\r\nngoRY4thIAWmNurGNF/tIav+7UWWuIePeXDQIkxb30oEA2klHiI0IQBexcmt\r\ntbc3tqF+RfARq/AkrpjyTWH8l7Iu9EUgSQrL8sTkg8b+7wSlxFTDLeYQcyq6\r\n5ct+3ARJn9p8SsVnamBqXoB72KYoA9LVNuZg0rZcFyg37o5sUxXQ0RuFfirM\r\nq+8hj0BWN+lkspMrnpjKeOPLtdqDIJUoBkvES8NfbLuF4l208tlSsUKQEB3B\r\nA6T8xSo7LkFYEgYd8biUhrmcZFXfaQr6mOPWv8mBiNXAshgkt9PFv2UCod0u\r\nem//bHTTulvesy/WqhTvYBGH+2rkBFh8OZhmY6PO5EHCFDMTutPcVWmbn2qX\r\nCXSVCCc5LN4/AzPxEIUINDnionWDqDnwq4JreYyefMH3LBWxjuu1HJ/eZeDN\r\nwPaXc5wXsNHNu/Dspz9yPKIfbgfyJyCVHTg=\r\n=Okfp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/density":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"15.0.0-canary.4d62de70c.0","@material/touch-target":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4d62de70c.0_1675980225540_0.929641498386724","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/radio","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fdd45c9127c183efc85d70f1c95189a3524e9e4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6fcd8d418.0.tgz","fileCount":41,"integrity":"sha512-HQ4mBy8OL0NgxwkFRiMym+JGXA+konCDfxSMcsnrCO3JtHFq1KI0tso1YVmGptUD+wsxb9S4Kv/tAK1pPUm8nA==","signatures":[{"sig":"MEUCIDB1LCG25XYmwGO/b13ENuXWkGjqUfZr7OxXSDmRiuQOAiEArZKV+35yi6nU9QSB5obLxnLLB+4Re1rPW+PRTLoE/ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iQGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV/hAAnhAfXAEZbpIlR7yISp1zGleoNHGEUaRdibNtgZrD7FQrHLYm\r\n4qrFFWY8lqNpmtmwA+JvI4+dfoFiooclRd5MIDwfyoyH/ePps+I2p/XaOQOa\r\nPxc6GgHhYBBn8GHZGsGXfedw49Ui+PF6Dq6zLPyi0FWwM/8tR42Evt7RA5+0\r\ndrK8ylHp5EeSdx0Uf+n91YPCNc7XBFlpB7ZC8zyfB9KSr73qrHsuyMRZZOVp\r\nuIJRJXTI++TTJuZMtOBvkqtltxv+jSPt66qPqxYnC0hcJcQXNOTt2P6nTQec\r\nYoEvsXOQud53AvtZwSpV3zjyhVjyKmfrX4C7m36m8eqpSTDEcJLzeJS6LyZc\r\nLUbDgazCpDh0Dt3sFo+OnkTCAO9OiUQb+UKjW96Pp3VFNY78vCIlvk323Hsy\r\ntLavROPZ/wF5ODf1W0GqAda4yg51cJ+NArU9J/OVh6bueW9AAaA2GCsBeENv\r\nRy01h+nLD9X8B/UnXXzGHh3tzIBO0WjzppSNZ9BtP/RGJsdCWNAKbw9az/sH\r\n6ujgMlDDF+BlfSnd+bYgnzgbynOwgroG+NgAeajECYIpHtmdzz89bo8f6SBQ\r\nwGBGT8nFR05xWkjMMjSeC2V2f4qudGhY/sTT41CRkUmZiHDlVdRrpV6ThQut\r\nida7k4TkvtUrvSYKy1xwSuSkdEfeXOn3txY=\r\n=TlMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/density":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6fcd8d418.0_1676289030238_0.9394117281009293","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/radio","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74db1b47113b9374c285265a89255fd89da3a4ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.066d9439b.0.tgz","fileCount":41,"integrity":"sha512-oQghKFRVJc0Rqvgab2YVlTjvjRRiXLBQ2tziI7qovTWDjq24XbEpiw9NcL849qoKbpBFLhfu5ifSAE9tOmjqAQ==","signatures":[{"sig":"MEUCICXWjzyOJC6Z8xTFX34u3JRd5iQAP69PH4ruqL3H6X75AiEA5BzRPZyPztw97BsRc6F21jA4ZPvOss+JRplzkZzOvQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TljACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozPg//R9Pu/kAiQ2qQM9XBb6KS99Rwq3LV7GunsXMU8d1zhSIFCzAi\r\nc4jaLuDJRDIQAZW8v/E9HR3fUwrmJHWsSXjtGW0g6r5bpUwRPJmHNmMqx6Bs\r\nNpTzCqljw+OmpP5qaPjbo8xPNdZtJt7jx8mG2+YA4XE1N8gwtZgXDNBE4/cn\r\nG5AK/AW1hotI05GXxQM7zwzsyv9WzX+Sn+LHpEKxouwWu42OIEp8wDxntQLn\r\npiDLOEEwpACTl7UNWTyt/ENFxcDMFOOzcCDh5aGENCJPYpQDGHML4lcJU0uF\r\nSoVbr7dAJFLlmZhFHOtUH6mvDJcwBgoWOuYU9eqZNNs6J3n1bHlHt2B9IN2D\r\nk6xpduTaq9fBRLZ8WRjYEkkPD5VBp4sVVcNrNE+FtlPBJtIlol1sdcVToCqV\r\nl18q0sZVOJAYNo+juxUW2+oorHhbaTfDLDwmNjAKtJa5L1G7/JsuWMOCoSOJ\r\nzs4UiLlOyJghNZ/xf0cc7GK0ad1lyb2bhpphtZH5WV95+pI4XrwdMdZ609OD\r\nZrTlWxh6QIgQ6EcF+RrUV4510/PQ/eXPTkdrdkZQQuBcrkJC23kTrPBgsAY5\r\nMELiB7GkhkrYka5P1Y5bQ8pbET3YZhyr2CzdOkCnSyq55jvvmqSJdo7IVcJm\r\n1UZDJjwGBuV0rDy/xRuswtaXmixvfK5F8hg=\r\n=sHE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/density":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"15.0.0-canary.066d9439b.0","@material/touch-target":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.066d9439b.0_1676491107658_0.6512581028818949","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/radio","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50b26d0bb9ab59c9afe403d47cb13298e930f9d7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7ab32468c.0.tgz","fileCount":41,"integrity":"sha512-ilvwtGZK+x+ppdBLkTzc9HSA2hCrnSPY+5x3zfysnAjzr4TS95brCP7mdp4oKGLlqYpGJ6V2YDlwQf2BnEae7Q==","signatures":[{"sig":"MEQCIBry6+xBm4lSPAUcHZDawMi1Zvwx4TcR2vOzfUrTS6D5AiA7v+VEgvkpLZL7Gw2VkJX5WMTwY9NucP0z8qjjjg+4Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWkhAAj/ERVjbT5Xfn7j6IXnmCt9a+6swyu62EPOql4jXLAAWyv+LQ\r\n7CseGkk7ABKEaO0kjU0vSzZ5TgLp+MUGhPowf/3q6XFyOgOQBUcfln+Cg9NK\r\niRGWfR24g4yZQ0cPFRrlLrYYCNr93/eTmHwTpJc9pj4e34dgG9c3H1bSE4PQ\r\nAs8k3A+nd2cYWaZlBlLRNvI+B42TsebhMirj7hoGt3R/PZ04+X1aias26BmW\r\nMZZy7AiKrFyI3PWbnbU7fX8DDmECT7DodfiCS1ZPe2oP6OX0zL9zmAYNhI9c\r\n7qWxNZnMu35dNU7/vfxno51Ppv6yLBi3QiTSn43uDgJDDjm62IwiGUAnBcA4\r\nV60QzeyZ2JKbck8A6RYoBL+btDpAy4dwXRMcmmJHAPsyPjJa9SrI8QYSo7K6\r\nLvrHUrSf9qCK7lP9jBTgHGGGGczJtblOdQz32gh8NBM7xihCP9IC3Ro27y1g\r\n7zbhCZooNtyDhCWM5dXdF9FifbwjcIsl+cuu9dmiROoIkpn/TUgjRQKwMQtk\r\nFdMZSGQdT8gLwqJF/K9YVJco213uFNEESjwwQY9HTvRZQWs8AmG1r6EFw4ST\r\nH4qorTzpu8uYNuBSfYpgpEiJcgGEhDaZvef/zXHPhEsATRCJRLBfh3r/ijtf\r\nule029NYVcycjDGiR2S57yKdlDnyyxqkuAg=\r\n=cMOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/density":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"15.0.0-canary.7ab32468c.0","@material/touch-target":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7ab32468c.0_1677004489545_0.1890844985504303","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/radio","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a1889e0ac131b4bc210a1c8894d41101e003f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fa27ba61d.0.tgz","fileCount":41,"integrity":"sha512-R4pEqvmgCmc9H6bSIr2cfBfk6eajtcUtEl6V54TMcNGjO09YPDP3CCHTdmDM45A9j5XKT1HHkSqWqow7ZnKMGw==","signatures":[{"sig":"MEQCIGYOZ1ku589TEDx6X6cNBygfgEkXEJ1+AsOisavtNs7nAiBxAzgT1svd71qp2JC1hVJowfVgE1RRLYwnbxn9LDkZLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3GA//bUjulOdlCJSlCZQn0oYwT7tkWAt4hy6dMMJDX6nJD11y//yH\r\nzOqOiDWoKvz1IuuSm3UH0RseJu8+dGJC0Jb6/iVtUSXf3uaMu0vvBQrDBtiY\r\nIyQhsyYl1jGoHQFbENyHAs+skZYH2fKbj5fqn9c9eQxbJFkTPvzE5FZL99Nj\r\nbV3MJz1fSOXeJBS+is8AoA4Q3HoH363UjeWr8WX+fBuVKFP8y7Pj7FXCqJ5c\r\nc2/HqRfaUp/r/vt3cbiTlfva7egwyJWKb+qHdI8VaM77dppQUf/5CNwFqsS+\r\n5beUKeMdfsob5a+QOq7rXnsRbmpFX4H0ZeRA2k4oiZ3+R027tOFFrCDzMpx6\r\n6k7ECk8gOeNzcW3P38cFsCqThut0NJtwA0CDNChgvEXbEXRlDXQNp/VoFDCu\r\nBR2hs1a2nXChgaTTiMLQH/oqzCeGXVbBxH5WgdUq4D9TNqCjqCkJCTtohhqq\r\nMlNZMCcrHfzbnZbpA+OtqiQ0JtID2NHQpNGS9BEIt5xyUYJ0KracwhXxLB34\r\nHbzIfLTtnRbxw3u0gccw4LGUgBHZLFaFmckQEONQLdBZgDsOcjazPQvWjy/e\r\nMsggAYUg74OMPhCguZ1JOwQIwupwMXDdOONgxK3YRT8Et8KJ8hS4uAwgZnMp\r\nWpY8MUSt3US0GMl3/5/XjWlIIr0X+LDXqKE=\r\n=ukdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/density":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fa27ba61d.0_1677514816500_0.24191691722607445","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/radio","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4516d343640eb1c11c03b349073e941ef039842f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.311ab4d4a.0.tgz","fileCount":41,"integrity":"sha512-7APw5TePGvsza6FXKUwwfuDpRAJqd01D6J3OgxLaLb5lDjRxEhQMDT6Y2MlcKZ53Ue/JILRSUsIqIQozEU5wUw==","signatures":[{"sig":"MEYCIQCpz7Ss8Q50Y4dXiyqP4JyLg/moPuG/Z4rD7iF/yj+qzQIhAPiBGtlK3n2WCi88TnI2e6EN+S4pbF3AzR3eN6OLy9OC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp+A/6A3eJNXo0PiBHyQA/IkWJy0iYEYEm8MzMgp5ZbsVWam7i4BTh\r\nOAgyPWaMCXV00sD8uQmes9wH8tzJYv1PlX+lVHp1Kn4/JixE1vR5SXLE0S2D\r\nFuR0+R4mhSG4HcFxKWRDo3524DvsBo63eCY0wCW1nmI2oc1thhITJFP7PEPD\r\nCxSBowE3k9j7zm4HC6lG4tpSL/FRn9tBqmwKQGLnKS/BnTJwuJ7D9c08jmH+\r\n9sAxaOhe7cDgdCVQCeGzJxhewPhybqQlw/IDtQlJ3Yg2g7QweRyWoD2HcAqF\r\nFKbXOr5jE7K/Ko2rfmQFI9WDHIxfGBC/zJCuRD/XqayrJGCUtn/0Sa2JDRur\r\nHRfRKR/OG/CsSGQrwYvJlWz0IOidaVCE1ql5T3f+WY2b2piToKqanC0lxQxe\r\nFOym7i+61xIv33poN8rdHb2p3M484fGNTEc1GIORdkVjyD841JjgYhCMbuo/\r\nzUSOl+JKSLgnsUHbco6ufLcgXG6/3WKF3Ws/Z8uJX6obhkmLLb5TFR7DNLdR\r\nu8SI1GiredGnJfB8y5yzzQpbtVTCVi1EbPMIsaXZrnwi503P8DcXs8afu05Y\r\n3RzkfHlD3da6vCC917KHylfowCpzwyQFsyBDzjODzEUV1nbgGX1QsOCzhvUk\r\nMfc2HORWNCZLqiQ/GJVEOUum7Ar8Y0FN4cM=\r\n=05e4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/density":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.311ab4d4a.0_1677516127754_0.42774653269683527","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/radio","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddae2444104416bfd1ee4f97ab403f4014a460d2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5cb8e2174.0.tgz","fileCount":41,"integrity":"sha512-9Mio04wpLncwY5xGs+eBZz/+O753/RzHjWrm5Mhub3mJZzCI+vp70SjqtYMfKqkzRO7XafUl60M8Jx7YAleMHQ==","signatures":[{"sig":"MEUCIG45Zc/ArSuKZ0i+o2XjGLpDCVj6ysQxM5UjLQ2bAg8XAiEAnIJjTs98K+LmJ6HaXCywqUddARwzeJ7e2EVAoAbXk/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYmxAAk4Av2E0ktyBI9KnJNUJhWzFktMMMwJ067rBXKxlaOmmPanB8\r\nshl662r56ITmfDnWpPe1MgXp/whdE3PY6fyW2YVWQmelbVui8YmrBOwr7i5T\r\nc5yvTS2yJNCa3lCaAATCN6UiFm81A2n/UjcV4/ArS6vUQk84wZ8YdU8+CA0n\r\niDcl+/tTufcz2RMO0w3F6o5yI567XVDfG2l0r0/+t73B2XVKsSedGKYHdcHa\r\niw4EW4qnIb+B5lLvmWTeKaT+DAvvTKPqhByMfhU7EDAQJxtsd27PJnXgm/fH\r\nbixCfW9QXi9Dt+/R65u5OnqFRSjCVubSHVdHiPJjzYmUmQGrHDz5rcfa9qzv\r\nHs1+8COt9nTnos+hoHkM6llu/zgg/XZqsbmU3qATTaiZuP5MaShB/g+SH8L8\r\nh9+lxDiRcg6Q/JGmDOIO2Q0zYC2S1m2kToauN5VXaTfpNfB2rfvuZhR/1vOq\r\nEIOadpN2SX7TMQkoheOlm0wQQedysk965AdTuUPGVvEa1ltHoKJO5L5MhabW\r\ncTsUYChz/em62zoSIHchEHHS5JsOnZo8ZeQyp3csIcubS8bN2mIIZv/iLyyp\r\nc0TjHbOxXME0vaHialaEBZreoVagCl5EIpCsaDfzrtNPW3nU2FoMVP3Eo7iz\r\nrQf0ZxAqL1U4jDDUS7QCvW0rizdVTn8R0tE=\r\n=ARBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/density":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5cb8e2174.0_1677688589432_0.7413491268099406","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/radio","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3523da0c23c68b3a997a4b5973649255058500c3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f32339937.0.tgz","fileCount":41,"integrity":"sha512-pvwenYHQ7io+bFPr6QgOSIx5TA+HEJ+8dawnCAPt1xSxDm6tgJq7MUTRbDHM13XfCU6WlAmQu8rxy2sphmF7qw==","signatures":[{"sig":"MEYCIQCrsnIJ1pD7TUyKm5E1ziLYnUQPDO5DtBHonYfA7sqnHQIhAMMlhMERc5593P7Qzde7qcxO/8buERgtdhIFaoA2Zix6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgPAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Hw/7Buff46rv7xTHCchtwWVB+QYVmsO2DYWwSwS9Tpx9FLjsTy40\r\nhWjkyTzJvuXPkhP1WoBaQglv+90ho/l3TyBzYRbbG2OydqsxCSoDVsvoBafM\r\no5kY27raD/Fg6wyHoL+jCDTpWdbiW68Nxf3vOR5NSn3t6XxF5TdAlMdpieaj\r\nOvxe4TLVnsF8Pfwy45ENIHi4E9VNlbJv21NKTb4R5ZwYoqWA2uXcthJXjLs0\r\nvo9hFMKFpXjIgsBLeFm0vgvj8CWwZdNMo5cndti8qxvjZYfA4OuSEew0N/af\r\n8AdHpGw66/s8tO4BUcrQ6yaQA68FWzKogzpELTmBt95NkPmu6n/FYMIrvAGe\r\n1kgCN3GGGaLjFBV0YGLMBuAfVacwKcyDfzc4SveTJwojVrT14UVTVRbaWhiq\r\n9OXvRho42hmSlyzfOvIbBlfGe0h7XM73vyUIzuyw4VeolX0UzQBrDmRs+8ML\r\nA1pvVJ4ruOkFE7t/qx+v02k9GCXshpnbnKccOz0jaPgSFsZmmEz9CnHJiAj5\r\ngBukE8Wp3axUSJ5UafQ30NxXJN/uwxjOxDS1oWJWH0r01u6u7/DxUUIRVC6U\r\nRWBHFCeAcC8fiJBgujQifIlKuy7AK52Km5iznLOqwPnkS5vTYneWPksVDV/c\r\nXEvqIES3UNPptHWS29lsKu+GyjIBvHYI3us=\r\n=9Dnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/density":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/focus-ring":"15.0.0-canary.f32339937.0","@material/touch-target":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f32339937.0_1678115776079_0.6194319903487291","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/radio","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61558a05213427e765ece095003c2eb6aa5f6690","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7644d63d5.0.tgz","fileCount":41,"integrity":"sha512-sg7tD7N7zURq2/nLcoXXHgxZsC8MV8bnD30K/5G2aaIGT+JQcQlQcuNIfC48C3TfFXE/zZG+lOubM7cWDjvUEA==","signatures":[{"sig":"MEUCIBHaBNCohxg4hV+bMKOfsmPe3EKYbwYniNFGa+L1ie0WAiEA23W1jxk07D0XUhtYMPqp6p0wlL/AAni/6dXM29rIL4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmj3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJoQ/+Io1w2dLnonAmwymwXCso+tVPWJyb78Papx2NBq3Q62jCdfvg\r\nyGpGyM+bSDkP4OHFFN38mINQI6cpSXu+JJ3YoT7AJPLKKp5rnWwLIArUFl8Z\r\ncgArqj2cdtHuDsW+V+J0V2tQOikNMm2I/gFOja9wdZDpqZ9k6MC6T2CcmBT9\r\nOYHYtk9bsHld3PCeSD0zCp2lI5eBGsWIiW5Tl4SxmhyVVF5Zx+M6qbnFaCwR\r\nfegYK/cBEZbvRrt6jx5YZOms/ZA4DDYG9cUnS12hyBPpFt3c8l96uT868ER2\r\nJALVpv6U9O3Bxo2uOHeAr4sJ+fMWR66FbgNBF8uKt0kKmvzmY/zES4IEx2K5\r\n4+sMtv24bDdgrPJ0YmOZE/wY4Go6GHun2035Erd2FHhjaOIabdMCxdzT+YXL\r\nZM9fLC7JO0C1UyHwl1XC/aB6J4s1g/vxks4hHHnyuXB9DSVeMiC0mBk5fhxI\r\n8zsdhZobLEi+fEMue7dfXNeuO9nNxjrdZjxwBitX0K1qMXSIHrEXpYm1GL5h\r\nkyANtd4Z0fz6d+Z15ZU/n57/PEcxneMzBFhriDgTH9vKbGnLsol17sAvIo9t\r\nGwN8iKW9YnmwoAWykJ02zAOloHI2kkB9322GsmZzuu0Ft1kASHc5kziwyrIm\r\n8DBznLYCc4V9odS60YgIpFZcIg/WxSk8ZPs=\r\n=Lafz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/density":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"15.0.0-canary.7644d63d5.0","@material/touch-target":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7644d63d5.0_1678141687499_0.6313818121281609","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/radio","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9307cb3635b1c1cba47a6e323a35c8a69e226e46","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d96330c08.0.tgz","fileCount":41,"integrity":"sha512-4hDp187FAcnhCDJsUdxEEWbvEGbGuw6pKO9b2GkrSXnntKPjGma/33icYu1I3glGj+iPkl17U9lMhu6mGq2C4g==","signatures":[{"sig":"MEUCIA72rI7mv5/j9/D28QbWj8qo/W38szb7qYQOzxti5z1AAiEAvrd5e056MjOV8iEwwqT9Uy7ZTpCIz93rEyIAvG0dZsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorFxAAgCkYgfcLdMQxX5riP66zDbyd9fTWuBbz0oUAZwdQ5YGO5m6Y\r\nmwR8zl+yxG211hrsiHd5XfOMLijmsUus6N/jBEgTpH7Zrt1w2txjpqn2fLkL\r\n18xDc4XD0Hx8EJcBMC1HTDnnQhNbFZjXaWaxtfNqQTqOq3vmuRLy8j1d9slN\r\nWgNR/aRlwXM/oD9ASmAhIs/c9ygbImRmpheIshGgIOqp+o1bcb9wBATwy0Vk\r\n6pGO2vnYv979aNueKsVRuAWZINnGSjtWa+yFW5TVJmUvPWvKtw12dugEXP2P\r\ndv9u4ynjmBxKhf/tMPYvGbFWEAvAfHfHJ8ZrEBqDsQxeh50ZFduxsbUeo0lp\r\ncOusnfZaLeUCs1HxL3VvwCJEezYPMH5uteVFqGZmUz3u0uEChjLA2RBAGZ/3\r\nweIiGCpNP8R7K9GcDFx4GtILGYZmcjJxuWRCKCPCNUOnl0wSQYFpdxjtqv3v\r\n47DdnZIrGJIsvD3oVZxO08ta2rRr84Yakh0d9M0Axfg5mToeALJHd0z01CwE\r\nTfk4bpRMlPudoiBtZJnI7JjUOdSe/xGYIEjCav+b435H9RGZtQQ7jsNioDKC\r\nrS6WL+AXZG7hRHMYicanI90g6QBajAfI+OYy9IXKvBbuJNi00sooTypYo793\r\nTpFf8A3nhxmGwOyxpC4mboHW8+bt7yf83iE=\r\n=5tM8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/density":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"15.0.0-canary.d96330c08.0","@material/touch-target":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d96330c08.0_1678275750359_0.3293639916601907","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/radio","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d937e877333bc67d78d01c1e78710539583d50","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c99cae77c.0.tgz","fileCount":41,"integrity":"sha512-btt1iSlV+cYKw8QQqqBsfu34zFZbzSRzaIL5Rj2KCGBXqV+fVTkLEaDdyQR8imC1C+qbwd+z1LcaBmO0/NlRyA==","signatures":[{"sig":"MEQCIBImYrCQH6hY9nI4d2rLmRlMGp5Hma1EWcnlMvi/lYBtAiA/C+FufyqyBomHNGuVFGA/s5GHhtQEYTTn2iDlWvQyaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwZg//SyzjmuxUz4o8f3UryoNFBNxzZinhU2+TVdmvsZEXjfwLUkld\r\ngMp1GemXHh8Q2os82SGrUtEwFxikiYo6chTX+B7PDJOm96zMSmgxuZUwa2HX\r\nh3qUxuwvPIU5cH3AjjTkae0YMRKo2v6QBpFjwalE4H07Iy/C0JOAsMzFDeMj\r\nH+ICBvqrubVGZwXbt0Yoyy/H9veBm0z5WFm9Z3n0OZbDKIGfRd3OvB9W3ouz\r\nMbmRF+62tOUMVsZm0OlPH9huZlSfexAt/mvdGpiWnJU+MBa29LtgS4ip1BNN\r\npsn/w1saHcHE6gX0ijN40SKPsmgZ1IsIeDe/XKz1NIQ+CtuQ+SsQ+UHUrhm6\r\nXF+molFUNinOai/bZqbdI+fyCnslE9184KbfQ8ZDv6YU6r/oy5dmCaeYQlTA\r\nG4dasJf/41OJMDIgJSunx8ay6BGlCVtmFeh57qLmzLYJk+JEqwigFve8sF15\r\nEGcp51gJLhwHpKsYwXP6DTAKn9YzJReiEy7834SwUalYZaXX0cYvE/5L9tjz\r\n3UjWLg5rzxb//IV+20v/914NFzwqmKgxP+edwN6P5jLkpnLtG6pxDXddU7yd\r\n3kEzIkC9kL8DWR8WIPecE0xxEKsPMciyS2GSlVgfrlPuQ2I/X2hPto+MH0st\r\nI20EAcjtBA7Zj5V1xsDlU7rFfaA3AOxfzYc=\r\n=sF4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/density":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"15.0.0-canary.c99cae77c.0","@material/touch-target":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c99cae77c.0_1678319014221_0.14098432000807737","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/radio","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"885f391d2a10a23b92127c1a03a816dd87b13c0c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6023b1cd3.0.tgz","fileCount":41,"integrity":"sha512-ubsIjRUIMh0MxxdGDbr03Z1cge8w3DKtpO40d6nuHrFMTOM1ZOZkGk2tExTqbNDLqq31MDt08k6KWlOoGwzREQ==","signatures":[{"sig":"MEUCIEpQYFV6J+GaMviSh7saj+SVZFrOSZ83w+lZGHEV+EIjAiEAlRLAg8jLomE4r4TTAM6gjT8OsqaDEOL8DVucCyfFw0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCey1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWNQ/7Bd39MOA2vN9SQhRmr5oWKPUul2Jop7OvZONaHflF0Xw/Ij+8\r\nLGZ+tUSw1nemwJjOpnCrgmBb7LjB6A89zdU0PK84Wt79IvcVR8c67juremTK\r\nhTOuNGeG0GduutE7FqKfwqWJW6fIU+L6i4j8ye5J/1upFXNR9fXjAaOF4Nlo\r\nu7POCJEtFuDVAGf8cHqVJRT3jpHgYv4gt5NEHoYqEjLf+IO4XatZWjUXQgWK\r\ncZnkdZzKhXj+6LbyTzUPIzBU29JKhT+EOpph3OvSS2aZV3j/lhgeSGnSOVug\r\npP6VQ8U56QwbMBmxSpgd0Yp31POmJLA58U3yBtDScNGfi6dtZXsuGRluGqJJ\r\nLD6J4vV9MJTK/HwpuE79BQhRYR9vh0GY/VdRC4M08TKTXYFsCdtaldE+uaPQ\r\nq/NznnSWMWrVVBEvn+lbQuil2P40uVnauIFIRdoTfMcm68RdmIsr8uqhc9Al\r\noPRCjoXfKoUwCleQtZpMtLOObj3SvZL8QbgDZ8n7NZrndbwRoSfqF+JnM9S1\r\ncX5LqtC7akQ+wssDH6udg6XGiY8eFRYQYrYRDIjQTfM3FcVDld7MBrvnPmSf\r\nrat9Hyelf5bxnyU89KbGnW76gKCM9ZVQ9A4erMs0rxLvERZS5JRLeW3sirmh\r\nc2FMJed652muJ9NOskBq8EwKb3kzySvU6HM=\r\n=+L40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/density":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6023b1cd3.0_1678372021251_0.5378462776289437","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/radio","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8a0fb4d1cc9d4855b2430adc5760f579fba342","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.274610c77.0.tgz","fileCount":41,"integrity":"sha512-N2nDGaj3bQ3/xBgD43WskwH76KELc/w4XqAtlXBCJklEapIswXeE4zh0+8k8bdU4Nl0TLroC2+4X/eQ9Y/JlYw==","signatures":[{"sig":"MEQCIHkHbiv3VbZ5JjImq0kKa6xBrTC80bFQAgh4d7+NpLGMAiAo/GMlOownppHdOy3hd6LMGRqFfAz0oCZ7RVF+5JAgZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCKA//Q409AhFnlvhQ7dMAd5JN6G0VV4OpIaa69HMBaYK0pIvIEJa2\r\nuu+IKChnUHBmw6f+49biF8kcg2Bt89RvA7olQumIrW5Qpsul/3Un0/6045e5\r\nPuU4E6p/t0sxJse6CvEuEkMUE9iufHpWGHR+l8x/CKwp6xDm6LG5gxFHypkf\r\nbv9qQ0YEcCRLHfobAOvRq7aC0X12Plc6X6V3+P82zqvakuOMxS0V1BJeR+Sd\r\nz+WaaJ4oelIM5JKLupqU25vT2ppPg9PI+96JDWo55R9ry+9MEGJkAerVoOFe\r\n+pQ96/9B3n+fOpsurY/we0emReEoUYI10YbiltsgUdzTVSq/kx8eks+YBO11\r\nER5zwMNLtSflpRONKxLwloKYmWEPcvI8lyIouMIMVOxDFY/+NuUXL/KG84/C\r\nYF6oBqd2Yx7MUdxrN1M8jv+HAp2O274HT4Cu96B5xdFQytpp8yD5NL/VzQQv\r\nLS+VnKT1tpPR0tv9YeCIX96JSKCHKqJJA+vcrFYtkf2CVug1fCDjENF3Vgs6\r\nLjPneBBX8Fxq0pzGYWOhDXED3E+BGxn2eIGASHK+KY1iUo6IdWPj+TlS4m07\r\nlfWIU+6tESekQmmGU3Pnc4y9VY6Vsokye/gMIxDLv2n1+ZeR2ixOclD4LoxG\r\nG7nmtXUm3JT08zvyeaQrHrocR+8AoUp17hA=\r\n=Mnn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/density":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/focus-ring":"15.0.0-canary.274610c77.0","@material/touch-target":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.274610c77.0_1678373964013_0.2290848964401766","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/radio","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e448d0caf71ee1c89eb89b90141ce9b2ac085bb5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a274583b9.0.tgz","fileCount":41,"integrity":"sha512-HXKpl1ix3ZrgWwdq0UR8nJN1XJyI6/jH5YFPrnudCEAoulJMy9n3eFdlMAZ3sqDhImczEysDNrhw80xU8lERzA==","signatures":[{"sig":"MEUCIQCMhayJV+4pY0ozOeiGpRCrPYU6+o6tst92bE+Be9VjBgIgYSi8xFmk6mRe/+EEo6aOrgojZZDoCcVSFMqVCg9nrq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYYw//cXQkBYCVX1H19bM/zSADeR14AGWtkcHNpr95Wk6xatEAD0aK\r\nbAQD3FPQGEkpEJ2X4LXCyOMFpj4lWwwJr9F6c0WjoNnBGUvmcGXMlWBItR6o\r\np+0pdSEKWu9Fxy7yLIGlaiOf742d+Q0rp2n8IzCx92TK/iKtCTjQN/dveGJ7\r\nko+daFHz7feNwBBv8oulL3gSEk5gXmB/u633rENIjBQYmdd6icCV1Ej9Ar6T\r\n4yy+gkoaAJJ/iCboFa/g9iqonXYR3h0aHNNL8WOsoKduhCTpXjfk+op7MGF4\r\ndag2O+9fWdqfz55sYhYwmssX82ofXQOfGoOyIimYkY2hZ1aUmCF7/ZiqEFJC\r\nL4gR7EFra8rc8tXxPjrNo9xcd2i4pFlQGLslKcJLp2Hbf1VQNGUwFLkXq0LQ\r\n48sR0STuvlPSw8PrW+K7DZm5Ne2Z0nNBq4s3QRKv7qRHUAkNGA46vdjyal4l\r\nm5MQrLwqzJxVBqkVJ0wK1ihCi+AQQ52oT3osJYKXdQGMBsk7XRYII9GNCovd\r\nmQmhqHEUTrsI7ozt303hzdLW94zchxvWp8NDlaVyHw1RFPFaHlNIHDQpDJAS\r\nbGin5xuRHXRWXFh/gQMPfeD0+QeEavPppWPMompBoWiqV11wkpeuCz70pfaL\r\nS1n8lY+qGupmslwkMEjFMxaH7NZ761T1PBI=\r\n=n0X1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/density":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"15.0.0-canary.a274583b9.0","@material/touch-target":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a274583b9.0_1678391597815_0.1952359762027256","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/radio","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.da22ca960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41654f95b9dabf47f554ccb02c0559eafc9593a3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.da22ca960.0.tgz","fileCount":41,"integrity":"sha512-9WGJVvT6apULMlWGhqujFxEYICaCYljvwDV2eaH1fd684eqXh7YdNXkAlpv+rK8ycZFThcj+Lfkh1Na1dzRYRw==","signatures":[{"sig":"MEQCIHiVhW38BnB5TcXMbuQ5g7QaNJiyMEwGnOMVWJPzuK2WAiANcJZl11OKoYpgiSsFtfSd5FVvq7dH6pdMM/W4EyqOXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvZw/9HDiGLdtVAoKvP2QZR2ztvg8mX2r6+MEvuwGsXut/DyFqjXYp\r\nu1BY6KuF9d2n159eJYq2Y6mD8T4GOdyDfXKCSPrtmbZ6xDUDRtVZtmNa27Uu\r\n51TQ570smLiNRWcqewUqngGdq8TafyunDAsCcY8J9aIVv4gjLzKQRQlJTmyt\r\nBkTMBG8GjAA1ABFHgRhrgDvqsAzKN60QHKDO7w8Hynx7A5MCDdbACc+9rBnM\r\nUp9KFlYrwtFocqZqft6MNsx9u1uSCDxkmJeqbJ+fgGg5rZu30kOJPF1yNz8Y\r\n6bskDDXtpiyMs1KeVzEUWGfLTkUoBav0J0DOOcEhudDKN2aYVyaTYv83sxWd\r\nv0FfyT54LbNdDyoaJLuG4PxUSxhVr7S/KhY/WoxitOJw7L86nhJ0IGI02kkA\r\nYXOfH+4tMc46LBzKkkmDWzmQjzzrvSxoFgSSXrFNo8F+VcRQi9HdvtEOJjLp\r\nqZ1dFVYJcEOgVD3Acbn9oV0szWYFlr5LfB/o49cdtm9TMW5Aw+qmeZozDCvQ\r\no22l4SGq+pBMPaygZwfaAYB+mBHcarbVCmtQvaGsfbP0LiGL6vc6+E8GeSYw\r\nGECZ71D4oa36I0TM6RsEFHNdXC36wi3sjDb/eL7NtmND0PP6lwD1LXab+msz\r\nVJguxIGmkm71H+iuVD16+WhCluzUCE1OT5U=\r\n=GqTH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/density":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"15.0.0-canary.da22ca960.0","@material/touch-target":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.da22ca960.0_1678393133980_0.08656783623628161","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/radio","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"976f6a2bac3fd40cbc3941a04ce4e8f28ed30427","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.304a94e8b.0.tgz","fileCount":41,"integrity":"sha512-IYo68RZWImBznDd2jSJVlRK/+BQTY4715kAGvc1XLXk9pE5TS+fFQ2R+FHT24ldDFLSmlNhd3YINwdtDRycKwA==","signatures":[{"sig":"MEUCIBk4bpYroKsbtxJBZuYieNgZTPoQ+pcChaXoUutxVnn6AiEAvhtwpH/oxISrQTv/XwG+WgUDNPFqahkK3UTLH3KYMfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWpA/7BNxf7rovP/dvg2B3W1+4Hu1l3Qizo4iN4v2kaEUJyqbaC816\r\n8SCM5Lt04kv4rv9AXpI9OV9KYWkMEiJ0UGQaVMfJZOI6Oah7qoxoXcI5ijiS\r\n5enCddCmyAjxwZbH0IEBxepExL1MJDXc+4jchhnTA60eubXweXoRRT58WBbx\r\nbsDWcfeqhev0nMLDz18hZUu/c5wMY8TuO6DWSRBEQWnsg5ZY901+RW76mET7\r\nJ5vKbo+PcPPU5CEzaW2mzgRsT5Cyu5xYJwfvcHiPmq1ILR6rB6wq5svAPTAn\r\nS1gyR+MCWfwpuWDR/k8lvA3FBxBKzCmyjk3KpXOYV7614zeXe4O0lnK0TtAp\r\nNpHH/bqaqjiJk9JHM0PyG7zQn4QXA0NVeEq6nhpyMAuFkFrvh0+/7kQOBGn5\r\nHLpczdrBCBQWuKkXhG/+5i6z4ETo4HUD16oamue0WqgRxF8Gny20ljKy7ubb\r\nVF1GTkU6SLWC+3TyJKA0sqAV3DieRWk2ioYnB7JFg7WJpFVwceGShWf2zVGb\r\nfo68HLIsFRF23xRFM3wiNlvi1iOf6w/xJrsSVd4iOuNXgbV36FnR5b7X0HZj\r\nIqKMn/cVI4Orihj4mf12bqaxYB0Cg3j7TjhCHgrGJOSQkqHuiCknC6t0pPAb\r\nMPa8leTH9DDnqpUUJMbs9iwlQX52HMcgZyA=\r\n=DI+D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/density":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"15.0.0-canary.304a94e8b.0","@material/touch-target":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.304a94e8b.0_1678394738030_0.9685105981958959","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/radio","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ece1944dd525b70f160678b352fe88a2f56ff43a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6c265915c.0.tgz","fileCount":41,"integrity":"sha512-oYQOkdp6pAjnHwtRssYv9LoM2T6bwuVghT7wq70ALw4w7+Q6VV5JgEhG4uR7BSM+MRv2bRZSDVr3sKuQbAH7zg==","signatures":[{"sig":"MEUCIQCBUgcdifR7W1fKfrXZjxXZRz2C7YkdyscMVGXruagKMgIgdZLdTDz6kxxLUKtxcs7koZqAnVbx7niTkQAIKi1ph3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO9hAAify6Dh6aFwsfPkAm1NfhRV1NuyGI3kAPlzryEV8/c2MLc3Yv\r\nqqYqVD9pYzmBqRhU6G9m8XPi5wVC+7SRpnPe9pCIB5kzAw8cjRLwemoLbVT0\r\nOSMQVi7uVzxroOQDqeqgLwzD+9FivN1i03Gq5xr9XF+o7yjbEN5ecXMNYFbB\r\nELvtUVKg58BSxCVZaK+6O1jtUi+NahXpE00xmpi1z+daVIjPu7qd43YPIycY\r\nDnRVoODRXjqsDlSAfK4xr2DiT63AXcovv83aSbwatYesfDX5GV9SiigR63xY\r\nNavgQnQ402JoQCFblRTy7kWHI3cuoc4y5D6f8s2C+tlvIYOSIOUh1kNUfzsr\r\ntg4RTTmDSUfdd0KeewCp1oe+GQSm/+Z6nmFGNUGD1wJB1Ob3NVXiqn0h9UyX\r\nwUqaQZGCvUvetzNDu30T0SgbhNriTyzMDKWC4JRJ0kRodJ1+Amu975+ltX65\r\ndQ1+datrc3ah9y4cm49hGH6QjLLVyu/ndQQGPVs0dvv13U/f8W+pTNSOmr9L\r\nXBi+9rOmYliwzUbI07zzBe7iz302HUcPm7Nu3F55LwmRmOPmniBk5WmUpPpH\r\nqPRvkiETbonAFXX1DMq31/7xP1zfPunSlaEaISAnhMJdfdYncShx136G54M0\r\nmlsIw77tlrtXVg8V5guuK0UjnuZnt3ZRfJY=\r\n=fHhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/density":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"15.0.0-canary.6c265915c.0","@material/touch-target":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6c265915c.0_1678398475489_0.9912790833055847","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/radio","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f1ac6585b9aaa43cf909844788781cc0393e571","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.de5224633.0.tgz","fileCount":41,"integrity":"sha512-cMl5uQOjXlziFK7o1I+yOLhoUOU2YSVqZgorLQKcrqyamCP3mqJ7a7XuqQmW2TPO2zr69L4gP8OSBttAd5GeWQ==","signatures":[{"sig":"MEQCIFxTgrge9oeCtm9Sd271mgeDchyUU43DVOAKLh5Gg+SsAiAZEZx85tyNVcKWiG0VDQqMbUD4uhOy0J9C7/XoIoD/Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo19w//WCVYC40Je8hbJqqbRSzObNvLsD5pyk+O/BCr5jgoajkuZJEp\r\nf/PrhwMpXU+0QwkdK7viUOjfcmGOdGISdY6g34wk5sbOdN7qPQllqrjaAUKo\r\nMwbmm9Q6KZLKBmck2Zn3MCrehs3nQw71rSRuFid1T/s8GotvGrpoo3Yt9/Fz\r\nVyqTyEg9yXH5xNKGroG/3Gt99mm5KS4nQMKrYRkTUUfAD6cOF/sU//lXthE+\r\njVIXIbLkLN+wxTPoD2j0bV7c2fkEnnPIBwfm6uV9B10Q7ijZSToQztyyFDM9\r\nuKdHEFOxFyJuq0prVI+0orRRq5IWg1xL9K+PYsaYAli+QEvU/TebfcAKLgV0\r\nurszyiVoqGi1ykDI57H1RJIuwYKLdWfRKbgg20Ip0j/AyCh/1NZSnKf3oKco\r\n4EMovPw6yj5ZZdXMALLE9oec0/YtQrJVo/mpMahp19AACBWg7AU0l+VReV1z\r\nc+aVG2PKjMUUbwSO9+E8bz8JLnRiji93eFryy5c/g+MvPiX2tWKajkJRklL1\r\nyA9E+tyhPB/680Rz6auLnAm4vljJUz2j+88yRGK8hflJFjqHQhhTbUgxbyEW\r\nWz2RSdgdoYRt18DeSD5xB+W6hjdwUJnELYknmssD2BILuWVkczJG48XtFeGv\r\nDxPNjQSJnJy7nHqU+J26G58x0SPSnutQPbI=\r\n=ZxMN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/density":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/focus-ring":"15.0.0-canary.de5224633.0","@material/touch-target":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.de5224633.0_1678406181313_0.0172255410802864","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/radio","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60d57201a164606371d11cc355a3a734af6857a2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8879557e6.0.tgz","fileCount":41,"integrity":"sha512-dxqG4dAEIHaCT+AsVSmUclexeAhJNy3omhwM5FL1KvR2/W16dPTHAsPcyc7SwgqVaDY4id4GW6AUFRvka/SbnA==","signatures":[{"sig":"MEYCIQCKyiPllG8wtMkZh7xaVAgsNCv3YD2OmYzgJBEnHnFHUgIhAJbAdpBjqllko6o3eFu8zfmYyVqmoUAlwvmN6bQb/DqZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrpdg//YaV0kZYOJUc28kGtOCxHdBlQHkAFecjtDbwJT66axtjqJLlk\r\nQdaQ0DyqD+LzlhIxSELFb3U7oWnbgagyv3jbRsO/jGr1C3V4Nfi2QSisWP6/\r\n4DDhacgbRPAJPcht6t26ThqaJDUoz//ND2a3g+IZ/AnsG2MajGiBJLQKh9vN\r\nGgBrTs7mRIYd2Bg1c5pBDnnu0NTNm2lQt/pHL70GT35SFYofWSNRgbUQ4GKJ\r\ndZieW6QmpCyXYAkkDx0DFabqRgdQMqBt6ems/dbWGgzE7jEXsK9uZuPbRvDW\r\nefJ1RaZT5+Fm+/Lrg1hfRweuA59VxujJV928dCY4fEM0XPt0MsBaHlt7QwKK\r\nYPYqwvRLYLj69bO17Pk7EoCHMS3vlGzjBsg+WtG8Np950/s/BGBNw1DkJmiA\r\nNgp7b0ay/EHYss6I46cRjMhEl/1ygkpmIJC2IKwxUIoYgXlv/t+u8fV3vgmx\r\ngI/Hgkv3lFSyimvzMdc9lD3/03Ni3fXnwi0vG5JQHmgbbB6qxOjhBON7KeoI\r\nh9jwF0vAFYENFGkTtYiGIH2muuxyovR6+bKoJJCN4RLmL31d25WNPQJiWDzE\r\n0udOpi+4AFfX+wZlyedkHKM31g2biaRKCUpDGpj4VZrwUZcqy/7HaDJidu/x\r\nOuSyyRRZYj/OPf8XV68KsbSJsIm9PitrrB8=\r\n=xq68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/density":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"15.0.0-canary.8879557e6.0","@material/touch-target":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8879557e6.0_1678457312395_0.45808644876752846","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/radio","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9bb32a09377396d04729f088430b05125de6cd5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.23073a303.0.tgz","fileCount":41,"integrity":"sha512-Tm0wa9qJJGHCY42Th7vDwpVMgEIcdDKDO4LT3KVMZ+BXDtuGdjJPMwS7QjjMkolj8vijMoL8j8h7kNVYovFy2g==","signatures":[{"sig":"MEUCIQCcl5/5524UE5aQJpaIp5L7MM347npvcOulwC/tWctynwIgdF+04K5WPKDmscV1jz4WC1L5SEUIzIdYE10BosPRc00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ8BAAnUVVKurh5cJttYqjvbtYjdlnZNW+lwPyMkchsSphd0xIq6mA\r\nqmHZnQ5LDfxDfIybKimRvhOmtI4w0NL9dX8TPUSx7Cl9Zf74TxCXIxtxz6mT\r\ne8RPnPxS6uU6/Lx6IbIiQXrR4bH5c24Qo5FhcgEzm52dcTijqG7PcEcsewdr\r\nvhoV98yi9Gt3lNfzOSWNFkot7WnxisqO9n2nqUHZ0z9CI6CsWy22PLjYkAu4\r\nc0cziQoCCAci8C9ctAW5wUSsFAq3llW5j5+A8CnYG0W985ibV3zypgaL+DNv\r\nMp5q4j/cQyDMT4J0sJkSN3SOtLYxtuTyyf9ycJVJZUlykP8zSM9jFHD937Mv\r\nW4OQuGxdV5rk2Eae2Crkmma86cjL9ae2GzHYpvtgK9ssXNQSHhtl220TkVJ1\r\naB11Ima455/EifWc4eC3Z+o/gTfklpARLYdAKyJfDY588FKjQ1gmy/JZrnXk\r\n6oltpQJvFLN9ZtwT7J97qfwiYgmu8Ui/YbqOn+FCJkBF8ab+R/2MoCooS/2r\r\nPxLVQvUYL/u03l074iZ+CkdHvB2LIF7JE5bWOEwDupF3R9NKI1wPiE8y3Sr8\r\n3Tlx42mRH/OboW13tJdanNU9EDf+V95ApAljwTl8Del+NO2cys8R69Ju6vqT\r\nLbfc8Ulv7SYvH3JD9o6nWDh90G1qCa51jNU=\r\n=0UUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/density":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/focus-ring":"15.0.0-canary.23073a303.0","@material/touch-target":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.23073a303.0_1678457739451_0.31676620977797154","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/radio","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44c2dfd62800aafb1e03cf73081342b7da3caa0e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.51c7d4014.0.tgz","fileCount":41,"integrity":"sha512-81k9fW8t/45tLOrCnqlkKEIN8CpmsWVIHVvf+8h+WIvV/86npgUKsevhBAUO5aXAQ7+eWVcmtZJ5fezEjd2vTQ==","signatures":[{"sig":"MEYCIQD8/CihaQ00NpndwiDVi26DRA/R2HVQfTT6v3HWqcJ9XQIhAJPpmT00mpxGD7UCTd1xBsnVIvLk12rjs8Apd3nm4Zg7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC19CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2rQ/+IfxCWdyIPxtxeA/uDiE40HZj+voUXo9UPcqQ1M/qeV+x04NP\r\nJTB/0IpJskicBv6LNOOjEIMjxeZsH9EkDFLponoFVWhJqFN4mulXs7JK13E8\r\nF6hubbUlJ5pJtH5BdJs9oG4QOENJjoOuY8bD77d8//kBaw5DCQzVTFmuCfLi\r\nK867yGP4SLObFafAAFEqnetxnGg/eaoi1mpm9XCB4ziLwdmjHKbnwnSA4E4F\r\nyxey+XDDZx04c02k8WJBJlG52DBLZbKpfrgNlLtREYFpE6Y7Q9UZgWX+TTkv\r\nOHM7M8bnyyHx+JJvnMM0fcTtqzExsvfQ94hyR0dFbYoUW+BavHfubGjUfJA3\r\n+W6m2ErIJsE7x46t+hB/r1kYQctk3W9pw01qOZrCvMTLB5aNjK6BNWd+Brob\r\n9XiK5CLF8bbgRxPogq8f/tzNDYTVSqfX2/la7JuktIRpsjUIAp8rxC60+fs+\r\nTf+pA9XxZhtEEenoZ+g8p/IH8ycFn/XNNW1HejGdKibsthYPQVHMKJST+Zia\r\nvTUDym+eXVgQjB1yHyEMt/RDMzUoJgfr3jk8MVVmlludNJMGlZQY3vhUl3+b\r\n6Idw6KTb2Jd8I1yKLSCBNbaGCxfDYidDEmAOj2LoE9N36WOxVbb2Ff6FVcZC\r\nfG43WkFdWtgtwFQv82lH879Fwn8vbTgxl1Q=\r\n=Qqgm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/density":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"15.0.0-canary.51c7d4014.0","@material/touch-target":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.51c7d4014.0_1678466882447_0.5173415255039981","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/radio","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4235be1d1ec6b510e469643d5da69f2ac317697a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1175a5be0.0.tgz","fileCount":41,"integrity":"sha512-wJSQPrJTFwu0DQKVAs52knj6rW5nyraoGPmWAP1x0wyUspOEvVSdc51vV5qSISz7jNQZrDOHpR8Vdf6cliGVCQ==","signatures":[{"sig":"MEUCIQDpmi1UTRZuCT1tNZ2A97KWdJFq94ZAO2lrkX91mEnH+QIgGiFY0ozphzCUkf2q/Bx1hGZ3YZLGuQ9NCuY/hNMHjOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5emACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTrA//c/LHvw8d3yhEwpBO8zuOFsvZqPUg24q+kWObQ89Byf0ffk6O\r\nrwJ67d0c6VxsK1qf4KPOYv/GCb/ccuOeBwdNeBLoBebIM9jaVyyyqGLD+3V7\r\nCL3qHB3uU4c5NHy/eJn8X0CU6gWaYFi5kgZM29wqLpEnsmwGrNXg5nSTZsiI\r\nQpBJzXQYW6mw1oLv4sJPELEdUO6OikGXf7zKXZZ91FrCSY6ITz0Ip++vmaM5\r\nNEEkATfyL3zKFQPC8MZ7K08XKYML8NYYtR8MWg/swiCQABcBK6km33Ahci1u\r\nWtTadjP44kI42AM0LQryZ8dISix68sukIcbIqiamchS2FnQw+7w+Xw13UOR4\r\nd9vjtF7ILqXh0HTJrALSCd6pSfDqeR6251/PtX89jXQAqoOsV0XPnhoqlnSv\r\ns+r1EQG7W4FU0LHUbw0r+rqnljoAFykbKVBt3bI16d+lphMr+mLMIRhHImzk\r\nKfNOXk4m+WILkDoiINPlpw+5HT12ImdfwHojcrPlp0e9zbqIvwOpkKoXVs/D\r\niSm9shPV66xXgnQXXpIDN8jHRrQVvXt/3pvvQQqgzUBkSohr6s2+T1wwl/60\r\n0/fnqKOqfXskP5vbPR3dNEJIy2bH9Vy/gNhDoPvtwC9f458HDfockJiuewI8\r\nQpMbJQue5xa7SaR2EeUeIjPg6ND8uRgeI/0=\r\n=Dx1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/density":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"15.0.0-canary.1175a5be0.0","@material/touch-target":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1175a5be0.0_1678481318694_0.4746053779471884","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/radio","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"333f9e50131d907d489ab03777119c0131fa67e6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7adf3af80.0.tgz","fileCount":41,"integrity":"sha512-fhcAIhxkWfAwgexCzNpAWRT1KIzbuxY8BnwZqHXpaeFXlWSAMX0MKKYe9RtVtx8v6mTzz9oM0Kz09oi8IuMnwQ==","signatures":[{"sig":"MEQCIHmwrqSu5FPz7rR1nUn9H8guDMpgYKPJnKwVV4C8mEsFAiA3FECU8slgvrzlLREUUeAH9JkwmE4V6czkr4iJ2mLy+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos3Q/+KvKzAXzVuUtCl9oFC90fp+D8+KpErN0ga5vld7VOrZvyZt/1\r\nmHjB9pFZmUrrYO/1iuQdNj7NzHh1qQTJt3lCVgNozOdsuGsn5LjihgPlrV+J\r\nRQTsFAVODNKKXWPv8FNN+QhoMx/8ZyAzplAKyFNxCrUYYInhPAgrtfDvDr35\r\nEhkDX4D1DyWudcSWjKC0h+BByZAuh0kONyHer+As7QFU+q+QLB6i2rX9O1al\r\nE8ZF1c8B1ZZVnp9M/8w2WgvhJu0LBq3BY7u68SZXdtb1TOzPwlEUpw7agXR/\r\n9AE4aNDDpZfUvvzYdYnfdQ9V1Ncrz7HpjnXKB/AGdjKDjoJbtXHkcj64jHOJ\r\n+gKpQ59T8SuBZpQr+5OR/XyYN8Kk0SIngsKgOF3aCTQ1WYxR0SR42wYIdgwr\r\n8g1dW/xcixHMYqPLVEYMkKjE2KiDGmmrbGzHRxWmpA7gVZJPURCY3shwscbE\r\ns/up7w1HO3HhVVRCzRa8zbT6yIGkIoeIU5OItCA1p/uA5hylbQkPW7tzYOEG\r\nkuuSMFcZ4dZXlIwG5eC9wk6Wm8kyoqzLs+liFTu7ER+7nWAc4JywyqJ9u5Jk\r\nr1qgXPMwYdSeRiJnAzmCHBkHwazHZKXAospZrjfhj4GRpgrVs5z9HTIFYnxe\r\nq6/xUQzmQk8NZUUil27A/nVcKwqHJH7BSYc=\r\n=hbV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/density":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"15.0.0-canary.7adf3af80.0","@material/touch-target":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7adf3af80.0_1678497936553_0.3478620156972636","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/radio","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c6e352e20c0d29d6e59e33d18d44bc8f273919","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.82554d770.0.tgz","fileCount":41,"integrity":"sha512-73ZojiSkyGoGqxg9X+qP3fBMieSW32UgdALbP5bTXl4M70a07T6vG/JOTR1roL8c3+TbzjDcChQ0HX/9LQufTQ==","signatures":[{"sig":"MEYCIQDiEONPTgkKiPGTkcfCUgUmPH+1UQ9OV2XaQTNEp13UyAIhAPmT9+Hp/S0u/8aNeeWZpx9uGtFf8hNEcvuWOkNdpzc5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtgw/+K/FoyfmPJthViqKSvUcEBEU6kZi+Gd+DJ3V4O/apeggo1wl3\r\nMeNuuDEVLrXOdteVWL/TBb1PadUHH9VUvxe9PvTDl5mYCM/6NhI68O36JI48\r\nc9nBLKerk6zUuufsXteDc/j9Hpe1hWwTCDk30rVE3matoM1dt3nGbk8b9C6d\r\ngmRpL0ACW4JVi7qFXvIJBKqQO0MGzOF77VZDkI5jTPEFiHvR07j8vdzTLDm5\r\n8btd73KFMLQvxbPPJ2cdtWelzRCQqLYFLGFxHIq8aSNnXmXnLl8T+kBShVtz\r\nuapFI8dxOdiXZ0l75Iizwd0B20MySSJ22TnjMMP5BLl+tC7aG47mAAEq9Mvn\r\naLLTrUKsb1LasTZBBwurWhNpD48+dzzSL8k/H2RSaGISkKlJPtdj4xtlpl2l\r\nRTUlZwMc4lXRyKtS1si+E9CAq/H4m6xmcL1G9nLu7HLlRSx6mRPGstlOfLQj\r\nS5wSMtM23FcVVJm8musIQ41LLWd5Qs0gYm3LlLlnCdap51Mi61xKoHHHN2cP\r\nTiWkgyKB+tGjwk2eeualrj5nZiaAe5poAW6Ab62phsXzYvbzm1A59tnS41TZ\r\ngUPSqQJ+YKng9JPtm3raR3qvyrTApGihTDwT/AY29nJ6SwA2o9+UTF2uNHj+\r\n/+/4ZCAOm2MVrDCv2QBG7eu6NTClqKUIjf8=\r\n=kEV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/density":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/focus-ring":"15.0.0-canary.82554d770.0","@material/touch-target":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.82554d770.0_1678498670935_0.9024636514866209","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/radio","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1969c5f6ae43f15eccd648b642a3b25430fe879","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.93fc524b7.0.tgz","fileCount":41,"integrity":"sha512-bLMpK7Ya3/VPkNOJWoOlGZGjWiAaZVuKPpGNOBBCR13UEOGOF2IFtu2eDG33o5hvCNrq14GhLZbYQthoQLNtKw==","signatures":[{"sig":"MEUCIHVUt7o9kOauJDbQGH6wlp3Lw165snaO80zHj14TsfsQAiEAhohR8lVO7vU+icxJ7pDQJxuq1UhFao3Aa94+QqUp+1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuFCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYDg//bqoxzsc1UBjUWMZ2hPgvgiTFT8JFmMBd9DTkRh721bvGOCkD\r\n19gtu9OoqMcl0mGp+xrmeGeiEAb9XEz2wWBkQiuZRXmQNrQHJbKFFs3DSHLi\r\nJklBygb3gvMr5iP/zYtR6Yjh7qXKdxTE2PalQy0ItyFzICH+egH95dhYcq0k\r\ngtKL1CnJldexhB64ZhzBKyiIUNvr5LrV6Oc/tQSVcpN5FjDdeXrnRi0BxR3H\r\ncgJvQ9oWa0hlZ7zYbg7OUZs8N8Stl0ZqWi1d1743ItLEqp/DDEulBkmIYsvc\r\noipioL7pTmaikj4V9LOzybrTdg/JYaqHz1UN6Oi2SlEqeF8Hj4BTS1fIHsag\r\nvhQXl+dCeoWyWaiFU2Ey8rZMAwHwXxDO+TYCij0HAXBt8lMNcd3gbeG8MN2K\r\n4ohlLyRtwjCt6DNhpcsMxwzfLT2UhGMWCpOgALamGhRzaoapbDjP7M+TKTLL\r\nB0aZowhHSVJQ3QKDSCiruNPPZ1grYAAuAbC+O08gzd0xqzyC7IjQprwwX8Y4\r\nIKYXRvyu8Zlow6SqZwsJx+tgnJF8iLwxD9asJ9zvpHMLUTaSXikJIsp9Psx2\r\npXDBGbipkXgvq/4k1jw4Rd4bE+8OC02HxTHOxr6Dv30CBC3Eoom46suCfjdl\r\nT2nan0z4FeDX3tdHE3W0LmHt1OABQh3dCCQ=\r\n=9zgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/density":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"15.0.0-canary.93fc524b7.0","@material/touch-target":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.93fc524b7.0_1678696770289_0.3986629785984843","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/radio","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"879087d14813f529c26231e6d49a100a02c90064","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.50be0fbae.0.tgz","fileCount":41,"integrity":"sha512-k/FQ1WAslLxMO1Hv5rqCbQFGD/pKWd8bEl8apXTPM2JaNnyNmiti/ApYnKZFM4d+PY7KwnL6vUSoUvSTZdxUTQ==","signatures":[{"sig":"MEQCIHbn2Fe5IKT9vmIassLKQ9byW+sqNYv7cr/yF4nPJxkYAiBaYxptns1wtHVG0XmFOQGRirW1du3i1lBvgZztf0cbug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2ESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlFg/+KlM4mphYbbFPMZ92RlR9MtMbeXc7dIxzZvTHYvTC1Su71P0h\r\nNY/l9oQHwj/K6HiHCmgT6W1oQL3aRT6e3LHS4E29qjGu5dsQrnq0Ya+YnSUl\r\nVjNYPL1Qnx7x3q6KO3KvwZjqUmIKivZtlCkWbU+tELzTM/duNIIxOQrxxSr+\r\nvZ7YgVWPRR6RUSf38YjwruEumQA7ppqCley0YZ2I/ggTvCsThLgzjcqz03Jr\r\nv1N1FdIKzTc3HiNIrlk+4cLBOdLxCFSPsV4qpxuQRH8T49gqLZWnBirFFRjf\r\ngAjnpVO4Goen0uUn7GkZ5f8l5K6Uav839j6pfp4hs9kH98WIzRxSZD/s3Xon\r\naukm3S58vpW3sXETXfcU+7X5cDoRi0Q+KTE/GN9KR09kvP8pwcdrIQ44jmw/\r\nrc+tsGgqJtE/nWk59lbZDFGwS6nEwwb9Igc/y+1Z9ijnC+oH/KXkpGXvLE3m\r\n09qkkOgIcNNGvOkurcPwAlbPcqNspRTvD3t+88V9X5AKTQYQwhuq6gGZnD/x\r\nhlu4Lv75Fe0HLDpzbN3J357pZPvivnpWZGBiINWqDifCuuAoCaddLyoOsV9f\r\nIPs8FKcsF/0O8tVSUe52hDC+WKyjDmXUUceaHE3r8VOkYpLK6blvceu3E9Hw\r\nrEyoG4yT4ef2QO/IyB9aI+vj5tq6XdKDju0=\r\n=SwyC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/density":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"15.0.0-canary.50be0fbae.0","@material/touch-target":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.50be0fbae.0_1678729489877_0.5136010792735892","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/radio","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c136d8eeed87ad12652fd63e27fda81d1a0fea","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":41,"integrity":"sha512-8PHCSeTAT14eqCfyinRIZlES4p5ysXAXVvkRLe6+UOx5NFt0mze+axXNZBexcFU+I55+OyOyz5U6/S4isWx6Sg==","signatures":[{"sig":"MEUCIBEd/VYOf7WCG05OB+vi/TEdxzNJYf7wcAMDs+YK1AnqAiEA/r5f/8x0sSyHBpTVriBz8HSGZCI/j6UYieS3dsnUm1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol0BAAlDkZC7F5gCpIQoh3vBT3kNNWVIBeq1CWlMQFehASSdEJDBaH\r\nDGnxUef91nJAcneqG16To/YqokxniK2Wqd8yXHANa42DskIJYDo6yDgfKnmu\r\nw4uhfZmZRrzlPIph2YWkcyL9JujZeQ0yl5CO/4ktAmcEm+/hourJCmtGRiGd\r\nZEUJryyVOj1a+nL/usSXx5kOZO/nxjnclCq6BTKM2MdwcV8aVNfKJni3SmPk\r\nTBTjbIsBtsZ8mlLfQjv06ASuw1Q1MYhXTtr2/x4yJKc7BqMlm/MZBPiLzy5y\r\nKbgenxDRg6NbVPdQbVAumVbfzNUY0DFze6c8NgdbE+rR+XUONNw3RX8jFpIn\r\n18CHdDffb/kn68+DmyKa+FSG0xF3MrLv6jxVVrjpxZO3mX8tune3JVHHMn9j\r\nZsVWuhHpy5HbxE2jBK1y2CW143iF9gkM8TE/w0H63Op3V5fXSlOUdCX715Dl\r\nxSj3Kt5wVy4iFqYarUyMsF6as7Z+sZPlP0BqDDIjCIKgFxoXZJI73iZbLfGt\r\nj8w2rcPf+w9eWc7M6YZ7OtyDqHGbNENaSlIlLcO8HIBFUCbRF82vczpkDYIh\r\nmXlb8c6IRJnERtGxFfIHUEH+9XOTd+AzsBu/HVwauWvxyk0HDnwaf/ZShoMW\r\nSvWi5JmZAQFfkmYjR4KMWUEiCkHDNF040L0=\r\n=Enjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/density":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6b5ffccd9.0_1678729691583_0.6196541522220558","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/radio","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663b6b18dad8d86f8da8c504b0cc89ec64927b30","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1c8013f4e.0.tgz","fileCount":41,"integrity":"sha512-UdJnU0sDaEq+cFnuO0MmJ70AZcCl4zBiNpLIVlAS0JiN8WD54TC9aelhywaAech7TMaS4qLYIcH8zOXROn6rEA==","signatures":[{"sig":"MEQCIAdoaZaq9P3V5vBt0Q0Xgh3Hk8a92wIokZRryPvYdCXtAiB9YgpF4qdB7QmmOaZonYLdRFy+yCTUIYdkVmnjz/MtOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2V1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6ZQ//cFBJ4lhgI6ZYRkvZbK+MV/5Qy9rbqCx8T9qR7cpzYeHAch15\r\nQcihJMjvEVd4psRFbTfc1Ndvh4OgRzzK+77+yABQMaEnyfu3caH0BDts/ni0\r\nK470ItjhHKK4H70owdSFGY3tbA1aNuu85Xm8KEAArCpXmRyAKp6H6vDP3nfy\r\niRhzsg/yL9moQHiavjguuSj1jWNHkhNTRFwrZ6ie1lDxzeyvfwqDFG/LlDkC\r\nfNYXwJyh66E815cerwxqRuQUa2Ps9runhS27d8QJB8pjqkc9H1Fz/xY5K5J9\r\nAFRCI2IhyLQeci9BL/wSxzBO6/S7h9pVxK3iNuHVGBMyM2J2kndk/hwS0ETv\r\ny+Dk4npQa1bo4hSCPGf9kMnpLXag2K1TT0UyIw18jWhrv5TGWhITub/GhRz8\r\nlnEVzUGjdY15c9TWO1DLrC6l4YbTPlI8QQ1CGmRi9kL9dSVDW7rTHpmAUCIk\r\nEyklEVZhc8THraNdGlUdikLvkczBY+WN4ICegO6K8Gv96EHIRFCb3R9AbAF9\r\n1M9+BgykIqGyiPc7naLLXOYXG7g0XFlvln1Lff7pnZv1gf/2iv+9qFiP+2e4\r\nD+1s7gO7sMqekSnAjYYcT70nFCB5YbcpwdelStBjsVcOcMrm+tr7Fy54Wojz\r\nQUt4kwNgUpVkUE82QxXOaLNgpKTDFRcBq3g=\r\n=k3ca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/density":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1c8013f4e.0_1678730613356_0.988664593471716","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/radio","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a98d255407ca5c4abcb61c42ace3f33d01b291d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.112715df5.0.tgz","fileCount":41,"integrity":"sha512-cOz2UFHTTzyqZzT5j3t3zoHZAoYxvN1zzhXNyuP398ZcOe//fVOP7pR6KBUDvoFIB2j3pm4kBG8SFQVS4PLMjA==","signatures":[{"sig":"MEUCIGo7ZQQbnJI/jIAaqGddIz1bykaw8vEHr2nfB4XIUvUDAiEAk6Hu58wpcN02VO0SWjTzkRP7s/TAnRuM8VvEWwZyqYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD235ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQkw/9G1ezOSeYWdlcQBxYixMkLjHDmq8841ODzYsL7FEoua6ufg+w\r\nEYlTTK9PWtkw1y/lc7fKKofUbODA9m4QEYMM8SkaaqxMC9vphrn0fInPbU1w\r\nztMK+724SmZOWeixCYzunXLM30x0vpJoSBlQa+Rdpsau1bDMUWsr53Sq6Qs+\r\nsbCmSywQz1BhK0hnHF0Lc6tyviVQLeMIA0T7dfcgkd3dV9IS0X7WWlcZbMoN\r\nPOR1ynqwoxfjoKzlm7xYxSCckzplUt8w0g8tkc3a45rF2eWr3sWEfr+0dh/J\r\n0fWi7rfaNC7AyQ+YqLbQi1GTvnJF1TH7p6TGi2KkN5clNa+yyMmGsmj6W96g\r\nY8AP0Yo0NuEMSgIFXK85KBnfXiRflnP3+5K7u3ECxsPDYushaCpMHm2l1CCQ\r\n8oBLY/I3iV/nwPHs8hlKShRKFmVRP88D1Gxv8KyA5dtxKHegn2HRxEC4v7NJ\r\n2kRZkYLlBchHVEes53R/hiqjJCWxygH0p3Ff6XCK/BHHIQ3772Aykw1gBGHc\r\nYEQyANRraqkgolWatp8/LfX/+o9sgrrAKg19p1dmoGv5UBnG5fSK4qQMwoec\r\nVyNxKdRV2G4wGd4ukRlYkYZ5To52WHXy4eX+kVaTUWQy1Nclbfu5Nkj4rJlK\r\n0/SgIy/oFH+9OyDTCnDGnQq3SSVHSz6DfUI=\r\n=Ch0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/density":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/focus-ring":"15.0.0-canary.112715df5.0","@material/touch-target":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.112715df5.0_1678732793246_0.49863329020212843","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/radio","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d3a34267d270de0fb1f8dbd5cd8551ec28e295","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d250911f2.0.tgz","fileCount":41,"integrity":"sha512-POLMQvF1r2fza8HM7YEnP0WEh2b/JDPJv2s7DyujxW4TvWKGzaPs38eaQLBvHoXyF35QvXiCWRh4mA7notF1Zw==","signatures":[{"sig":"MEUCIG+mDsfRn+mTmPJzXRN0Q6pRz3mc870DQ0yJ/wDPE4dCAiEA5XK3H8EkGZieDQeD3H8QrWOrl/0KI7b8v1HItpmfJ/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3o1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9ghAAgoAJcsFunuTQudtSo7NxjnjHvAGWMm8B+TwzNqugD/Babm5n\r\nFszQ7PO5uU20+6u8kLPqZz3ZUXqYa+oWR7gvInUQTvogAFvvQ13Cw3xkOIXQ\r\nZL4Sp705pmzqjU5qO+SsDo7Z3/VCC62Nxs+2KbLpLmyavR1sttHk51Ym0nI5\r\n0GPx4ZT+vVdD2BHX1EDABPRQ8QHSajVJi/tyYmVm/JH4rXdAMWZdPphH2aRl\r\nnY1/Go/P5pZwP8JRB4jVVQ1q57G/F2U3/MLyQu5OvllX0+rInMx0GyLNqZIw\r\n+TDX8F5uxA629WGdD5DZkIPyO035w5VU7GyWDKrnKEd4rG9/7op1xwydr6KR\r\nrcvxqtbVGEA7VXUVWkhDPfcJ3Ce98jSElEU86sbgA/wqAJ3Y+lDAgIxbk/Eg\r\nYKjYA62hnaeSOxmXDLjr0CtbJqdIV1cqmUeqrfsJt2HQX6A7QCQ3VFZqcV+W\r\nZJI4ROGbtJopl2lq0U8fi3P4W26Lfn2M0ZhGrPqplki9T0F0+foy/U25mngO\r\nGkt8Svdr9pDiHM01WmBjOkF754f23kVIBYM+lRh4yDkoNBJUbnYWiEYxsPlG\r\nDg3HfOEoMRV5qcbj3VFAOTkbHqKTvcttc0LLKfxHjLmw4UQtnrdvuYtLp+KD\r\nrNp8RRnOSBrG9dtqnR9qRNFReJmZzkQ6JGs=\r\n=Qg5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/density":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"15.0.0-canary.d250911f2.0","@material/touch-target":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d250911f2.0_1678735925570_0.9233983860564183","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/radio","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb200fd193819cd35234c64af7997e62a9617da","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7cd925c12.0.tgz","fileCount":41,"integrity":"sha512-STO0GDe8oIvc11LlKiiO5b0F8dcmppTirPXUCrMnGS83C9sVBjcoFkbFsNZl4AnuiSZFtbJOg2//efU2b0itBw==","signatures":[{"sig":"MEYCIQCKlWm1/jRjo0zDK6vqeEA7rKTWFYWvpuKl8y/aAFy1AgIhAPB6B0Rcr0qTnd8ihGWZxId1fY2XVunLT10g/nAfFyfS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3v+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprUA//bL3+Loy2EaHNUqZyN72XGkK47gWWf8BjjMBLSOdAlhKvF0qw\r\n0oFpqQMQcdOUDaq4w4GK/jAwyI/o5S05LNqHIKm5c/cXH0VwYT/kAerozkE7\r\nWOHqqg6fqkQjuHB5DnJADOI1FF63XswPwwgh7/mvFBSYEqA97CKRR7UCv5/Y\r\nLO7Lq7rPKlya5PHZWJMp/G9AXB9qEBl29qFvMYyfv2g2rr4VOPMuj0Ornf4I\r\nFAMb3ozu05jn5ZEshlRmpBiEycskItDl6JsCfQDtcO7y2TFIuwy/zLfrJ1w1\r\nSCAkfNHC6I3W6c/40VZztjxx4yJSL2y1vHnmlH40AJfk/4mmdNvQSvZhrAbI\r\nXRVA+UHcL/qwNexET6WWVz2aj0KX3Gcdws9DzD3EFeEQpDa/GpM/MWsOlEGY\r\n+bxFeZLcFOIQSoc3qfPyfLCQdSDj5LdQlNDL3whnndpLjpxS4g4CrXTFHtVU\r\npOQ/B0vy5vzrMSwmcVsft/GYsTXoXfC1qnT9Ua6ehBhpcqlMl5dAHFwrTj/9\r\nVzL50ubal6ZPWEygCe2IFFfv6OPsuwM/8KrpM7I59CVwcVSnh5OI2Q7wFJ8c\r\nQ+tEo4YXaW/yWGd5fr3JKbF8BV3WKNOiT12QZmyP11DK5fWx0mOVYIt24uWO\r\nI7cii6RoFbxvCiILbr8MNSU8/pBu0sUmcME=\r\n=xQhU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/density":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"15.0.0-canary.7cd925c12.0","@material/touch-target":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7cd925c12.0_1678736382144_0.06253127913344225","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/radio","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d067800de7bee945303d64d0b6401e1cfaf9f0f8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b2ddacf73.0.tgz","fileCount":41,"integrity":"sha512-XGtIkqkaSIwRUlgWjdN4hEFoY+jVZJTGFkuih7vtv/K70vbAmBfLl971weI9KupcukR5runOGmi7AL3fOVpG4A==","signatures":[{"sig":"MEYCIQDIKl48kEz4d6d0IXj9G+VU70+o5FQlYJjTJrr+BmKB4gIhAItW3X85F8AqPlqoVSmXN4srvKeYRKQcAxLPQ9RLqOsq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD30EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg0A//T4CNH/89xhrBkd4jQOEm/MKZMtjJ3nsN6sE3VLQzjJLtPcls\r\nGzjDtDxf8twQjihfOMcR3aOTobpxNNFaezWsKiMUBL00Qh3CTc3OT06WC+2p\r\nXiMvZKZ1zcgjLqTG1UfHVAJ/EtqCi/wZRiS+3ZHx4UB4QxO/7w0Tsg37TUKt\r\nvNtVb3RRTq7cRMk6W/BqI538YUYaR4HbgQptXnRYMq+kyp+/PcVyfvuivuVe\r\n7W+G9gLdmqXCi4Py+sF2WRGKu+ppF5SshK23jTq3NKJUCtK6pZ3Mn9jjwcQr\r\ngmQcYiHGqOzWcmqlI7P2yHziHjJ04MQiGEc1/z0934hxbZ0KwWBe+UDHRSla\r\n0oWjGIy12B/UkenVn1i7yVNaGQf3dF//D3H8QTD9yv5m8Y6muXl1Pj5QYnPS\r\nvVR7rNm965FcuA5YlqQsbpsJjx7k0/qSuIV4hPWuKDqb/vdZosJuA+71nHgd\r\neWWvMKZ/rcJZH0bEvktG72F7MuBXbFNFxT2btp0oPtGOITRe93HXlqve1HfE\r\n4/07qFwZ7mLLh26ol+EaH9uHZSpFgcPD4tHeVbu3sQbcUiuRmdzfZ2Xi0dCO\r\n0HqwZHyXsDqPqjaTAPo3Qjzn1w2IR0mz/+ONSfJGGHvjhK6rv2zMv70G1W0D\r\nzDvIWenJAaDNTKIYO9di09PLlKVagobeqPw=\r\n=RWxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/density":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b2ddacf73.0_1678736643932_0.5564353095235643","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/radio","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87715dcba31cfb718d68db5d7d77073766fffbb2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.989ae2ecc.0.tgz","fileCount":41,"integrity":"sha512-gZkfrGON0B972mhf1fnykdYwMSHaXqvcyNfdZq8yoetAbDjB2L2tGI+KCCX1bWs0jDUzFyqyTNpqNUtmiIVkVA==","signatures":[{"sig":"MEUCIQCuU5WusD5LtXLtHHBMkILwSeJYNvyJJXUJgznntj6TWQIgITy3uTKQI0ykfu2M9es+Dc2M8ZcWRZTGf5Yhi5C20Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoyQ/8DAYhYiM10WwuqQ916Ppu2cJEZzxi/0HqH6b7fu6O6A8xWds3\r\nJ235CjGY+cOU8Wv3czEbBqPD62Ud5Q13LqnFvYMl3KztUCatq3KRhExD0whj\r\nVI79v4ZtqK0nIAVpCrv5WzWcq7bXNohVRWz24tDy4YjPKDD256gWRAJcjRHg\r\nb2T46WJvF9jZtsJjoYp7TC0fFE33w/IkVkgMNO6PktFMOyHmFHu/uQiaL4Vq\r\nbDU/En3gSWlFjwWUv3zNRhwmJbNuZjR/4ukTbass4pEyjcTvsnK89TyrdmeQ\r\nWcdHGCHOHxQZiFK7OXwoAiSHHgIGoHu7O0fi5MygHvkcTURuXSSvul1qEmhX\r\nUQ7cWLeasOTn2kJ03QI8ZtaxZg/iqw358Q9PtR2bP9Kr4FnYSbPHmCLVCshJ\r\nDvp1qfCgxZPCjZdddTFbsZ7Z7dpP2w3mogdCvdWfnpbxBxAH3DkAV8LGq3zT\r\nxq8bgs3dSKX4+JvJadb5Ewyi6g+h75/OtUK13HlYM5O5Zv1u4eCuYsz/XGuV\r\ngfzOW8AqCW+gi1COwUhTvgMol/dHjhuC3ww9HM3xTsGjTjqGykFDJ2g6p3a2\r\nUuA6HRtPnaxY9wZGnnmFCLt1OR4mkWnCqZnnUhqf4k6uIEZwVqVNNOLcoXzk\r\nJasco5h5rLMQwz43fX8TY0wsBc2H+wy5Wc4=\r\n=qNY8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/density":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.989ae2ecc.0_1678737197767_0.34931873917422895","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/radio","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4656445f27cd61b673a8d35684d88eafc205d48","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.89c66483a.0.tgz","fileCount":41,"integrity":"sha512-yvPy/mvROgzf3blC3F0SYmStX8jPRVFSDeeusXCBwGycva3G+r7ZPJBHRBFrja+V73lDLTTZs3b0xesa6W9LhA==","signatures":[{"sig":"MEUCIC3Nt4k6W/ki5PSARas3v6RBUvyAE3IFqKLT7OIschVrAiEAoby0zELvr1OaS11m345DKHD6PBCcT5adlFJQfg6O10Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4S/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAEg/5AI2+lIrZ0NDsoGzSomUEwRefSS214rf9al4CWAxdcBKqb1jv\r\niCpFrmDUyP3gAoSxdFiO3Q+Li3FZ9Xcj1zSlsKXBoo+PFii8Gd0fir3NBFXK\r\nuBI2kwnNiSw7hYY7kq5la0pGT+yjq+vryXjQRf0FBXto2880OAKLdqdJRADc\r\nou/ucEbVeIvCA0d3lNmMe4FQjyPEQY/akfPrzuU5punE7aa2papMt1uwA6jF\r\n5iz5yUh8I/cZ2QiE+uG4JkqWTxdWJPWez+2nVC6SBsFvCu8FKiaCZrzsEEtT\r\nmq7FlGrMQ640PggFJwxJYjIZ8aAaulg2HVa2sdQlX7ZWAyurN+rroQFqzZWU\r\n8KobeG8GHXdJV6LrFp/BpicWlmhz/+1Zgk5X5b4FX0nTlroToTrOQcAurvyL\r\nx0SeBsJIuw8O/kut6e+EYM3JVuIiGCp6YmdsBywth4BFB0q2zPSY92I4Terh\r\ni7b30QJxoBOSwdb5gQSJeXL/b5BZWyx1PCm63d0OZ46avshoQaO/m7BLZJAW\r\nDNpHAj4Iq+Z33dL1yCnLnm3bft0e90zmLUlom0LdlSKh/iE+kRuxZ92lzkck\r\nqGdFyZhuXr2MJZXudInNVi0z+hAKwgzcakYt/aHXVyiG7wAEFarB2/1bOJFi\r\nh4GJDzo+oyKO6i+6zFs2F8bMTUIkW7TK9+Y=\r\n=C5UO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/density":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"15.0.0-canary.89c66483a.0","@material/touch-target":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.89c66483a.0_1678738622774_0.7883558460549684","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/radio","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a25f07fabb096eca71b656fe38a6666f28656fb0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6a85742c2.0.tgz","fileCount":41,"integrity":"sha512-OhxMS8XiyXx40GIPxVW4sj7mz4NZBrl0I6FgRGMXsZe5fft2NeZz1p5So83s+Y/ohB/XuHnM9TUje5TO6XYfpQ==","signatures":[{"sig":"MEUCIAtF+z30wN+CzZWotkL9/OwNt7nyf2SFp/GFWLc6u7aCAiEAuEtskwJj8gPZfRPUkZbHGXXjXAwnf+Ju0yPHle9ib9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLMg/+NSVmDBUY6jzQyDLpgN7l/ouw8cyie0qYI5yzh4yy1eMO8QA6\r\n08i3WjyvgWSKTxNvvPJStpy4stsaQitksXrBHt8H2o1+wYGNCJQPvrgENQxb\r\nwNZDKdqpwFBqsw6k4Hnkp+igmDjggyBF4mhRoQrtfLhYwsOqHJu8oxdZZYIc\r\n1ogF1zuQdJ6OBBbxpRQos5AL6LOwYNCyQw5mBaMjFsm0Egyu8MEqFbzl0Trd\r\nhhzubZHbxLoBgw1NymqZxNFAkfOlZkhsyiqp7lChKFqNYJkY38oswfMDpNIL\r\n29dMqQUZlbPApW5cB9/yNbnIT+xE4CDOxsnfDHMdrdGwsy0gnKp0fmSf/omZ\r\nDbeRzq2T/DRs0Vwh0T1PU7/a3WQWpCkAaIR/gt5ct5hNsUqKG7sF2DEvh33d\r\nKggng5b9twQmf6dPBy+M0xoBgpGnDsEQBP8g610UcBs1SDSJ2pKMXlY8ikhm\r\nTeTOHgKoX9m2ShOdavd6kkX/NWH3BiuXjoO4oHzezjzkiUsepsdTPjpgmlbK\r\nhD1FqoWasY7Tjp+Y/LYARlm/RAe01z+cQ+fzmEqEbWxTXB+zqm8JITah7OSQ\r\nkMt5AtFKK6sVT0E4BVJwZMpe362oIyZrWbxKMqYt4ZDx5n4D5M5OBv16S5jy\r\n3GWzJEP3vYyPC1upzgRY+elE8JiM+PNJFB8=\r\n=Ctzv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/density":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"15.0.0-canary.6a85742c2.0","@material/touch-target":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6a85742c2.0_1678762077313_0.5045720340342776","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/radio","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3557c288cb40b51b951e9f4722614b9a8367531","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":41,"integrity":"sha512-fatCgi0JqZnUYUGua0Tc0nT4ZEjLJwLHNZQ9iKdaqcHzHEeg3VL2e+CfM8Zce4D/hW53kODFDy7mdGn4Gsmlkw==","signatures":[{"sig":"MEUCIA73vV5O+jTsuUFXFciRlBLOzwgvmIx2WwUiwI6xo76kAiEAsYQr53KlyLRNnvaslvb5SHmjmip6dik5yfumOx6C5Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWZA//QxKYzbzzcMM3eo3SAllptkxHMUUwTmtSrC+Y3u7MvG2OsrBO\r\nX7WtGO9uY0HGqMT/XXVnPFKv2M892pgv042FZX495+Z/eX3/I6kteg34gxsA\r\nbX3K+KL5MYiwaEFRgi0F5lhXSb8QggKsKM/GAZp0ga2syZemRA7WPg+f3Xpj\r\nwEhyCeo+hLolhbUqYDICdFIWIN57STmzu03ifM0kUVAsEa8vHDKFC3oH9jV6\r\nt5Mfd8AKCnezwGPqTHokHHqHU2GelDcAm+lp0mhqX1ufxVm42Vdj8e3BIud4\r\nalpC5CCnIMGoatm2Fak9WKyS7gm4pEuJZqTI11H/2Ed2khl/7XROV/F51Jiq\r\n3lWC0dAgbPwKdvVPgPGTaw1TiwMmnzRVnZTNGA8iVpgr2Z3sLhwn2zpJ0VK0\r\npzA0CTfXyTx53TES0SDlbZqhTf7lz6YMNLnbFBj6L3SI+JVL7nhBqyI2O6Xf\r\nh+PzhxBmywn1cMTGHBBQl5LET1MHWcYDFeFkfDlj5SBo3ulj4aXCF8oFXLEQ\r\nT02V6oa4ZASi53sQhfcPcsjAywcB+2saM1oZTGWEkbPERBOzxcw+H7paHITQ\r\neIncYneNxLf53d/FmOOq+GnfaOn88/FrBX0/KX8Ly3YpKSjIEMDXFpWrF9Ik\r\n37sPM+O92Y0X6toBZZYnS1nWSU1YGrKnrtA=\r\n=3AsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/density":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bb6cd78d5.0_1678817849218_0.6822773135460076","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/radio","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebd6c00c546c17a36dac36b3f9401a845120aa53","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5f94aa37d.0.tgz","fileCount":41,"integrity":"sha512-kGDFxnRZHwXC5pHo3eEb1YOQDdpeWQRR99mZOhhJ/uLiKSaVlnWOhLjk3GIW438CRAym43/+PsTdJxBbrbKlMw==","signatures":[{"sig":"MEYCIQD929MDqieisFs8F9WlzQpUnov5QdrC/NcJCvMayM0B/gIhAKxIeN86pB6/UDVbGy8zqLKVzp+ZozG/kw51t3QadspF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELsAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo+w//VjYEGO4oC1A6eua9LM6fdK/wdT349xtsgWXLL6eO0X8JE+XU\r\neaDxWmlaAQbWMwX/s0YLX9rcQOY5kJAf5SA+ORUhNNeX70mKR7yRoGgaVqLr\r\nIrq2xJb+CplT1pJvyS7mgtQIex/gYeqEVv+rN3ddBK1ZtpObcWR7t1hHWGHt\r\nco6TOE6Jbjl6NssJ+i4HPEWizwIVJh0iS2VdCUyr2HCyO8DbNXoBZTVIScz+\r\nFatb/ryFBzdutHVrdo7rzTLmHle/Pxgo1BdfSbQc3bEeIxkDf94yMg1UCYiu\r\noOXIkmB8LvfPwexwDH36thninYuCOleA0ce2bT6Xcvy5+xwksG7tuqFcaP2h\r\nJN6UFS8MRre9B586ja8wdKpOLMnL3uAVL+MAEQct+p/QoU1KK8q+a76ii5oe\r\nRHvyZTXB56QMJ4/0bhffPURj/calsHvoCrNOmeVuDhv1SlQbN6iTLam7knZx\r\nkNt5yU25fbIetkWDCjJZIv8BazVWsp2KyRadGPg6RHY8XuEF+c3lt/7x8S7M\r\n/fYHhwawdUfZlCWGg5XPfvetJCoMF4M3+mLm6Z8M4tOTaOB7Mfuy54odB1Rb\r\nrDC+mhWADFX7jTyQdsgeG4OdD7r4RTD/hRailC0AGj4aB/2NIWH8g2Iczdty\r\nWUhOdFaSsrWa7WiGISb6Z7UXEq+2Z9RlMEs=\r\n=lBA7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/density":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5f94aa37d.0_1678818047958_0.6957056179190688","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/radio","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ced08fb6e364ae76f2ff8823e5b9118f2e880e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1bd317240.0.tgz","fileCount":41,"integrity":"sha512-J3uIG1HZKpmWYHHmhlsqTgrNreA8cwWhwtE16ag56ERHohwUtspj4+r5+Fta0AXEr1OnR3jayhJ8UZ51DKaT1g==","signatures":[{"sig":"MEQCIEXipWVJuww79LH0O29iz80Q8zJeXEuZ2dCq4luD/HLbAiB3rm9N2p/q3YlP3Hxgc+3grKK1pJN27HHi7rxjE3jh+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1ehAAkQ11EIuirrCZKRl3vZcFkHQQePLywgqvSYWqZuJWMfyiatAK\r\ntc1B5A1eccJtEY3Ial7lCObC59nYyAQnuUaaaQJJEgseP5PMrBbPN5oZAQdU\r\nWM88vl0FRqy+k809K+Uifyp0BRiD/dew8a2TUN8tqnU1NgJtLFSBpRbcmQqu\r\nnES+7YkYAR76EzhaB5jK80sAQfuzEKUnkzP91/Y0xPOETM90u9AHC5AK9yW/\r\nh8MwtZP9IJpt2ZdOXWxVed21Kr7jEwsqxAEQM2AfTE0fMiniZmr9Cl5F4PS5\r\nJEUfuFVexOfMl6aruykBBrOi26rRdIV/E/mt7WJR9wKthbaZhY4ka2QrJy//\r\nQ9L4Fmk2BWhkvy5Nc5DrMes458ltuQPiwNitA/Wx8IwMnmphETP3FAlKKxRA\r\n+/5kdAswwqf6rd+ELp2LK6Lollflqf/dOIF0ZVT6o3lHNs9BTxSP445Q8Z4K\r\nEuFMytNP753cobuGljnWmZsVQ1euu50NrpsJ+Jwbyg0yrVe9d5RNqcXoixiv\r\nQGis3QSHug/E24jEASH2hzQn0BPohHQ+e5fxFReGFifVnE9mwSL3v9IRwbfC\r\nu0HL7qbI/xedBru4LwEWuk7b28s7sBDU15eI2nhARitCFpZItNjrF7LLK9IY\r\n2T9pTCbH0YtywcWoys8MSMlAGbkfLw4HQjI=\r\n=S8XW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/density":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"15.0.0-canary.1bd317240.0","@material/touch-target":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1bd317240.0_1678818277591_0.10525211000162216","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/radio","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd31dc4f7f1a4dc20c468b9db200c3cfb810e1d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d441d2a2a.0.tgz","fileCount":41,"integrity":"sha512-/2rTvZDTfRPXeGMQlfncDMgm1vOhy4tBk+gFuXLPTEch4QUVB4O/PRqoDq6hgB1T2o+YoOySvGdfK3RpeemDng==","signatures":[{"sig":"MEQCICAMtVq80dxvTapNVKPAppLtCacwC5S1KbuCMIIoU883AiAotNIUX5p1WnPIPKG2NMz8YMv2DM5+2isEqXSV792v4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptLQ/+Mik6auLQxiVxp3aVfUUf1VPA8QOy+fG/5yI/nx2eAhzqh4MB\r\nIERUlZhx6msPVkjQtxFm/pZP84dMm+uzLf7Ejyp7Y9ib+PIo6JmSgrKHeyP1\r\nxrKZYGwvWKAu0Lf1fpbYM8RbK34aFH6lVyjsUw+sfuXk9g7Y9TsXeSU2Agif\r\nxRrwugtIO/L43BbkoccI2gR7/Ga6YrDL2X/er9tP9aXA3oxcHsHbD1s8rZR9\r\n0mbHk8GmXHeWGC4WKhiDzF/kpDxd/n4FogKiv+aUEn2y5JY5z+IPabn97ZKY\r\nbcyLjjkBD14fs80B9j/AszLh1bsnfjFkgMfUFzvli6oPDcE2Y+rUrFDm/Vpq\r\n7UYtf+x6w9bKqonq70iTKOWsM41dQj2zRujHqsQSuhMvGFCxDmNZ17xBpntT\r\nc6xvCHv0uNzDCeSSI9xKndKQneBIgYHUeX8Qo0Jj9cDN0Bh0wErGDie4eiWx\r\nMr1h3sCwZkIdbOmubOBG8SlneFPa2xh2g1tfB9LDNJLx0C1yrnI2t7+V6qty\r\n9LN2055ENkoAFeyPl7BebFveZTiOYJQSXYfrLve98iI56xosl2OrdK6WorDe\r\nKCU1CuRtSr71grVGkLBZR3jMRA/pEogYNeBAB8E4TRWgNgd0OCLpxyl97k3+\r\nkqpdRM618nDJhJNe4bobKQA1U3ghd9DDFsk=\r\n=ZJXB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/density":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d441d2a2a.0_1678818444587_0.7911191704088023","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/radio","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a643d72c91e1c77693618977f3044c1e7b8136f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.fff4066c6.0.tgz","fileCount":41,"integrity":"sha512-4f8qoOZwpt50dJaqIJWVllQrmPlEXsTb5Pzc7jbTM/GtcrWuRYAQjdG/DNI4u+vaB9WXYYHe0sQ3XLI1zktD4A==","signatures":[{"sig":"MEYCIQDb87p/2Tm0a/TcJZurH84QbnEJ/pGOR12/ehqES7GBFAIhAJnOQsKGJepWeJKDeoHg18iCoRKYl3APtN9D4wMrQZ8A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIyg//cxQIvlmvYJdjFszXXyo7jssIldnNqWYkjVqt0+sYKWomcqjS\r\nbQtGm3EnIgyAcdZvICobP/uBtPjoimqJ/sqJt87gaOJ1cuIzk6QyWSq2YOar\r\nLI2AvLy1tcSLUxj7+t6EHYJTd5XhLQPR1bWvm28MP7WfAx319sVKK18w4P2h\r\nLw9dbr78sGWtIgvPiG8Nf7a2+IZWYB+lbliqFHWlvTMlTpY/gIZg2deMTlKK\r\nbIdsEF7I9976+RDXofDrYxNOFOqYZpd+Sxhp+iV8g3wyhSO607lmqdUdb6J8\r\nJmWjfeJtlsA+8Il8qGO21uTETTi0IId1+TdEYFfHOZ/yHABJmdrqAOAcVni5\r\nikslo9Eyy1K9ArwYPClgyeV2RZ33GzwO3fsycsf4fHxCoECixtdEpan6kghO\r\nOvQ/17deJ2I7Wg3kQ7/6SaY2Jrp9ghbvI/usSNln0hXKnG/3HUzirvCIGaiI\r\nKVM+TFyNfn7giQqXZCt+Uv5dxzYCN1bMudhfl3+b/ZrM5zqmINrkT85+349x\r\nBK4vSLzoi0Tns34CH3SLrMxoZacFe6RFRQ9UAltYG+6BD68+CR/cakm/+nTK\r\njJK7InQlwJt/kMzngGbw7Wb+TNaeAhafQWufOsfNEzZVJjRtamNH2EIfBYb2\r\n/UEN+mgdklLpx8ZmC0gKhYq7yy5mHERoSwI=\r\n=7fSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/density":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"15.0.0-canary.fff4066c6.0","@material/touch-target":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.fff4066c6.0_1678818482172_0.7224768257466463","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/radio","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfd05250c97d0eb79901626d6e7d836821bfe48","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.87809c710.0.tgz","fileCount":41,"integrity":"sha512-hvC+8b1ycQ08aJALQW58RN9TziJYv5rMDWbSx0WSPaf39LcbKc0BnDxIvgT5xykMW7nDB+b/0PUnV9lXv/LWsA==","signatures":[{"sig":"MEYCIQDstxNzOhQie04NK+vshNZT4CKardjWZHQtNflBYe4diAIhAOc37WHkO27X+faNbPY1jB3fhqw8m032JA4kdmVF1EaB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUiRAAldbtWJgipiDpWiS/LpcFMxDoxsZLSG38DaUh51xWpEaE2TUF\r\nPPl9N7tgXicKr0UnB9457ON3Dj2yPN5aopIxBH0rE1vkbccq1b7FDA6sjILY\r\n63Ma36hbAGBmsRwE5AIkgXC/YrLkJdL+efp9WwGOacb1nsZyFDhaYss9BXpw\r\nuDdHByEz18ifO4fXx2CXt+SE8n225/uDZN7heysdzBpPwy3eVgyJtdAyR8lB\r\nTH6E10N9Fyj+YVY9iKTHItNcIYOm4dbEb+53p1al2xI3IrO4ewtSifZwWKER\r\nFkpl6k40oMFaIXq2X44gafxkeT/b7g1K9UyYDrykMZrpjUR6hQEiFiKzBdo9\r\nJNFH36DtZSu40dzFZid5y39fQTYNocWuUShXt3XN5hRxaYlNTWLULoYYNb4H\r\npB6tYe+/7Ov++4zB0ftTtG4SEPPkLgt37f6y/XT/NseTaW0D/8OfWnWLT1LH\r\nW9eQXWn5zmVQAmhiv6kEO9xp5PDDuzMaSpTYBtU9xOXWfQ149xtve8VHBvRD\r\nB6p4yHyvXD0q+aWxUtwbP4oeZ2NNE+rsZSyUDYmaUeoDcKixWNIrNLzQgTt9\r\nVvAHtF//6o1V2frCaYZ2+aDGOvDmZu1Fz17II/qqRvK1E2hYRqqFxSzGDRmw\r\nKTX2nm5LFHeZJIIQKbWH2/E3cqS8VbXYwFk=\r\n=rAiX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/density":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/focus-ring":"15.0.0-canary.87809c710.0","@material/touch-target":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.87809c710.0_1678819441824_0.22321341368492909","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/radio","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa6e1e611b48ef333397ddaf157834ba1c7c842","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.48d30012d.0.tgz","fileCount":41,"integrity":"sha512-znjGiKe1+JdytV35KhrBQ6uyinrwihcFFNfznJjL8CLD++rBS03+r8eAJ88/JrRVPfKuhc+qf3N2QkQIjFUAtQ==","signatures":[{"sig":"MEYCIQCNUDIb4pCjTOeInG7UmUAtc3abkCDdcWbuiurEniqH6AIhAKxttAPGfyi/e8YYhp+IQydVGmhJMh0JgCiaL9NKppwa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMF2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJCQ//SNuIPGYWfnlVUYZNkWNR/Ns67eFdtdG1Eh/xfZ8PsIWt1mNk\r\nh52pZ6AyQDYeK2iY0Kzbl1sPo/1h28EBgT3c7LLuVwlTM3LDnFw4i4dN+6aR\r\nebMj4lBNK7uwOV2bni/Dcce+pwp9J1gjEgRG1ObQoAloOMjduRAReDMmgahP\r\nQ4Mx8N/y/LTGpR55LM9BWuvMrZnOoW3Ju+7acaZqrd54rXV2d50Thrr5nTIN\r\nV8X57I33MVzlczVijq1Sl6yagT1C7kQhAkHIDMOWPG9MZ6pKFv5PXTocg17e\r\nr8ceSr1htqj8orOQo3FGW/g0fwjkvvitdOxSVa8HPeAgGd1VAxAqY1WgpPGR\r\nqfllc8sDvV+nYJEwukN7OskdJL/cSZWF6SWz7jTx/0dRo3lhXMBqgCL7kxk9\r\n2at9Rqlbny9vBzTTbNnMUZSK0gAmdvwKhOMhNvx0yCFzVV4X/OTGk//OJ6d7\r\nIuyZplDPy72w0ptoKdsY/+f2LV7FmzTDWRtIO03oZXfJlI4j3+J2BUcr7v/P\r\n/D3StS9o3ETTEEqzE4WtU69AapX0se6lY7ZOozoyBhuRh7iw9Ausp7EPZGuv\r\n8P8pVOEla3RcolAAz7R/IExu91bl93dsSq4ICiD7MgNsZyTG+xqZY1XJPSAi\r\n5zyd9u9V4Jn/JvEnB13yo4gFVJbEhn6U0oI=\r\n=Rkhv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/density":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"15.0.0-canary.48d30012d.0","@material/touch-target":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.48d30012d.0_1678819702458_0.27998501021719235","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/radio","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"813e1424adb090940b17b3b3be7ca9e494596cd2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.419b23cc6.0.tgz","fileCount":41,"integrity":"sha512-GM0dtFBArmSEfYzpZjfndCSgpRxPwin/crDgiaoqbaCYe2+f6BF9f5gpwZDCTE/PXSe3tmbVmB7Pk2vxz/nfew==","signatures":[{"sig":"MEYCIQDurMgxaZUFxJCXc2DGtNpV4MQCtk6HgWQ/w0F7fzG5PQIhAPzngKHPld6IN2OKezywVZyCD/EgwHZg1bJcC7hwBVGe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb4xAAk9Xsp+eGtaGVQ+543/JlRoyQOTEgw9u+oiCwNRrRkt5zUFDK\r\nrszPJqez2UyzA4Jg+0HdcuqL47/zpR63uOn3kWgmuGi0z+RvJZSAtJb5m1Ux\r\nTkNKlcLqyelV4eNegdZSp3XKXs0nO58VZjRfzWCYF2vVFjJfShl3OOejUERS\r\n9QTEfyCig6dIIlArUJ6/YaajufJjvpA7uZkvCYKdNXcA2L/8CSqtto07EQLs\r\npWI9i8x8QEP4kKkvzbmI7dcVuX3jBrcY1GkAUQnWcixAbJ++Gg93XYCyDBtq\r\nQl3r9IT55SVq1XuehY1Ud+NvRYMfQckbnCrh+SeJjIGuA67/0BzAbGU+NEwH\r\n94EEfGO89TzWkWR8AxwjtxzrzCBiN4UsUhszjehRIa3Tw4zH6cwaU3hFHluS\r\n+6dx1x03OCUu5rpD0X4xP7eBJhsSBhvetpR+pvTVwdn5zJ9M7Ffq56OcCq9r\r\n93aRincvGVjh7LxcdBgSsXN7kU7VCjPG7w98jwK+R7eRAJVBTDmYBHK+6Z8w\r\nzjF3OmJ9fUT7CCWgHFXJDRA0otkWrNOYuQP9dHnKvumKpbCZ0LKV0lSp39e4\r\nCp1oW92dxmvxIUI7kvLUp2OBxjo+PDzE9LjTVCo/ZsJHYz4poqr2iUcp/l4Z\r\nlXjt9Myotp0h3C2l54XnZZnpeTHrk77Ovds=\r\n=TvWw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/density":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"15.0.0-canary.419b23cc6.0","@material/touch-target":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.419b23cc6.0_1678820364106_0.675589812240259","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/radio","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"579bf7dfab11a74d9fa5a406607161cf9a8904d3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bf86521f4.0.tgz","fileCount":41,"integrity":"sha512-LYVymuS77+MCzb6ib1Q/43pGXHU5s6kPdecXWuXxuh2Q0tdICAHucisPUhBFgBuv1vU6jTZYB1ujbrVFKo+cvQ==","signatures":[{"sig":"MEQCIFKTSrAQK5/wEAKp2vF36nBr+eKGFQzXOr8LUqeOWnYOAiAXiY+XDB1/Gi//mH5ktf5RQUACfN/bNGIsSLbgwBqDWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTHw/+IgkJA2YgT+OpwDXbMKlAfnv28DqTLLGdwaXtZcD/GZtP3UOp\r\nXWHJPX67+ivwp4zTwjLcV0hijprVK+wD67hY4B1R0UsrhCdTax5t5klCW4tb\r\nA3bXsgzCc7gcr/0IxfpmvimYvqRaUWM0ZvF/rfcRpZLek5W3ln3GjLk896iR\r\nUprTbXVDdAtmh2TfA3tED+En+7A076ytI766oh9PVzO/2oT4UNaERtnwsORK\r\n2xANbulN1lzSg1KIPL3XbDZqMf0fWjfQKyjU9JBJkC044GaXs+/VEwnCPv2B\r\nCeGTYZZcmzEFN6OlZZs6JHV5nX2df7R8KXH/PxWrBjeju1PaxXB+MDAyFXAr\r\nyBaQFO3xlxW69QSZfjolciMN8SCM3XvRg+qIuzL2g+v0lRu4oIpcaoxDFggY\r\nUov/ZfHr6mEPvaX6EQxM0PyMbhUQL1zgF4fJxq00WjldxgsDoye63v04SqoN\r\nk4ETzy+3fl2A9fyO/e3guN5ojeyvnS9IcYh2hv3a1zhgYSY2r6umH0fIbDgr\r\n+0cC6AdtnpQscwZAis1YgDPK3bF/YI3Ih5TqWndrpRWpiJF6qnfwOZ4icRPf\r\nnyj9okFoqoCsiWxYNQxLL+By85e6OcfMQfA6D20YEbpDAV39+ppCVM/dtQEW\r\nMPFIL6geZyWI8ByTOhLvTWGdfZWDhUwSWLg=\r\n=1yxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/density":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"15.0.0-canary.bf86521f4.0","@material/touch-target":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bf86521f4.0_1678835640462_0.3849239662743653","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/radio","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"511a7b55ad75ae7bc8697828eee64eb086226068","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.11f3d280e.0.tgz","fileCount":41,"integrity":"sha512-LOpcRycIsmZH0DzwNAnODv3XF8Zj2Ge3UWa6tDiR24z0mmcXSJtT4FrHDU5E4pZQhW8OHEdlHaZpHQt3lBdBGQ==","signatures":[{"sig":"MEQCIHTN0rkJGMvHpnSemehmcqSq4eY32tAQP9dHqHHCdeiJAiA3v+nVO6STBd1W8N7h3jU93YxYZK1d/OuAzVFjFlqqzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVqQ//S+CQC4JFQJ1VqEjKGN5K6KLJ/tBTIrDCrREuG5qd0JdaRYpH\r\ns/nkYAwCGPQXCsY33xfrRotg0mQ1/BonfusyyaIWlDyY+smNCrzqmGkttFRK\r\ndEtZ4/iQ+/BzsoBL/y7uH7bPDWBmIQmPjhEpB7zIg2IiiWBCl8Pwd1yYs88q\r\n6rqoa6htUl0HYMjO+7zCMSV30aQad1501jW42ft+qg134eOhP/p+WcEUyopQ\r\nvMtPho7c9Ed3sUq2NQ/4d1KhzBx8hVVoYMAs0So2gCeTkbGfLkzKs3GMF40r\r\nP+/Nc6z0guiHnOa83dW+ZIJH2t4r28gvJEsHGK8MFrQN8pj0tyVaAM9va5zx\r\n3NCMw9DTOiCeq0ey2KK/Dc82RW9PjIhL8A2p2GGQc91rwy/T8RKEqORY0Y+4\r\ncK8O8S8wBZrL5HQ7owczPEhF2+lvASkCWi/qjifqSSeb/wodaY3XmJUfINmS\r\nbXWWpVDcUTV55Y/+QEHZrw1bvFZ5JqkRSHPXhQOm6MG/xYI+CDvGF50qH4Bq\r\nDbyq1gKNwG8h/YJTOUbJWVixn5kqGnKO4IY89hZ+jMXtpBG5bkpeCWPpcXgD\r\nhCupMBiDamamQrowMduy+BVObdTOfj0lDR2OkUulVwqCLhX4+P9l5bEiLMxt\r\nngZje3SQcl+Eaf/T/chHraNqzq5g61Yscjo=\r\n=jN79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/density":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"15.0.0-canary.11f3d280e.0","@material/touch-target":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.11f3d280e.0_1678839112734_0.6926336710128307","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/radio","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39f8718186c95bbfbf5312a554a3f4777b6a3b13","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b281a409a.0.tgz","fileCount":41,"integrity":"sha512-hb+miJvMjWZdnptegoqPHxKi505BdtB9IrlevQzAqpigXOVWwEb272+dAj2AAbFSX1GoDOtoVinm+AEObAdmLA==","signatures":[{"sig":"MEUCIAsXFebds75CZlFa7rOQF+AK5wooyPrZIyByLeTgc+r3AiEAhb2ZsIdWYbwWLZ7zgWfIdTF7pNFLzC1inxIZLVbT070=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdBEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2TQ//QN8tLG6D8f16ZXkS3rUf8u314dINZSdvczs8LU8oj0RZkVXJ\r\nIbJIXbg+Wgar8kzNUkeKDqPM94qlgQyp5jTNGXP+SWNBxetu+/csedVWad8K\r\nREYE5fQdSybwEyWFnRUKmbSulvIFdBOJ83BTdU61uCxLjUmu2Jt2VrQHcj3O\r\nbTFQHn+8A+JK+XZrbJFrTX2sDgqOeaPShlgzQhEnk6IhlXkUJTqRQIIj37U9\r\nws1Lk7jTmAYZdC/JiU+c3LQ4fe9lSdw8ZhJdGF9QiUALjtL8dNmcZuAk4nSu\r\n3P8UI91mlRN2/PResvNd6ai6N8148/528SRk5deCNEwQWgKPRTRifCd6mH/s\r\n9nB9VWMY6EkOl60tvcGWWPkVuwKdw4IEwuA/cxyv2VnsnghUrTVnS1vG2D93\r\n4/r6zmOGAIOAR8rumbSTyblnpcauLCKxlys40Ns19R7mtVGWuS4Cs2AffGOq\r\ng2QLTYrP3KEWkQpcxF2jqA+UScx4QQPF+22vOje9+kCCifZfQw9sUGteo0lU\r\nvlSDW3y9hOisPu/7Dz2TfXMZ+06a3FDed/N3rSdsAflfsbvdhFtM8OUNqpLF\r\noe8mIPQQYSwIE96dGN5/rbDMOGo6GW1vqEMcWuyCJLQ85G8qGLrxT47g2Xdu\r\nJv3OF9f09/d53HZ9442XZ7PauJf/O7Zbccw=\r\n=Jfct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/density":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"15.0.0-canary.b281a409a.0","@material/touch-target":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b281a409a.0_1679413316487_0.39301254659170803","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/radio","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e137254b8a223fcad6f0c9c9f70520f4c0288674","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.39e473690.0.tgz","fileCount":41,"integrity":"sha512-00RSL50KIwcnXqFgJvNQMV92fzPEGOEbukyHNntBZ+rEKSGZARXMGPG5BRiOCyYjR2MyNFpZg5Ys4umroYL16g==","signatures":[{"sig":"MEUCIQCRVB9cHx8j0Ji04xeUBhT+cDTDTTfGQnboSRLAAaK99QIgNnNmrwGROAcaRRQBS4pbDyGijsY0BXsPdlIQvLl0aSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe7IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoYA/+InpfjMP6xEyc7sPFVXUXI6YQPY0UXzHFt5qN4iDbkFHVVPy5\r\nyeIrJ+TgCiQN/3kC4p8YJpsP+8oqvOFuzFzXPTMRjjLTUTkecHMtBzremR1W\r\n6zCFVyFFUgvoR5JC8ICfoXTIJkrdpA/33X2Qvm+pmFQi7meuvKmT0NGa06Nq\r\nVPnmuEaiOqZn4k8LFhONTh2z4fEvZbm3nT+FtNQOecbUuPpZo1l8mCu0U4r/\r\nXeumi0OLOGektwwhdJkViKDMSQ2w+X6sPBQjrupXS0G+6b6rtQkmarSopxsB\r\ntayKUnmekTlsj6KPd+xJebpRN8xMkgVrrDtoXc/KDOL07CeG6zkhuMyd84Do\r\nZLQi4Lj/OKWlA56eh04RAw4UNEteCYiFtj9WaKrPjBYt1u1CpEeWnlSTkV68\r\nGlG9jNMEUVRWX9AUG4VvZZ3PldTosrg8V+A+Am8PK98I/7k4w41WdTZUvvXk\r\n6tGwN2vV1vNDbD+oij3haYOMwcMcw5ErOaXyuz1QSPqX46j79Csp51EcIQzw\r\njnp1OTrUyiKQtO6gfhmXknJCvYni+txgcw2vo35KKufTQQMHGHX5JiVWB9R1\r\nuYRQP2U0YGAQG65oj0UWM15RMkj4zBzWEBoUM5DbUAtAxbQdmtmvlQcflhXy\r\npwti5uOmWV8qG4Uj7phjeH+qn7iLj4uuO/E=\r\n=A02J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/density":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/focus-ring":"15.0.0-canary.39e473690.0","@material/touch-target":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.39e473690.0_1679421128487_0.24431413368167676","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/radio","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"befc957c48b8c3dc504eb491d8fa29c94b066d14","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cedffb44c.0.tgz","fileCount":41,"integrity":"sha512-TiTYz2RvcY9FyGoZgdA90rqBMRahQFmDnGl29r3HRDXkyDsa8zfJUrVHqed6TGoqWLoE4r8uNA+ZH6B61MJnfg==","signatures":[{"sig":"MEUCIEFnLOHjrOiiGL/Kdnwsno5+tIRXzGVWeRSF8UW7fXzbAiEA04p9YobJCz+Vrii2d+HGb8NhwB0v6yF5nNlGEyCfJZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ4g/9GWt0f2ihHpqv0V6QT69fakmOVcnH+M/guqZkdN35aVPaGSfR\r\nlbH7F/jchKZ/P/h8MEv6tGF+ppKfQDITQQjCpVevqNPljVvmwMyEr0XuGwb3\r\ngdkoCj5Sz/QDmwggCBOvnt6vZ/+HTVyu715J5JQI1rFBUrVv4U3E1/1eWDdG\r\nQ5r/veHj+QVYTQ89lk0fzMjT/AxuW3Lu1R/kYfiY0rDmSx34YTCUJAg5a8Dr\r\nCXtjDPvTM/rT2OnbZrgyFgSZ5ULdGbnUGzyVsGAVHf2fc5bwWZwJAR8UBKmV\r\nBIiz3OO9vLvJZV8aAU3dDMRoZUM3ktf4ZIhuC2/apbc0k3//G9t4VPdFT+2n\r\n5RR2R80jGa+LFvKNIendHKVjQlh4ENR4xd/NDh/QOGnIfewWMClXgSaaC0hN\r\nmnDpVbrv0UT1LCY3oqbzBj9HiNwgy5pIyHanmXu1djSx4OyDdN+ljYO4B7EA\r\n6eomM03MtHrpCyfVXpSUJw/5tZaQkDLeBI8B/ekgdDzmLaP/mMe7b58yLVSz\r\nZzeOMsRwMPAH7MURDT+QY9mR0MgNsC48EuduBrHvQa0r0uVREE6r2evsmUij\r\nThphO0rSlLcfEIXZqvKBfzavczYPksMg0TO1bUpDiY9UL7bBrYbh5WWpdAMC\r\nJ1fryjn/fm4SWftM3STMSmbiMiwQ/4SVAd0=\r\n=o3+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/density":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"15.0.0-canary.cedffb44c.0","@material/touch-target":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cedffb44c.0_1679421543906_0.7387413157734046","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/radio","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f05660a702ccfcf296acddd1969b6997d085335c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.36a4cba99.0.tgz","fileCount":41,"integrity":"sha512-kwKuHBF+TmEJ+s3Oi27b+8x/s/bDXSw2rAXVovTc8UTn6gwPD6mRSgg7FDBdt4hXGJEWOJdRoVM1qKX4iE1u9g==","signatures":[{"sig":"MEYCIQCxbXlHMIQYLNdkUCp2mjGYmn59sYybdAn4HuJ2ZCLE4gIhAIBUYyAJF0EeqWbAtrkyL32r+1jXR3Ps5TonKH9vTnb9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCtw/+K0dJmtZnFHZRgrV4+dZaWxuoFi5HOpjwyV1BjbddgDONJH5q\r\nDe3d3JpzVFiJig25aAD42y2uh5n5YcFWPUUQNtpb6Sla+STap+LYdsghf4WJ\r\n4pq86VtgnNtG6PCrGIh20LlhBX51MI2E27Yg/a3waoeDOxXezrbYgSLXFrz2\r\np5lheYcZnEk0ZGJiEs2GzIOAWvc/9UzE6kZuyNIfcR1x1TsVA9b3uO/HIXYN\r\nUl4dfPXf9C0u6AECoVoh38rrT2WLCKzOqwaXPuvMP+qOzQLlSPR8XoU+cJsc\r\n5zl15R503n7byC3hqhVZz/xED6KS9Kr7hRpCPYegGHv2r6nKTEQR0UbNsUDF\r\nKDcIy3wA6flCcVPwQUz1QS0mk/GM334jXB27zT8cjaP7PO+saGfY3KXkzksd\r\nZBGUSMhGMkEnUsOFefyo7+jp444rGojyQQXqIxSzFT9tnpvx7vLHMD4PD9Ft\r\n0f8Cmx9tQDOUrOS0/SCzNar7EFUZh11XEvXxIx7ztT0/VyPinzXI90/CHu2n\r\nvM9LoT9TsWQrlLlqjt6dg0h7ErsvIUJy6tYcu3eQHI/JSihGgpiF7nyOUpif\r\nHDk5ZtMtrEwS/47ZnC2Iu0LdAdmpTwt400W9oj4OBRgIdWyg2OJy3W/X+/xS\r\nBwhX+e6PI8rlXgD+VnsYzxuCj+JukAWSlPs=\r\n=/T1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/density":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"15.0.0-canary.36a4cba99.0","@material/touch-target":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.36a4cba99.0_1680025842237_0.7281239643810165","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/radio","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"841f040d266f57096aac8be290172e3836518f64","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ed7e82ded.0.tgz","fileCount":41,"integrity":"sha512-clLmHDpMNZT5RQR8S58gtDgWrGSedAw6uidgF7lP686jIg71wPKQ6DB6bHDAIXdDVFtNVTUOhOYAGWC8bsdaNA==","signatures":[{"sig":"MEUCIQDvhPij0TxdL1L/WPTcskdgouu/RMJ7rDesYXvWhvuwMAIgBSWEKVmBK+T7+cSCrxZP+8hCGe9OtypOxzSA7CZ6OOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0+GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC4w//RSLNS8Gp2FVZIg9f2vr/AwoP6TgVNPPXcNHJkobTWwOjc69R\r\nLhJ6UcdW7sk7jvRiNel22t6U/GDRvwjED0mKe252S/FhJnNZZ79++Fcl12OC\r\ndxFBHF560wjHQ9e99iqFzed2CDdaTdxRXVTLhORYXynSmH/NYOUSLGhnSli5\r\nU58hSUS41gv6VkkaaR/ib+Gpr5QFjC/7eZPgXQCcgTyd2StZnnCFv6+vCV5j\r\nYD2+SIpzoR668hp+FeVHlNBfbZOCSvBZOPQpHC5wCkpYONWScwtdv+A49B4N\r\nZLzCA0zpRHTjvkoYDlZv6CNkWuU2PKRiO+PkrzJzNRfF1adsEGb6mTsrVJKH\r\n6a9ejt4Wpes1VqvRgBA53VwoA/EpPDaK+Ks/j3X16rXCvxKPn2yXDQkKnHcv\r\nplbmfNyj4F6gEjmhXDV94w/dwEit6jV2CV+ZzYsMlDYTXAhpU/2C7y2CwsT7\r\nnRz+uR3nPuXKq3CAGp6qDR+5Ibu48ib7eVBnbYSqr+s37V1XnS5f8p2rCJ3H\r\n3DeLy0f364Q76/2kDkdWilvfSG/Au9DcJrlYA/Gz820wd9dQqwyeZgPCS+zU\r\nC51JGcUpXsjEqFmq/8IiGSoN8E0cYnq6zdO67xx+7H77pU5CNAWn8nj8udl2\r\nHaF+XE0dJS/yErC+v00iVS7g6/X9hiRwdyE=\r\n=XGeK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/density":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ed7e82ded.0_1680035718120_0.03721094166494865","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/radio","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d82998fbe9d95e7ff396442ad71989f79d5f73","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.55093ee1e.0.tgz","fileCount":41,"integrity":"sha512-gCOo0oIIArFIhd1Pg2b2idbonkPweIdx/pQ7zu4GlQv6hRlddrTrCLndBbzBE4g3ttbDPKJBKhWlBwJVg538jQ==","signatures":[{"sig":"MEYCIQCh6Uvdzx1e6ltDpYAre654JUvbAt3kJN0+ZUJ+q80kRgIhAKroOuoyyV1vSaAuXFiHAQc8/QTO/cEJ2Iq/eRdGcqlP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIg/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBkA//V8tBMR3WWs52ShQumklBaNS+0E9rKod+2dkNT5rYMMbCJUIc\r\nbPYxok3Q3YFU8VAzXQraQ/9oZkNdfhazR//xtyzXDuWYFuK0AXaKIuvb/K/w\r\ni01o6C9zyFBYVKfxAqgw1SayOvHU+9jP56HyZ6DFal6YMXT3ND6v0qzWYkLx\r\nzcXEcvlRHzCJdNt01UWRjhWT87Y0taEwwbhGbvyj3PbrGz99z24PSm1hySxV\r\n5yLQr55NDFia3S56MUbr7D/PD9fAnrpAUvCcezqQenLr34e1UDL8DVvIjed8\r\nSdGT6TnSSXxBJH2ArEXE5DCHVFYackvPK6V3n48ch6fWcmszQp+TPLvr+M3M\r\nCkA9yJnqxzqV10H1YtF2ZI1yxzwFzO7BNoVRataKZW0tHbjz5ryz0+HeFF/Q\r\nzGFta4Yj01UP4Er1QblmN0ejtWX3jbZCghT0W4R9q2zLZ1LrvO+v497T9zd4\r\nCXLBGmART1BL3mZVpKhTPtZhYsiT2KGqrAKLFe4Ku2qd3VXsi8N4Ke3yLcqc\r\ncowqQwsnmcauTfhQYXWdjeHoJ9/XYEabws65bZiRQ2hri68FbDjHglmO9bLF\r\n6wdX+PsWQ2ePuLv7nSvsIwOEKNeA4bMPbFUl5LNIz+U/8WV/GaznFRjHS3iy\r\nF5OBRlg9eqLXexcv0ra3tQYZ39+F4gRjwC4=\r\n=wp2u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/density":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"15.0.0-canary.55093ee1e.0","@material/touch-target":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.55093ee1e.0_1680115775257_0.13935215405020407","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/radio","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"376fffbde8c0c1ae77a7ee702d4deac5c9116254","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0c53abc81.0.tgz","fileCount":41,"integrity":"sha512-9DKYcJPx9Q3y7eoZLmlvTzRVSsOszBsKVOojfjkfOdHitzv51Zue38e/stCFZTMj7zDjDI0gT+clwV6nscB7Zw==","signatures":[{"sig":"MEUCICKb0o9bRD2q0ufXEJmc/eIkQ/IujtA9djDV545DiWGTAiEA68CnYOY98TFvzHYCKEHPxu5JiFSEmQMOQ61m28Kgfa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3TWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9KhAAiJ/WXC8acfS3AKW+wqwxxsrlwLrvjz5caTMY9mjFniu/XWKM\r\nu/ZTfTlKY3xmLZnpGTKSxTo3eSntJX58CT5ifZcURowyix/P4Rf+/7yDvA/u\r\nF3NCImDHEpvmsDVmt2+0UfQ1gubSm/eoEgDYgc3bNGCM7tndl1WBbkUq2EVr\r\nDI3eof4E+Zz+F5qwxzOLT4Bdq2EYL27KLyU9WSdEx2TOG2Vw/uO8uO4pVEvK\r\nXl2hHl8Ap+DbjfBz7YieFfvm4jE3sPOv5chTqCe4ZO5s0IUWGf04gH/hq2gt\r\nfSObsW+Q9nP4eRMdvCBisg+rEhlxhT9oJjzIFNGi9Vw7SMZ9zH4gplZnWGWR\r\nXXY6rDZRAgigteNlBoIpeI2B1DyvY4PzgtAEaDMWkhKY3ZEkuDM42hKDzkW4\r\nRIrfV+L+EBem9yBWIQE/GZljD8kI+P8vvae4A0ye0MBSAWRIG5Td8QxsAckf\r\nTvfrFg5dkImNkowddPxI7x0IAJbzywv7MgVDffRPbjqoXn0npkHck1jrxwLq\r\nJ3wOBpoqFp83geHqH/fFxKjqLDB4bfbg01MVWRS/uRTToDgzYPaO8I4TNSIj\r\nvzMfvlmzDGukp4iyPY4ntLLws/Fz6JrqHEqIiD6lkBIH7AkaTgEnCrjvA3H0\r\nKLJtj48Tgd5+HXCVzWLRznxFu61McaXPIZM=\r\n=/TCL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/density":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"15.0.0-canary.0c53abc81.0","@material/touch-target":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0c53abc81.0_1680831702114_0.9963836866197624","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/radio","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399b195f2fca713d1355786188c6f6d89dbdb5c3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.51311e69e.0.tgz","fileCount":41,"integrity":"sha512-LGxs+iDathv58V4yrf5zh6Lhcddc09IHP1+C6vDmMC64pyOELApmfQBLfQ4SoAbUEUiSxd/saGd1q11iEzFGRw==","signatures":[{"sig":"MEYCIQCaTDA1LEAvZxdYmJE3CKd6WNGE9FIGnQHOavirc0Hg1wIhAPQ0ixd0UpimsHFdI4dgmuQwYovTkqZbeZ19FXpiuLTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3DQ//Xe6TWoqaCTvyyom/xFUGeyWbvpY51lKw9F6XUXo/g2UMb7gY\r\nolwdiRDojDCqmvznv05UgZXnineAtUZX2jjt35otDui2ZqvMpY2jsZ0cbaTm\r\nf9Mxa2aZZZmRtmjVD93OcExW94rVTx/MCXqqkmm6wJp0L0SsFKAPbvNLziu0\r\nEXYLVsbKoLKJO6xLKR//btJG6vLiehzv63zkhtdzhRSWeNZlFgoeGnIpkfsH\r\nK+LtLBxIYwPkt8gU4Bo/yM5Q0yjj8WzvCcML5uSQK3m2zDubJ15X7VOaBWRx\r\nwTEOK4lRKcbMdEagatkHCv8aSxh5SBwZZpiEr2Sh/I46Yv+DD3uoPg0AQgxg\r\nhIndbHNH7Jm4RJqrdoAaNDlcuMNeJIqYT4Ok/Qk1KBvEa7liFKHiYOwdq3HL\r\n440W0c2VWzGxuvGrcV+PntVaYB62vZZyt7wHVoyzPeWXoPa5bji9NV/+uPr2\r\nM9W6mhhmdop/oYNEpsXUqfiKF5V/bGD4kpfkXfDCOWZ6IER0UVHTAs7/Plzn\r\n8G+4wsu0mFoo9PRSw2ba7fj+SmvuCh91bjzSC4iNAJPvHi7ZkxJktS6FC5/N\r\nZJ+w2v7JiagiIjygwzjF7cbOWGjylqVeWpITZmlhaLcYmb8Twas2HChZidyv\r\nPGfjUz7JVw5+WfX/7lT+tYl3cqWnv4FC0R0=\r\n=YHqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/density":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"15.0.0-canary.51311e69e.0","@material/touch-target":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.51311e69e.0_1680890906657_0.11221874701270784","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/radio","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7181deb4dd77c7031d8bbb8230e4656e99901555","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.113b1a38e.0.tgz","fileCount":41,"integrity":"sha512-KnXkb4lCwzZudl1xKfmdTBYKCZQ80IHp/wwd8KytvP01dZ7tisqv+LogbGYFQJXQPzE5nf9Ms4AqGdZftyjfwA==","signatures":[{"sig":"MEUCIQCSO9kkeI7/JIIrJu4zdQTCD7hdH8yEZ4sXZO/ywBQ4JgIgK3g8BMMWn3hF7JUn8dmc9mkTY8Djh78pb1K6S7sTqyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2sQ/9EXtEQy/2kLXbmmu9MDnaHiGF/8LzQNrPZPOe7a7rKFiU+lHl\r\n/XszlvtjohumsKKerWC7kWVnmU5o7mcbU65C9SjF3nmNOyP7O5/E3EhaxLJK\r\nuibv4W0WgT4GC+uObLBIS63T+lchuEf3P4lTycjQ+iKevkaLb/0aCo5RFUoP\r\nPFtWtoESxB0nog7FUCFmEFDmqL10+H9eSIct21/ddXmTA/PbDrmLpnspkJfX\r\nfmkGnO2sJGLMOCSUXZ5Yokb7VXJ5WcriICBBHhWlFVzAqT/Dt6Nu9CRcI2e7\r\nzA//krNeIY+COP5J0ncOZoatR3GSUAZl+Ivw9KRF5UkIOhNhwxVn3uuvhJGZ\r\nCeLzrQHOskyaxQ9Xzd3Qou7uSN9I8LegC356d89PxEG9/wg2a3w2wu3joeAp\r\nqmmkpdjL8ri1RA9IoGYbeo6H/X6uCBrWzBkzVwC11W5vvpbnF8LUTCdvq0Gd\r\nyRPLuyOMl+cFbtSI0gxXb1knnIZkOk6pN7jYAJIgnVSsMnPk+adF73CwRQUG\r\njrWqKcABO5tFhVEsVy60tkjNMf7QqqdB/Utk/UuU2Va6c30HfQnft3LRDXtE\r\nV+A231zdObpbxqv1Os/M0FxjO2za8gDf2fVYOO/NmJxIZVMFPI/zlnPAL94S\r\nVq+1EigeFLoMDMBu1zi0Kz3ui6tcPGivxko=\r\n=5b20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/density":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"15.0.0-canary.113b1a38e.0","@material/touch-target":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.113b1a38e.0_1681163661444_0.4922050056802929","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/radio","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"147a34fc7187d214860e7449409862f6e4d0f0a4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ea2191426.0.tgz","fileCount":41,"integrity":"sha512-GZo7+22oO4Vz1NXzTp460LZ/6eHQe00U5QYOf9wECa+Ndt0Fq8rC3Kwl2thujRCAyB35pzjZWJblzlSpvBFyyw==","signatures":[{"sig":"MEUCIBbqyr0pvwjV2JTAi57JhkUbMrxyo4PDxNAnRm084d34AiEA5k5pfmX2kz0hgGet7D9PL8GMonOStZ0b2RCVqR7RCH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdduACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBCg/+Orti8bUijfM/C/TIsF33TumRustbbWe02nb8Dl0tqZ31Xz03\r\njP21op7yG78PdC0/xEyb7Hxxahhp+Jua/Ww++73gY2r38nk81Rlhxf5xnWWp\r\nFuvqmBYyibqTZdl0kvjcj1FtcPvZ5IAAG6b5bHcjyaeatQ0Yp6GheCK2g/DT\r\nUj/voIMKlD+GQ541T0ZcC5n72s9qcv4g019AC1OnfBnyUNrakH1RisKNQDru\r\nlIgVC2GU6nnVygxL5dcRbahzs9fXDbF9MHQ8RWmTDgeuc7rp5wAjGb6Ep6a/\r\n+INTmb6o4qANq8fE1hVWIVU5Yge6FfOcTGIY06oUugR0TKrGG4ZuBX/6Im7K\r\n7eYbfLh8AOqSwg76EebCvl1+1XPlx2Gp2P2H0XIAkLpf006s1Xa6eZxOxjBh\r\nUHF/THbhu+K2IQuHlOSsYNrokKTCcSSvanuUGMqhpk7UGNCAXy9LDzJfTbp8\r\nJw4lIsnklj59tsyPGaXuNtNen/mkgX/n1VXvUjdPlAonX3hzJoE98VM/n5QT\r\n+44qaJ56iEEEqUds2SDdP1ZTWNkK+03Q3857/cv9RpFphaDUygxU9rAiRl6b\r\nnD8iZcoETuVCW73DknrLVPqxQQeb039wN70f1M1d6A4unTkDltKFv24Ox+LE\r\nAYMcl1dWTMA0t+cu7G9dmXke+jtUgOPGCoM=\r\n=4MOc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/density":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"15.0.0-canary.ea2191426.0","@material/touch-target":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ea2191426.0_1681250157844_0.3731688666476125","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/radio","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc87be44babcac52d1575f200b02ee8f2d916d31","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5a5c38538.0.tgz","fileCount":41,"integrity":"sha512-1fzMk5L3S5p0Xl1MCuA3C5Ala5URO/WHmRQ2GaQAdEFEH62DrlupqVTqc7Kr6NjZvffDuBoJPQcwhqzCXjTNAQ==","signatures":[{"sig":"MEQCIGUbnxNiCNLZByXGGvRaneHpjySOu0Oz06eVZT0zTjHaAiBUmjwgQpmolJoPELMbMTvEalwwyyzvcqFCFFtlJt+Ygg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEwA//Uic6QI+/g60g1wD2gj8x9xu2tWLL9pumRHINrj8GInMZyNQ6\r\nMzlzKZjihmvhNoFrX2KugV2uhEaOyq1rY43ZKBp85PofgymSCGdlsyiVCXX9\r\nJiEFmgA9y0yjER3ZTCMItj9/Tul9PDt933P8kbWGnUz8fnRe6Sfr5lKzL/kH\r\nL9CbQUcbGwXIGmjUR3OBWHVcnosgJ5ITDlhKNyWxm44kRs9FGkOlDKmB0kXQ\r\n2gqlB8o4AAiTBw020+e9Hozt6Pz/eu1yIjK56OZX1kdtBmKn2rDkTF5gTtlz\r\n1H7YkGW/QmpSYG4v1EA+VLMuiy6Q0uhZWiuW7KUBZ9tmuF9CdlnIax1YqiuS\r\noOa6AHZK3Jgftea58G2ICFRsSsV79tcBophChCZPanki/SXV1JWe0I1aXnOO\r\nooEscPUvQvLaK1RLVKtRmgxiiBxxi1z/cT5qKi9lPS+R6YR0H6jhGiKv2uGZ\r\noRAYYycpP0cUqjltdf/k9sMJY+DW42tIjD6IdM0RIBxzK6ragKb1NcvSG3xg\r\nqpgiZLLBEWtIzU2K782L/OTzM8PPkUl37hBVLH6QgzenNbb2TUbLv+1PxaT6\r\nBekGnuQoCmcC98jghJyYF/v9oeLc3iNl1I9w0geHfHMz/AFKinxPOq681W6t\r\nZayg5DKq93hRFv0l1tQGNXVYsJhp0vaLUuI=\r\n=4Zp7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/density":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"15.0.0-canary.5a5c38538.0","@material/touch-target":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5a5c38538.0_1681252253884_0.5651464775125001","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/radio","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c681af188b3056fc1947cc153b281869a577696e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":41,"integrity":"sha512-D4kXw0t2gEGKu/c9ybrY2bvQmgXAAyQ1vV1ozA8hYAG7+6ssx/9VHpQnbtBX3O4htCTDZuIDUHIvW7ZDmTmVeA==","signatures":[{"sig":"MEQCIBTOLTsT6EOsJXfSXueEam7DGGyNPjVDIZdR9eKf/8PvAiB+kbLpE/0/RLbXnPhiqOH1PMu3O3g/0tbRgD4ZBmH10Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeeYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9rg//SFk6jV42LjdJctmt3stgCW9VcK9/sLfwaZ9lE7qwTvHt8lEB\r\nlYdeeiSPhD8Bj8ZqFLiWRp0B9Ea077YlFloSDYikMNC0DNWPXEXyRrq0jN0X\r\nSL3y2mOJTgl0BVz3yxCyWg2fVXbrBIq/kS3j0bRaBiXvKiw16tuyYXEEldus\r\n7APswVp4Wpufa6yal9IEKbSKqtuCa85FKe210AMFOaJE31s5XT8ejw+iVCk7\r\nuFwMjjVfsmrDH83if9eaxK3p0YVQ43FxZ3SYSXVLQmM9JDbsJd9K6Sw97uSv\r\n97tVo1H7g3T/XdPQZNYLScvST4ci7SuVZ3tvarGYtUv1YTidaSv9YVTy0//z\r\nY+5E7qsTOwkn8/XjY5qJhE1vgwaOo0DX+F8rZ/az/Qgz/YzDnro30CDF5gVc\r\nr3RxYMc+qQ9t/HxUiirIjRg65ofaRdS402p8WU7KKZt1b3hGzk2B+8adA6/1\r\nyH84LBF73ErZfmvnIfNOToVIDoY48T6Mq2MjOniIvvbaHogRNaKAkpTy4d50\r\nVuZbOtelpksPx1IToyZmTEP0sySSbb/Vp3wWIRoMcskNG1LNKnVtrKa8J0Gy\r\nw6GTmMUqaNJen9F7EhcSx4ZWZPRAvv7c/T2yVoZ0H2brmV90WX6SDp8qoY8i\r\nCmumaimRX/KFaXGCrizbVRtMbnS3H44rVrA=\r\n=oNrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/density":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e4b5ea7eb.0_1681254296292_0.5148676337556484","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/radio","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac60d43e59850e7516ffcea2eaa7ad971d504013","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a094dd9c1.0.tgz","fileCount":41,"integrity":"sha512-Ngs1J8/jRLvbX0JgkVbBI3Y6TfqAMb5aQb2po7LYV6ZEOsJ+RQK9E4dGVwKLFeO+2QsrWheBNVO5K2OM+i34uA==","signatures":[{"sig":"MEQCIAv79VWZVgyK2AqF8uw6sP48HFgMy12FoyxAsfVtpot9AiAJXxa8E1l4KZMwb6vbdA1iow5IWa/NSiyJOs1SDoZvrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdb5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGOQ/8DYl29yq1iQIJtp1wTVCN9iblctpqvqlaG9BTyPNMGOWmNxDW\r\nPzZmhwoTis9oAFf/4vGi+WGmySGw00mGsYeSsLT1Zoeyo1qhQN7WgVoTfIVP\r\nBgpE5Dhw5rM3+eRPg7UaOEis/MQC34MpA0EyaskqCwFEhjYi2brCKqgWuPdc\r\nuTwkc5Bxjc3wSev6SzSK0NUXEyFxlEb81D5qiojC4y64ORnqXO+PsN5r+YTU\r\nsjIr3mlfJDT591cL8qC/23J44Zav6t7YNfgB2ntQ2kdqd6DAa1/jYIAQOjPZ\r\nB9uEBuz49y6s+WHxAFDMlgHYQKVa3hOUkF+EG9qFhd1ocN+qdmr9PwF4X5zQ\r\nVYgmazJpoFYI5cIHSThNRyF9Dc1Mrj4oQGvkPzo7NpdWux33ZFNh0n2s/c4r\r\n3o/r8f1KINFgue8i2WmT0IXC5TNMQkfL+/G3iwZ6T7uoYiiFtw9P5RfqjWZT\r\ntO7xke6AgulQ3Qhvah3ZTw2vippAjfMVCrZKhMNrJceMnwRTtnb7b3DAWOa4\r\nKv9SSwqWVcE/vbV0FBCiMfnLd7DtApXed9RcKHAhQt/IjjY1Vb1YkNtA7Jos\r\n0WPmPHnYbplyH0XURGaIOAK8cFhh4nMDaMBlhBU5vjmSYF3+zL+aiyPjvhLR\r\npgtwMyNIE+QXQiphYtrl8+g+2P3aig9QZBs=\r\n=yXvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/density":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a094dd9c1.0_1681512184848_0.9237119081133998","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/radio","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83e072e3b37113fbdb8a777141a42d2838568764","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f771b091c.0.tgz","fileCount":41,"integrity":"sha512-WYhdmOAB6B404DjHfqiXsiFqhzcd+OlybsxfcbliMabKxzbgYj/vURq/iqLUTHm/pvpc6Ee70kHgOCv7+zyQFg==","signatures":[{"sig":"MEUCIQCGWGWKDZkm5nfhfd3gfSGpjAmQDiMDmIdlPG0AFKnNxwIgPQx1VxcMXXQq3Pxu/s7PXG4FLoBEAv/BLxJwS0J/gkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWgKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAnQ//cOtGmi+F0b6DoGdOnegzVJZofS+/YVRFTAwSPWjrYjto583F\r\nyyI4YeRFSMEu3TmdK7jSN8jwp1doFALO/ND3wL8Z2o0+lKPGVXGQNLZ184sx\r\nIQG8qpE/Gw92SC/jYCI1dJSIFBsl1HmWDsNiLjdbBKhycCEwIfH8NNq2cN6n\r\nSvk9TZ22eNZ/MfNnFAn6N6OXl+GJGS3gScvEIgIMgKcgC022gP/vzRZXR+rZ\r\nAZi/VspUOy0Pl7iOVOUR2mAnljUNxRCcui0rfHPv8HY8iB2eBlvp/VZVY81G\r\nDqtuPdcKm8/Wpp/AxEyRi/mYhmLznkY7rKLBqfYbu7Exgnt5XKreSUD1tzA0\r\n19ybwxr4N62zzZWZ2u0knbnzgZKhkqwZf0OuGqv/Xv6baDW+OlIRt8vZ0/y9\r\nFa4kSSn6nzUh3trQ5Knt9SmgwPLXAl2KoPYXcwA0uqPx+rtjSoaESpjk2lkt\r\nhZGs0J8dUUEpjjsYlHqpmVCV2r8LG+1UBC/HCzNBjAUVxjhQrd55mYYWfx3e\r\nWYTxTy9Q3BNau7pDm1UQqT9TaVTX1T7Zetrm8ArVxODeqsvlFElVLduuJh6v\r\nRlbLSQzLXDFxPUjKdTey+Wo5TjEKi/yUY+YafhIVZ8IDLDWWipTWCQm2K4zR\r\nOUaUVYdQ01Wu8CFMy8wam37bstKRU7KyTSU=\r\n=VLI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/density":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"15.0.0-canary.f771b091c.0","@material/touch-target":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f771b091c.0_1681745929936_0.5063466821898863","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/radio","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f385663667127a1e33803dc3531e6562ec45bdd","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.79b1b612b.0.tgz","fileCount":41,"integrity":"sha512-aHkQ5gApXh65f63Aa1bfMJsag+4PYVEzW7oEaoyw01KKEtHvv9PDG04HKYxZxFKxC0oMec53d2vEuwGd4mGaDw==","signatures":[{"sig":"MEUCIQDaOZifjTFpXSBWfBQdD8JZEDWO/GhD+wNNrTvFiKT/jQIgK1QQfiPc8QEbHMyCtcR5nS/V91nJbiDYUQKSgzAFNdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVNg/+MibtMdgEcuGt+V4fyPI493ne7+/v6Gct55T68UfHdv/iFRWG\r\nzuqr1RWaReUeOAj5FcJBIJjN0TcMPHCzBhvAYBg08KouO2ctL1OXvU/5b80n\r\nw/vka6hzI663CkOCkP3xNZOovMOGBbZx975G++ED9o4ULFc5FyF5Pga/8GfM\r\nG7C5rn+3gU5ycYvLFHQjV4tk5Dfsv7JmNK8ln6k/RgPqJ+bzB00nTAZzGOZ2\r\nrBF6ZnoLodMjvN6XljEQRhpMtBxkDrvHueWNCJ8bRRu701v1ZkMNVcM8bva2\r\nHmFrirhcXy5OaV5IhObBULYDXV2kN9YgemH9fC9SBopCF0PpRnB1Euxrufy5\r\nJdlgYCBKbKNrSxidbAYK8IUAwQUNQ4dugRsvB08IcQujWJ0YvRObhFZ7nJbK\r\nUiwmpZdwI2kxk/1rUfj8n+U8+6kEYmqlDEdl9yBQ43GJcRtcytAz81ewzdlI\r\nmr4ysM5phZH0hkOFUbG5d/iKABHNT3vFs2d0lf5PruG9hkDUIo8eIqmGai1F\r\nC2c/FOD3n95C2C3Fqpbn1/YluhE8y7QuCdHx0rUTCPYrfrjN+bixbQTmmWBz\r\nvM+On/cyERVVHWknb/kp16EMWe+CzleWWbc+0hMajdWz2QZ6f2YFb4MiEnh8\r\nXwLv14Cgyciz1+Xfes/KU7htkYs2PHkKg+I=\r\n=eEai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/density":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"15.0.0-canary.79b1b612b.0","@material/touch-target":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.79b1b612b.0_1681947629741_0.566127047578243","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/radio","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aafc662c41675ed6de7a42d7752b1f98876afe3","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6f50071e5.0.tgz","fileCount":41,"integrity":"sha512-zkBZqkqFRSev3sQy6pr7ORLsU5dTqTOuEWn7RMuDUf8+s9AJEkfrAhxTValYXVPZZbRLwy+ZgWF+5R89/8Jtpw==","signatures":[{"sig":"MEUCIHzvan7sHhmZ3VXId77jl5KE+xZ2l2IBmnWEMFBzVmmTAiEAyEOf+QDvobepdUiTFpbtP+lYqhKoeC83+tRC+0IR7ZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmDBAAkEFNggNHMWX6fvknuDWEQ+X6RDxwSxiJ3lbckkrqQG32Jdym\r\nagFnzBRQkhxrO74Sp/qk6G61QPEDc1ZmOJLvAIBySLW0jCl08qIlvR9sd9Dg\r\n5kvAO0/x/jT3QYcvVSJcMeOMyOQ+UMn0CjkzcM2uGwV2EWNWXEwR659PO+sH\r\nY1AH++yJqWYZJX9LixQswIE0ycUQ0d2/cb33rt7bGtXhPuBBqLl6YcXo2Wtm\r\nTsju9BefL8QxcF4hDINr2yWcCbqNBoe38ZCIH+zgQ34ZszJLfqmXQuFO+T1+\r\nb0qpfvMJgEU3b04bmpqdaLNP9M67+C2g1isKr2Pd9pr9F04Q8znw+QTxFm2D\r\nWNRbhmoY7/DdZWMexnmbz5uNRL1dWDZP7B+Jhpi0uld2bi908+WtH/MOGeKH\r\nvdx/Lf2UYcsF/yAM/NGMVwuZuxJHclOpwlSCc6ch4nGf4/QI2EloP3pvq2hy\r\nFl1H0dvUf6XZurVZPF4/VTWcNWJ2mlOE2xD3/I0iAEa5d2Qx0PBE3K+JmBL6\r\nJITvX/xjgYjdkF2J7DJr8zy2WzWv/dhU4d0iwTA6aacmAP3RShtFUfrleCBR\r\n3hUfrIHRP5dgoDg/poRcOuzEPrQsWgY3xOgQxWIy7x6z4CxoUpIQ2tBSL/Ss\r\n3Wt/4t1/64N8EKJamgLglS/hdAWq9+gi0zE=\r\n=Q4fg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/density":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"15.0.0-canary.6f50071e5.0","@material/touch-target":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6f50071e5.0_1682013676840_0.7436905803033085","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/radio","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72c7433091461557392e3053d6399ab46432ffcf","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ef754381c.0.tgz","fileCount":41,"integrity":"sha512-snQbwRiQnFUDN10M4c0kSzEhS7M2Stk73W1rOH550g6lsV6YqV+TV9XSxDFuWjE3KYgOoocqUDUWerr83wz7kw==","signatures":[{"sig":"MEUCIF7eXkH8ePhBIxRMhjRVprFX5fYzGWKfJPAW8miczafVAiEAxa4zSOU9R3JxYwZUl+8RBWX+RuWGnfaedUZd6snmqcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX2g/+NRbmyQJnNK2jjznKJGfHCDG3f5lN2M2CEqB3R2K0g+1jbEda\r\no2FEHKzRjp5hIVfhb2k343NdRostxe/9VZbWMEiKMKJOPpnmT52IHvcov7id\r\nCsxLohQiFw7ZS5bvHxY9Sjzbxpxj3HY64ZsL3QWvTWPiSIOZBz5e//5WnFdg\r\nv9jH6X0xJNYFfy6WwQNMHwuBXYwOvGTtLBasva6Q/wvFFUnrvjmp7onSCS6Z\r\nDZ0MNaIez3x9Vi308tdJLQEkIMaRz1oERSxsdD3qGqCggdNYNMEvXVJoNneE\r\nbRloGjdOEFV7zQrM0p710JGQxfbwRDFgYHffflBm9o3HnuoFxYYpxkVnkTio\r\nu3rDVhBHbbtdpOAJWzAmIoZmkT5KL5HI6rKkOOiEsXFlg6kJOFets+KPq51I\r\nT3WIc7S7Fa48ab63jDPtGy1jDZrDmamO4E+RdtUju5MvL+Jg2qzNGU/CtNIN\r\nYNmrX2UmY4eksgqAKELESeVHk/VzKLX72CxHGeBxiXhXw5K4w4YkXtB6wU1b\r\n99h8D3dDTttC7L/TOTvBnWrtrdUgYXUre8keiptEFBKywTlRDrE81XPo3JhQ\r\ngbiXwmKBMPZPMa07o3HM0VECWaFseLDln6l7sdoHe2FV/UI4FcVVQE/mcRgy\r\nLmJ2Da6VQ7a73ToYYztY9nAYFQhoIdx7fyM=\r\n=7h1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/density":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"15.0.0-canary.ef754381c.0","@material/touch-target":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ef754381c.0_1682369491853_0.30241967787863255","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/radio","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e79ca994355f74b61ca3953da7bd6be4a940ad09","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.69ebf61ea.0.tgz","fileCount":41,"integrity":"sha512-+qE5poKuVsLTaH+WK8AfD7JHXZpD1kz9brHjjyTyBAN4D5oJWg0+7vDlkB7oCHXh5cUhTJfx3P0nbPURkrV8OQ==","signatures":[{"sig":"MEYCIQDeHAT2Lex9xgOYg8gc0IL+Zzp/sYs6CxKk5ajeuMBMtQIhAMLmrsPDNmjmG+YCsEt3SYLsJIjQE1n5KvMg4VqxVsQB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq9BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBsBAAg140c8Oi50FMj7eMHtRzSCBuzHQHrafFYHGGPFRV/lY/UA2q\r\nUuJEuQuvOzx+vEni8hRFYPEOOXhQZy6F/PuBbN+4pqYQWH1MEAnnz1d+Dk9s\r\niLHVBmtypKz/1hcv0HZzO+sW8YSCbG859dGJOtDgTfj9Kyx9Af+Fbh7xiCG8\r\nE+IK9cM8BQfov9PyVH3fhDZt4YSX2JWATqG9TXqVfSQZcr5lJuNKzq9YDqQd\r\nFVo1r7RM6qk74/LVZpGkhjbo/CL6QZCgvsyeTIZyLM4yni2QSUnB9qFPdcUH\r\nah0y3Vpyeo/yo6vb8qV/PGF8VQ+8LCM8NxYwPgca+y00vFTAt80iFB1U5T/9\r\naefxGL/dzZcrSTayZReCTioFT/lYE/dkyEnQpA9/yjv4cZzjGlnZzzf23L21\r\n+DD6OeOrkMKPkZn9/QM0Us9mFeJ7qG20YJi97vovS9NauVPheUoF3thBIDIL\r\ncy3D2YfC/4VOhbSwP+w1TND+uAAmopg1krJvnA6ARdRaISULkm2QcfNuhttq\r\n/0VYk/M2mXEsgC2u5v9DosLkNfphFGAY2CUle1Q8TbpPZP20xZPosY7rsihf\r\nrK63+AdPaCq0+bh4K57Z12M0VaRJJnuUEcBzCpq2LngfGY7EZYwm75oX5AnI\r\nvAgfkYzmCV2GCtqGPwhnf7Bc2YS47ST9W5I=\r\n=usww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/density":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.69ebf61ea.0_1682616129270_0.37189198516663713","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/radio","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5727e5880832adb9e7d385e405f28b1442cec7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b90be86de.0.tgz","fileCount":41,"integrity":"sha512-AGWyNUvS4tWSUYnRLUt1wfFF6TKhtPT3PGvynRTbvESjkOivVOEZvUsacYm8ERqzrYc6Y1aNmeq4AdGLRZALXw==","signatures":[{"sig":"MEYCIQDTNQdBYJeD/+fq0ds1pc5FwTnlMakkiwiyM538E3DUdwIhAJJMRqSAaTCh5L4ydHxtSjN5dUZ+a737wL+u0BPsR7YA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGM0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLyA//SyNvbAfcmd/MlVPEJz6CVyUAmI1sh+Ptpl0WyMjIknHhhhjw\r\nI1ZBarGyNegaEyDyoMFuFZH8deLgb8+X+y0B0eunb9JM97xW3+66RixgAgEn\r\nmhArXY/uwiWEHHBlSVvc7Wmn0yUR2+YDNqDwr2O+ecYnY48q0MIKBg5qS3rP\r\nslbV3DWK1lEs+o3bNmOGGp9JkV3+6xeRMTd45bKteMeyST/PDvtsSG49E58T\r\nOn9APNYSwMI99pnZmWH7JeaHS/bTK4wMESPNWI84Un1Vw5sNsk7X4UohnOIv\r\nbI/2x9JnC2wloM0yZ901nT8KDQy3CiYxZEDtQvrSi5qcamrMThqfT09app23\r\n3RxH0LN7Bi7YCPygpuaQ8X8YwhXFGIbXiEfGkGKp6qDGqa0vAR31iSWI9W6c\r\ngQZt0KKOpX+V1d+oGWeUvi9Re157wFigl2HmVWH4Vwzml70oWrCiqKh8zZ3g\r\np8n4Eq54QNidqS4BCTXaUC2UH3L5oKj1sTVtFRFomcHgC4MVj8W6IYUUobOt\r\nWhplfLCQTOzX+or2Lcs7TDSYE9D/6tUgJuOT+2mIkPD9U1pe7XsMHudmZnA1\r\nbtmK6qiL3JNeNzF6pA3pXqFqI+JHlvKJC3DijEOegKMbIdNzUY6IZEWcyeAn\r\nmcvgYC6aBRHenvxchqksPYNRvzIZvKkZG08=\r\n=7PXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/density":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"15.0.0-canary.b90be86de.0","@material/touch-target":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b90be86de.0_1682727732494_0.596923609828711","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/radio","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379f177e7cc65d48f4d89a0fac5bc9f0057eafe9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.51f9c0c28.0.tgz","fileCount":41,"integrity":"sha512-8zYl1iQz4E8l+iI9m2rnf1pO7wZJZdvXjxjk6Wx608Rac5ntPFn8ky8eBVRa3AnCLFJlLMPRfGPwCO8TJQutKg==","signatures":[{"sig":"MEUCIAfgGo0n94eeHABDbKt1un018obKfS7MJ/+Bi152/gWqAiEA+m7otOfDf97x3wFM0Ak4ZorOFOBhLDoRwKlPEBNVXzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGV+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf3A/8D89DHItWhvTESDZx9wA7G34HUC98zO3FboaGZTqOuMEjTr+o\r\n0BYryQ5qm0Q7bMIuRql39A3mYBc8a+Ojgu5JHc+MMVQiDkQeC/e9fBCe7f/q\r\nmITeBbduzZaXXAoA19aUijorwy8aQ2AJNA5GS6mjY50UMoWAnkb6yHFTWswi\r\nqmosPejNW+SeFVcvHOiusQhwvtjj1+fE1n5N4YZXlSmNZPY6feAPjbx1Kur4\r\n1XOG7geA15pioMg25WrNwBavp3E6JNGVmRMhsFNxBoqRE0SriQoqEMQItX2l\r\nsBR3jdPSYcl5mPw80yEKOSYIlByUZnPkjiGchj85JixrXLFHzvBGLgezB622\r\n77IsQ7tt5K7zmL4TOs5tPfCtpb+8uvIUQc7qdWZgAmG0xFnO6pToM3gtxUTe\r\n3akPEIb8J1w/mmkrtLzWq9dyva4weCp3kJU21Gl6aQ/rGnumzcnEzVpqV5t7\r\naNwftTqrMlpMJoaxDvskAwF2yhQ7YFnnhEUjnenbF0xTo/6JSdAf2mLR5MXd\r\nXFCZXxHum3WoJULtKGo6Ti2dLXwL+6bn/uRQarLQAVnkxfbeAuX2JWrmlz89\r\n+8wJ7x/uo1+GQyT8+jX3AMfl0jQEIx8NtFIOznbzm6a0TVg9S6pjWeu+hQTw\r\nWahXEBmVZze+420pQTY23goQ1YOzxv5Ydrk=\r\n=y0GE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/density":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.51f9c0c28.0_1682728318362_0.9090101120729708","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/radio","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79235ab79085202d94dafd3c6252f505b5aba372","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4e840d685.0.tgz","fileCount":41,"integrity":"sha512-UD2wCw21Fm/y3MQq46QD+VyhNQPxzXMFBofElPVVCYtZ6xSkBvd2fQEAtRs0WehP0tsWxKGWP8LWaDG84sE09Q==","signatures":[{"sig":"MEUCIQCG7EskMxU6BeKlyfNC4EnwunoUUpmBbhCGq3kiQCGIpwIgDFo/FyougRqb9CQr0ez1uCSBHLDbxQ6ZT5yMqnLupqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/density":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"15.0.0-canary.4e840d685.0","@material/touch-target":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4e840d685.0_1683041654469_0.7377539727115754","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/radio","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c244a95d3bcf144621c2600f8861eabaabad077","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.10b8563e4.0.tgz","fileCount":41,"integrity":"sha512-vxlaEoJFLbhBJEF0WuXKnf5arVUbviHg6pwztXWhZ7VWF9AM1oD677X+3WWd4JdKQhf8oaKjTnBJsTzSxLxdRg==","signatures":[{"sig":"MEYCIQCAunkoraegijMaJevRDsvQMLcDErZixLla7HvbbCbvFQIhAKERSOjvrLZ3oR0i/gcif9H9x7RUARS7nwWTymhA4WzR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcMBAAiMrGwzmtJaz5XHKsW2C/dKxAyXszkBrWUhmNWaeTdjD2C/kA\r\nre5ed/bILAwyzQ8Z4pBTpDrMH0d/CxyWgCUTQ75LKudhsp4qNKc4d1Gx3eZW\r\nqq/FpMHRq4FGSDNTg/HjwwmsQYnHrAnCTWBipvwhVeG5cO2IzMzZSK/0uf/c\r\nFtpMwvJJlw6ZffQ8tZMkilDNMqs+A3Mp2uow9q0CbviNJi9HRDmDJ+sLZe+4\r\n4PRD8jOtdhCdXlsLs9ITODrfCc/WK250qheNuIR8XGsSvD4xMKpznEvmJSNz\r\nik0gwGLIVe2v+sQBhGdp8xTn4e+3dfIBQVtgbiFKB/xChCdHUcUkEZ0ln+qd\r\n12srBdiZonJzJWVWF4lZe2r7nn1/JgDCF+v4zjYPkvOoflpggXIdu1B7ETcd\r\nN0YSmRJzU5qWL2Ce9wuifZZGsPImXzwfrPUW9G3C/DQAl5DboxW6oY6Uay2i\r\nMIj8ZeSNyPooGmay/E2qBkirvIFiYKvTqYBB7SAFPF93kIRb5JqBRfvnE+Iq\r\nZfS1eGGqfLyyGsRMzG4KmsDultKm8erB9c3RJguVL3cn6FjqDbtf4esdKieM\r\nqMG8fYQlVjgsaM6F4cNB/H/G6/u2esNAonCFSDtX2NZxwSKu4D03xzhEBj3D\r\nJLGjkEH8JMYb0gC6B0CQjp7IVHUPGtSTI7s=\r\n=6dTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/density":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"15.0.0-canary.10b8563e4.0","@material/touch-target":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.10b8563e4.0_1683070943312_0.8001028839845747","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/radio","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a591c7f7cea12d8fc0bbca945d352d9355fa74","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.736b7fda4.0.tgz","fileCount":41,"integrity":"sha512-xHiUmNuAaQ52GYAj25gNs7kcuutQXo1CxS9XEHJW0l15Ojub1N0eIS8I2gScLt8uxWS+54bTU5FVbnMKSzCgxA==","signatures":[{"sig":"MEUCIQCDFV2NwzeeaIIllZNr3H64kbOG1jyWYi71cl3zQ9xxzwIgH2tsIl5lHiPH4VNFk8kBI5VzrWm9ZXvtsJ+9+j3iG+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnlIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru6A/+KsvS2DvFubVm61i6g3I2MwdMrNMed8VNPl0X2LCTwmVSY5t9\r\nXIrlizYMscdINRBzEWy750HqLOqxbvc+N85rNYHHHzJ0plCAC9kPPxS0RRQ4\r\nXISG7gYf1stvuxm3Uu1CqkUWWahg6qYgIAO1EVOi49Uy+iOsCZ1iLMkr0O6r\r\nOgMY7A2oBNQtEUYrfW+FiMVxAVbq55o126VBkzBisLeOt+p25ASKvqMdeiik\r\np8jeTBWp+rcXrYXsNQ8h8uxBhg/3pKZNUrTobwIC29lISnxWIGr83resFDyj\r\noH/Tiw6LtlpZ2V3j9DIc2rR2mVJisHB/79SDIzy2EFFhMunq/cJKeSkPHHPa\r\nz84Z4i6kQ4TzPUWXuo8UV6BwaMUCa/7yUX6FicBSk2Jfmg8bfMXrKyNRnddO\r\nAOtz4EYcCnoXqEkVXc/yYwHRzZJzzgR4i4UQZ2R1saeQQzF8LD0jCkMT2XvH\r\nVJFEMJmSF71nqoCT1W/AZN79tdFul58d6ziq5Yf8LSv6vxP9GnjQ9TZcnw5R\r\nh2lUgmB7ul0Lf5CWVFGg3bUGEWUD415yV+jnUsgoGrGq2/rARlRaNKc22G38\r\n5VYIk6cYSvcroJdYcGHMomGXqXOmNfdt+lD48TstgKbVDkqAYNfLT6yX5G6w\r\nss0th+S34pGpITJDbNzVJFEZwAeL2aFq1oU=\r\n=Fh+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/density":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"15.0.0-canary.736b7fda4.0","@material/touch-target":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.736b7fda4.0_1683126600108_0.0074320854170681905","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/radio","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b62c4b19aeda2c852318a4d5060c0e723f7bdc34","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0e533c5a1.0.tgz","fileCount":41,"integrity":"sha512-Gl6CrlSZqZ+hxc8BhEkktNwIM/SBSGrCWjqGcEZGrSsqCzL2wXkvgOJ5Df9l+ejyftT3Q6r1NJxglTSkoikc4g==","signatures":[{"sig":"MEUCIQCzBuGBF8MFDSFZH5vUyC/9NjRo/tfcZZp6ckDnRRK8lAIgZFEgekkaWHYaqvlfhE6ZkUOtGCnrHOG12UlDPmGyau0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/density":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0e533c5a1.0_1683305820648_0.7897804107561128","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/radio","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbcf9ef967c46161956f84e62ad8cd6761599244","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5f01c15a2.0.tgz","fileCount":41,"integrity":"sha512-9qRR500diKkFg8Hq4hYUUqgn4JI3kt4Rw+SHxPnIENNULEW5K70Ymcxi9rozfiq/76AlbkzcMauL4IHLiU6ZHQ==","signatures":[{"sig":"MEUCIQCtGskRsZU9b7RIu2VDXKKFxF5wJA9RrMgvzmGxmv5rzgIgM6V+FeaFwVZwRic6gFCJ/cFxJ983Zurpbj11so5phC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/density":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5f01c15a2.0_1683307611228_0.9797508689725556","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/radio","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a8707edb6f8bbe957f8984b64044bef2f2bf21","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3b5b55e31.0.tgz","fileCount":41,"integrity":"sha512-JUvJHfAMjTdcsWF5XFnRlvRKTfWmANfU86QouOH9rxY9NYqP9AROR9X/y/A6cE4TMhOdskt4+/ewl9wriSHUUw==","signatures":[{"sig":"MEYCIQDrdf+vsQJpMjv7ZxNiDGy+RWFzspMou68Al+9bK+XZ7gIhAOWfX0FwBqF3PlkNNJRGhW+yE4NNOYSYfIIDnaD3oM3D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/density":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3b5b55e31.0_1683311989790_0.5066949297252621","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/radio","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29307bda78201593ad21de256cab5821cfc9ec02","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d0788120f.0.tgz","fileCount":41,"integrity":"sha512-+Dp/zbYQhIL/AtrCpOwlifmAqa741waSgsxyqTfdSbCJEv6S4fCBMuEl0ZhXmf4PxakMrvOfuRYKLLFr6gwGXA==","signatures":[{"sig":"MEYCIQCEdqfr56m8rit+HjbcMeX06UO1CSy/zB5+IUFQPboXQQIhAPYtH+4FiOIHyqmT5EowcjAGuopxwjMApeDZcemQquxK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/density":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"15.0.0-canary.d0788120f.0","@material/touch-target":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d0788120f.0_1683620625664_0.7653824145383887","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/radio","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18b52554bd8e459393a3b91d643f82867bfbaa04","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f52358dd0.0.tgz","fileCount":41,"integrity":"sha512-jpPM+W52rK7pf1CoZvRRUvqvWRgYKXNuWjHI0j9bFyMxPhZHTwCWPuFc1jpmWRw0ScuvTsUsCwXdCmDKJsKeEg==","signatures":[{"sig":"MEYCIQDneZzzHUad2KzpTDLARK3XWhmI53V44ZHGFFMEB/tB/gIhAPVQa0aPEDVxLafaFxIACdIGiWyQuxIPsKE2D4TvlTrm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/density":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"15.0.0-canary.f52358dd0.0","@material/touch-target":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f52358dd0.0_1683901863856_0.31143473337369154","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/radio","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98a6db5c50d6bc9936ee4dda092c15f830fbbba5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":41,"integrity":"sha512-xMidV0n1YrMsUBcvkCFqz992z7eM0N7roA/oIbk/kRmbna4SrzRseXXo2I8BTeycSAyjVG1qyWy/Y8iFdpsy5g==","signatures":[{"sig":"MEQCIAUk4LxLpNaZOrjkOYcCE/216tbb/75JKeVajgwLsConAiB5NChOqwtkvvruTKJYACk2bJ2Zv+ZJ/PO573EHBhI0oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3c3fbaa3.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/density":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/focus-ring":"15.0.0-canary.d3c3fbaa3.0","@material/touch-target":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d3c3fbaa3.0_1683914495238_0.04485392306690095","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/radio","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b189a07218b60e513dd4f1cab7ca5138230f68ab","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.576d3d2c8.0.tgz","fileCount":41,"integrity":"sha512-/BpEL6YWKM+7c4dWqOcSM8wbfz1K3g3r+q+r1ReBKlvUh+Uhz++PW6qjMxPTPNt7a+yzH9/LkXMRZan9/+pjxw==","signatures":[{"sig":"MEYCIQDnX8pRlOMVz2IzeBuuRZFGSuUt5iGXgxstxVs1WsnsYgIhAO+NQsC7hJBmFbpaNeinF8+cNSza7nByzn3rhSXuKYR3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/density":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.576d3d2c8.0_1684202435320_0.16396351497209816","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/radio","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87118128868319a91b8788e8713b4b431e99eeb4","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.19bb36a46.0.tgz","fileCount":41,"integrity":"sha512-ocFN8d1csqi70nx9AeJmacISVptZK2Y+XNGVbDg83yib03kgDa9ewnAkLleOAvoNdMSUcSSZHLCr/+q2FqgnEQ==","signatures":[{"sig":"MEQCIFEVPK3AwuDf+GA7oBMV1El8Krg2fBDnM9GZKy7UBge0AiBHrB5o5ZY1cRFDCAWcj8SqUMUUmZ4xGu2+xiiox3eK7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/density":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"15.0.0-canary.19bb36a46.0","@material/touch-target":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.19bb36a46.0_1684266875458_0.3710539098359773","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/radio","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"889cb89449c234602083946c8c1d42f397fa8703","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":41,"integrity":"sha512-dx/g2+iKaJtxuUZKRXvr9pXezJ+buTnnUjveIAn422S7GDzKsk/q/WEFODZMunGP+R4dcZXD7CzzO6SJQLlHgg==","signatures":[{"sig":"MEQCIBphqSpzvMLtPcJsCB76wU3qe2VZCpgggy9ikoaJUrKYAiBBsgSEbqmPvfYfnWpqVXt7h88bPOOI378yufAGWJUq/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/density":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.aa5ac7fe5.0_1684776382715_0.11888797757142222","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/radio","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6df684cb4e78ef3bfe8c7628b2694f31217cadc9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.90291f2e2.0.tgz","fileCount":41,"integrity":"sha512-Ypl4BZ9w1NdbiiEUV3Xw2pb97prMPGEE+5Lm719sVsaFmI4yCKgtsWNEbCbKixborh2ZDZWGCzgMyUQHf3a8xA==","signatures":[{"sig":"MEUCIAyizHWE+j78lFvxBLWeywCeJXkS2iDyEApJte210gNPAiEA7HXwPLIYLsGrw7Yrl8B6u4X7VPMfxLbC+1l96BdUGCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/density":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"15.0.0-canary.90291f2e2.0","@material/touch-target":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.90291f2e2.0_1684863796512_0.28855873274808097","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/radio","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf00ae1ae7d1261b43f7fa75141f7066fad3641","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.446734f27.0.tgz","fileCount":41,"integrity":"sha512-IqQ5/1prm+lCtPF8wbKRnM31NOQrJ4fd6VOnakydfTmKtK6h3pGVzZkKKAF9x4EFPp82cgozNRitItcZGI8P1w==","signatures":[{"sig":"MEUCIFCRrABOPJsJYueFUULyh/wI99+Mohv4tyiI49P/uFdaAiEA01sghAU6k0RlijybmsQqoxTwNbW5eqbhSLuGgLBFusE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/density":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/focus-ring":"15.0.0-canary.446734f27.0","@material/touch-target":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.446734f27.0_1685483329176_0.7057534794742122","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/radio","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a78294be8a86a2ae2d695531375a32568c38fa8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.19de312d8.0.tgz","fileCount":41,"integrity":"sha512-6+gmKx4bWkwU3GJ22AprUcyEcUno0XxSCn2U1wQUBO2uruLSIbFnxXwmzXpeQvlVqdZ+HAsUW7FKz4rxLBsyNA==","signatures":[{"sig":"MEUCIDoiIK0x47hTSrD9AEF0z9dWnffBStDLnSMScbBeuY2LAiEAxDHhckjF2L9I6bCDncI/HCsPEFxlz+O6ZsAuJ1vshyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/density":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"15.0.0-canary.19de312d8.0","@material/touch-target":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.19de312d8.0_1686071940709_0.9260314993689942","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/radio","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f75bce8f253d9df93dea10a7c6bf87d5bdc78b9b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6081d829b.0.tgz","fileCount":41,"integrity":"sha512-dJ3MBDkuIWeyiouJX2FjX/Qux4FsTbRsCgp5kTo5tbi9x6CADOHvcOqKj/8ri1iN2G3pGzGfL/2nB/x+w5Lfsg==","signatures":[{"sig":"MEUCIQC8+BFM1WNrDbGtd4HUN/2Y1nfZ2fzIHFEne1+iHtSZcQIgWOpRMN6h1LdIu1PC0CkY4UfErmo5gkO7MOlmpdWuQpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/density":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"15.0.0-canary.6081d829b.0","@material/touch-target":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6081d829b.0_1686100475766_0.3019053037449986","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/radio","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b40c0d30dcc2b065b57bc68c2d21dfe49cb5edda","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b26c34a68.0.tgz","fileCount":41,"integrity":"sha512-2QP0jPZl9E+E2icc9+9CTp0MG+nb/x/LrSQe4F9J3SkxNSDgTSta4uV0JAuuw+EvxkO34GEiTeeztEHnsF4VPg==","signatures":[{"sig":"MEUCIHe2OMsICjggnS5czzY8WXgMM7CBTobW/96wTV/EfFE7AiEAmOWbRpeYYGSfyxcHisUgBaNsaABoa+sjTwvrN+oR+OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/density":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"15.0.0-canary.b26c34a68.0","@material/touch-target":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b26c34a68.0_1686169135690_0.8153431021525379","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/radio","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e048e790da1a5405102dd63b3d52969616ec2d5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4fe911371.0.tgz","fileCount":41,"integrity":"sha512-yvBLMY7DNkIGXjAZL8Y73uuQseGGRPmo45cuJ6D8NXCwCtS68XkNBrPErMbwzsy95IPLE2vS8KGr9dR6XcLUtg==","signatures":[{"sig":"MEUCIQCi8a8VDVQIsHaJN3pYa4cyFhBFy06MRn5fSY+25yF/JwIgHXzkOUjNe8S5ua1Dmaa/YPWVYZW7i4fc0OqpvNReKPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/density":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"15.0.0-canary.4fe911371.0","@material/touch-target":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4fe911371.0_1686179198840_0.5861294443516636","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/radio","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ba4e2e61c217b736237f0980fcf43aa0cf9d54","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a9ff9866f.0.tgz","fileCount":41,"integrity":"sha512-n1rt/wMSThsH76jX7VCZJg5CRXqfzBcMkRbMqm6A2Z+/nLK5DQXx3SWgfmLvEBfi6j3ZyVcJeKA8XfHzucsWNw==","signatures":[{"sig":"MEQCIEm3HMMWDe92DTybQPUvdpv6Soo4bSMcUfEMt4KEgdy6AiA3QT/+znk4R/2EdFAeQBJlm+AGGcgFYxeoBUahjkWxPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/density":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a9ff9866f.0_1686656329648_0.49328935814219044","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/radio","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aca0f63b672ddfc8b5162fa27561e7b7a84beb2d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b994146f6.0.tgz","fileCount":41,"integrity":"sha512-U/RR2lVNWwEO2+kJtGz9XzvnOF0gAZn1krMY0z/eU9Wnl0OgPZbqQrxXMoVNv1pzKYSEwZQEGado/rv8qp7piA==","signatures":[{"sig":"MEUCIQCZfnRbQptflPzKFPxrn14/nAQBKPTAS5pBSkERbquZLgIgcJW3OH+0xNkWgt958ejvaeKuwiwyusz+mJ5wBg+Oheo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/density":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"15.0.0-canary.b994146f6.0","@material/touch-target":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b994146f6.0_1686776663961_0.8116237285378525","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/radio","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"235f129f1e9e3a69bc0bc3277f3ccb3462e011ba","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":41,"integrity":"sha512-5cgMELLaL92E1TekYhYQI6UqXt1CZc4c6skMfoqlbq7DszqAG+Kdy0bLrUcBs6UmjLWmoXyfJ8vPmfvw18yIGw==","signatures":[{"sig":"MEUCIC21BnYRuWY9gdjJQKRuaDUZP7+L1H0Ry/QmHN8w0bFmAiEAxQlkkVlIzvjRrDXorbAeQxYH+Krh9XWjTKMDUdppjKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/density":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1fb4b1a06.0_1687892273705_0.7807418986975747","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/radio","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bed8c9336a2784d0b319661af61064fd98ea5ba6","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c64a2776e.0.tgz","fileCount":41,"integrity":"sha512-RvMB6f5phoIv/AqulGzoPed4Z9B17z8BiW2Vf3DynMZoqlW3tubM6NvmcNuXPSmAmMVDf5s7t3eWm9f6nl/+/Q==","signatures":[{"sig":"MEQCIHLKYGNXX3bpvRiuczRAtX0gFxzsHsvHAGWALxEDrH8tAiAY3rSYOQN/sGoqhuVLSg6xBOAlsDwYF7f308Ml/FPXAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/density":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"15.0.0-canary.c64a2776e.0","@material/touch-target":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c64a2776e.0_1687897042461_0.3867417420339152","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/radio","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3820a3422b2d507511e5e227172f52fcb2573484","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":41,"integrity":"sha512-x6mdP25vhp6I3vXBejgR3w9OoBt14rP3kRqi/uLOi8460aUI0+DGEzqtrKCyNNxNgwyNXWak6eiYkUYbptprfA==","signatures":[{"sig":"MEQCIHaN3gF8YnzAXo9gzUwi2eSl12vi0oZHlnVzXSpr8Q37AiBYQuN8V/NSURpLF0TKqxsrjNYm9SIjauk609phN3wJmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/density":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.b05d9eb7c.0_1688055860034_0.7992247136484225","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/radio","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669504bffb0239fa112b209968d0c074bc9ca56b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2a9697dc5.0.tgz","fileCount":41,"integrity":"sha512-eUQVmVG9OM2ERZ0n/m5S16XpouQFvZAA0Q5FVc4VOvWOj412L0MHTdxW7JZQ8MQgXRIaAJk1L/nw0L6yc7I3iQ==","signatures":[{"sig":"MEYCIQDVu3dWjCVmkt7TaV85/JidaFHadzK3rT+5QequiUR9TAIhANsJQ7Mr6RLxsFAXvF3obsLPQAHKH1dMrMfLXG6ixSw8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/density":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2a9697dc5.0_1688163269210_0.20349988340130376","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/radio","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b9fcf219f25a57fb0f209f9efa09bb1b9f33752","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0c52adeab.0.tgz","fileCount":41,"integrity":"sha512-/hQM1Q6q0CYbmPfXSM+yHrbSKa639bAeMuyDrhf/RJfuLST786T4G3hkHEG7suvjBmDgtH1iPXJa5jB1aunnJg==","signatures":[{"sig":"MEUCIQD7KbrZn3zb9PmllHBfW5JCh2Z1n03CcJ60a0rCHBOypwIgGl8GgwZmdn9WhDzH3RFHRRUP356ZiTS3Jn9mF1ffbxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/density":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"15.0.0-canary.0c52adeab.0","@material/touch-target":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0c52adeab.0_1688574387055_0.33329876625833776","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/radio","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83e16ce83a175514eb4de55cd204611f330f8f5a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.83355c322.0.tgz","fileCount":41,"integrity":"sha512-QQ4c1bcj4dZuoNJU4WHdmb7m7dwe09keYe+kuYAFW2SxmSLISbv1VmrAnKyv040pvJlivH1ydcB2sv45VImUAQ==","signatures":[{"sig":"MEUCIQC3uMEqpocoXjGCmGSCpdWt3tG9LY4ANgijudDLpzL7gAIgR7qv/fortZAtIBE+kgaXiFZgNO5n8LwwOomCS1BrihU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/density":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/focus-ring":"15.0.0-canary.83355c322.0","@material/touch-target":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.83355c322.0_1689001581085_0.06331203862415791","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/radio","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a1724eb4d394faf7a485f116c8353d3685c0ee","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":41,"integrity":"sha512-ehzOK+U1IxQN+OQjgD2lsnf1t7t7RAwQzeO6Czkiuid29ookYbQynWuLWk7NW8H8ohl7lnmfqTP1xSNkkL/F0g==","signatures":[{"sig":"MEQCIGrDZvXrMGpm9PW6Q73dj6a7Xsn9Hc2URFRD4IQToXcfAiA6efZVeVc8eip+VeQ+hqiTVCL9sfITKSIQehDEpvgMpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/density":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.bc9ae6c9c.0_1691097728732_0.973813822576157","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/radio","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ad1a80eaca14efaaeed38631d7db381a6a66248","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.3c44cd956.0.tgz","fileCount":41,"integrity":"sha512-RuGvfA0ZIVaazOim/qM9K9RYfWIpA3tvPoYrzjAVs5yLcK4rBndnrbQlh7pE6dHxavrTDJZdZ64Wp5QWwv0wbw==","signatures":[{"sig":"MEUCIQDoFWLypC2CrlY5n2opvz6/s9HUI99rr/5lLQaKnVyotgIgeLyoaoVp2ZnIHQ8gK8oYdkDtuNF+x/zP5D0zVy4SbJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/density":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"15.0.0-canary.3c44cd956.0","@material/touch-target":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.3c44cd956.0_1691430512116_0.6707115991304708","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/radio","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b3c5171eb6ea5d90b736e927f61463c6f51efa7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.02702296e.0.tgz","fileCount":41,"integrity":"sha512-Z6RNcrIZLodOujlhCB0MBKaDKYZMUhXGYV7tEPplGdNghL2xROPW+DjVJb9ukUuMFbBJnq6Tz971CukE3Rkh8g==","signatures":[{"sig":"MEYCIQDs3GI+ZXJPcWju7WMRl3bKg6s+eN5GqpumjFtANxGf8wIhANVIRYFT9z1fv8LjK+ZonD5OoYoRY8Jjxt6uUe/77xkZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/density":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/focus-ring":"15.0.0-canary.02702296e.0","@material/touch-target":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.02702296e.0_1692965134472_0.29610319734819046","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/radio","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2724f6790ca28f9ffa8b31858fc1e76934af2a7","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.872b65832.0.tgz","fileCount":41,"integrity":"sha512-Sz/hgGtafWFnRv7nmFZb1WK4nGT6lYpRx6VJ3d7FHpblDiwBSphnz4Lbz4I+uqXxFPyacszFSeUlmBR1EO22hg==","signatures":[{"sig":"MEQCIEOOVTElKQiALsHY9FNUW1DQbbflenGlXwylSNSiDJgrAiAqQoTeEwgMm7pP6LUDpZ/EYZ3gS3hBFswG/EiGbV6deQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/density":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/focus-ring":"15.0.0-canary.872b65832.0","@material/touch-target":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.872b65832.0_1693397642947_0.9972982497942711","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/radio","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3893f21ad8dc2b27224a7253ad71ff4090dbeebe","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.89b2e4122.0.tgz","fileCount":41,"integrity":"sha512-g8Ql/2jAY+WPNCo13vqRUz+3aBKqWxXhG8qBXBhZf38bsVQxNx6Nv+gvLc/2q3A7UdEgQByViMVa7SpBqScpDQ==","signatures":[{"sig":"MEUCIQDTUr4IpMp0nOyvry0NJdAGCicn2GyK02Akrl4Zyc4CMQIgQRkNWmrasIalOU6xbnfJhMhLSfy7IubGfP2p5OF4PJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906286},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/density":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"15.0.0-canary.89b2e4122.0","@material/touch-target":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.89b2e4122.0_1693498047821_0.21605716382234563","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/radio","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ed4ce38a4e779a7af2f7f418dbf7c3be463ef58","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7a3942e7a.0.tgz","fileCount":41,"integrity":"sha512-kCjP9LtzgDrTgijUdTs0oqYV9wjK4gb6us3f5sFTGWAWaOraQHCut3r2/TAsdFKGG8zBhjB+/9Y2Iw5TXvoeBg==","signatures":[{"sig":"MEUCIQDZa/gcKZFdGnUePoUrjClLlfGZ0XiKbSVXnkhqR9SGqgIgG/mS8RigJUF931YzGSk9E5AZk128Lt6a4U7y1UVEvzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906310},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/density":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7a3942e7a.0_1693507222248_0.5476250367730608","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/radio","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee323a4ba4104b45047d8e26106d156691b0f918","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.54feb3020.0.tgz","fileCount":41,"integrity":"sha512-Qm+C/2eccBnGQOvE9NpeNViJbFpOWxL3o5kYJ3GwJy3Hx4by868qRshADhDK2qf2GBPzGfEZlRYtepiava3Mig==","signatures":[{"sig":"MEUCIHsh0L5jmt0IdM3tTwnEw/O3Ii0O/gh0aMbifEEHE1EkAiEA5Pf2o2sykLY9HIiFQbYNfAbO6uaGNi6frURUJ/B7PT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912218},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/density":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"15.0.0-canary.54feb3020.0","@material/touch-target":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.54feb3020.0_1694466343104_0.6958047801256539","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/radio","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3f0045a690f1879c6efa863164c776c32f18053","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":41,"integrity":"sha512-fbHq7/dfR1WSmOkzZ18PFgc4M4kc0QEYyKDYRtiq4oOZpbEjz3cZpApXgaMzleZLNYb/ja4hbOlkO4M1SKz4Ag==","signatures":[{"sig":"MEUCIC0z6674WYZ2S0cGL7HF+jz5wdchUyYYFUgN7R+A6A8GAiEA+df2HkCItKGVMx21QvjiKyAuTMVkc39hyXdpKFv7MX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906310},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/density":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.6cda3ce8d.0_1694483155314_0.06415593325860658","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/radio","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f70edf317579a6cf27af3f203b4a0e72c5bb9b26","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.205b20b36.0.tgz","fileCount":41,"integrity":"sha512-lP6IcOHjw8t1+9FYyXNQBez34F33FgxFippQnb4SOFCJx4JxMV/Lm2i7j2Bh/iJuM+oeGAZ6d5BItzJYF6/MYA==","signatures":[{"sig":"MEUCIQC5wTBzegIr82LPHVLzkCSc8ze1CUB7ZG4sSTADCE4AZAIgF1sNWfYgkind2CEA1q4ZXCpYwpz72PscMBPzXQz92NI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909091},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/density":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"15.0.0-canary.205b20b36.0","@material/touch-target":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.205b20b36.0_1694625461878_0.8639155892969452","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/radio","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f21f937332602fe709a10559b71d3bdb04bfaf62","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.22bf82024.0.tgz","fileCount":41,"integrity":"sha512-94P6esjBY7IbJWerZWCOT/e2jX3/ZncQUr/PSrpFQ78KUwRfqbbvft4X+OKTYOdRoTJieSFHZI08OaaeOVeYeQ==","signatures":[{"sig":"MEUCIAg0q5HTWY/jzkAHKGe1RtHKpkpaPvaZvhhwe8jDio6hAiEA6w8mNxkA6pOAeNJY+vtjT3eVXsJtGqIUI8UF3Xw+VMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909091},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/density":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"15.0.0-canary.22bf82024.0","@material/touch-target":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.22bf82024.0_1695028352141_0.5692145849111732","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/radio","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fe24387017bf312b0092eec65ccc2c531b10ca5","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a246a4439.0.tgz","fileCount":41,"integrity":"sha512-on8EVztWXc/ajcaowFZ31ClGADYxQrhj4ulMne0NxdHHWQ44ttf5aXOVqtv5mxeOzrRACOkQyTUXBG07yTWCEQ==","signatures":[{"sig":"MEUCIQCwq1Z83tLaS3vco535DtmFvOZk4T07H8IIgkHe381crwIgVR1hF35VhM3DjU0DSFaX9arHYtWS8autJbnyujuLYYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909371},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/density":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"15.0.0-canary.a246a4439.0","@material/touch-target":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a246a4439.0_1695059200299_0.014171212220098539","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/radio","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6aa437f106ea6716f30bbd01e4dec99aff372a8","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d153db62b.0.tgz","fileCount":41,"integrity":"sha512-4Rvlz/YSJ9NkVJFpFdDiCu2BsaAGdjr0iriiry7rI6Znrh7K3OVW1+kWyuYKpcQ+cr6/95XHbLj8JqQ88rFa0g==","signatures":[{"sig":"MEQCIAJStTbAWAx/DC9ElZYkgbiBDBopY76KRwbvVDQB6Qn1AiBX6Lq7vk9XgI2ruJE01xp21VFkU7lHmIGekEZfdruJ7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909371},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/density":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"15.0.0-canary.d153db62b.0","@material/touch-target":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d153db62b.0_1695150940037_0.110694988308905","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/radio","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7780b6a3a5b86cf9a1a51d2fd04925f04fb3ab2","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2528c1c3b.0.tgz","fileCount":41,"integrity":"sha512-FUrLozBf+SEcttetDfM3k8jhdRplXvQrESWzeP3de0wzSa9sHoHh9498FjLbeJGu2RNvqokB0/qIvg/fuKxPcQ==","signatures":[{"sig":"MEQCIE8eiYSgafZ5fyPZg9ECMRsCT1I/ZYPL+kcHrMNJl7V5AiAvaQZ5cT02em9LNyC9CEGNKQirYiZO1PZEPbIbyvPQ1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909371},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/density":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2528c1c3b.0_1695233226453_0.04713584283402539","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/radio","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d48c90997aa90c09cae47dbc6245c7116f07b8c","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.1728a6dcf.0.tgz","fileCount":41,"integrity":"sha512-cjWdUJTYN2WNzMlt/Qsmhq5ofOjT3yh+38e1YFXAWad+LIuW/9h2OQH7c995IoxY40Tn2y9Tp4ibVD0BC5aj1w==","signatures":[{"sig":"MEUCIBPkqlES7bJM1xvTotOCyohnS8+o/LnFRN+a4VKIAs4KAiEAi1vDJRnUvgcXoSH6HZZZwOwBOGD0QmigL/M4WpDt9vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910772},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/density":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.1728a6dcf.0_1695691425091_0.307815947712234","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/radio","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec04209d7bfc1a701cacf22b71dc5e777cda5b31","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.ebb636f3d.0.tgz","fileCount":41,"integrity":"sha512-rPeOd3FsrG4Ai1SaYUUcQ05cUn067XVt0WZZ6ou1zBX1oAd0AlqNXrQbcsCqZYgfCNL6RVdGsepZbUPfmZ0VIg==","signatures":[{"sig":"MEUCIQCYnADc0Wfos6XekN1Mu28mlMF/erNn8XrHWZPlt4Qt5wIgEQKv/IguNePtU5CeiQ8L1GinjxP9vFL2SZXGEHROSpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910772},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/density":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.ebb636f3d.0_1696016695480_0.6752072756520904","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/radio","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9cae68882d7ac20c2d3e4dd02079ca283de65c9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":41,"integrity":"sha512-u0PC8GrLksKitoT4it3nDzBdKJ7whbdUv7DG2nTtrFaAuG6Zf9lhGD2/kqvEAmuwCQEZJYpZZjx+Ok5+PXu5Ww==","signatures":[{"sig":"MEUCIQCfkklNeyZTVTN/hLr88pXlJVkgOFAlFEG8zqHwgxBW1QIgQdbTsmz6XSI13YvWTZq3dRGrI6ZYYCU/I/x1+SrDSU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910772},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/density":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c0d21ecc9.0_1696880240718_0.6682760235544878","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/radio","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"080cfafc24fe9fe9e73575a96c159cdbb78020fc","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.127a44b28.0.tgz","fileCount":41,"integrity":"sha512-V7syZspgmxZAqnEq1/L1VHJjWK9aOHY7bn2ST+RNp2bQ89ABRyXdI8e17V0kYVIPm9F5AlAe2WwGCKL3e7GHnQ==","signatures":[{"sig":"MEUCIQCl6oOESfmKxFPWrWIDzCD6nAfnIdedc2ClA1Z+n6jdeQIgS3t8PINaVFaLDJELrUQQOdD5HiQ1g4P6yR4QUQjzWPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/density":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"15.0.0-canary.127a44b28.0","@material/touch-target":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.127a44b28.0_1697140867294_0.18181432277032217","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/radio","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c23e69e082bbdfac4e8849e3f6ef642586740052","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.0ad128337.0.tgz","fileCount":41,"integrity":"sha512-eegbt77tIpieAoj/NpbQh6p5z6ruo+5L+mFrTMzu6lFPSy4V7dYEpGPPIUaz8Ebz8fPpE+6sOFilLD95jSIQ0A==","signatures":[{"sig":"MEUCIFF4u0rtzeZTR5Yl9kUBdCEyLpmSrWrxj2ahGjXsm9dEAiEAoH8yjZ4HyMFSl0g+cb7kw8j0eJP7xVfFDiNF/oFXqlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/density":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"15.0.0-canary.0ad128337.0","@material/touch-target":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.0ad128337.0_1697741558055_0.5485525920113228","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/radio","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2752ce4d15fa118b3aa5465f280d96101d5cd645","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.9cec94097.0.tgz","fileCount":41,"integrity":"sha512-r6tlTbYCbD2qFsF95kp9VMNUCtgu0JNS3KX/IJg6b2CLWAyQ/IBsfMiYbg/SrvkKGTvmlA2xoyVTP8yirhLESQ==","signatures":[{"sig":"MEUCID2Li/A1ii2a2U8t+9Ov9ZlsvaiuNpIRcIDhfQLsi3iBAiEApjfKbYk3kadrJuyOK6l2uf4jEB4D7J6qx5BLtsTmxnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/density":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"15.0.0-canary.9cec94097.0","@material/touch-target":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.9cec94097.0_1697756992658_0.8455727111019993","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/radio","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"447756bc6838542f26679c918eaaf8d1b223969f","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":41,"integrity":"sha512-Pc22sWN4eTL6OzkJQKGoxt0c6bKV3vP1SXk3KluCY40S7LmPZwer0Nr8LlJFxbrpK64XoYdWZtDcOM2ujPgtig==","signatures":[{"sig":"MEYCIQDpioL1+FDAmg1pTjePVJ7VHU46z0nDIuanxn5rN476xwIhAIB0AGc5wUvzO5oKffqByT2ljD4o/mDzHoZ3/Pc2wzvU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/density":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c51a0bbcc.0_1700081929865_0.567569770346019","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/radio","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a9b4c90a8168a033323b70292372858d1638a9d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.d76666ad4.0.tgz","fileCount":41,"integrity":"sha512-+iAM8VkmsX8uYge2DKCsws+pRQclmMevFfoXpZJhoIUg4xhmoAe5DdqBLppp83S5zNtcW7oXjkqonq2BBzdFvw==","signatures":[{"sig":"MEUCIFwJFn2J2RxQiHpiscqpSXAfOPoLrVUIRGs0JLfeT0mIAiEAwydkRMaYBvdfc3FjUGCyYRRofTUpYHywQAZWo1I4C9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/density":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"15.0.0-canary.d76666ad4.0","@material/touch-target":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.d76666ad4.0_1701123194522_0.8194203423346387","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/radio","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a03312cf933551a971672a32796f9271aec9c1","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.8656bf0e0.0.tgz","fileCount":41,"integrity":"sha512-K5FaP99gEOh9hNM0kFF0ui+El1bwfrVdovVnX1D1X4u4DozWYt1HIHEPPOTaF7KSs2gMNBP0o/JXo8Iqp9lg8g==","signatures":[{"sig":"MEUCIQDoOskMK/JcAPsnwrz5nPRkdFGiUPb9+nfY3uqjLjLgHAIgFz4KI0SpFIALNppWTvVmbYyjQ+nzro8wUvkKJEP352g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/density":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.8656bf0e0.0_1702415925697_0.49895869057818465","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/radio","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57834ac2d3441d1036041a94fe00b80c44d26b56","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7f224ddd4.0.tgz","fileCount":41,"integrity":"sha512-wR1X0Sr0KmQLu6+YOFKAI84G3L6psqd7Kys5kfb8WKBM36zxO5HQXC5nJm/Y0rdn22ixzsIz2GBo0MNU4V4k1A==","signatures":[{"sig":"MEUCIDA0gVWa3/gEKwLOQ3vaDT2fWWWBw0JmDQxvIrwc81X3AiEA4c8vwGDVHdvQL5CzLz5Rz1xrnsg5Uygs+AUGD55BkKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/density":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.7f224ddd4.0_1703743757782_0.9879152785575938","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/radio","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a2e23f2bb713406ca051cbf5ad4392f2894db68","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":41,"integrity":"sha512-6PCc2jWi6lvFjG8XMv+uzWy8CRz0sVMxfZ5TxjrhKSwhAq3rmgewOGug54AhcClogHqvxa1RfjmT5opyUlm6UA==","signatures":[{"sig":"MEUCIC4wvE9X4PIzdLuWvU3uBMiepZSsdiukMDWNnShgADBVAiEA++MQlRkgpe4jvCqmTj9Hw2M2trZDLG0AeQ44p/giNe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/density":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.a0b8a90c0.0_1707333576881_0.4078220308227831","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/radio","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669335b12a3c648e88a6ca08137fe67ccb143b4d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.e50b478eb.0.tgz","fileCount":41,"integrity":"sha512-doBZjH2MJqRLmBRU5x4jy4r+EnappAkAbftILY4y0s/y4iwMxdAmq848TB7u61u6km6cSD8F8n4z36Wh7hggAw==","signatures":[{"sig":"MEUCIF1bjHEp36slZe/ryGQ17t+K8sBELhkyXJIcLeMPXBBiAiEA8/kApCAWFTT3jMoE2XK+UCcEBDBsiR11pZJlVANCaxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/density":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"15.0.0-canary.e50b478eb.0","@material/touch-target":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.e50b478eb.0_1707415690908_0.5350930554736906","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/radio","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3ff46d2d5d7b14a38ef1468d98e18939834bf75","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.c43b3438b.0.tgz","fileCount":41,"integrity":"sha512-Btu+pjDJ6gBaJbYHd+qrH3kDETHcWD4TsU5f3/ZFvKOtMUheXTzFn8O8zHoUeJ8lj8TRPO6AVTiK0x47sfsU7w==","signatures":[{"sig":"MEUCIQCI+xSffNWRWcAuJb/sOm5vn2Z2lwsmo2HPMvVtvIClagIgUjXR17Br6KS5RzTM+fjToN/H2rpE3+dj4Y2FKUok3mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/density":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"15.0.0-canary.c43b3438b.0","@material/touch-target":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.c43b3438b.0_1708719463046_0.8572960673706551","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/radio","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05da9994f64551de26c3d159b729e3581b0a9b55","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.819498d8c.0.tgz","fileCount":41,"integrity":"sha512-7dh8YSXsBUXvbgDYfN4IDvZTQxMIbXMkk0DHCrvf4to6Fbmf0K5+37LVehNahvzVQd1RAAf2X9yMiSel+Oa4kg==","signatures":[{"sig":"MEUCIFTsvBjHVvGZ2j5OH86ZVKsucQ6mzQPQK/CFjHz19TY/AiEA+MeNL7oSO6ZAXxD8oKSNpp+w7eJJ13+9okq4AVwHZGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/density":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"15.0.0-canary.819498d8c.0","@material/touch-target":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.819498d8c.0_1710515709007_0.6882053847652294","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/radio","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c85c9be66fbb2ab87d38fd227b1bf6b758175d","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.453a6248a.0.tgz","fileCount":41,"integrity":"sha512-x3fe+yqRwG6auEdodhivkPABloG0/lVznzsMMOs5kGThZkccbrIsChnnc34twLImzA04LLqQhs83deictFakMg==","signatures":[{"sig":"MEQCICndYbYyqvrfugS6AC+fXkZPDIZQ05NHY7A7RHaf4gKAAiB54sog+UrHaZPkcis1ZdYEVhHD7SUckaPcGYHgeE5p+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/density":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"15.0.0-canary.453a6248a.0","@material/touch-target":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.453a6248a.0_1711386822760_0.1459281202020235","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/radio","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c21494067f8ddd2395253652e134a647c1d81f0","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.68edc03c6.0.tgz","fileCount":41,"integrity":"sha512-zBQ3M6DmkAItDZMElKNDoiPTKA9RQVnU4F/P4S8qJSBbWzw79/Dry07Nhgrb5daPwr4giZ1Z8OnIey1W85usxg==","signatures":[{"sig":"MEQCIAmjG7uu2X3vVHI/iRrS84B1hKBVcm2VeI5u/3dBNgnWAiBoEkIhjiqVbLszeykydAbWxrUmkq0yxfu4vpoh4e+nig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/density":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"15.0.0-canary.68edc03c6.0","@material/touch-target":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.68edc03c6.0_1712603179869_0.8395093945490286","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/radio","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c76c947e762b0895f73dd350bbb13288b767587b","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.5bebc0064.0.tgz","fileCount":41,"integrity":"sha512-qyXDlzpZlzxRmy2ro79nre3UstXh1XZFlcS8vdCDWryWXpR3lNb/Rr6YukCkBqG6L1NuAP8rdTPNTNoUG64XSw==","signatures":[{"sig":"MEYCIQDwCk40JKWfTdEfvwvjhLrhBzK+6cQv/D9+BnGy3IsZsgIhAObbiB1vkCKbyWkdNwpGz6jQeObPR03En147h/UiraBV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":913403},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/density":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"15.0.0-canary.5bebc0064.0","@material/touch-target":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.5bebc0064.0_1712871666851_0.5144263496563415","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/radio","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b455f1f6f25041ea8289b685857dc6856635a0e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.311f29a60.0.tgz","fileCount":41,"integrity":"sha512-KpTF2Q55IFNUrnolmAuSRcdyymGkSELVcn+xyfxEdPDqO3JxNbMYU/Wd9amOkogi9YW44hnUFfdzqCgfyWOpdQ==","signatures":[{"sig":"MEUCIBpFjKB4pbrRl0FG/uKRlgqIRyocIPoxHf9UY+5n1840AiEA+LQSAvD4AxtM6E8Ze858JGgk+T9kd7cl3I+Yaz37FUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915785},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/density":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"15.0.0-canary.311f29a60.0","@material/touch-target":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.311f29a60.0_1713895214923_0.09721186918901759","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/radio","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d97f903f84d9e68013324d7251c9d2a1f7f84a","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.65c10a622.0.tgz","fileCount":41,"integrity":"sha512-pIteClXis81fnAjMv9oAyzf+MAqcEuOZRKNCvDsUPFCvEA3Tgm8KluVEyLy0Y5DqfVOE7oHLqzm1mHDFBVzWgA==","signatures":[{"sig":"MEYCIQCSQtYPydPPgOMVykM2xzDem7kSLVlnKPh2tNjlV+zygQIhAPKYKxr2IFHlwqJWFIhlZZK0HhD3QFWv6vMu74z9lMej","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918348},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/density":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"15.0.0-canary.65c10a622.0","@material/touch-target":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.65c10a622.0_1714070942322_0.933399583949676","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/radio","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab8cde00a59bc8d88e2376f309c903d9eee76f68","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":41,"integrity":"sha512-wAZI/84Xu8mE+o0ouw5SxIAL7vpvFYltLZtCT8Jf0bnlJrsuUie3zx2wE1FnM/QrrM2sObzFB9do8xTrD6Ng/Q==","signatures":[{"sig":"MEYCIQDWs9x+6HKFGLUD+fXED8HIe3AYwRwiOpZa9W8OEjAgMAIhAIbJv+K25gtf/RZNZmfx6jEnI72C6x5NVF+zSn1A8AUh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918348},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/density":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.4b35cb7d0.0_1714651385543_0.5742512881235682","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/radio","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465aadbd568edaf52fd1f37a8a9b96c12e08678e","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.f80ac92b0.0.tgz","fileCount":41,"integrity":"sha512-S/mcG8Suulsu0lqXCJUU+DDelfeOYJ32MgcdQS0ZdXD62mfzwC7fwuVLWEw54clNlC6P1wfODM/1Eo6744IBgQ==","signatures":[{"sig":"MEQCIH+10uLjqgmdvfoT7mMvLamRVojnsBkJbte6KEtpRZCcAiAFMbtfzErR1Nf9WrkPnM+1zKH1nhk2AH/Zrwhb6lIWdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918348},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/density":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.f80ac92b0.0_1714651998946_0.8282133761956392","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/radio","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c896bfafed28f8e17d5a1d8fa06abb40fcc5b785","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.2f5b899bc.0.tgz","fileCount":41,"integrity":"sha512-94kuNokfF1WgC3jROdPPWbKpcPKP+1RF6OHiwaiPhKCklu606isX+WkcIxQMPJrFDsm5iCB6+2jWOB+MBsEIKA==","signatures":[{"sig":"MEYCIQDugt3PLUz0UznPcp1tFhPQIAHz71wshRcn/BsfuwfoFAIhAJFijwtIf6KsuLFIQ7PC4zRWsCGthRxR4k3ZWYchdkqH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918348},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/density":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.2f5b899bc.0_1716213365081_0.019484617575171503","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/radio","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","radio"],"license":"MIT","_id":"@material/radio@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77aca3dfefb55b054799004516c6291c4b2e2761","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.cfec83c74.0.tgz","fileCount":41,"integrity":"sha512-zsChq0vB6f0UiopAKChnIv5gsqmjTo7aSMF9VMijRHSVovLb4vFG+HMR61C1z4WXB7UuQ/nnMlAOFwfwchofew==","signatures":[{"sig":"MEUCIG5IsXnZuz7n4DpABVRIF+EwP5Fyyn8BJ+mZioG8C7WQAiEA5cu8LUoSZfOGgcKUGUkmFFLec71D0S7MmVkgJOpAL7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":918348},"main":"dist/mdc.radio.js","module":"index.js","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web radio component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/density":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"15.0.0-canary.cfec83c74.0","@material/touch-target":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/radio_15.0.0-canary.cfec83c74.0_1716231411242_0.2554703447416693","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/radio","description":"The Material Components for the web radio component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","radio"],"main":"dist/mdc.radio.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-radio"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/touch-target":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n
\n \n
\n \n \n
\n \n \n
\n \n
\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/radio@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-Tig9egSD9OLJG1Mn2nECWVdZ7QKsbr8aCDter2vTSzapmsAJZs+miBe8z/rgmTQTyDzEhWTjEs5RyEzkQWNpZA==","shasum":"cc6214d76783b77ac24c9e1997338b3814732ca9","tarball":"https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.423edc3dc.0.tgz","fileCount":41,"unpackedSize":918348,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjYULu09XqTWCKvVicqfaIxETtrCm9l5g3DeG5PHJvOAiAg6uERxVWOqp1KVlPLYn/TDgSYQ6yXtaT+yXqH8EqibA=="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/radio_15.0.0-canary.423edc3dc.0_1719425530800_0.7040165394106555"},"_hasShrinkwrap":false}},"time":{"created":"2016-07-21T00:03:30.152Z","modified":"2024-06-26T18:12:11.526Z","2.0.0-dev.20160721":"2016-07-21T00:03:30.152Z","2.0.0-dev.20160721a":"2016-07-21T00:56:09.438Z","2.0.0-dev-20160723":"2016-07-23T00:04:30.804Z","2.0.0-dev.20160810":"2016-08-10T10:39:30.098Z","2.0.0-dev.20160822":"2016-08-21T22:21:30.493Z","2.0.0-dev.20160822-1":"2016-08-22T00:38:27.771Z","2.0.0-dev.20160903":"2016-09-03T08:17:26.769Z","0.1.0":"2016-12-15T17:53:48.772Z","0.1.1":"2017-01-09T15:57:19.138Z","0.1.2":"2017-01-23T16:49:41.012Z","0.1.3":"2017-02-06T19:04:47.857Z","0.1.4":"2017-02-21T17:27:39.109Z","0.1.5":"2017-03-06T17:02:17.274Z","0.1.6":"2017-04-03T15:28:08.101Z","0.2.0":"2017-04-17T15:43:12.715Z","0.2.1":"2017-04-18T14:51:24.949Z","0.2.2":"2017-05-01T15:43:13.693Z","0.2.3":"2017-05-15T16:26:10.113Z","0.2.4":"2017-05-17T14:28:26.592Z","0.2.5":"2017-05-30T19:04:44.275Z","0.2.6":"2017-06-26T16:11:01.400Z","0.2.7":"2017-07-10T15:58:56.685Z","0.2.8":"2017-07-24T15:49:24.255Z","0.2.9":"2017-08-07T20:48:31.124Z","0.2.10":"2017-08-21T17:27:58.098Z","0.2.11":"2017-08-24T14:46:53.061Z","0.2.12":"2017-08-25T17:21:00.138Z","0.2.13":"2017-09-05T20:16:14.446Z","0.2.14":"2017-09-18T18:35:50.399Z","0.2.15":"2017-10-02T21:11:53.543Z","0.23.0":"2017-10-16T21:02:24.623Z","0.24.0":"2017-10-30T19:11:31.799Z","0.25.0":"2017-11-13T20:02:30.585Z","0.26.0":"2017-11-27T22:26:27.957Z","0.27.0":"2017-12-11T19:35:37.806Z","0.28.0":"2018-01-08T18:55:14.910Z","0.29.0":"2018-01-22T18:30:59.835Z","0.30.0":"2018-02-05T22:02:58.843Z","0.31.0":"2018-02-20T18:23:02.575Z","0.32.0":"2018-03-05T22:08:47.162Z","0.33.0":"2018-03-19T16:40:05.831Z","0.34.0":"2018-04-02T21:52:01.715Z","0.34.1":"2018-04-03T23:39:48.002Z","0.35.0":"2018-04-23T22:40:33.261Z","0.36.0-0":"2018-05-29T15:24:22.702Z","0.36.0":"2018-06-04T15:38:42.001Z","0.37.0":"2018-07-02T22:14:40.970Z","0.37.1":"2018-07-16T21:20:45.771Z","0.38.0":"2018-07-30T17:07:50.145Z","0.38.1":"2018-08-13T20:39:30.736Z","0.39.0":"2018-08-27T17:41:13.113Z","0.39.1":"2018-08-31T21:36:58.162Z","0.39.2":"2018-09-11T16:55:34.015Z","0.39.3":"2018-09-11T17:19:29.735Z","0.40.0":"2018-09-24T20:02:17.443Z","0.40.1":"2018-10-08T21:14:43.211Z","0.41.0":"2018-10-29T20:22:33.817Z","0.42.0":"2018-12-04T22:55:15.273Z","0.43.0":"2019-01-07T19:49:39.124Z","0.44.0":"2019-02-04T18:24:39.379Z","0.44.1":"2019-02-19T23:03:18.032Z","1.0.0-0":"2019-02-27T23:59:44.481Z","1.0.0-1":"2019-03-04T23:33:37.338Z","1.0.0":"2019-03-06T21:08:28.723Z","1.0.1":"2019-03-11T22:07:34.321Z","1.1.0":"2019-03-26T19:26:08.671Z","2.0.0":"2019-04-29T17:40:13.246Z","2.1.1":"2019-05-10T17:25:24.637Z","2.3.0":"2019-05-28T21:24:00.676Z","3.0.0-alpha.0":"2019-06-12T04:07:03.240Z","3.0.0-alpha.1":"2019-06-12T19:02:23.186Z","3.0.0":"2019-06-25T22:27:58.786Z","3.1.0-alpha.0":"2019-07-16T13:29:20.616Z","3.1.0":"2019-07-22T22:02:43.067Z","4.0.0-alpha.0":"2019-08-07T21:09:43.770Z","4.0.0-canary.0":"2019-09-05T04:38:03.969Z","4.0.0-canary.1":"2019-09-09T20:20:58.250Z","3.2.0":"2019-09-12T21:53:32.468Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:45.970Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:35.264Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:21.993Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:06.663Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:26.614Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:50.387Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:47.594Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:57.658Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:04.666Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:38.612Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:10.927Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:31.718Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:27.978Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:17.978Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:16.320Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:00.089Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:37.320Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:52.642Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:11.597Z","4.0.0":"2019-11-02T18:11:56.065Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:05.110Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:09.006Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:06.012Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:40.032Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:40.171Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:47.317Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:11.062Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:10.102Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:15.548Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:35.281Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:15.511Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:00.831Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:51.063Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:12.219Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:04.408Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:27.484Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:35.742Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:12.448Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:57.911Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:35.576Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:23.453Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:50.150Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:28.277Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:09.977Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:33.586Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:20.817Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:12.493Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:45.666Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:43.506Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:45.578Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:27.610Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:27.434Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:39.023Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:43.940Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:03.583Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:27.087Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:42.122Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:38.121Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:52.979Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:36.645Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:27.379Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:27.540Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:53.292Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:34.620Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:35.832Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:18.179Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:14.148Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:16.157Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:34.390Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:07.444Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:06.052Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:44.502Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:34.625Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:45.955Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:59.159Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:56.277Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:28.102Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:47.933Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:00.590Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:15.972Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:07.549Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:52.780Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:59.078Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:42.815Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:32.374Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:05.235Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:33.646Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:45.372Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:19.123Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:36.395Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:23.562Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:19.969Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:58.181Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:44.893Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:19.394Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:48.137Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:05.790Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:47.462Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:45.344Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:35.664Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:47.843Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:26.787Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:18.369Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:42.486Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:45.341Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:43.783Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:47.495Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:20.512Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:35.761Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:16.838Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:55.072Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:10.661Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:48.054Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:48.639Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:21.781Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:15.129Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:42.621Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:48.991Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:31.584Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:50.050Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:53.734Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:25.364Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:26.090Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:30.611Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:10.026Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:46.525Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:47.185Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:09.860Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:37.610Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:13.029Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:18.161Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:03.707Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:24.928Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:44.942Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:47.309Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:26.540Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:04.260Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:02.059Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:09.591Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:26.227Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:52.630Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:03.183Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:41.376Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:33.932Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:01.422Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:30.294Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:20.713Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:49.535Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:27.293Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:39.736Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:45.575Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:46.564Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:21.197Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:06.960Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:06.751Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:05.246Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:29.315Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:43.792Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:36.087Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:35.403Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:26.131Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:38.561Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:00.980Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:42.021Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:13.372Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:04.812Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:04:07.450Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:39.433Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:12.402Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:36.081Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:48.675Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:48.834Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:10.428Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:36.200Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:57.483Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:49.364Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:32.280Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:34.168Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:58.001Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:07.181Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:34.520Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:02.435Z","5.0.0":"2020-02-14T00:09:16.736Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:32.209Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:48.183Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:36.421Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:12.498Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:58.491Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:46.578Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:08.627Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:48.673Z","5.1.0":"2020-02-25T21:38:08.306Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:44.673Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:00.875Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:32.024Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:08.472Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:05.337Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:48.436Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:11.541Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:04.949Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:20.932Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:43.855Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:05.025Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:26.662Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:12.416Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:27.166Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:29.625Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:20.564Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:33.385Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:08.881Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:14.744Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:14.490Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:18.089Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:00.821Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:49.947Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:57.806Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:35.174Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:17.183Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:19.678Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:34.390Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:23.987Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:29.694Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:01.891Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:33.294Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:40.797Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:27.285Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:02.133Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:34.415Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:58.973Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:09.518Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:47.083Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:31.242Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:48.005Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:35.438Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:02.642Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:26.980Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:57.481Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:36.165Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:06.786Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:50.495Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:05.089Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:07.048Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:32.762Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:32.652Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:27.241Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:52.839Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:50.371Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:20.187Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:36.657Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:10.481Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:04.283Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:14.874Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:05.800Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:39.733Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:07.245Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:32.285Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:05.612Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:25.837Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:04.443Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:38.876Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:09.304Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:22.968Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:12.956Z","6.0.0":"2020-04-23T17:26:42.356Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:50.903Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:19.085Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:13.922Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:00.799Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:05.077Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:24.489Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:08.636Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:37.073Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:12.434Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:44.792Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:00.085Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:51.756Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:52.089Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:57.769Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:44.853Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:58.397Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:43.998Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:11.978Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:40.857Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:08.981Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:15.824Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:32.779Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:40.036Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:01.724Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:16.161Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:50.215Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:37.015Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:35.464Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:59.117Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:30.604Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:43.975Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:16.673Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:15.226Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:40.163Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:22.981Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:12.415Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:18.036Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:27.836Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:56.084Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:35.084Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:45.478Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:14.651Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:08.797Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:54.578Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:29.999Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:16.467Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:44.350Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:40.231Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:58.691Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:58.153Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:19.775Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:11.242Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:07.638Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:19.708Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:32.398Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:48.196Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:49.310Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:12.616Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:56.606Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:14.845Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:11.537Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:09.614Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:18.940Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:07.345Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:44.305Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:08.349Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:03.788Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:29.910Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:29.499Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:40.896Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:42.656Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:12.944Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:48.649Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:01.673Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:25.970Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:01.744Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:55.618Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:06.271Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:21.519Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:59.528Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:25.302Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:29.144Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:27.082Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:16.715Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:05.022Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:42.839Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:33.310Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:19.618Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:04.845Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:52.759Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:12.671Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:44.766Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:36.785Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:24.639Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:47.292Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:15.724Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:48.554Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:08.162Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:26.012Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:12.620Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:37.119Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:35.140Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:27.500Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:05.243Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:57.526Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:09.147Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:18.648Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:32.198Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:36.218Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:31.981Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:28.206Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:47.260Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:27.312Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:07.758Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:48.396Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:20.592Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:15.789Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:18.796Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:51.539Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:10.781Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:40.322Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:00.838Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:27.472Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:40.188Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:55.497Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:48.461Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:32.159Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:45.537Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:01.170Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:04.330Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:33.723Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:22.655Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:07.414Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:48.679Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:48.970Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:41.112Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:18.013Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:20.549Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:30.060Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:22.448Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:06.849Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:43.867Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:05.934Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:07.725Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:35.997Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:58.157Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:56.847Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:53.647Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:27.315Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:03.137Z","7.0.0":"2020-06-23T19:10:45.453Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:39.889Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:02.877Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:52.184Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:41.495Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:31.577Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:11.929Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:41.680Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:42.992Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:27.569Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:48.027Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:40.272Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:11.674Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:32.277Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:20.647Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:30.460Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:47.255Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:35.223Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:24.621Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:58.542Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:12.037Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:14.146Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:00.117Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:22.462Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:12.468Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:53.409Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:10.689Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:23.777Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:11.726Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:16.487Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:51.014Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:35.193Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:21.452Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:38.936Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:16.346Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:15.122Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:12.365Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:28.445Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:00.777Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:03.237Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:14.012Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:17.279Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:24.544Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:02.544Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:36.308Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:07.757Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:05.636Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:15.821Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:48.788Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:26.392Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:52.448Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:34.093Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:50.071Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:18.732Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:41.676Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:38.620Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:43.448Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:59.239Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:41.357Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:45.173Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:54.516Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:09.592Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:38.060Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:30.572Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:10.563Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:02.229Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:15.746Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:23.317Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:29.464Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:11.918Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:08.673Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:23.961Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:09.979Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:15.006Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:18.282Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:13.000Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:01.706Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:27.898Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:17.318Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:38.695Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:02.629Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:42.753Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:51.694Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:23.511Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:17.552Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:17.869Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:23.844Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:41.683Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:11.098Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:35.312Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:13.482Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:50.035Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:52.823Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:28.456Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:26.438Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:37.406Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:31.351Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:04.952Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:59.840Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:36.155Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:53.159Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:28.943Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:23.042Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:15.652Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:16.618Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:53.439Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:00.329Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:40.143Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:29.420Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:42.736Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:52.800Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:45.868Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:24.058Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:25.767Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:27.411Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:36.301Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:39.556Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:45.030Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:44.717Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:13.081Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:13.052Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:17.929Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:14.803Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:40.295Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:42.889Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:26.348Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:56.587Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:44.311Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:27.648Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:03.637Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:15.345Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:32.644Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:32.994Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:22.059Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:19.477Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:53.850Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:49.972Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:54.925Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:56.826Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:02.407Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:58.687Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:40.001Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:11.420Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:55.149Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:20.317Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:12.884Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:47.771Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:26.965Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:39.126Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:55.588Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:49.265Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:23.551Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:51.833Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:53.323Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:26.642Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:25.715Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:04.112Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:04.240Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:20.031Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:20.268Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:52.058Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:05.220Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:24.070Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:50.821Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:27.042Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:16.639Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:17.655Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:46.750Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:50.311Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:58.295Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:25.625Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:57.023Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:49.149Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:37.151Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:04.205Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:37.982Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:59.041Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:09.949Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:14.562Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:17.501Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:21.095Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:27.300Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:15.242Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:38.637Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:09.643Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:12.384Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:41.699Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:56.103Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:28.867Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:58.130Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:52.314Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:35.542Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:23.656Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:12.413Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:41.963Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:22.086Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:32.947Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:04.008Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:08.947Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:52.356Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:14.415Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:56.321Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:37.743Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:23.687Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:58.988Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:09.673Z","8.0.0":"2020-11-02T22:59:36.307Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:29.312Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:53.933Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:15.640Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:00.043Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:09.939Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:01.344Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:26.630Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:32.686Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:09.818Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:39.308Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:40.027Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:06.925Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:55.606Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:22.752Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:15.152Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:42.488Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:11.258Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:45.516Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:57.950Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:06.521Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:29.626Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:15.920Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:19.554Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:14.723Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:43.433Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:25.039Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:51.471Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:44.651Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:58.159Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:58.325Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:29.148Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:28.002Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:39.736Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:45.556Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:05.648Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:46.886Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:41.109Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:33.600Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:28.746Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:46.095Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:36.974Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:20.076Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:35.669Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:49.282Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:02.948Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:08.387Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:02.539Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:38.867Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:34.848Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:21.343Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:23.533Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:22.071Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:33.838Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:23.028Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:54.089Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:43.940Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:28.109Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:37.781Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:05.668Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:18.951Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:20.689Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:55.300Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:30.329Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:32.789Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:54.356Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:04.187Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:42.006Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:31.752Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:03.574Z","9.0.0":"2020-12-29T19:45:58.258Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:13.215Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:44.867Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:31.611Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:19.301Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:46.284Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:17.009Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:35.791Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:18.831Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:02.687Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:34.296Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:06.542Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:29.077Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:15.577Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:54.563Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:31.744Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:42.882Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:12.455Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:25.610Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:21.242Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:59.872Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:02.823Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:23.281Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:09.351Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:25.808Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:42.545Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:08.212Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:53.150Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:43.184Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:28.733Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:35.852Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:11.542Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:03.763Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:20.414Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:25.677Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:36.043Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:51.602Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:49.313Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:06.070Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:33:06.335Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:43.329Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:53.375Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:00.759Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:50.780Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:08.099Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:02.886Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:07.121Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:39.087Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:18.139Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:27.689Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:14.576Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:04.484Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:05.106Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:22.504Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:49.203Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:59.926Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:55.683Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:37.488Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:30.052Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:35.796Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:07.888Z","10.0.0":"2021-02-05T16:18:37.927Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:49.726Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:28.413Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:40.683Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:32.669Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:56.790Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:05.381Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:36.526Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:08.699Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:27.071Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:05.137Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:33.983Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:44.901Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:40.409Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:10.010Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:55.732Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:46.418Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:57.404Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:40.040Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:55.647Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:08.769Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:30.589Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:05.976Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:01.219Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:30.467Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:00.244Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:17.021Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:21.684Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:40.846Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:59.160Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:20.614Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:28.056Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:30.347Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:29.645Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:55.419Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:27.466Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:35.498Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:35.248Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:59.947Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:56.691Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:23.321Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:17.478Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:37.944Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:22.615Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:56.349Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:04.299Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:49.938Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:10.960Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:39.201Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:31.744Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:57.339Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:01.081Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:56.588Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:44.802Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:18.228Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:10.765Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:35.895Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:52.772Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:18.416Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:02.494Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:01.299Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:40.373Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:49.898Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:24.203Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:01.355Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:31.267Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:06.658Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:26.476Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:48.798Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:24.686Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:54.547Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:38.828Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:53.242Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:31.087Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:42.845Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:23.062Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:56.233Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:09.296Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:02.754Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:21.456Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:05.328Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:48.206Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:05.883Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:03.245Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:39.736Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:32.212Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:45.465Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:21.440Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:07.705Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:26.549Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:39.498Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:39.537Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:19.916Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:19.480Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:28.323Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:51.453Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:12.869Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:09.341Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:52.387Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:11.814Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:55:42.039Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:01.175Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:31.626Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:27.891Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:20.523Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:27.829Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:00.518Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:02.183Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:28.250Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:01.837Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:35.197Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:59.014Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:27.233Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:12.085Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:35.606Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:34.910Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:29.731Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:56.254Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:18.980Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:05.029Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:56.021Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:20.461Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:17.011Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:17.394Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:11.944Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:46.726Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:51.421Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:14.950Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:52.266Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:12.974Z","11.0.0":"2021-04-15T22:58:01.814Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:39.744Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:33.836Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:03.934Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:36.432Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:15.516Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:09.855Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:34.592Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:12.610Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:28.448Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:11.369Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:55.144Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:52.853Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:11.123Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:26.130Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:36.300Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:21.965Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:03.858Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:28.591Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:50.754Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:29.690Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:50.330Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:39.751Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:19.690Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:30.603Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:03.361Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:50.316Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:39.481Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:28.643Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:54.539Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:32.240Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:05.790Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:16.504Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:19.902Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:35.050Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:01.928Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:44.078Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:01.167Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:49.082Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:23.372Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:13.125Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:32.501Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:14.257Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:38.402Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:22.219Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:54.169Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:10.283Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:32.771Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:39.991Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:06.749Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:00.798Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:04.197Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:43.724Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:21.229Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:50.949Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:25.404Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:11.517Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:30.159Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:50.297Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:50.373Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:21.228Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:05.268Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:35.408Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:43.987Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:45.595Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:29.933Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:14.405Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:08.929Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:25.453Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:40.263Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:15.818Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:29.567Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:47.112Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:07.218Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:32.644Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:28.918Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:41.227Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:58.960Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:07.566Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:39.941Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:05.257Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:24.873Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:35.599Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:15.012Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:14.750Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:42.617Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:25.401Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:14.963Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:54.457Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:07.501Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:11.409Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:59.596Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:46.591Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:09.132Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:00.983Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:39.257Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:49.803Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:54.309Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:54.410Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:38.980Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:37.540Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:28.313Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:00.212Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:56.301Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:50.082Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:11.130Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:28.508Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:38.939Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:54.683Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:03.957Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:16.038Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:01.483Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:16.467Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:31.444Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:16.004Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:44.220Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:52.427Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:24.975Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:13.472Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:43.388Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:20.820Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:42.431Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:27.624Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:20.675Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:03.160Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:51.317Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:06.126Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:26.886Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:16.081Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:17.919Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:06.030Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:11.559Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:09.062Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:02.740Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:47.199Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:18.405Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:14.225Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:56.527Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:58.321Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:47.236Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:11.697Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:15.040Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:47.873Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:57.813Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:07.961Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:14.341Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:53.625Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:37.153Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:42.742Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:19.852Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:24.717Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:48.537Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:43.080Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:17.926Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:26.032Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:21.915Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:07.039Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:40.123Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:46.026Z","12.0.0":"2021-07-27T19:49:42.717Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:19.625Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:02.552Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:57.299Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:10.878Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:27.222Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:08.692Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:17.088Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:13.968Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:59.438Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:41.062Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:14.182Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:09.463Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:01.186Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:49.318Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:46.877Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:33.225Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:12.564Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:20.128Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:38.759Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:41.127Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:40.348Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:42.136Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:27.184Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:25.964Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:25.065Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:03.435Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:47.540Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:22.709Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:20.077Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:30.737Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:07.987Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:32.982Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:34.049Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:12.363Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:47.690Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:31.174Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:11.330Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:50.338Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:31.597Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:10.706Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:49.896Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:34.428Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:05.563Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:16.940Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:44.393Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:28.944Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:59.772Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:49.747Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:57.002Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:17.785Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:24.150Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:22.382Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:58.670Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:48.306Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:50.782Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:15.513Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:54.578Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:31.300Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:32:58.687Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:45.537Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:05.146Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:23.138Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:04.397Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:22.237Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:10.168Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:13.691Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:14.435Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:43.136Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:36.217Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:32.563Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:10.246Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:09.910Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:08.655Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:54.836Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:11.900Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:20.878Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:49.316Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:29.184Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:04.485Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:11.230Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:26.632Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:24.490Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:58.912Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:25.596Z","13.0.0":"2021-09-24T19:46:23.041Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:07.142Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:31.166Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:45.382Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:33.351Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:24.786Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:48.514Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:02.882Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:26.370Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:38.135Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:11.121Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:21.291Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:16.001Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:52.204Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:21.977Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:04.010Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:33.244Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:25.502Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:38.671Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:20.265Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:17.228Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:01.021Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:03.375Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:57.774Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:18.225Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:21.775Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:49.522Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:43.044Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:21.574Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:07.167Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:56.493Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:02.340Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:43.476Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:03.181Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:56.940Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:17.625Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:02.483Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:03.270Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:08.405Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:27.431Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:47.844Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:02.983Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:11.290Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:24.079Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:12.336Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:01.811Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:54.938Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:35.845Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:45.992Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:28.956Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:14.170Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:43.357Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:01.273Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:06.785Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:06.294Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:49.534Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:28.881Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:12.414Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:01.536Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:32.658Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:23.314Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:11.437Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:09.846Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:45.147Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:57.952Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:54.098Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:12.412Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:39.378Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:37.692Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:00.207Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:34.746Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:30.931Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:10.491Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:20.556Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:17.892Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:47.046Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:00.083Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:45.856Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:34.006Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:46.704Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:47.412Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:01.856Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:20.175Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:58.194Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:13.348Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:12.762Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:39.853Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:12.022Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:27.851Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:52.253Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:52.008Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:39.279Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:42.260Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:23.370Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:09.244Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:32.366Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:12.526Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:32.307Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:53.142Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:33.507Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:50.994Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:49.594Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:00.188Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:19.659Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:20.597Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:55.986Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:30.644Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:00.188Z","14.0.0":"2022-04-28T16:56:35.176Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:40.127Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:17.156Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:08.505Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:39.188Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:58.807Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:31.729Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:58.253Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:05.764Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:53.428Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:31.129Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:08.135Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:38.784Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:20.782Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:25.094Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:28.479Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:26.786Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:45.318Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:45.753Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:12.079Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:23.375Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:00.575Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:10.259Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:40.446Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:01.029Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:35.771Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:04.840Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:42.021Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:38.986Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:16.410Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:03.456Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:19.020Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:57.265Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:41.896Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:43.364Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:33.641Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:35.379Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:53.994Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:45.050Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:58.051Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:48.644Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:43.771Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:42.693Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:47.940Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:20.598Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:29.901Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:21.652Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:25.747Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:45.050Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:43.450Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:50.690Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:12.865Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:15.037Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:08.381Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:19.626Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:25.760Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:18.530Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:31.270Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:14.228Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:31.359Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:53.314Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:17.187Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:12.755Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:35.951Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:51.170Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:20.387Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:15.228Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:30.775Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:29.701Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:34.604Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:46.702Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:25.504Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:17.739Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:02.981Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:36.729Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:03.121Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:16.751Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:38.688Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:51.899Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:06.511Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:19.954Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:43.407Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:50.713Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:31.906Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:11.346Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:25.769Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:14.735Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:39.928Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:16.287Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:32.622Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:36.924Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:50.234Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:10.233Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:18.802Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:21.940Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:10.925Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:46.700Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:23.049Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:24.012Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:43.307Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:41.015Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:57.572Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:11.012Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:52.998Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:10.420Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:49.272Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:28.629Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:52:06.299Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:31.274Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:53.558Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:09.550Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:38.655Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:59.631Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:53.376Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:56.281Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:19.209Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:55.803Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:42.609Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:42.917Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:26.840Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:16.073Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:20.133Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:42.254Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:41.696Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:35.539Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:10.625Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:51.291Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:01.617Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:50:04.570Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:59.209Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:25.679Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:17.917Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:27.736Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:45.144Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:39.748Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:36.875Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:32.302Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:37.419Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:07.829Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:56.827Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:28.948Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:07.322Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:33.189Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:06.785Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:49.496Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:24.612Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:40.537Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:24.322Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:37:04.698Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:25.760Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:49.055Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:07.580Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:35.778Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:00.372Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:43.125Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:45.264Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:26.754Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:53.993Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:08.699Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:18:09.748Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:35.959Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:00:06.232Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:52.256Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:22.158Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:30.674Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:43.194Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:32.145Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:32.249Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:19.409Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:43.956Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:54.698Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:25.026Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:43.016Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:48.201Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:31.231Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:23.622Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:03:03.397Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:39.676Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:21.402Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:35.795Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:17:02.154Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:40:02.809Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:24.210Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:30.847Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:22.121Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:00.035Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:16.275Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:16.721Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:20.018Z","15.0.0-canary.65c411674.0":"2022-11-29T17:39:12.885Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:53.885Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:08:13.589Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:54.757Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:07.481Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:53.746Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:12.573Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:42.031Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:33.621Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:18.023Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:23.314Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:03.734Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:34.426Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:41.309Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:42:01.145Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:45:07.992Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:32.683Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:42.345Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:56.965Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:48.767Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:36.182Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:27.793Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:36.762Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:47.269Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:16.756Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:17.947Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:50.689Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:31.017Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:49.120Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:56.620Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:52.753Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:38.392Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:25.620Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:57.438Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:40.421Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:42.667Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:23.969Z","15.0.0-canary.af490a848.0":"2023-01-03T15:58:16.735Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:31.265Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:53.429Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:59.298Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:27.853Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:46.918Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:27.988Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:35.314Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:10:05.410Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:11.459Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:48.615Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:40.977Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:41.628Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:54.233Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:18.159Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:17.752Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:09.432Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:56.173Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:57.740Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:29.578Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:25.900Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:37:02.924Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:21.110Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:50:18.473Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:54.313Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:29.592Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:20.068Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:38.816Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:16.611Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:47.467Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:54.784Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:16.589Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:07.607Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:54.632Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:39:02.151Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:36.783Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:11.943Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:23.102Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:16.464Z","15.0.0-canary.de38de758.0":"2023-02-09T15:43:08.275Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:45.752Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:30.515Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:27.860Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:49.780Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:16.722Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:42:07.985Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:29.640Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:16.329Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:07.730Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:30.685Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:34.422Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:01.484Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:24.250Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:18.079Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:54.228Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:38.213Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:55.710Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:21.526Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:32.650Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:39.652Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:48:02.689Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:38.910Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:36.761Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:51.147Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:30.549Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:50.162Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:11.829Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:33.589Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:53.495Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:32:05.806Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:42.338Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:44:04.212Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:18.004Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:17:03.080Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:57.759Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:29.420Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:48.151Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:37.801Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:24.838Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:28:02.469Z","15.0.0-canary.87809c710.0":"2023-03-14T18:44:02.045Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:22.669Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:24.345Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:14:00.747Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:52.884Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:56.669Z","15.0.0-canary.39e473690.0":"2023-03-21T17:52:08.645Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:59:04.126Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:42.601Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:35:18.477Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:35.422Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:42.411Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:26.904Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:21.732Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:58.137Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:54.139Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:56.510Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:43:05.039Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:50.139Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:29.910Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:17.045Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:32.130Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:09.492Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:12.788Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:58.617Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:14.709Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:23.571Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:10:00.304Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:57:00.865Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:51.485Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:50.036Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:45.955Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:31:04.125Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:35.424Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:35.573Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:35.728Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:22.903Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:43:16.787Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:49.422Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:19:00.906Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:36.043Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:55.999Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:39.081Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:49.936Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:24.349Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:53.967Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:22.760Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:20.399Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:29.471Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:27.427Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:21.419Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:22:09.002Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:48:32.303Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:34.759Z","15.0.0-canary.872b65832.0":"2023-08-30T12:14:03.225Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:27.987Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:22.600Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:43.436Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:55.755Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:42.125Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:32.451Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:40.603Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:40.339Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:07:06.783Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:45.488Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:55.881Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:20.997Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:01:07.601Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:38.370Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:52.986Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:50.043Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:14.759Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:45.947Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:18.011Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:37.074Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:11.149Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:43.272Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:09.243Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:43.025Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:20.067Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:07.073Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:15.170Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:02.611Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:05.855Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:19.127Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:56:05.249Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:51.403Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:11.125Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-radio"},"keywords":["material components","material design","radio"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}